| <!DOCTYPE html><!-- webkit-test-runner [ CSSCustomPropertiesAndValuesEnabled=true ] --> |
| <!-- https://chromium.googlesource.com/chromium/src/+/01ce431409e3a019858677626a983c55168da6dc/third_party/WebKit/LayoutTests/custom-properties/register-property.html --> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| <div id="el"></div> |
| <script> |
| // Tests for error checking during property registration |
| test(function() { |
| assert_throws_js(TypeError, () => CSS.registerProperty()); |
| assert_throws_js(TypeError, () => CSS.registerProperty(undefined)); |
| assert_throws_js(TypeError, () => CSS.registerProperty(true)); |
| assert_throws_js(TypeError, () => CSS.registerProperty(2)); |
| assert_throws_js(TypeError, () => CSS.registerProperty("css")); |
| assert_throws_js(TypeError, () => CSS.registerProperty(null)); |
| }, "registerProperty requires a Dictionary type"); |
| test(function() { |
| // Valid property names, shouldn't throw |
| CSS.registerProperty({name: '--name1', inherits: false}); |
| CSS.registerProperty({name: '--name2, no need for escapes', inherits: false}); |
| CSS.registerProperty({name: ['--name', 3], inherits: false}); |
| // Invalid property names |
| assert_throws_dom('SyntaxError', () => CSS.registerProperty({name: 'no-leading-dash', inherits: false})); |
| assert_throws_dom('SyntaxError', () => CSS.registerProperty({name: '', inherits: false})); |
| assert_throws_dom('SyntaxError', () => CSS.registerProperty({name: '\\--name', inherits: false})); |
| }, "registerProperty requires a name matching <custom-property-name>"); |
| test(function() { |
| CSS.registerProperty({name: '--syntax-test-1', inherits: false, syntax: '*'}); |
| CSS.registerProperty({name: '--syntax-test-2', inherits: false, syntax: ' * '}); |
| CSS.registerProperty({name: '--syntax-test-3', inherits: false, initialValue: '500px'}); |
| assert_throws_js(TypeError, () => CSS.registerProperty({})); |
| assert_throws_js(TypeError, () => CSS.registerProperty({name: '--no-inherits'})); |
| assert_throws_js(TypeError, () => CSS.registerProperty({inherits: false})); |
| // Repeated name |
| assert_throws_dom(DOMException.INVALID_MODIFICATION_ERR, |
| () => CSS.registerProperty({name: '--syntax-test-3', inherits: false, initialValue: '500px'})); |
| }, "registerProperty always allows omitting initialValue and syntax, requires name and inherits"); |
| test(function() { |
| CSS.registerProperty({name: '--syntax-test-4', inherits: false, syntax: '*'}); |
| CSS.registerProperty({name: '--syntax-test-5', inherits: false, syntax: ' * '}); |
| }, "registerProperty requires inherits and name"); |
| test(function() { |
| CSS.registerProperty({name: '--initialvalue-test-0', inherits: false, syntax: '<length>', initialValue: 'calc(10px + 10in)'}); |
| assert_equals(window.getComputedStyle(el).getPropertyValue('--initialvalue-test-0').toString(), '970px'); |
| |
| assert_throws_dom('SyntaxError', |
| () => CSS.registerProperty({name: '--initialvalue-test-1', inherits: false, syntax: '<length>', initialValue: '10em'})); |
| assert_throws_dom('SyntaxError', |
| () => CSS.registerProperty({name: '--initialvalue-test-2', inherits: false, syntax: '<length>', initialValue: 'calc(10px + 10em)'})); |
| assert_throws_dom('SyntaxError', |
| () => CSS.registerProperty({name: '--initialvalue-test-3', inherits: false, syntax: '<length>', initialValue: 'calc(10px + 10%)'})); |
| }, "registerProperty requires initialValue to be computationally independent"); |
| </script> |
