mirror of
https://github.com/servo/servo.git
synced 2025-06-25 17:44:33 +01:00
232 lines
5.9 KiB
HTML
232 lines
5.9 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>
|
|
<div id=outer>
|
|
<div id=div></div>
|
|
</div>
|
|
<script>
|
|
|
|
test_with_at_property({
|
|
syntax: '"<length>"',
|
|
inherits: false,
|
|
initialValue: '1px'
|
|
}, (name) => {
|
|
assert_equals(getComputedStyle(div).getPropertyValue(name), '1px');
|
|
}, '@property determines the registration when uncontested');
|
|
|
|
test_with_at_property({
|
|
syntax: '"<length>"',
|
|
inherits: false,
|
|
initialValue: '2px'
|
|
}, (name) => {
|
|
CSS.registerProperty({
|
|
name: name,
|
|
syntax: '<color>',
|
|
inherits: false,
|
|
initialValue: 'green'
|
|
});
|
|
assert_equals(getComputedStyle(div).getPropertyValue(name), 'rgb(0, 128, 0)');
|
|
}, 'CSS.registerProperty wins over @property');
|
|
|
|
test_with_at_property({
|
|
syntax: '"<length>"',
|
|
inherits: false,
|
|
initialValue: '3px'
|
|
}, (name1) => {
|
|
with_at_property({
|
|
name: name1,
|
|
syntax: '"<integer>"',
|
|
inherits: false,
|
|
initialValue: '6'
|
|
}, (name2) => {
|
|
assert_equals(name1, name2);
|
|
assert_equals(getComputedStyle(div).getPropertyValue(name2), '6');
|
|
});
|
|
}, '@property later in document order wins');
|
|
|
|
test(() => {
|
|
let name = generate_name();
|
|
|
|
with_style_node(`
|
|
@property ${name} {
|
|
syntax: "<length>";
|
|
inherits: false;
|
|
initial-value: 4px;
|
|
}
|
|
|
|
@property ${name} {
|
|
syntax: "<color>";
|
|
inherits: false;
|
|
initial-value: red;
|
|
}
|
|
`, () => {
|
|
assert_equals(getComputedStyle(div).getPropertyValue(name), 'rgb(255, 0, 0)');
|
|
});
|
|
}, '@property later in stylesheet wins');
|
|
|
|
test(() => {
|
|
let name = generate_name();
|
|
CSS.registerProperty({
|
|
name: name,
|
|
syntax: '<color>',
|
|
inherits: false,
|
|
initialValue: 'green'
|
|
});
|
|
assert_equals(getComputedStyle(div).getPropertyValue(name), 'rgb(0, 128, 0)');
|
|
}, 'CSS.registerProperty determines the registration when uncontested');
|
|
|
|
test(() => {
|
|
let name = generate_name();
|
|
|
|
// ${name} is initially not registered, hence has no initial value.
|
|
assert_equals(getComputedStyle(div).getPropertyValue(name), '');
|
|
|
|
with_at_property({
|
|
name: name,
|
|
syntax: '"<length>"',
|
|
inherits: false,
|
|
initialValue: '10px'
|
|
}, () => {
|
|
assert_equals(getComputedStyle(div).getPropertyValue(name), '10px');
|
|
});
|
|
|
|
// When the style node is removed, ${name} should be unregistered again.
|
|
assert_equals(getComputedStyle(div).getPropertyValue(name), '');
|
|
}, '@property registrations are cleared when rule removed');
|
|
|
|
test(() => {
|
|
let name = generate_name();
|
|
|
|
with_style_node(`div { ${name}: calc(1px + 1px); }`, () => {
|
|
// ${name} should be a token sequence at this point.
|
|
assert_equals(getComputedStyle(div).getPropertyValue(name), 'calc(1px + 1px)');
|
|
|
|
with_at_property({
|
|
name: name,
|
|
syntax: '"<length>"',
|
|
inherits: false,
|
|
initialValue: '0px'
|
|
}, () => {
|
|
// ${name} is now a <length>, hence the calc() should be simplified.
|
|
assert_equals(getComputedStyle(div).getPropertyValue(name), '2px');
|
|
});
|
|
|
|
// ${name} should be a token sequence again.
|
|
assert_equals(getComputedStyle(div).getPropertyValue(name), 'calc(1px + 1px)');
|
|
});
|
|
}, 'Computed value becomes token sequence when @property is removed');
|
|
|
|
test(() => {
|
|
let name = generate_name();
|
|
|
|
with_style_node(`#outer { ${name}: 10px; }`, () => {
|
|
assert_equals(getComputedStyle(div).getPropertyValue(name), '10px');
|
|
|
|
with_at_property({
|
|
name: name,
|
|
syntax: '"<length>"',
|
|
inherits: false,
|
|
initialValue: '0px'
|
|
}, () => {
|
|
// ${name} is no longer inherited
|
|
assert_equals(getComputedStyle(div).getPropertyValue(name), '0px');
|
|
});
|
|
|
|
assert_equals(getComputedStyle(div).getPropertyValue(name), '10px');
|
|
});
|
|
}, 'Inherited status is reflected in computed styles when @property is removed');
|
|
|
|
test(() => {
|
|
let name = generate_name();
|
|
|
|
with_style_node(`
|
|
@property ${name} {
|
|
syntax: "<length>";
|
|
inherits: false;
|
|
initial-value: 1px;
|
|
}
|
|
|
|
@property ${name} {
|
|
inherits: false;
|
|
initial-value: green;
|
|
}
|
|
`, () => {
|
|
assert_equals(getComputedStyle(div).getPropertyValue(name), '1px');
|
|
});
|
|
}, 'Invalid @property rule (missing syntax) does not overwrite previous valid rule');
|
|
|
|
test(() => {
|
|
let name = generate_name();
|
|
|
|
with_style_node(`
|
|
@property ${name} {
|
|
syntax: "<length>";
|
|
inherits: false;
|
|
initial-value: 1px;
|
|
}
|
|
|
|
@property ${name} {
|
|
syntax: "<color>";
|
|
initial-value: green;
|
|
}
|
|
`, () => {
|
|
assert_equals(getComputedStyle(div).getPropertyValue(name), '1px');
|
|
});
|
|
}, 'Invalid @property rule (missing inherits descriptor) does not overwrite previous valid rule');
|
|
|
|
test(() => {
|
|
let name = generate_name();
|
|
|
|
with_style_node(`
|
|
@property ${name} {
|
|
syntax: "<length>";
|
|
inherits: false;
|
|
initial-value: 1px;
|
|
}
|
|
|
|
@property ${name} {
|
|
syntax: "<color>";
|
|
inherits: false;
|
|
}
|
|
`, () => {
|
|
assert_equals(getComputedStyle(div).getPropertyValue(name), '1px');
|
|
});
|
|
}, 'Invalid @property rule (missing initial-value) does not overwrite previous valid rule');
|
|
|
|
test(() => {
|
|
let name = generate_name();
|
|
|
|
with_style_node(`
|
|
@property ${name} {
|
|
syntax: "<color>";
|
|
inherits: false;
|
|
}
|
|
|
|
@property ${name} {
|
|
syntax: "<length>";
|
|
inherits: false;
|
|
initial-value: 1px;
|
|
}
|
|
`, () => {
|
|
assert_equals(getComputedStyle(div).getPropertyValue(name), '1px');
|
|
});
|
|
}, 'Previous invalid rule does not prevent valid rule from causing registration');
|
|
|
|
test(() => {
|
|
let name = generate_name();
|
|
|
|
with_style_node(`
|
|
@property ${name} {
|
|
syntax: "<length>";
|
|
inherits: false;
|
|
initial-value: 1px;
|
|
quite-unknown: 200;
|
|
}
|
|
`, () => {
|
|
assert_equals(getComputedStyle(div).getPropertyValue(name), '1px');
|
|
});
|
|
}, 'Unknown descriptors are ignored and do not invalidate rule');
|
|
|
|
</script>
|