250 lines
6.0 KiB
HTML
250 lines
6.0 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<script src="../resources/js-test-pre.js"></script>
|
|
<style>
|
|
.test {
|
|
content: "UNTOUCHED";
|
|
}
|
|
|
|
@supports (display: none) {
|
|
#t0 { content: "APPLIED" }
|
|
}
|
|
|
|
@supports (display: deadbeef) {
|
|
#t1 { content: "FAIL" }
|
|
}
|
|
|
|
/* Negation */
|
|
@supports not (display: deadbeef) {
|
|
#t2 { content: "APPLIED" }
|
|
}
|
|
|
|
@supports not (display: none) {
|
|
#t3 { content: "FAIL" }
|
|
}
|
|
|
|
@supports not (not (display: none)) {
|
|
#t4 { content: "APPLIED" }
|
|
}
|
|
|
|
@supports not (not (not (display: none))) {
|
|
#t5 { content: "FAIL" }
|
|
}
|
|
|
|
/* Conjunction */
|
|
@supports (display: none) and (display: block) {
|
|
#t6 { content: "APPLIED" }
|
|
}
|
|
|
|
@supports (display: none) and (display: block) and (display: inline) {
|
|
#t7 { content: "APPLIED" }
|
|
}
|
|
|
|
@supports (display: none) and (display: block) and (display: deadbeef) and (display: inline) {
|
|
#t8 { content: "FAIL" }
|
|
}
|
|
|
|
/* Disjunction */
|
|
@supports (display: none) or (display: inline) {
|
|
#t9 { content: "APPLIED" }
|
|
}
|
|
|
|
@supports (display: none) or (display: block) or (display: inline) {
|
|
#t10 { content: "APPLIED" }
|
|
}
|
|
|
|
@supports (display: none) or (display: deadbeef) or (display: inline) {
|
|
#t11 { content: "APPLIED" }
|
|
}
|
|
|
|
@supports (display: ohhai) or (display: deadbeef) or (display: rainbows) {
|
|
#t12 { content: "FAIL" }
|
|
}
|
|
|
|
/* Bad syntax. Can't mix operators without a layer of parentheses. */
|
|
@supports (display: none) and (display: block) or (display: inline) {
|
|
#t13 { content: "FAIL" }
|
|
}
|
|
|
|
@supports not (display: deadbeef) and (display: block) {
|
|
#t14 { content: "FAIL" }
|
|
}
|
|
|
|
/* Mix 'n match */
|
|
@supports (not (border: 1px 1px 1px 1px 1px solid #000)) and (display: block) {
|
|
#t15 { content: "APPLIED" }
|
|
}
|
|
|
|
@supports (display: block !important) and ((display: inline) or (display: deadbeef)){
|
|
#t16 { content: "APPLIED" }
|
|
}
|
|
|
|
@supports not ((not (display: block)) or ((display: none) and (deadbeef: 1px))) {
|
|
#t17 { content: "APPLIED" }
|
|
}
|
|
|
|
/* Whitespace/Syntax */
|
|
@supports not( display: deadbeef) {
|
|
#t22 { content: "APPLIED" }
|
|
}
|
|
|
|
@supports (display: none)and ( -webkit-transition: all 1s ) {
|
|
#t23 { content: "APPLIED" }
|
|
}
|
|
|
|
@supports (display: none)or(-webkit-transition: all 1s) {
|
|
#t24 { content: "APPLIED" }
|
|
}
|
|
|
|
@supports (display: none) or(-webkit-transition: all 1s ) {
|
|
#t25 { content: "APPLIED" }
|
|
}
|
|
|
|
@supports (((((((display: none))))))) {
|
|
#t26 { content: "APPLIED" }
|
|
}
|
|
|
|
@supports(((((((display: none))))))) {
|
|
#t27 { content: "APPLIED" }
|
|
}
|
|
|
|
@supports (!important) {
|
|
#t28 { content: "FAIL" }
|
|
}
|
|
|
|
@supports not not not not (display: none) {
|
|
#t29 { content: "FAIL" }
|
|
}
|
|
|
|
/* Functions */
|
|
|
|
@supports (top: -webkit-calc(80% - 20px)) {
|
|
#t30 { content: "APPLIED" }
|
|
}
|
|
|
|
@supports (background-color: rgb(0, 128, 0)) {
|
|
#t31 { content: "APPLIED" }
|
|
}
|
|
|
|
@supports (background: url("/blah")) {
|
|
#t32 { content: "APPLIED" }
|
|
}
|
|
|
|
@supports ((top: -webkit-calc(80% - 20px)) and (not (background-color: rgb(0, 128, 0)))) or (background: url("/blah")) {
|
|
#t33 { content: "APPLIED" }
|
|
}
|
|
|
|
@supports (background: invalid("/blah")) {
|
|
#t34 { content: "FAIL" }
|
|
}
|
|
|
|
/* Nesting. */
|
|
@supports (display: none) {
|
|
@supports (display: deadbeef) {
|
|
#t18 { content: "FAIL" }
|
|
}
|
|
@supports (display: inline) {
|
|
#t19 { content: "APPLIED" }
|
|
}
|
|
@supports (display: inline) {
|
|
}
|
|
@media all {
|
|
#t20 { content: "APPLIED" }
|
|
@supports (display: inline) {
|
|
#t21 { content: "APPLIED" }
|
|
}
|
|
}
|
|
}
|
|
|
|
@media all {
|
|
@supports (display: inline) {
|
|
@media all {
|
|
@supports (display: none) {
|
|
#t35 { content: "APPLIED" }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media not all {
|
|
@supports (display: none) {
|
|
#t36 { content: "FAIL" }
|
|
}
|
|
}
|
|
|
|
/* Invalid syntax error recovery */
|
|
|
|
@supports (display: none);
|
|
@supports (display: none) and ( (display: none) ) {
|
|
#t37 { content: "APPLIED" }
|
|
}
|
|
|
|
@supports (display: none)) ;
|
|
@supports (display: none) {
|
|
#t38 { content: "APPLIED" }
|
|
}
|
|
|
|
@supports;
|
|
@supports (display: none) {
|
|
#t39 { content: "APPLIED" }
|
|
}
|
|
|
|
@supports ;
|
|
@supports (display: none) {
|
|
#t40 { content: "APPLIED" }
|
|
}
|
|
|
|
@supports (display: none)) {
|
|
#t41 { content: "FAIL" }
|
|
}
|
|
@supports (display: none) {
|
|
#t41 { content: "APPLIED" }
|
|
}
|
|
|
|
@supports (display: )) {
|
|
#t42 { content: "FAIL" }
|
|
}
|
|
@supports (display: none) {
|
|
#t42 { content: "APPLIED" }
|
|
}
|
|
|
|
@supports ((display: none) and {
|
|
#t43 { content: "FAIL" }
|
|
}
|
|
@supports (display: none) {
|
|
#t43 { content: "FAIL" }
|
|
}
|
|
);
|
|
|
|
@supports ((display: none) and ;
|
|
@supports (display: none) {
|
|
#t44 { content: "FAIL" }
|
|
}
|
|
);
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="test_container"></div>
|
|
|
|
<script>
|
|
description("Test the @supports rule.");
|
|
var numTests = 45;
|
|
var untouchedTests = [1, 3, 5, 8, 12, 13, 14, 18, 28, 29, 34, 36, 43, 44]; // Tests whose content shouldn't change from the UNTOUCHED default.
|
|
|
|
var container = document.getElementById("test_container");
|
|
for (var i=0; i < numTests; i++) {
|
|
var div = document.createElement("div");
|
|
div.id = "t" + i;
|
|
div.className = "test";
|
|
container.appendChild(div);
|
|
shouldBeEqualToString("getComputedStyle(document.getElementById('t"+i+"')).content", untouchedTests.indexOf(i) >= 0 ? '"UNTOUCHED"' : '"APPLIED"');
|
|
}
|
|
|
|
test_container.parentNode.removeChild(test_container);
|
|
</script>
|
|
<script src="../resources/js-test-post.js"></script>
|
|
</body>
|
|
</html>
|