registered-properties-inheritance.html (5586B)
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 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 #outer { 8 --inherited-length-1: 10px; 9 --inherited-length-2: var(--non-inherited-length-1); 10 --inherited-length-3: 30px; 11 --non-inherited-length-1: 22px; 12 --non-inherited-length-3: calc(var(--non-inherited-length-2) * 10); 13 } 14 15 #inner { 16 --inherited-length-3: 15px; 17 --non-inherited-length-1: 40px; 18 --non-inherited-length-2: 90px; 19 } 20 </style> 21 <div id=outer><div id=inner></div></div> 22 <script> 23 test(function() { 24 CSS.registerProperty({name: '--inherited-length-1', syntax: '<length>', initialValue: '1px', inherits: true}); 25 CSS.registerProperty({name: '--inherited-length-2', syntax: '<length>', initialValue: '2px', inherits: true}); 26 CSS.registerProperty({name: '--inherited-length-3', syntax: '<length>', initialValue: '3px', inherits: true}); 27 CSS.registerProperty({name: '--non-inherited-length-1', syntax: '<length>', initialValue: '4px', inherits: false}); 28 CSS.registerProperty({name: '--non-inherited-length-2', syntax: '<length>', initialValue: '5px', inherits: false}); 29 CSS.registerProperty({name: '--non-inherited-length-3', syntax: '<length>', initialValue: '6px', inherits: false}); 30 31 outerComputedStyle = getComputedStyle(outer); 32 assert_equals(outerComputedStyle.getPropertyValue('--inherited-length-1'), '10px'); 33 assert_equals(outerComputedStyle.getPropertyValue('--inherited-length-2'), '22px'); 34 assert_equals(outerComputedStyle.getPropertyValue('--inherited-length-3'), '30px'); 35 assert_equals(outerComputedStyle.getPropertyValue('--non-inherited-length-1'), '22px'); 36 assert_equals(outerComputedStyle.getPropertyValue('--non-inherited-length-2'), '5px'); 37 assert_equals(outerComputedStyle.getPropertyValue('--non-inherited-length-3'), '50px'); 38 39 innerComputedStyle = getComputedStyle(inner); 40 assert_equals(innerComputedStyle.getPropertyValue('--inherited-length-1'), '10px'); 41 assert_equals(innerComputedStyle.getPropertyValue('--inherited-length-2'), '22px'); 42 assert_equals(innerComputedStyle.getPropertyValue('--inherited-length-3'), '15px'); 43 assert_equals(innerComputedStyle.getPropertyValue('--non-inherited-length-1'), '40px'); 44 assert_equals(innerComputedStyle.getPropertyValue('--non-inherited-length-2'), '90px'); 45 assert_equals(innerComputedStyle.getPropertyValue('--non-inherited-length-3'), '6px'); 46 }, "Registered properties are correctly inherited (or not) depending on the inherits flag."); 47 48 test(function(){ 49 CSS.registerProperty({name: '--initial-length-1', syntax: '<length>', initialValue: '0px', inherits: false}); 50 outer.style = '--initial-length-1: notalength'; 51 inner.style = '--initial-length-1: inherit'; 52 assert_equals(getComputedStyle(inner).getPropertyValue('--initial-length-1'), '0px'); 53 }, "Explicitly inheriting from a parent with an invalid value results in initial value."); 54 55 test(function(){ 56 CSS.registerProperty({name: '--initial-length-2', syntax: '<length>', initialValue: '0px', inherits: false}); 57 inner.style = '--initial-length-2: inherit'; 58 assert_equals(getComputedStyle(inner).getPropertyValue('--initial-length-2'), '0px'); 59 }, "Explicitly inheriting from a parent with no value results in initial value."); 60 61 test(function(){ 62 CSS.registerProperty({name: '--initial-length-3', syntax: '<length>', initialValue: '0px', inherits: false}); 63 outer.style = '--initial-length-3: 100px'; 64 inner.style = '--initial-length-3: inherit'; 65 assert_equals(getComputedStyle(inner).getPropertyValue('--initial-length-3'), '100px'); 66 }, "Explicitly inheriting from a parent with a value results in that value."); 67 68 test(function(){ 69 CSS.registerProperty({name: '--inherited-length-4', syntax: '<length>', initialValue: '0px', inherits: true}); 70 outer.style = '--inherited-length-4: 42px'; 71 inner.style = '--inherited-length-4: var(--undefined)'; 72 assert_equals(getComputedStyle(inner).getPropertyValue('--inherited-length-4'), '42px'); 73 }, "Reference to undefined variable results in inherited value"); 74 75 test(function(){ 76 CSS.registerProperty({name: '--inherited-length-5', syntax: '<length>', initialValue: '0px', inherits: true}); 77 outer.style = '--inherited-length-5: 42px'; 78 inner.style = '--incompatible: nolength; --inherited-length-5: var(--incompatible)'; 79 assert_equals(getComputedStyle(inner).getPropertyValue('--inherited-length-5'), '42px'); 80 }, "Reference to syntax-incompatible variable results in inherited value"); 81 82 test(function(){ 83 CSS.registerProperty({name: '--inherited-em', syntax: '<length>', initialValue: '0px', inherits: true}); 84 outer.style = 'font-size: 11px; --inherited-em: 10em;'; 85 inner.style = 'font-size: 22px; --unregistered:var(--inherited-em);'; 86 assert_equals(getComputedStyle(inner).getPropertyValue('--unregistered'), '110px'); 87 }, "Font-relative units are absolutized before before inheritance"); 88 89 test(function(){ 90 CSS.registerProperty({name: '--calc-length', syntax: '<length>', initialValue: '0px', inherits: true}); 91 outer.style = '--calc-length: calc(10px + 10px);'; 92 inner.style = '--unregistered:var(--calc-length);'; 93 assert_equals(getComputedStyle(inner).getPropertyValue('--unregistered'), '20px'); 94 }, "Calc expressions are resolved before inheritance"); 95 96 </script>