mirror of
https://github.com/servo/servo.git
synced 2025-10-16 00:10:23 +01:00
134 lines
3.5 KiB
HTML
134 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1/#determining-registration">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="./resources/utils.js"></script>
|
|
<style>
|
|
@property --a {
|
|
syntax: "<length>";
|
|
inherits: false;
|
|
initial-value: 1px;
|
|
}
|
|
|
|
@property --b {
|
|
syntax: "<length>";
|
|
inherits: false;
|
|
initial-value: 2px;
|
|
}
|
|
|
|
@property --c {
|
|
syntax: "<length>";
|
|
inherits: false;
|
|
initial-value: 3px;
|
|
}
|
|
|
|
@property --d {
|
|
syntax: "<length>";
|
|
inherits: false;
|
|
initial-value: 4px;
|
|
}
|
|
|
|
@property --d {
|
|
syntax: "<color>";
|
|
inherits: false;
|
|
initial-value: red;
|
|
}
|
|
</style>
|
|
<style>
|
|
@property --c {
|
|
syntax: "<integer>";
|
|
inherits: false;
|
|
initial-value: 6;
|
|
}
|
|
</style>
|
|
<div id=outer>
|
|
<div id=div></div>
|
|
</div>
|
|
<script>
|
|
|
|
CSS.registerProperty({
|
|
name: '--b',
|
|
syntax: '<color>',
|
|
inherits: false,
|
|
initialValue: 'green'
|
|
});
|
|
|
|
CSS.registerProperty({
|
|
name: '--e',
|
|
syntax: '<color>',
|
|
inherits: false,
|
|
initialValue: 'blue'
|
|
});
|
|
|
|
test(() => {
|
|
assert_equals(getComputedStyle(div).getPropertyValue('--a'), '1px');
|
|
}, '@property determines the registration when uncontested');
|
|
|
|
test(() => {
|
|
assert_equals(getComputedStyle(div).getPropertyValue('--b'), 'rgb(0, 128, 0)');
|
|
}, 'CSS.registerProperty wins over @property');
|
|
|
|
test(() => {
|
|
assert_equals(getComputedStyle(div).getPropertyValue('--c'), '6');
|
|
}, '@property later in document order wins');
|
|
|
|
test(() => {
|
|
assert_equals(getComputedStyle(div).getPropertyValue('--d'), 'rgb(255, 0, 0)');
|
|
}, '@property later in stylesheet wins');
|
|
|
|
test(() => {
|
|
assert_equals(getComputedStyle(div).getPropertyValue('--e'), 'rgb(0, 0, 255)');
|
|
}, 'CSS.registerProperty determines the registration when uncontested');
|
|
|
|
test(() => {
|
|
// --f is initially not registered, hence has no initial value.
|
|
assert_equals(getComputedStyle(div).getPropertyValue('--f'), '');
|
|
|
|
with_at_property({
|
|
name: '--f',
|
|
syntax: '"<length>"',
|
|
inherits: false,
|
|
initialValue: '10px'
|
|
}, () => {
|
|
assert_equals(getComputedStyle(div).getPropertyValue('--f'), '10px');
|
|
});
|
|
|
|
// When the style node is removed, --f should be unregistered again.
|
|
assert_equals(getComputedStyle(div).getPropertyValue('--f'), '');
|
|
}, '@property registrations are cleared when rule removed');
|
|
|
|
test_with_style_node('div { --g: calc(1px + 1px); }', () => {
|
|
// --g should be a token sequence at this point.
|
|
assert_equals(getComputedStyle(div).getPropertyValue('--g'), ' calc(1px + 1px)');
|
|
|
|
with_at_property({
|
|
name: '--g',
|
|
syntax: '"<length>"',
|
|
inherits: false,
|
|
initialValue: '0px'
|
|
}, () => {
|
|
// --g is now a <length>, hence the calc() should be simplified.
|
|
assert_equals(getComputedStyle(div).getPropertyValue('--g'), '2px');
|
|
});
|
|
|
|
// --g should be a token sequence again.
|
|
assert_equals(getComputedStyle(div).getPropertyValue('--g'), ' calc(1px + 1px)');
|
|
}, 'Computed value becomes token sequence when @property is removed');
|
|
|
|
test_with_style_node('#outer { --h: 10px; }', () => {
|
|
assert_equals(getComputedStyle(div).getPropertyValue('--h'), ' 10px');
|
|
|
|
with_at_property({
|
|
name: '--h',
|
|
syntax: '"<length>"',
|
|
inherits: false,
|
|
initialValue: '0px'
|
|
}, () => {
|
|
// --h is no longer inherited
|
|
assert_equals(getComputedStyle(div).getPropertyValue('--h'), '0px');
|
|
});
|
|
|
|
assert_equals(getComputedStyle(div).getPropertyValue('--h'), ' 10px');
|
|
}, 'Inherited status is reflected in computed styles when @property is removed');
|
|
|
|
</script>
|