registered-property-cssom.html (3737B)
1 <!DOCTYPE HTML> 2 <link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api/#dom-css-registerproperty" /> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 6 <style> 7 #inner { 8 --length: 10px; 9 --color: red; 10 } 11 #outer { 12 --length: 77px; 13 --color: blue; 14 } 15 </style> 16 17 <div id=outer> 18 <div id=inner></div> 19 </div> 20 21 <script> 22 var computedStyle = getComputedStyle(inner); 23 var inlineStyle = inner.style; 24 var sheetStyle = document.styleSheets[0].cssRules[0].style; 25 26 test(function() { 27 // Nothing registered yet, whatever you specify works 28 assert_equals(computedStyle.getPropertyValue('--length'), '10px'); 29 assert_equals(computedStyle.getPropertyValue('--color'), 'red'); 30 }, "Initially unregistered values from stylesheet"); 31 32 test(function() { 33 inlineStyle.setProperty('--length', '5'); 34 inlineStyle.setProperty('--color', 'hello'); 35 36 assert_equals(inlineStyle.getPropertyValue('--length'), '5'); 37 assert_equals(inlineStyle.getPropertyValue('--color'), 'hello'); 38 assert_equals(computedStyle.getPropertyValue('--length'), '5'); 39 assert_equals(computedStyle.getPropertyValue('--color'), 'hello'); 40 }, "CSSOM setters function as expected for unregistered properties"); 41 42 test(function() { 43 CSS.registerProperty({name: '--length', syntax: '<length>', initialValue: '0px', inherits: false}); 44 CSS.registerProperty({name: '--color', syntax: '<color>', initialValue: 'white', inherits: true}); 45 }, "CSS.registerProperty"); 46 47 test(function() { 48 assert_equals(inlineStyle.getPropertyValue('--length'), '5'); 49 assert_equals(inlineStyle.getPropertyValue('--color'), 'hello'); 50 assert_equals(computedStyle.getPropertyValue('--length'), '0px'); 51 assert_equals(computedStyle.getPropertyValue('--color'), 'rgb(0, 0, 255)'); 52 }, "Formerly valid values are still readable from inline styles but are computed as the unset value"); 53 54 test(function() { 55 inlineStyle.setProperty('--length', 'hi'); 56 inlineStyle.setProperty('--color', '20'); 57 assert_equals(inlineStyle.getPropertyValue('--length'), 'hi'); 58 assert_equals(inlineStyle.getPropertyValue('--color'), '20'); 59 }, "Values not matching the registered type can still be set"); 60 61 test(function() { 62 inlineStyle.removeProperty('--length'); 63 inlineStyle.setProperty('--color', ''); 64 assert_equals(inlineStyle.getPropertyValue('--length'), ''); 65 assert_equals(inlineStyle.getPropertyValue('--color'), ''); 66 assert_equals(computedStyle.getPropertyValue('--length'), '10px'); 67 assert_equals(computedStyle.getPropertyValue('--color'), 'rgb(255, 0, 0)'); 68 }, "Values can be removed from inline styles"); 69 70 test(function() { 71 // 'banana' is not a valid <length>, but still accepted. 72 sheetStyle.setProperty('--length', 'banana'); 73 assert_equals(computedStyle.getPropertyValue('--length'), '0px'); 74 sheetStyle.setProperty('--length', '20px'); 75 assert_equals(computedStyle.getPropertyValue('--length'), '20px'); 76 sheetStyle.setProperty('--length', 'initial'); 77 assert_equals(computedStyle.getPropertyValue('--length'), '0px'); 78 }, "Stylesheets can be modified by CSSOM"); 79 80 test(function() { 81 inlineStyle.setProperty('--length', '30px'); 82 inlineStyle.setProperty('--color', 'pink'); 83 assert_equals(inlineStyle.getPropertyValue('--length'), '30px'); 84 assert_equals(inlineStyle.getPropertyValue('--color'), 'pink'); 85 assert_equals(computedStyle.getPropertyValue('--length'), '30px'); 86 assert_equals(computedStyle.getPropertyValue('--color'), 'rgb(255, 192, 203)'); 87 inlineStyle.setProperty('--color', 'inherit'); 88 assert_equals(inlineStyle.getPropertyValue('--color'), 'inherit'); 89 assert_equals(computedStyle.getPropertyValue('--color'), 'rgb(0, 0, 255)'); 90 }, "Valid values can be set on inline styles"); 91 </script>