invalid-at-computed-value-time.html (3853B)
1 <!DOCTYPE HTML> 2 <link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api/#dom-propertydescriptor-inherits" /> 3 <link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api/#register-a-custom-property" /> 4 <link rel="help" href="https://drafts.csswg.org/css-variables-2/#invalid-at-computed-value-time" /> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <div id=outer><div id=inner></div></div> 8 <script> 9 10 test(function(){ 11 CSS.registerProperty({name: '--p1', syntax: '*', initialValue: '0px', inherits: true}); 12 outer.style = '--p1: 42px'; 13 inner.style = '--p1: var(--undefined)'; 14 assert_equals(getComputedStyle(inner).getPropertyValue('--p1'), ''); 15 16 CSS.registerProperty({name: '--p2', syntax: '*', initialValue: '0px', inherits: false}); 17 outer.style = '--p2: 42px'; 18 inner.style = '--p2: var(--undefined)'; 19 assert_equals(getComputedStyle(inner).getPropertyValue('--p2'), ''); 20 }, "Universal syntax: Undefined reference results in guaranteed-invalid value."); 21 22 test(function(){ 23 CSS.registerProperty({name: '--p3', syntax: '<length>', initialValue: '0px', inherits: true}); 24 outer.style = '--p3: 42px'; 25 inner.style = '--p3: var(--undefined)'; 26 assert_equals(getComputedStyle(inner).getPropertyValue('--p3'), '42px'); 27 28 CSS.registerProperty({name: '--p4', syntax: '<length>', initialValue: '0px', inherits: false}); 29 outer.style = '--p4: 42px'; 30 inner.style = '--incompatible: nolength; --p4: var(--undefined)'; 31 assert_equals(getComputedStyle(inner).getPropertyValue('--p4'), '0px'); 32 }, "Undefined reference results in unsetting the property."); 33 34 test(function(){ 35 CSS.registerProperty({name: '--p5', syntax: '<length>', initialValue: '0px', inherits: true}); 36 outer.style = '--p5: 42px'; 37 inner.style = '--incompatible: nolength; --p5: var(--incompatible)'; 38 assert_equals(getComputedStyle(inner).getPropertyValue('--p5'), '42px'); 39 40 CSS.registerProperty({name: '--p6', syntax: '<length>', initialValue: '0px', inherits: false}); 41 outer.style = '--p6: 42px'; 42 inner.style = '--incompatible: nolength; --p6: var(--incompatible)'; 43 assert_equals(getComputedStyle(inner).getPropertyValue('--p6'), '0px'); 44 }, "Syntax-incompatible reference results in unsetting the property."); 45 46 test(function(){ 47 CSS.registerProperty({name: '--p7', syntax: '<length>', initialValue: '0px', inherits: true}); 48 outer.style = '--p7: 42px'; 49 inner.style = '--p7: var(--undefined, nolength)'; 50 assert_equals(getComputedStyle(inner).getPropertyValue('--p7'), '42px'); 51 52 CSS.registerProperty({name: '--p8', syntax: '<length>', initialValue: '0px', inherits: false}); 53 outer.style = '--p8: 42px'; 54 inner.style = 'var(--undefined, nolength)'; 55 assert_equals(getComputedStyle(inner).getPropertyValue('--p8'), '0px'); 56 }, "Syntax-incompatible fallback results in unsetting the property."); 57 58 test(function(){ 59 const rootElement = document.documentElement; 60 CSS.registerProperty({name: '--p9', syntax: '<length>', initialValue: '0px', inherits: true}); 61 rootElement.style = '--p9: var(--undefined);'; 62 assert_equals(getComputedStyle(rootElement).getPropertyValue('--p9'), '0px'); 63 64 CSS.registerProperty({name: '--p10', syntax: '<length>', initialValue: '0px', inherits: true}); 65 rootElement.style = '--incompatible: nolength; --p10: var(--incompatible)'; 66 assert_equals(getComputedStyle(rootElement).getPropertyValue('--p10'), '0px'); 67 68 CSS.registerProperty({name: '--p11', syntax: '<length>', initialValue: '0px', inherits: true}); 69 rootElement.style = '--p11: var(--undefined, nolength)'; 70 assert_equals(getComputedStyle(rootElement).getPropertyValue('--p11'), '0px'); 71 }, "Unsetting inherited properties on the root results in initial value."); 72 73 </script>