mirror of
https://github.com/servo/servo.git
synced 2025-08-10 16:05:43 +01:00
Update web-platform-tests to revision 78eae724c61bb01d858a01a324363e997ac66851
This commit is contained in:
WPT Sync Bot
parent
537e575d3d
commit
55139554ba
366 changed files with 10291 additions and 2008 deletions
|
|
@ -187,4 +187,112 @@ test_with_at_property({
|
|||
}
|
||||
}, 'Ongoing animation picks up redeclared meaning of \'unset\'');
|
||||
|
||||
test_with_at_property({
|
||||
syntax: '"<color>"',
|
||||
inherits: false,
|
||||
initialValue: 'red'
|
||||
}, (name) => {
|
||||
try {
|
||||
assert_equals(getComputedStyle(div).getPropertyValue(name), 'rgb(255, 0, 0)');
|
||||
div.style = `transition: ${name} steps(2, start) 100s; ${name}: blue`;
|
||||
assert_equals(getComputedStyle(div).getPropertyValue(name), 'rgb(128, 0, 128)');
|
||||
} finally {
|
||||
div.style = '';
|
||||
}
|
||||
}, 'Transitioning from initial value');
|
||||
|
||||
test_with_at_property({
|
||||
syntax: '"<color>"',
|
||||
inherits: false,
|
||||
initialValue: 'red'
|
||||
}, (name) => {
|
||||
try {
|
||||
div.style = `${name}: blue;`;
|
||||
assert_equals(getComputedStyle(div).getPropertyValue(name), 'rgb(0, 0, 255)');
|
||||
div.style = `transition: ${name} steps(2, start) 100s; ${name}: green`;
|
||||
assert_equals(getComputedStyle(div).getPropertyValue(name), 'rgb(0, 64, 128)');
|
||||
} finally {
|
||||
div.style = '';
|
||||
}
|
||||
}, 'Transitioning from specified value');
|
||||
|
||||
test_with_at_property({
|
||||
syntax: '"<length>"',
|
||||
inherits: false,
|
||||
initialValue: '100px'
|
||||
}, (name) => {
|
||||
with_style_node(`div { transition: ${name} steps(2, start) 100s; }`, () => {
|
||||
assert_equals(getComputedStyle(div).getPropertyValue(name), '100px');
|
||||
// Re-declaring the property with a different initial value effectively
|
||||
// means the computed value has changed. This means we should transition
|
||||
// from the old initial value to the new initial value.
|
||||
with_at_property({
|
||||
name: name,
|
||||
syntax: '"<length>"',
|
||||
inherits: false,
|
||||
initialValue: '200px'
|
||||
}, () => {
|
||||
assert_equals(getComputedStyle(div).getPropertyValue(name), '150px');
|
||||
});
|
||||
});
|
||||
}, 'Transition triggered by initial value change');
|
||||
|
||||
test_with_at_property({
|
||||
syntax: '"<length>"',
|
||||
inherits: false,
|
||||
initialValue: '100px'
|
||||
}, (name) => {
|
||||
with_style_node(`div { transition: ${name} steps(2, start) 100s; }`, () => {
|
||||
assert_equals(getComputedStyle(div).getPropertyValue(name), '100px');
|
||||
with_at_property({
|
||||
name: name,
|
||||
syntax: '"<color>"',
|
||||
inherits: false,
|
||||
initialValue: 'green'
|
||||
}, () => {
|
||||
assert_equals(getComputedStyle(div).getPropertyValue(name), 'rgb(0, 128, 0)');
|
||||
});
|
||||
});
|
||||
}, 'No transition when changing types');
|
||||
|
||||
test(() => {
|
||||
let name = generate_name();
|
||||
with_style_node(`div { ${name}: 100px; transition: ${name} steps(2, start) 100s; }`, () => {
|
||||
assert_equals(getComputedStyle(div).getPropertyValue(name), ' 100px');
|
||||
|
||||
let style1 = document.createElement('style');
|
||||
style1.textContent = `
|
||||
@property ${name} {
|
||||
syntax: "<length>";
|
||||
inherits: false;
|
||||
initial-value: 200px;
|
||||
}
|
||||
`;
|
||||
|
||||
let style2 = document.createElement('style');
|
||||
style2.textContent = `div { ${name}: 400px; }`;
|
||||
|
||||
try {
|
||||
// Register the property:
|
||||
document.body.append(style1);
|
||||
// The token sequence ' 100px' is now interpreted as a length '100px'.
|
||||
assert_equals(getComputedStyle(div).getPropertyValue(name), '100px');
|
||||
|
||||
// Change the computed value:
|
||||
document.body.append(style2);
|
||||
// This should cause an interpolation between 100px and 400px:
|
||||
assert_equals(getComputedStyle(div).getPropertyValue(name), '250px');
|
||||
|
||||
// In the middle of the transition above, remove the @property rule
|
||||
// (making the computed value a token sequence again). We should snap
|
||||
// to the new token sequence.
|
||||
style1.remove();
|
||||
assert_equals(getComputedStyle(div).getPropertyValue(name), ' 400px');
|
||||
} finally {
|
||||
style1.remove();
|
||||
style2.remove();
|
||||
}
|
||||
});
|
||||
}, 'No transition when removing @property rule');
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,64 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1/#css-style-value-reification">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="./resources/utils.js"></script>
|
||||
<div id=div></div>
|
||||
<script>
|
||||
|
||||
test(() => {
|
||||
let name = generate_name();
|
||||
with_style_node(`div { ${name}: 100px; }`, () => {
|
||||
// Before registering the property, ${name} should reify as a
|
||||
// a token sequence.
|
||||
assert_equals(div.computedStyleMap().get(name).constructor.name, 'CSSUnparsedValue');
|
||||
assert_equals(div.computedStyleMap().get(name).toString(), ' 100px');
|
||||
|
||||
with_at_property({
|
||||
name: name,
|
||||
syntax: '"<length>"',
|
||||
inherits: false,
|
||||
initialValue: '0px'
|
||||
}, () => {
|
||||
// After registering, it should reify as a <length>.
|
||||
assert_equals(div.computedStyleMap().get(name).constructor.name, 'CSSUnitValue');
|
||||
assert_equals(div.computedStyleMap().get(name).value, 100);
|
||||
assert_equals(div.computedStyleMap().get(name).unit, 'px');
|
||||
});
|
||||
|
||||
// After @property is removed, the computed value is once again a token
|
||||
// sequence.
|
||||
assert_equals(div.computedStyleMap().get(name).constructor.name, 'CSSUnparsedValue');
|
||||
assert_equals(div.computedStyleMap().get(name).toString(), ' 100px');
|
||||
});
|
||||
}, 'Properties declared with @property reify correctly');
|
||||
|
||||
test(() => {
|
||||
let name = generate_name();
|
||||
// 0 is valid as a both <length> and <integer>, which reify differently.
|
||||
with_style_node(`div { ${name}: 0; }`, () => {
|
||||
with_at_property({
|
||||
name: name,
|
||||
syntax: '"<length>"',
|
||||
inherits: false,
|
||||
initialValue: '1000px'
|
||||
}, () => {
|
||||
assert_equals(div.computedStyleMap().get(name).constructor.name, 'CSSUnitValue');
|
||||
assert_equals(div.computedStyleMap().get(name).value, 0);
|
||||
assert_equals(div.computedStyleMap().get(name).unit, 'px');
|
||||
|
||||
with_at_property({
|
||||
name: name,
|
||||
syntax: '"<integer>"',
|
||||
inherits: false,
|
||||
initialValue: '1000'
|
||||
}, () => {
|
||||
assert_equals(div.computedStyleMap().get(name).constructor.name, 'CSSUnitValue');
|
||||
assert_equals(div.computedStyleMap().get(name).value, 0);
|
||||
assert_equals(div.computedStyleMap().get(name).unit, 'number');
|
||||
});
|
||||
});
|
||||
});
|
||||
}, 'Re-declaring a property with a different type affects reification');
|
||||
|
||||
</script>
|
||||
|
|
@ -3,132 +3,230 @@
|
|||
<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>',
|
||||
test_with_at_property({
|
||||
syntax: '"<length>"',
|
||||
inherits: false,
|
||||
initialValue: 'green'
|
||||
});
|
||||
|
||||
CSS.registerProperty({
|
||||
name: '--e',
|
||||
syntax: '<color>',
|
||||
inherits: false,
|
||||
initialValue: 'blue'
|
||||
});
|
||||
|
||||
test(() => {
|
||||
assert_equals(getComputedStyle(div).getPropertyValue('--a'), '1px');
|
||||
initialValue: '1px'
|
||||
}, (name) => {
|
||||
assert_equals(getComputedStyle(div).getPropertyValue(name), '1px');
|
||||
}, '@property determines the registration when uncontested');
|
||||
|
||||
test(() => {
|
||||
assert_equals(getComputedStyle(div).getPropertyValue('--b'), 'rgb(0, 128, 0)');
|
||||
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(() => {
|
||||
assert_equals(getComputedStyle(div).getPropertyValue('--c'), '6');
|
||||
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(() => {
|
||||
assert_equals(getComputedStyle(div).getPropertyValue('--d'), 'rgb(255, 0, 0)');
|
||||
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(() => {
|
||||
assert_equals(getComputedStyle(div).getPropertyValue('--e'), 'rgb(0, 0, 255)');
|
||||
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(() => {
|
||||
// --f is initially not registered, hence has no initial value.
|
||||
assert_equals(getComputedStyle(div).getPropertyValue('--f'), '');
|
||||
let name = generate_name();
|
||||
|
||||
// ${name} is initially not registered, hence has no initial value.
|
||||
assert_equals(getComputedStyle(div).getPropertyValue(name), '');
|
||||
|
||||
with_at_property({
|
||||
name: '--f',
|
||||
name: name,
|
||||
syntax: '"<length>"',
|
||||
inherits: false,
|
||||
initialValue: '10px'
|
||||
}, () => {
|
||||
assert_equals(getComputedStyle(div).getPropertyValue('--f'), '10px');
|
||||
assert_equals(getComputedStyle(div).getPropertyValue(name), '10px');
|
||||
});
|
||||
|
||||
// When the style node is removed, --f should be unregistered again.
|
||||
assert_equals(getComputedStyle(div).getPropertyValue('--f'), '');
|
||||
// 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_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)');
|
||||
test(() => {
|
||||
let name = generate_name();
|
||||
|
||||
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');
|
||||
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)');
|
||||
});
|
||||
|
||||
// --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');
|
||||
test(() => {
|
||||
let name = generate_name();
|
||||
|
||||
with_at_property({
|
||||
name: '--h',
|
||||
syntax: '"<length>"',
|
||||
inherits: false,
|
||||
initialValue: '0px'
|
||||
}, () => {
|
||||
// --h is no longer inherited
|
||||
assert_equals(getComputedStyle(div).getPropertyValue('--h'), '0px');
|
||||
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');
|
||||
});
|
||||
|
||||
assert_equals(getComputedStyle(div).getPropertyValue('--h'), ' 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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue