Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-06 06:00:15 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision b'6275bd0cf6fcfbfb531d371666602ddf4ca6dbf6'

Browse source
This commit is contained in:
WPT Sync Bot 2022-12-16 01:28:46 +00:00
parent 2a45f247c4
commit afd92e9e80
214 changed files with 6026 additions and 531 deletions
Download patch file Download diff file Expand all files Collapse all files

57
tests/wpt/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-angle.html Normal file
View file

@ -0,0 +1,57 @@
<!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="target"></div>
<script>
animation_test({
syntax: "<angle>",
inherits: false,
initialValue: "0deg"
}, {
keyframes: ["100deg", "200deg"],
expected: "150deg"
}, 'Animating a custom property of type <angle>');
animation_test({
syntax: "<angle>",
inherits: false,
initialValue: "100deg"
}, {
keyframes: "200deg",
expected: "150deg"
}, 'Animating a custom property of type <angle> with a single keyframe');
animation_test({
syntax: "<angle>",
inherits: false,
initialValue: "100deg"
}, {
composite: "add",
keyframes: ["200deg", "300deg"],
expected: "350deg"
}, 'Animating a custom property of type <angle> with additivity');
animation_test({
syntax: "<angle>",
inherits: false,
initialValue: "100deg"
}, {
composite: "add",
keyframes: "300deg",
expected: "250deg"
}, 'Animating a custom property of type <angle> with a single keyframe and additivity');
animation_test({
syntax: "<angle>",
inherits: false,
initialValue: "100deg"
}, {
iterationComposite: "accumulate",
keyframes: ["0deg", "100deg"],
expected: "250deg"
}, 'Animating a custom property of type <angle> with iterationComposite');
</script>

57
tests/wpt/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-color.html Normal file
View file

@ -0,0 +1,57 @@
<!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="target"></div>
<script>
animation_test({
syntax: "<color>",
inherits: false,
initialValue: "black"
}, {
keyframes: ["rgb(100, 100, 100)", "rgb(200, 200, 200)"],
expected: "rgb(150, 150, 150)"
}, 'Animating a custom property of type <color>');
animation_test({
syntax: "<color>",
inherits: false,
initialValue: "rgb(100, 100, 100)"
}, {
keyframes: "rgb(200, 200, 200)",
expected: "rgb(150, 150, 150)"
}, 'Animating a custom property of type <color> with a single keyframe');
animation_test({
syntax: "<color>",
inherits: false,
initialValue: "rgb(100, 100, 100)"
}, {
composite: "add",
keyframes: ["rgb(50, 50, 50)", "rgb(150, 150, 150)"],
expected: "rgb(200, 200, 200)"
}, 'Animating a custom property of type <color> with additivity');
animation_test({
syntax: "<color>",
inherits: false,
initialValue: "rgb(100, 100, 100)"
}, {
composite: "add",
keyframes: "rgb(150, 150, 150)",
expected: "rgb(175, 175, 175)"
}, 'Animating a custom property of type <color> with a single keyframe and additivity');
animation_test({
syntax: "<color>",
inherits: false,
initialValue: "black"
}, {
iterationComposite: "accumulate",
keyframes: ["rgb(0, 0, 0)", "rgb(100, 100, 100)"],
expected: "rgb(250, 250, 250)"
}, 'Animating a custom property of type <color> with iterationComposite');
</script>

11
tests/wpt/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-custom-ident.html Normal file
View file

@ -0,0 +1,11 @@
<!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="target"></div>
<script>
discrete_animation_test("<custom-ident>", "from", "to");
</script>

11
tests/wpt/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-image.html Normal file
View file

@ -0,0 +1,11 @@
<!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="target"></div>
<script>
discrete_animation_test("<image>", 'url("https://example.com/from")', 'url("https://example.com/to")');
</script>

29
tests/wpt/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-inherited-used-by-standard-property.html Normal file
View file

@ -0,0 +1,29 @@
<!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="container">
<div id="target"></div>
</div>
<script>
test(() => {
CSS.registerProperty({
name: "--my-length",
syntax: "<length>",
inherits: true,
initialValue: "0px"
});
target.style.marginLeft = "var(--my-length)";
const duration = 1000;
const animation = container.animate({ "--my-length": "100px" }, duration);
animation.pause();
animation.currentTime = duration / 4;
assert_equals(getComputedStyle(target).marginLeft, "25px");
}, "Animating an inherited CSS variable on a parent is reflected on a standard property using that variable as a value on a child");
</script>

57
tests/wpt/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-integer.html Normal file
View file

@ -0,0 +1,57 @@
<!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="target"></div>
<script>
animation_test({
syntax: "<integer>",
inherits: false,
initialValue: 0
}, {
keyframes: [100, 200],
expected: "150"
}, 'Animating a custom property of type <integer>');
animation_test({
syntax: "<integer>",
inherits: false,
initialValue: 100
}, {
keyframes: 200,
expected: "150"
}, 'Animating a custom property of type <integer> with a single keyframe');
animation_test({
syntax: "<integer>",
inherits: false,
initialValue: 100
}, {
composite: "add",
keyframes: [200, 300],
expected: "350"
}, 'Animating a custom property of type <integer> with additivity');
animation_test({
syntax: "<integer>",
inherits: false,
initialValue: 100
}, {
composite: "add",
keyframes: 300,
expected: "250"
}, 'Animating a custom property of type <integer> with a single keyframe and additivity');
animation_test({
syntax: "<integer>",
inherits: false,
initialValue: 100
}, {
iterationComposite: "accumulate",
keyframes: [0, 100],
expected: "250"
}, 'Animating a custom property of type <integer> with iterationComposite');
</script>

57
tests/wpt/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-length-percentage.html Normal file
View file

@ -0,0 +1,57 @@
<!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="target"></div>
<script>
animation_test({
syntax: "<length-percentage>",
inherits: false,
initialValue: "0px"
}, {
keyframes: ["100px", "100%"],
expected: "calc(50% + 50px)"
}, 'Animating a custom property of type <length-percentage>');
animation_test({
syntax: "<length-percentage>",
inherits: false,
initialValue: "100px"
}, {
keyframes: "100%",
expected: "calc(50% + 50px)"
}, 'Animating a custom property of type <length-percentage> with a single keyframe');
animation_test({
syntax: "<length-percentage>",
inherits: false,
initialValue: "100px"
}, {
composite: "add",
keyframes: ["200%", "300%"],
expected: "calc(250% + 100px)"
}, 'Animating a custom property of type <length-percentage> with additivity');
animation_test({
syntax: "<length-percentage>",
inherits: false,
initialValue: "100px"
}, {
composite: "add",
keyframes: "300%",
expected: "calc(150% + 100px)"
}, 'Animating a custom property of type <length-percentage> with a single keyframe and additivity');
animation_test({
syntax: "<length-percentage>",
inherits: false,
initialValue: "100px"
}, {
iterationComposite: "accumulate",
keyframes: ["50px", "100%"],
expected: "calc(250% + 25px)"
}, 'Animating a custom property of type <length-percentage> with iterationComposite');
</script>

57
tests/wpt/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-length.html Normal file
View file

@ -0,0 +1,57 @@
<!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="target"></div>
<script>
animation_test({
syntax: "<length>",
inherits: false,
initialValue: "0px"
}, {
keyframes: ["100px", "200px"],
expected: "150px"
}, 'Animating a custom property of type <length>');
animation_test({
syntax: "<length>",
inherits: false,
initialValue: "100px"
}, {
keyframes: "200px",
expected: "150px"
}, 'Animating a custom property of type <length> with a single keyframe');
animation_test({
syntax: "<length>",
inherits: false,
initialValue: "100px"
}, {
composite: "add",
keyframes: ["200px", "300px"],
expected: "350px"
}, 'Animating a custom property of type <length> with additivity');
animation_test({
syntax: "<length>",
inherits: false,
initialValue: "100px"
}, {
composite: "add",
keyframes: "300px",
expected: "250px"
}, 'Animating a custom property of type <length> with a single keyframe and additivity');
animation_test({
syntax: "<length>",
inherits: false,
initialValue: "100px"
}, {
iterationComposite: "accumulate",
keyframes: ["0px", "100px"],
expected: "250px"
}, 'Animating a custom property of type <length> with iterationComposite');
</script>

27
tests/wpt/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-non-inherited-used-by-standard-property.html Normal file
View file

@ -0,0 +1,27 @@
<!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="target"></div>
<script>
test(() => {
CSS.registerProperty({
name: "--my-length",
syntax: "<length>",
inherits: false,
initialValue: "0px"
});
target.style.marginLeft = "var(--my-length)";
const duration = 1000;
const animation = target.animate({ "--my-length": "100px" }, duration);
animation.pause();
animation.currentTime = duration / 4;
assert_equals(getComputedStyle(target).marginLeft, "25px");
}, "Animating a non-inherited CSS variable is reflected on a standard property using that variable as a value");
</script>

57
tests/wpt/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-number.html Normal file
View file

@ -0,0 +1,57 @@
<!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="target"></div>
<script>
animation_test({
syntax: "<number>",
inherits: false,
initialValue: 0
}, {
keyframes: [100, 200],
expected: "150"
}, 'Animating a custom property of type <number>');
animation_test({
syntax: "<number>",
inherits: false,
initialValue: 100
}, {
keyframes: 200,
expected: "150"
}, 'Animating a custom property of type <number> with a single keyframe');
animation_test({
syntax: "<number>",
inherits: false,
initialValue: 100
}, {
composite: "add",
keyframes: [200, 300],
expected: "350"
}, 'Animating a custom property of type <number> with additivity');
animation_test({
syntax: "<number>",
inherits: false,
initialValue: 100
}, {
composite: "add",
keyframes: 300,
expected: "250"
}, 'Animating a custom property of type <number> with a single keyframe and additivity');
animation_test({
syntax: "<number>",
inherits: false,
initialValue: 100
}, {
iterationComposite: "accumulate",
keyframes: [0, 100],
expected: "250"
}, 'Animating a custom property of type <number> with iterationComposite');
</script>

57
tests/wpt/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-percentage.html Normal file
View file

@ -0,0 +1,57 @@
<!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="target"></div>
<script>
animation_test({
syntax: "<percentage>",
inherits: false,
initialValue: "0%"
}, {
keyframes: ["100%", "200%"],
expected: "150%"
}, 'Animating a custom property of type <percentage>');
animation_test({
syntax: "<percentage>",
inherits: false,
initialValue: "100%"
}, {
keyframes: "200%",
expected: "150%"
}, 'Animating a custom property of type <percentage> with a single keyframe');
animation_test({
syntax: "<percentage>",
inherits: false,
initialValue: "100%"
}, {
composite: "add",
keyframes: ["200%", "300%"],
expected: "350%"
}, 'Animating a custom property of type <percentage> with additivity');
animation_test({
syntax: "<percentage>",
inherits: false,
initialValue: "100%"
}, {
composite: "add",
keyframes: "300%",
expected: "250%"
}, 'Animating a custom property of type <percentage> with a single keyframe and additivity');
animation_test({
syntax: "<percentage>",
inherits: false,
initialValue: "100%"
}, {
iterationComposite: "accumulate",
keyframes: ["0%", "100%"],
expected: "250%"
}, 'Animating a custom property of type <percentage> with iterationComposite');
</script>

57
tests/wpt/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-resolution.html Normal file
View file

@ -0,0 +1,57 @@
<!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="target"></div>
<script>
animation_test({
syntax: "<resolution>",
inherits: false,
initialValue: "0dppx"
}, {
keyframes: ["100dppx", "200dppx"],
expected: "150dppx"
}, 'Animating a custom property of type <resolution>');
animation_test({
syntax: "<resolution>",
inherits: false,
initialValue: "100dppx"
}, {
keyframes: "200dppx",
expected: "150dppx"
}, 'Animating a custom property of type <resolution> with a single keyframe');
animation_test({
syntax: "<resolution>",
inherits: false,
initialValue: "100dppx"
}, {
composite: "add",
keyframes: ["200dppx", "300dppx"],
expected: "350dppx"
}, 'Animating a custom property of type <resolution> with additivity');
animation_test({
syntax: "<resolution>",
inherits: false,
initialValue: "100dppx"
}, {
composite: "add",
keyframes: "300dppx",
expected: "250dppx"
}, 'Animating a custom property of type <resolution> with a single keyframe and additivity');
animation_test({
syntax: "<resolution>",
inherits: false,
initialValue: "100dppx"
}, {
iterationComposite: "accumulate",
keyframes: ["0dppx", "100dppx"],
expected: "250dppx"
}, 'Animating a custom property of type <resolution> with iterationComposite');
</script>

57
tests/wpt/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-time.html Normal file
View file

@ -0,0 +1,57 @@
<!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="target"></div>
<script>
animation_test({
syntax: "<time>",
inherits: false,
initialValue: "0s"
}, {
keyframes: ["100s", "200s"],
expected: "150s"
}, 'Animating a custom property of type <time>');
animation_test({
syntax: "<time>",
inherits: false,
initialValue: "100s"
}, {
keyframes: "200s",
expected: "150s"
}, 'Animating a custom property of type <time> with a single keyframe');
animation_test({
syntax: "<time>",
inherits: false,
initialValue: "100s"
}, {
composite: "add",
keyframes: ["200s", "300s"],
expected: "350s"
}, 'Animating a custom property of type <time> with additivity');
animation_test({
syntax: "<time>",
inherits: false,
initialValue: "100s"
}, {
composite: "add",
keyframes: "300s",
expected: "250s"
}, 'Animating a custom property of type <time> with a single keyframe and additivity');
animation_test({
syntax: "<time>",
inherits: false,
initialValue: "100s"
}, {
iterationComposite: "accumulate",
keyframes: ["0s", "100s"],
expected: "250s"
}, 'Animating a custom property of type <time> with iterationComposite');
</script>

11
tests/wpt/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-url.html Normal file
View file

@ -0,0 +1,11 @@
<!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="target"></div>
<script>
discrete_animation_test("<url>", 'url("https://example.com/from")', 'url("https://example.com/to")');
</script>

54
tests/wpt/web-platform-tests/css/css-properties-values-api/resources/utils.js
View file

@ -124,3 +124,57 @@ function test_with_at_property(desc, fn, description) {
function test_with_style_node(text, fn, description) {
test(() => with_style_node(text, fn), description);
}
function animation_test(property, values, description) {
const name = generate_name();
property.name = name;
CSS.registerProperty(property);
test(() => {
const duration = 1000;
const keyframes = {};
keyframes[name] = values.keyframes;
const iterations = 3;
const composite = values.composite || "replace";
const iterationComposite = values.iterationComposite || "replace";
const animation = target.animate(keyframes, { composite, iterationComposite, iterations, duration });
animation.pause();
// We seek to the middle of the third iteration which will allow to test cases where
// iterationComposite is set to something other than "replace".
animation.currentTime = duration * 2.5;
assert_equals(getComputedStyle(target).getPropertyValue(name), values.expected);
}, description);
};
function discrete_animation_test(syntax, fromValue, toValue) {
test(() => {
const name = generate_name();
CSS.registerProperty({
name,
syntax,
inherits: false,
initialValue: fromValue
});
const duration = 1000;
const keyframes = [];
keyframes[name] = toValue;
const animation = target.animate(keyframes, duration);
animation.pause();
const checkAtProgress = (progress, expected) => {
animation.currentTime = duration * 0.25;
assert_equals(getComputedStyle(target).getPropertyValue(name), fromValue, `The correct value is used at progress = ${progress}`);
};
checkAtProgress(0, fromValue);
checkAtProgress(0.25, fromValue);
checkAtProgress(0.49, fromValue);
checkAtProgress(0.5, toValue);
checkAtProgress(0.75, toValue);
checkAtProgress(1, toValue);
}, `Animating a custom property of type ${syntax} is discrete`);
}