mirror of
https://github.com/servo/servo.git
synced 2025-06-27 18:43:40 +01:00
45 lines
2.4 KiB
HTML
45 lines
2.4 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>
|
|
<script src="./resources/utils.js"></script>
|
|
<div id=target></div>
|
|
<script>
|
|
|
|
function test_initial_value(reg, expected) {
|
|
let suffix = reg.inherits === true ? ', inherits' : '';
|
|
test(function(){
|
|
let name = generate_property(reg);
|
|
let actual = getComputedStyle(target).getPropertyValue(name);
|
|
assert_equals(actual, expected);
|
|
}, `Initial value for ${reg.syntax} correctly computed [${reg.initialValue}${suffix}]`);
|
|
}
|
|
|
|
test_initial_value({ syntax: '<length>', initialValue: 'calc(10px + 15px)' }, '25px');
|
|
test_initial_value({ syntax: '<length-percentage>', initialValue: 'calc(1in + 10% + 4px)' }, 'calc(100px + 10%)');
|
|
test_initial_value({ syntax: '<color>', initialValue: 'pink', inherits: true }, 'rgb(255, 192, 203)');
|
|
test_initial_value({ syntax: '<color>', initialValue: 'purple' }, 'rgb(128, 0, 128)');
|
|
test_initial_value({ syntax: '<transform-function>', initialValue: 'rotate(42deg)' }, 'rotate(42deg)');
|
|
test_initial_value({ syntax: '<transform-list>', initialValue: 'scale(calc(2 + 2))' }, 'scale(4)');
|
|
test_initial_value({ syntax: '<transform-list>', initialValue: 'scale(calc(2 + 1)) translateX(calc(3px + 1px))' }, 'scale(3) translateX(4px)');
|
|
|
|
// Test that the initial value of the custom property 'reg' is successfully
|
|
// substituted into 'property'.
|
|
function test_substituted_value(reg, property, expected) {
|
|
let inherits_text = reg.inherits === true ? 'inherited' : 'non-inherited';
|
|
test(function(){
|
|
try {
|
|
let name = generate_property(reg);
|
|
target.style = `${property}:var(${name});`;
|
|
assert_equals(getComputedStyle(target).getPropertyValue(property), expected);
|
|
} finally {
|
|
target.style = '';
|
|
}
|
|
}, `Initial ${inherits_text} value can be substituted [${reg.initialValue}, ${property}]`);
|
|
}
|
|
|
|
test_substituted_value({ syntax: '<color>', initialValue: 'purple', inherits: true }, 'color', 'rgb(128, 0, 128)');
|
|
test_substituted_value({ syntax: '<color>', initialValue: 'pink' }, 'background-color', 'rgb(255, 192, 203)');
|
|
|
|
</script>
|