revert-rule-in-fallback.tentative.html (1569B)
1 <!DOCTYPE html> 2 <title>CSS Custom Properties: Using revert-rule in fallbacks</title> 3 <link rel="help" href="https://drafts.csswg.org/css-variables/#substitute-a-var"> 4 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/10443"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <style> 8 #child { 9 --x:PASS; 10 margin: 1px; 11 padding-left: 1px; 12 } 13 #parent { 14 --x:FAIL; 15 margin: -1px; 16 padding-left: -1px; 17 } 18 #child { 19 --x: var(--unknown, revert-rule); 20 margin: var(--unknown, revert-rule); 21 padding-left: var(--unknown, revert-rule); 22 } 23 </style> 24 <div id=parent> 25 <div id=child> 26 </div> 27 </div> 28 <pre id=out> 29 </pre> 30 <script> 31 test((x) => { 32 assert_true(CSS.supports('--x:revert-rule')); 33 assert_equals(getComputedStyle(child).getPropertyValue('--x'), 'PASS'); 34 }, 'var(--unknown, revert-rule) in custom property'); 35 36 test((x) => { 37 assert_true(CSS.supports('margin:revert-rule')); 38 assert_equals(getComputedStyle(child).getPropertyValue('margin'), '1px'); 39 }, 'var(--unknown, revert-rule) in shorthand'); 40 41 test((x) => { 42 assert_true(CSS.supports('margin-left:revert-rule')); 43 assert_equals(getComputedStyle(child).getPropertyValue('margin-left'), '1px'); 44 }, 'var(--unknown, revert-rule) in shorthand observed via longhand'); 45 46 test((x) => { 47 assert_true(CSS.supports('padding-left:revert-rule')); 48 assert_equals(getComputedStyle(child).getPropertyValue('padding-left'), '1px'); 49 }, 'var(--unknown, revert-rule) in longhand'); 50 </script>