| <!--quirks--> |
| <title>Syntax quirks in @supports/CSS.supports</title> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <link rel=help href=https://drafts.csswg.org/css-conditional/#at-supports> |
| <link rel=help href=https://drafts.csswg.org/css-conditional/#the-css-interface> |
| <link rel=help href=https://quirks.spec.whatwg.org/#the-hashless-hex-color-quirk> |
| <link rel=help href=https://quirks.spec.whatwg.org/#the-unitless-length-quirk> |
| <style> |
| /* sanity check */ |
| @supports (background-color: lime) { #a { background-color: lime } } |
| @supports (background-position: 1px 1px) { #a { background-position: 1px 1px } } |
| /* test */ |
| @supports (background-color: 00ff00) { #b { background-color: 00ff00 } } |
| @supports (background-position: 1 1) { #b { background-position: 1 1 } } |
| </style> |
| <div id=a></div> |
| <div id=b></div> |
| <div id=c></div> <!-- c unstyled --> |
| <script> |
| var a = document.getElementById('a'); |
| var b = document.getElementById('b'); |
| var c = document.getElementById('c'); |
| |
| test(function() { |
| assert_not_equals(getComputedStyle(a).backgroundColor, getComputedStyle(c).backgroundColor); |
| }, 'Sanity check @supports color'); |
| |
| test(function() { |
| assert_equals(getComputedStyle(b).backgroundColor, getComputedStyle(a).backgroundColor); |
| }, '@supports quirky color'); |
| |
| test(function() { |
| assert_false(CSS.supports('background-color', '00ff00')); |
| }, 'CSS.supports() quirky color'); |
| |
| test(function() { |
| assert_not_equals(getComputedStyle(a).backgroundPosition, getComputedStyle(c).backgroundPosition); |
| }, 'Sanity check @supports length'); |
| |
| test(function() { |
| assert_equals(getComputedStyle(b).backgroundPosition, getComputedStyle(a).backgroundPosition); |
| }, '@supports quirky length'); |
| |
| test(function() { |
| assert_false(CSS.supports('background-position', '1 1')); |
| }, 'CSS.supports() quirky length'); |
| </script> |