53 lines
3.4 KiB
HTML
53 lines
3.4 KiB
HTML
<!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(new TypeError(), () => CSS.registerProperty());
|
|
assert_throws(new TypeError(), () => CSS.registerProperty(undefined));
|
|
assert_throws(new TypeError(), () => CSS.registerProperty(true));
|
|
assert_throws(new TypeError(), () => CSS.registerProperty(2));
|
|
assert_throws(new TypeError(), () => CSS.registerProperty("css"));
|
|
assert_throws(new 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(new SyntaxError(), () => CSS.registerProperty({name: 'no-leading-dash', inherits: false}));
|
|
assert_throws(new SyntaxError(), () => CSS.registerProperty({name: '', inherits: false}));
|
|
assert_throws(new 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(new TypeError(), () => CSS.registerProperty({}));
|
|
assert_throws(new TypeError(), () => CSS.registerProperty({name: '--no-inherits'}));
|
|
assert_throws(new TypeError(), () => CSS.registerProperty({inherits: false}));
|
|
// Repeated name
|
|
assert_throws(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(new SyntaxError(),
|
|
() => CSS.registerProperty({name: '--initialvalue-test-1', inherits: false, syntax: '<length>', initialValue: '10em'}));
|
|
assert_throws(new SyntaxError(),
|
|
() => CSS.registerProperty({name: '--initialvalue-test-2', inherits: false, syntax: '<length>', initialValue: 'calc(10px + 10em)'}));
|
|
assert_throws(new SyntaxError(),
|
|
() => CSS.registerProperty({name: '--initialvalue-test-3', inherits: false, syntax: '<length>', initialValue: 'calc(10px + 10%)'}));
|
|
}, "registerProperty requires initialValue to be computationally independent");
|
|
</script>
|