register-property.html (3494B)
1 <!DOCTYPE HTML> 2 <link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api/#register-a-custom-property" /> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <script src="./resources/utils.js"></script> 6 <div id=target></div> 7 <script> 8 // Tests for error checking during property registration 9 10 test(function() { 11 assert_throws_js(TypeError, () => CSS.registerProperty()); 12 assert_throws_js(TypeError, () => CSS.registerProperty(undefined)); 13 assert_throws_js(TypeError, () => CSS.registerProperty(true)); 14 assert_throws_js(TypeError, () => CSS.registerProperty(2)); 15 assert_throws_js(TypeError, () => CSS.registerProperty("css")); 16 assert_throws_js(TypeError, () => CSS.registerProperty(null)); 17 }, "registerProperty requires a Dictionary type"); 18 19 test(function() { 20 // Valid property names, shouldn't throw 21 CSS.registerProperty({name: '--name1', inherits: false}); 22 CSS.registerProperty({name: '--name2, no need for escapes', inherits: false}); 23 CSS.registerProperty({name: ['--name', 3], inherits: false}); 24 25 // Invalid property names 26 assert_throws_js(TypeError, () => CSS.registerProperty({})); 27 assert_throws_dom("SyntaxError", () => CSS.registerProperty({name: 'no-leading-dash', inherits: false})); 28 assert_throws_dom("SyntaxError", () => CSS.registerProperty({name: '', inherits: false})); 29 assert_throws_dom("SyntaxError", () => CSS.registerProperty({name: '\\--name', inherits: false})); 30 }, "registerProperty requires a name matching <custom-property-name>"); 31 32 test(function() { 33 CSS.registerProperty({name: '--syntax-test-1', syntax: '*', inherits: false}); 34 CSS.registerProperty({name: '--syntax-test-2', syntax: ' * ', inherits: false}); 35 assert_throws_dom("SyntaxError", 36 () => CSS.registerProperty({name: '--syntax-test-3', syntax: 'length', inherits: false})); 37 }, "registerProperty only allows omitting initialValue if syntax is '*'"); 38 39 test(function() { 40 CSS.registerProperty({name: '--re-register', syntax: '<length>', initialValue: '0px', inherits: false}); 41 assert_throws_dom('InvalidModificationError', 42 () => CSS.registerProperty({name: '--re-register', syntax: '<percentage>', initialValue: '0%', inherits: false})); 43 }, "registerProperty fails for an already registered property"); 44 45 test(function(){ 46 CSS.registerProperty({name: '--inherit-test-1', syntax: '<length>', initialValue: '0px', inherits: true}); 47 CSS.registerProperty({name: '--inherit-test-2', syntax: '<length>', initialValue: '0px', inherits: false}); 48 assert_throws_js(TypeError, () => CSS.registerProperty({name: '--inherit-test-3', syntax: '<length>', initialValue: '0px'})); 49 }, "registerProperty requires inherits"); 50 51 test(function(){ 52 try { 53 let name = generate_name(); 54 55 target.style.setProperty(name, 'green'); 56 target.style.transitionProperty = name; 57 target.style.transitionDuration = '1s'; 58 target.style.transitionTimingFunction = 'steps(1, end)'; 59 60 assert_equals(getComputedStyle(target).getPropertyValue(name), 'green'); 61 62 CSS.registerProperty({ 63 name: name, 64 syntax: '<color>', 65 initialValue: 'red', 66 inherits: false 67 }); 68 69 assert_equals(getComputedStyle(target).getPropertyValue(name), 'rgb(0, 128, 0)'); 70 } finally { 71 target.style = ''; 72 } 73 }, 'Registering a property should not cause a transition'); 74 75 </script>