supports.html (1868B)
1 <!--quirks--> 2 <title>Syntax quirks in @supports/CSS.supports</title> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <link rel=help href=https://drafts.csswg.org/css-conditional/#at-supports> 6 <link rel=help href=https://drafts.csswg.org/css-conditional/#the-css-interface> 7 <link rel=help href=https://quirks.spec.whatwg.org/#the-hashless-hex-color-quirk> 8 <link rel=help href=https://quirks.spec.whatwg.org/#the-unitless-length-quirk> 9 <style> 10 /* sanity check */ 11 @supports (background-color: lime) { #a { background-color: lime } } 12 @supports (background-position: 1px 1px) { #a { background-position: 1px 1px } } 13 /* test */ 14 @supports (background-color: 00ff00) { #b { background-color: 00ff00 } } 15 @supports (background-position: 1 1) { #b { background-position: 1 1 } } 16 </style> 17 <div id=a></div> 18 <div id=b></div> 19 <div id=c></div> <!-- c unstyled --> 20 <script> 21 var a = document.getElementById('a'); 22 var b = document.getElementById('b'); 23 var c = document.getElementById('c'); 24 25 test(function() { 26 assert_not_equals(getComputedStyle(a).backgroundColor, getComputedStyle(c).backgroundColor); 27 }, 'Sanity check @supports color'); 28 29 test(function() { 30 assert_equals(getComputedStyle(b).backgroundColor, getComputedStyle(a).backgroundColor); 31 }, '@supports quirky color'); 32 33 test(function() { 34 assert_false(CSS.supports('background-color', '00ff00')); 35 }, 'CSS.supports() quirky color'); 36 37 test(function() { 38 assert_not_equals(getComputedStyle(a).backgroundPosition, getComputedStyle(c).backgroundPosition); 39 }, 'Sanity check @supports length'); 40 41 test(function() { 42 assert_equals(getComputedStyle(b).backgroundPosition, getComputedStyle(a).backgroundPosition); 43 }, '@supports quirky length'); 44 45 test(function() { 46 assert_false(CSS.supports('background-position', '1 1')); 47 }, 'CSS.supports() quirky length'); 48 </script>