mirror of
https://github.com/servo/servo.git
synced 2025-10-04 10:39:16 +01:00
35 lines
2.3 KiB
HTML
35 lines
2.3 KiB
HTML
<!DOCTYPE HTML>
|
|
<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api/#dom-propertydescriptor-initialvalue" />
|
|
<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api/#register-a-custom-property" />
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<style>
|
|
#target {
|
|
background: var(--inherited-color);
|
|
color: var(--non-inherited-color);
|
|
}
|
|
</style>
|
|
<div id=target></div>
|
|
<script>
|
|
test(function() {
|
|
CSS.registerProperty({name: '--length', syntax: '<length>', initialValue: 'calc(10px + 15px)', inherits: false});
|
|
CSS.registerProperty({name: '--length-percentage', syntax: '<length-percentage>', initialValue: 'calc(1in + 10% + 4px)', inherits: false});
|
|
CSS.registerProperty({name: '--inherited-color', syntax: '<color>', initialValue: 'pink', inherits: true});
|
|
CSS.registerProperty({name: '--non-inherited-color', syntax: '<color>', initialValue: 'purple', inherits: false});
|
|
CSS.registerProperty({name: '--transform-function', syntax: '<transform-function>', initialValue: 'rotate(42deg)', inherits: false});
|
|
CSS.registerProperty({name: '--single-transform-list', syntax: '<transform-list>', initialValue: 'scale(calc(2 + 2))', inherits: false});
|
|
CSS.registerProperty({name: '--multiple-transform-list', syntax: '<transform-list>', initialValue: 'scale(calc(2 + 1)) translateX(calc(3px + 1px))', inherits: false});
|
|
|
|
computedStyle = getComputedStyle(target);
|
|
assert_equals(computedStyle.getPropertyValue('--length'), '25px');
|
|
assert_equals(computedStyle.getPropertyValue('--length-percentage'), 'calc(100px + 10%)');
|
|
assert_equals(computedStyle.getPropertyValue('--inherited-color'), 'rgb(255, 192, 203)');
|
|
assert_equals(computedStyle.getPropertyValue('--non-inherited-color'), 'rgb(128, 0, 128)');
|
|
assert_equals(computedStyle.getPropertyValue('--transform-function'), 'rotate(42deg)');
|
|
assert_equals(computedStyle.getPropertyValue('--single-transform-list'), 'scale(4)');
|
|
assert_equals(computedStyle.getPropertyValue('--multiple-transform-list'), 'scale(3) translateX(4px)');
|
|
|
|
assert_equals(computedStyle.backgroundColor, 'rgb(255, 192, 203)');
|
|
assert_equals(computedStyle.color, 'rgb(128, 0, 128)');
|
|
}, "Initial values of registered properties can be referenced when no custom properties are explicitly set.");
|
|
</script>
|