conditional-rules.html (1180B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1/#conditional-rules"> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 6 <script> 7 CSS.registerProperty({ 8 name: '--length', 9 syntax: '<length>', 10 initialValue: '0px', 11 inherits: false 12 }); 13 </script> 14 15 <style> 16 #target { color: red; } 17 @supports(--length: green) { 18 #target { color: rgb(1, 2, 3); } 19 } 20 </style> 21 22 <div id=target></div> 23 24 <script> 25 26 test(function() { 27 let cs = getComputedStyle(target); 28 assert_equals(cs.getPropertyValue('color'), 'rgb(1, 2, 3)'); 29 }, '@supports should ignore registered syntax'); 30 31 test(function() { 32 assert_true(CSS.supports('--length: red')); 33 assert_true(CSS.supports('--length: 10px')); 34 assert_true(CSS.supports('--length: anything, really')); 35 }, 'CSS.supports(conditionText) should ignore registered syntax'); 36 37 test(function() { 38 assert_true(CSS.supports('--length', 'red')); 39 assert_true(CSS.supports('--length', '10px')); 40 assert_true(CSS.supports('--length', ' anything, really')); 41 }, 'CSS.supports(property, value) should ignore registered syntax'); 42 43 </script>