variables-substitute-guaranteed-invalid.html (1438B)
1 <!DOCTYPE html> 2 <title>Testing substitution of guaranteed-invalid values</title> 3 <link rel="help" href="https://drafts.csswg.org/css-variables/#guaranteed-invalid"> 4 <link rel="help" href="https://drafts.csswg.org/css-variables/#cycles"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <style> 8 #target1 { 9 /* Cycle */ 10 --var1: var(--var2); 11 --var2: var(--var1); 12 13 /* Reference to cycle */ 14 --var3: var(--var1); 15 16 /* Reference to non-existent property */ 17 --var4: var(--noexist); 18 } 19 20 #target1parent { 21 --var3: inherited; 22 --var4: inherited; 23 } 24 </style> 25 <div id="target1parent"> 26 <div id="target1"></div> 27 </div> 28 <script> 29 test( function () { 30 let cs = getComputedStyle(target1); 31 assert_equals(cs.getPropertyValue('--var1'), ''); 32 assert_equals(cs.getPropertyValue('--var2'), ''); 33 }, 'Custom properties in a cycle become guaranteed-invalid'); 34 35 test( function () { 36 let cs = getComputedStyle(target1); 37 assert_equals(cs.getPropertyValue('--var3'), ''); 38 }, 'A custom property referencing a cycle becomes guaranteed-invalid'); 39 40 test( function () { 41 let cs = getComputedStyle(target1); 42 assert_equals(cs.getPropertyValue('--var4'), ''); 43 }, 'A custom property referencing a non-existent variable becomes guaranteed-invalid'); 44 </script>