mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-11 21:58:41 +02:00
7487c399d3
Automatic update from web-platform-tests [@property] Improve test coverage for valid/invalid rules This adds new tests that verify that invalid rules are ignored, and don't affect other valid rules. I also rewrote this test file to use utils.js more liberally. It makes individual tests harder to understand for the uninitiated, but it scales so much better as the number of test functions increases. Bug: 973830 Change-Id: Ie19d85042a0475180cc4bbee4ad202ea08adba73 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2161005 Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org> Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Cr-Commit-Position: refs/heads/master@{#761969} -- wpt-commits: 594e55b48c52c20ab5806b9e60b8cfcc742c5ae6 wpt-pr: 23167
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>
|