mirror of
https://github.com/servo/servo.git
synced 2025-10-16 00:10:23 +01:00
190 lines
5.3 KiB
HTML
190 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
|
|
<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: '0px'
|
|
}, (name) => {
|
|
with_style_node(`
|
|
@keyframes test {
|
|
from { ${name}: 100px; }
|
|
to { ${name}: 200px; }
|
|
}
|
|
#div { animation: test 100s -50s linear; }
|
|
`, () => {
|
|
assert_equals(getComputedStyle(div).getPropertyValue(name), '150px');
|
|
});
|
|
}, '@keyframes works with @property');
|
|
|
|
test_with_at_property({
|
|
syntax: '"<length>"',
|
|
inherits: false,
|
|
initialValue: '0px'
|
|
}, (name) => {
|
|
with_style_node(`
|
|
@property ${name} {
|
|
syntax: "<color>";
|
|
inherits: false;
|
|
initial-value: black;
|
|
}
|
|
@keyframes test {
|
|
from { ${name}: rgb(100, 100, 100); }
|
|
to { ${name}: rgb(200, 200, 200); }
|
|
}
|
|
#div { animation: test 100s -50s linear; }
|
|
`, () => {
|
|
assert_equals(getComputedStyle(div).getPropertyValue(name), 'rgb(150, 150, 150)');
|
|
});
|
|
}, '@keyframes picks up the latest @property in the document');
|
|
|
|
test_with_at_property({
|
|
syntax: '"<length>"',
|
|
inherits: false,
|
|
initialValue: '0px'
|
|
}, (name) => {
|
|
// These keyframes are initially invalid for the declared custom property.
|
|
let animation = div.animate([
|
|
{ [name]: 'rgb(100, 100, 100)'},
|
|
{ [name]: 'rgb(200, 200, 200)'},
|
|
], { duration: 10000, delay: -5000, easing: 'linear' });
|
|
let cs = getComputedStyle(div);
|
|
assert_equals(cs.getPropertyValue(name), '0px');
|
|
|
|
// Redeclare the property as a <color>, effectively making the existing
|
|
// keyframes valid.
|
|
with_at_property({
|
|
name: name,
|
|
syntax: '"<color>"',
|
|
inherits: false,
|
|
initialValue: 'black'
|
|
}, (name) => {
|
|
assert_equals(cs.getPropertyValue(name), 'rgb(150, 150, 150)');
|
|
});
|
|
|
|
animation.finish();
|
|
}, 'Ongoing animation picks up redeclared custom property');
|
|
|
|
test_with_at_property({
|
|
syntax: '"<length>"',
|
|
inherits: false,
|
|
initialValue: '0px'
|
|
}, (name) => {
|
|
// These keyframes are initially invalid for the declared custom property.
|
|
let animation = div.animate([
|
|
{ [name]: 'rgb(100, 100, 100)'},
|
|
{ [name]: 'rgb(200, 200, 200)'},
|
|
], { duration: 10000, delay: -5000, easing: 'linear' });
|
|
let cs = getComputedStyle(div);
|
|
assert_equals(cs.getPropertyValue(name), '0px');
|
|
|
|
// Setting the keyframes to something that matches <length> makes the
|
|
// interpolation valid.
|
|
animation.effect.setKeyframes([
|
|
{[name]: '100px'},
|
|
{[name]: '200px'}
|
|
]);
|
|
assert_equals(cs.getPropertyValue(name), '150px');
|
|
|
|
animation.finish();
|
|
}, 'Ongoing animation matches new keyframes against the current registration');
|
|
|
|
test_with_at_property({
|
|
syntax: '"<length>"',
|
|
inherits: false,
|
|
initialValue: '0px'
|
|
}, (name) => {
|
|
let animation = div.animate([
|
|
{ [name]: 'initial'},
|
|
{ [name]: '400px'},
|
|
], { duration: 10000, delay: -5000, easing: 'linear' });
|
|
let cs = getComputedStyle(div);
|
|
assert_equals(cs.getPropertyValue(name), '200px');
|
|
|
|
// Change initial value.
|
|
with_at_property({
|
|
name: name,
|
|
syntax: '"<length>"',
|
|
inherits: false,
|
|
initialValue: '100px'
|
|
}, (name) => {
|
|
assert_equals(cs.getPropertyValue(name), '250px');
|
|
});
|
|
|
|
animation.finish();
|
|
}, 'Ongoing animation picks up redeclared intial value');
|
|
|
|
test_with_at_property({
|
|
syntax: '"<length>"',
|
|
inherits: false,
|
|
initialValue: '0px'
|
|
}, (name) => {
|
|
try {
|
|
document.body.style = `${name}: 100px`;
|
|
// Note that 'inherit' here refers to #outer, which has the initial
|
|
// value. (#outer did not inherit from body, since the property is not
|
|
// yet declared as inherited).
|
|
let animation = div.animate([
|
|
{ [name]: 'inherit'},
|
|
{ [name]: '400px'},
|
|
], { duration: 10000, delay: -5000, easing: 'linear' });
|
|
let cs = getComputedStyle(div);
|
|
assert_equals(cs.getPropertyValue(name), '200px');
|
|
|
|
// Change inherits to 'true'. The value should now propagate from body
|
|
// to #outer.
|
|
with_at_property({
|
|
name: name,
|
|
syntax: '"<length>"',
|
|
inherits: true,
|
|
initialValue: '0px'
|
|
}, (name) => {
|
|
assert_equals(cs.getPropertyValue(name), '250px');
|
|
});
|
|
|
|
animation.finish();
|
|
} finally {
|
|
document.body.style = '';
|
|
}
|
|
}, 'Ongoing animation picks up redeclared inherits flag');
|
|
|
|
test_with_at_property({
|
|
syntax: '"<length>"',
|
|
inherits: false,
|
|
initialValue: '0px'
|
|
}, (name) => {
|
|
try {
|
|
outer.style = `${name}: 100px`;
|
|
// 'unset' should take the initial value (not the value from #outer), since
|
|
// the property is not declared as inherited.
|
|
let animation = div.animate([
|
|
{ [name]: 'unset'},
|
|
{ [name]: '400px'},
|
|
], { duration: 10000, delay: -5000, easing: 'linear' });
|
|
let cs = getComputedStyle(div);
|
|
assert_equals(cs.getPropertyValue(name), '200px');
|
|
|
|
// Change inherits to 'true'. 'unset' now refers to #outer's value.
|
|
with_at_property({
|
|
name: name,
|
|
syntax: '"<length>"',
|
|
inherits: true,
|
|
initialValue: '0px'
|
|
}, (name) => {
|
|
assert_equals(cs.getPropertyValue(name), '250px');
|
|
});
|
|
|
|
animation.finish();
|
|
} finally {
|
|
outer.style = '';
|
|
}
|
|
}, 'Ongoing animation picks up redeclared meaning of \'unset\'');
|
|
|
|
</script>
|