if-function-revert-rule.tentative.html (1024B)
1 <!DOCTYPE html> 2 <title>The revert-rule keyword: interaction with if()</title> 3 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/10443"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 7 <style> 8 #test1 { 9 color: green; 10 } 11 #test1 { 12 color: red; 13 --x: 3; 14 color: if(style(--x:1000):red; else:revert-rule); 15 } 16 </style> 17 <div id=test1></div> 18 <script> 19 test(() => { 20 assert_true(CSS.supports('color:revert-rule')); 21 assert_equals(getComputedStyle(test1).color, 'rgb(0, 128, 0)') 22 }, 'The revert-rule works as a branch in if()'); 23 </script> 24 25 26 <style> 27 #test2 { 28 color: green; 29 } 30 #test2 { 31 color: red; 32 --x: 1000; 33 color: if(style(--x:1000):revert-rule; else:red); 34 } 35 </style> 36 <div id=test2></div> 37 <script> 38 test(() => { 39 assert_true(CSS.supports('color:revert-rule')); 40 assert_equals(getComputedStyle(test2).color, 'rgb(0, 128, 0)') 41 }, 'The revert-rule works as a branch in if(), earlier return'); 42 </script>