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'e9baa05836ecf60b3aec73de9b55cd7c20952f34'

Browse source
This commit is contained in:
WPT Sync Bot 2022-12-18 01:50:39 +00:00
parent dae8d221a1
commit bc35487659
139 changed files with 2501 additions and 1291 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -0,0 +1,59 @@
<!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, 150deg", "200deg, 250deg"],
expected: "150deg, 200deg"
}, 'Animating a custom property of type <angle>#');
animation_test({
syntax: "<angle>#",
inherits: false,
initialValue: "100deg, 150deg"
}, {
keyframes: "200deg, 250deg",
expected: "150deg, 200deg"
}, 'Animating a custom property of type <angle># with a single keyframe');
animation_test({
syntax: "<angle>#",
inherits: false,
initialValue: "50deg, 100deg"
}, {
composite: "add",
keyframes: ["150deg, 200deg", "250deg, 300deg"],
expected: "250deg, 350deg"
}, 'Animating a custom property of type <angle># with additivity');
animation_test({
syntax: "<angle>#",
inherits: false,
initialValue: "50deg, 100deg"
}, {
composite: "add",
keyframes: "150deg, 200deg",
expected: "125deg, 200deg"
}, 'Animating a custom property of type <angle># with a single keyframe and additivity');
animation_test({
syntax: "<angle>#",
inherits: false,
initialValue: "0deg, 0deg"
}, {
iterationComposite: "accumulate",
keyframes: ["0deg, 50deg", "100deg, 100deg"],
expected: "250deg, 275deg"
}, 'Animating a custom property of type <angle># with iterationComposite');
discrete_animation_test("<angle>#", '10deg, 20deg', '30deg', 'Animating a custom property of type <angle># with different lengths is discrete');
</script>

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

@ -0,0 +1,59 @@
<!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 150deg", "200deg 250deg"],
expected: "150deg 200deg"
}, 'Animating a custom property of type <angle>+');
animation_test({
syntax: "<angle>+",
inherits: false,
initialValue: "100deg 150deg"
}, {
keyframes: "200deg 250deg",
expected: "150deg 200deg"
}, 'Animating a custom property of type <angle>+ with a single keyframe');
animation_test({
syntax: "<angle>+",
inherits: false,
initialValue: "50deg 100deg"
}, {
composite: "add",
keyframes: ["150deg 200deg", "250deg 300deg"],
expected: "250deg 350deg"
}, 'Animating a custom property of type <angle>+ with additivity');
animation_test({
syntax: "<angle>+",
inherits: false,
initialValue: "50deg 100deg"
}, {
composite: "add",
keyframes: "150deg 200deg",
expected: "125deg 200deg"
}, 'Animating a custom property of type <angle>+ with a single keyframe and additivity');
animation_test({
syntax: "<angle>+",
inherits: false,
initialValue: "0deg 0deg"
}, {
iterationComposite: "accumulate",
keyframes: ["0deg 50deg", "100deg 100deg"],
expected: "250deg 275deg"
}, 'Animating a custom property of type <angle>+ with iterationComposite');
discrete_animation_test("<angle>+", '10deg 20deg', '30deg', 'Animating a custom property of type <angle>+ with different lengths is discrete');
</script>

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

@ -0,0 +1,59 @@
<!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(150, 150, 150)", "rgb(200, 200, 200), rgb(250, 250, 250)"],
expected: "rgb(150, 150, 150), rgb(200, 200, 200)"
}, 'Animating a custom property of type <color>#');
animation_test({
syntax: "<color>#",
inherits: false,
initialValue: "rgb(100, 100, 100), rgb(150, 150, 150)"
}, {
keyframes: "rgb(200, 200, 200), rgb(250, 250, 250)",
expected: "rgb(150, 150, 150), rgb(200, 200, 200)"
}, 'Animating a custom property of type <color># with a single keyframe');
animation_test({
syntax: "<color>#",
inherits: false,
initialValue: "rgb(100, 100, 100), rgb(150, 150, 150)"
}, {
composite: "add",
keyframes: ["rgb(25, 25, 25), rgb(50, 50, 50)", "rgb(75, 75, 75), rgb(100, 100, 100)"],
expected: "rgb(150, 150, 150), rgb(225, 225, 225)"
}, 'Animating a custom property of type <color># with additivity');
animation_test({
syntax: "<color>#",
inherits: false,
initialValue: "rgb(100, 100, 100), rgb(150, 150, 150)"
}, {
composite: "add",
keyframes: "rgb(50, 50, 50), rgb(100, 100, 100)",
expected: "rgb(125, 125, 125), rgb(200, 200, 200)"
}, '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(0, 0, 0)", "rgb(50, 50, 50), rgb(100, 100, 100)"],
expected: "rgb(125, 125, 125), rgb(250, 250, 250)"
}, 'Animating a custom property of type <color># with iterationComposite');
discrete_animation_test("<color>#", 'rgb(255, 0, 0), rgb(0, 255, 0)', 'rgb(0, 0, 255)', 'Animating a custom property of type <color># with different lengths is discrete');
</script>

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

@ -0,0 +1,59 @@
<!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(150, 150, 150)", "rgb(200, 200, 200) rgb(250, 250, 250)"],
expected: "rgb(150, 150, 150) rgb(200, 200, 200)"
}, 'Animating a custom property of type <color>+');
animation_test({
syntax: "<color>+",
inherits: false,
initialValue: "rgb(100, 100, 100) rgb(150, 150, 150)"
}, {
keyframes: "rgb(200, 200, 200) rgb(250, 250, 250)",
expected: "rgb(150, 150, 150) rgb(200, 200, 200)"
}, 'Animating a custom property of type <color>+ with a single keyframe');
animation_test({
syntax: "<color>+",
inherits: false,
initialValue: "rgb(100, 100, 100) rgb(150, 150, 150)"
}, {
composite: "add",
keyframes: ["rgb(25, 25, 25) rgb(50, 50, 50)", "rgb(75, 75, 75) rgb(100, 100, 100)"],
expected: "rgb(150, 150, 150) rgb(225, 225, 225)"
}, 'Animating a custom property of type <color>+ with additivity');
animation_test({
syntax: "<color>+",
inherits: false,
initialValue: "rgb(100, 100, 100) rgb(150, 150, 150)"
}, {
composite: "add",
keyframes: "rgb(50, 50, 50) rgb(100, 100, 100)",
expected: "rgb(125, 125, 125) rgb(200, 200, 200)"
}, '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(0, 0, 0)", "rgb(50, 50, 50) rgb(100, 100, 100)"],
expected: "rgb(125, 125, 125) rgb(250, 250, 250)"
}, 'Animating a custom property of type <color>+ with iterationComposite');
discrete_animation_test("<color>+", 'rgb(255, 0, 0) rgb(0, 255, 0)', 'rgb(0, 0, 255)', 'Animating a custom property of type <color>+ with different lengths is discrete');
</script>

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

@ -7,5 +7,7 @@
<script>
discrete_animation_test("<custom-ident>", "from", "to");
discrete_animation_test("<custom-ident>+", "from1 from2", "to1 to2");
discrete_animation_test("<custom-ident>#", "from1, from2", "to1, to2");
</script>

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

@ -7,5 +7,7 @@
<script>
discrete_animation_test("<image>", 'url("https://example.com/from")', 'url("https://example.com/to")');
discrete_animation_test("<image>+", 'url("https://example.com/from1") url("https://example.com/from2")', 'url("https://example.com/to1") url("https://example.com/to2")');
discrete_animation_test("<image>#", 'url("https://example.com/from1"), url("https://example.com/from2")', 'url("https://example.com/to1"), url("https://example.com/to2")');
</script>

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

@ -0,0 +1,59 @@
<!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, 150", "200, 250"],
expected: "150, 200"
}, 'Animating a custom property of type <integer>#');
animation_test({
syntax: "<integer>#",
inherits: false,
initialValue: "100, 150"
}, {
keyframes: "200, 250",
expected: "150, 200"
}, 'Animating a custom property of type <integer># with a single keyframe');
animation_test({
syntax: "<integer>#",
inherits: false,
initialValue: "50, 100"
}, {
composite: "add",
keyframes: ["150, 200", "250, 300"],
expected: "250, 350"
}, 'Animating a custom property of type <integer># with additivity');
animation_test({
syntax: "<integer>#",
inherits: false,
initialValue: "50, 100"
}, {
composite: "add",
keyframes: "150, 200",
expected: "125, 200"
}, 'Animating a custom property of type <integer># with a single keyframe and additivity');
animation_test({
syntax: "<integer>#",
inherits: false,
initialValue: "0, 0"
}, {
iterationComposite: "accumulate",
keyframes: ["0, 50", "100, 100"],
expected: "250, 275"
}, 'Animating a custom property of type <integer># with iterationComposite');
discrete_animation_test("<integer>#", '10, 20', '30', 'Animating a custom property of type <integer># with different lengths is discrete');
</script>

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

@ -0,0 +1,59 @@
<!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 150", "200 250"],
expected: "150 200"
}, 'Animating a custom property of type <integer>+');
animation_test({
syntax: "<integer>+",
inherits: false,
initialValue: "100 150"
}, {
keyframes: "200 250",
expected: "150 200"
}, 'Animating a custom property of type <integer>+ with a single keyframe');
animation_test({
syntax: "<integer>+",
inherits: false,
initialValue: "50 100"
}, {
composite: "add",
keyframes: ["150 200", "250 300"],
expected: "250 350"
}, 'Animating a custom property of type <integer>+ with additivity');
animation_test({
syntax: "<integer>+",
inherits: false,
initialValue: "50 100"
}, {
composite: "add",
keyframes: "150 200",
expected: "125 200"
}, 'Animating a custom property of type <integer>+ with a single keyframe and additivity');
animation_test({
syntax: "<integer>+",
inherits: false,
initialValue: "0 0"
}, {
iterationComposite: "accumulate",
keyframes: ["0 50", "100 100"],
expected: "250 275"
}, 'Animating a custom property of type <integer>+ with iterationComposite');
discrete_animation_test("<integer>+", '10 20', '30', 'Animating a custom property of type <integer>+ with different lengths is discrete');
</script>

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

@ -0,0 +1,59 @@
<!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, 150px", "200px, 250px"],
expected: "150px, 200px"
}, 'Animating a custom property of type <length>#');
animation_test({
syntax: "<length>#",
inherits: false,
initialValue: "100px, 150px"
}, {
keyframes: "200px, 250px",
expected: "150px, 200px"
}, 'Animating a custom property of type <length># with a single keyframe');
animation_test({
syntax: "<length>#",
inherits: false,
initialValue: "50px, 100px"
}, {
composite: "add",
keyframes: ["150px, 200px", "250px, 300px"],
expected: "250px, 350px"
}, 'Animating a custom property of type <length># with additivity');
animation_test({
syntax: "<length>#",
inherits: false,
initialValue: "50px, 100px"
}, {
composite: "add",
keyframes: "150px, 200px",
expected: "125px, 200px"
}, 'Animating a custom property of type <length># with a single keyframe and additivity');
animation_test({
syntax: "<length>#",
inherits: false,
initialValue: "0px, 0px"
}, {
iterationComposite: "accumulate",
keyframes: ["0px, 50px", "100px, 100px"],
expected: "250px, 275px"
}, 'Animating a custom property of type <length># with iterationComposite');
discrete_animation_test("<length>#", '10px, 20px', '30px', 'Animating a custom property of type <length># with different lengths is discrete');
</script>

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

@ -0,0 +1,59 @@
<!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, 150%", "200%, 250px"],
expected: "calc(100% + 50px), calc(75% + 125px)"
}, 'Animating a custom property of type <length-percentage>#');
animation_test({
syntax: "<length-percentage>#",
inherits: false,
initialValue: "100px, 150%"
}, {
keyframes: "200%, 250px",
expected: "calc(100% + 50px), calc(75% + 125px)"
}, 'Animating a custom property of type <length-percentage># with a single keyframe');
animation_test({
syntax: "<length-percentage>#",
inherits: false,
initialValue: "50px, 100%"
}, {
composite: "add",
keyframes: ["150%, 200px", "250%, 300px"],
expected: "calc(200% + 50px), calc(100% + 250px)"
}, 'Animating a custom property of type <length-percentage># with additivity');
animation_test({
syntax: "<length-percentage>#",
inherits: false,
initialValue: "50px, 100%"
}, {
composite: "add",
keyframes: "150%, 200px",
expected: "calc(75% + 50px), calc(100% + 100px)"
}, 'Animating a custom property of type <length-percentage># with a single keyframe and additivity');
animation_test({
syntax: "<length-percentage>#",
inherits: false,
initialValue: "0px, 0px"
}, {
iterationComposite: "accumulate",
keyframes: ["0px, 50%", "100%, 100px"],
expected: "250%, calc(25% + 50px)"
}, 'Animating a custom property of type <length-percentage># with iterationComposite');
discrete_animation_test("<length-percentage>#", '10px, 20%', '30px', 'Animating a custom property of type <length-percentage># with different lengths is discrete');
</script>

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

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

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

@ -0,0 +1,59 @@
<!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 150px", "200px 250px"],
expected: "150px 200px"
}, 'Animating a custom property of type <length>+');
animation_test({
syntax: "<length>+",
inherits: false,
initialValue: "100px 150px"
}, {
keyframes: "200px 250px",
expected: "150px 200px"
}, 'Animating a custom property of type <length>+ with a single keyframe');
animation_test({
syntax: "<length>+",
inherits: false,
initialValue: "50px 100px"
}, {
composite: "add",
keyframes: ["150px 200px", "250px 300px"],
expected: "250px 350px"
}, 'Animating a custom property of type <length>+ with additivity');
animation_test({
syntax: "<length>+",
inherits: false,
initialValue: "50px 100px"
}, {
composite: "add",
keyframes: "150px 200px",
expected: "125px 200px"
}, 'Animating a custom property of type <length>+ with a single keyframe and additivity');
animation_test({
syntax: "<length>+",
inherits: false,
initialValue: "0px 0px"
}, {
iterationComposite: "accumulate",
keyframes: ["0px 50px", "100px 100px"],
expected: "250px 275px"
}, 'Animating a custom property of type <length>+ with iterationComposite');
discrete_animation_test("<length>+", '10px 20px', '30px', 'Animating a custom property of type <length>+ with different lengths is discrete');
</script>

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

@ -0,0 +1,59 @@
<!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, 150", "200, 250"],
expected: "150, 200"
}, 'Animating a custom property of type <number>#');
animation_test({
syntax: "<number>#",
inherits: false,
initialValue: "100, 150"
}, {
keyframes: "200, 250",
expected: "150, 200"
}, 'Animating a custom property of type <number># with a single keyframe');
animation_test({
syntax: "<number>#",
inherits: false,
initialValue: "50, 100"
}, {
composite: "add",
keyframes: ["150, 200", "250, 300"],
expected: "250, 350"
}, 'Animating a custom property of type <number># with additivity');
animation_test({
syntax: "<number>#",
inherits: false,
initialValue: "50, 100"
}, {
composite: "add",
keyframes: "150, 200",
expected: "125, 200"
}, 'Animating a custom property of type <number># with a single keyframe and additivity');
animation_test({
syntax: "<number>#",
inherits: false,
initialValue: "0, 0"
}, {
iterationComposite: "accumulate",
keyframes: ["0, 50", "100, 100"],
expected: "250, 275"
}, 'Animating a custom property of type <number># with iterationComposite');
discrete_animation_test("<number>#", '10, 20', '30', 'Animating a custom property of type <number># with different lengths is discrete');
</script>

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

@ -0,0 +1,59 @@
<!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 150", "200 250"],
expected: "150 200"
}, 'Animating a custom property of type <number>+');
animation_test({
syntax: "<number>+",
inherits: false,
initialValue: "100 150"
}, {
keyframes: "200 250",
expected: "150 200"
}, 'Animating a custom property of type <number>+ with a single keyframe');
animation_test({
syntax: "<number>+",
inherits: false,
initialValue: "50 100"
}, {
composite: "add",
keyframes: ["150 200", "250 300"],
expected: "250 350"
}, 'Animating a custom property of type <number>+ with additivity');
animation_test({
syntax: "<number>+",
inherits: false,
initialValue: "50 100"
}, {
composite: "add",
keyframes: "150 200",
expected: "125 200"
}, 'Animating a custom property of type <number>+ with a single keyframe and additivity');
animation_test({
syntax: "<number>+",
inherits: false,
initialValue: "0 0"
}, {
iterationComposite: "accumulate",
keyframes: ["0 50", "100 100"],
expected: "250 275"
}, 'Animating a custom property of type <number>+ with iterationComposite');
discrete_animation_test("<number>+", '10 20', '30', 'Animating a custom property of type <number>+ with different lengths is discrete');
</script>

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

@ -0,0 +1,59 @@
<!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%, 150%", "200%, 250%"],
expected: "150%, 200%"
}, 'Animating a custom property of type <percentage>#');
animation_test({
syntax: "<percentage>#",
inherits: false,
initialValue: "100%, 150%"
}, {
keyframes: "200%, 250%",
expected: "150%, 200%"
}, 'Animating a custom property of type <percentage># with a single keyframe');
animation_test({
syntax: "<percentage>#",
inherits: false,
initialValue: "50%, 100%"
}, {
composite: "add",
keyframes: ["150%, 200%", "250%, 300%"],
expected: "250%, 350%"
}, 'Animating a custom property of type <percentage># with additivity');
animation_test({
syntax: "<percentage>#",
inherits: false,
initialValue: "50%, 100%"
}, {
composite: "add",
keyframes: "150%, 200%",
expected: "125%, 200%"
}, 'Animating a custom property of type <percentage># with a single keyframe and additivity');
animation_test({
syntax: "<percentage>#",
inherits: false,
initialValue: "0%, 0%"
}, {
iterationComposite: "accumulate",
keyframes: ["0%, 50%", "100%, 100%"],
expected: "250%, 275%"
}, 'Animating a custom property of type <percentage># with iterationComposite');
discrete_animation_test("<percentage>#", '10%, 20%', '30%', 'Animating a custom property of type <percentage># with different lengths is discrete');
</script>

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

@ -0,0 +1,59 @@
<!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% 150%", "200% 250%"],
expected: "150% 200%"
}, 'Animating a custom property of type <percentage>+');
animation_test({
syntax: "<percentage>+",
inherits: false,
initialValue: "100% 150%"
}, {
keyframes: "200% 250%",
expected: "150% 200%"
}, 'Animating a custom property of type <percentage>+ with a single keyframe');
animation_test({
syntax: "<percentage>+",
inherits: false,
initialValue: "50% 100%"
}, {
composite: "add",
keyframes: ["150% 200%", "250% 300%"],
expected: "250% 350%"
}, 'Animating a custom property of type <percentage>+ with additivity');
animation_test({
syntax: "<percentage>+",
inherits: false,
initialValue: "50% 100%"
}, {
composite: "add",
keyframes: "150% 200%",
expected: "125% 200%"
}, 'Animating a custom property of type <percentage>+ with a single keyframe and additivity');
animation_test({
syntax: "<percentage>+",
inherits: false,
initialValue: "0% 0%"
}, {
iterationComposite: "accumulate",
keyframes: ["0% 50%", "100% 100%"],
expected: "250% 275%"
}, 'Animating a custom property of type <percentage>+ with iterationComposite');
discrete_animation_test("<percentage>+", '10% 20%', '30%', 'Animating a custom property of type <percentage>+ with different lengths is discrete');
</script>

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

@ -0,0 +1,59 @@
<!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, 150dppx", "200dppx, 250dppx"],
expected: "150dppx, 200dppx"
}, 'Animating a custom property of type <resolution>#');
animation_test({
syntax: "<resolution>#",
inherits: false,
initialValue: "100dppx, 150dppx"
}, {
keyframes: "200dppx, 250dppx",
expected: "150dppx, 200dppx"
}, 'Animating a custom property of type <resolution># with a single keyframe');
animation_test({
syntax: "<resolution>#",
inherits: false,
initialValue: "50dppx, 100dppx"
}, {
composite: "add",
keyframes: ["150dppx, 200dppx", "250dppx, 300dppx"],
expected: "250dppx, 350dppx"
}, 'Animating a custom property of type <resolution># with additivity');
animation_test({
syntax: "<resolution>#",
inherits: false,
initialValue: "50dppx, 100dppx"
}, {
composite: "add",
keyframes: "150dppx, 200dppx",
expected: "125dppx, 200dppx"
}, 'Animating a custom property of type <resolution># with a single keyframe and additivity');
animation_test({
syntax: "<resolution>#",
inherits: false,
initialValue: "0dppx, 0dppx"
}, {
iterationComposite: "accumulate",
keyframes: ["0dppx, 50dppx", "100dppx, 100dppx"],
expected: "250dppx, 275dppx"
}, 'Animating a custom property of type <resolution># with iterationComposite');
discrete_animation_test("<resolution>#", '10dppx, 20dppx', '30dppx', 'Animating a custom property of type <resolution># with different lengths is discrete');
</script>

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

@ -0,0 +1,59 @@
<!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 150dppx", "200dppx 250dppx"],
expected: "150dppx 200dppx"
}, 'Animating a custom property of type <resolution>+');
animation_test({
syntax: "<resolution>+",
inherits: false,
initialValue: "100dppx 150dppx"
}, {
keyframes: "200dppx 250dppx",
expected: "150dppx 200dppx"
}, 'Animating a custom property of type <resolution>+ with a single keyframe');
animation_test({
syntax: "<resolution>+",
inherits: false,
initialValue: "50dppx 100dppx"
}, {
composite: "add",
keyframes: ["150dppx 200dppx", "250dppx 300dppx"],
expected: "250dppx 350dppx"
}, 'Animating a custom property of type <resolution>+ with additivity');
animation_test({
syntax: "<resolution>+",
inherits: false,
initialValue: "50dppx 100dppx"
}, {
composite: "add",
keyframes: "150dppx 200dppx",
expected: "125dppx 200dppx"
}, 'Animating a custom property of type <resolution>+ with a single keyframe and additivity');
animation_test({
syntax: "<resolution>+",
inherits: false,
initialValue: "0dppx 0dppx"
}, {
iterationComposite: "accumulate",
keyframes: ["0dppx 50dppx", "100dppx 100dppx"],
expected: "250dppx 275dppx"
}, 'Animating a custom property of type <resolution>+ with iterationComposite');
discrete_animation_test("<resolution>+", '10dppx 20dppx', '30dppx', 'Animating a custom property of type <resolution>+ with different lengths is discrete');
</script>

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

@ -0,0 +1,59 @@
<!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, 150s", "200s, 250s"],
expected: "150s, 200s"
}, 'Animating a custom property of type <time>#');
animation_test({
syntax: "<time>#",
inherits: false,
initialValue: "100s, 150s"
}, {
keyframes: "200s, 250s",
expected: "150s, 200s"
}, 'Animating a custom property of type <time># with a single keyframe');
animation_test({
syntax: "<time>#",
inherits: false,
initialValue: "50s, 100s"
}, {
composite: "add",
keyframes: ["150s, 200s", "250s, 300s"],
expected: "250s, 350s"
}, 'Animating a custom property of type <time># with additivity');
animation_test({
syntax: "<time>#",
inherits: false,
initialValue: "50s, 100s"
}, {
composite: "add",
keyframes: "150s, 200s",
expected: "125s, 200s"
}, 'Animating a custom property of type <time># with a single keyframe and additivity');
animation_test({
syntax: "<time>#",
inherits: false,
initialValue: "0s, 0s"
}, {
iterationComposite: "accumulate",
keyframes: ["0s, 50s", "100s, 100s"],
expected: "250s, 275s"
}, 'Animating a custom property of type <time># with iterationComposite');
discrete_animation_test("<time>#", '10s, 20s', '30s', 'Animating a custom property of type <time># with different lengths is discrete');
</script>

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

@ -0,0 +1,59 @@
<!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 150s", "200s 250s"],
expected: "150s 200s"
}, 'Animating a custom property of type <time>+');
animation_test({
syntax: "<time>+",
inherits: false,
initialValue: "100s 150s"
}, {
keyframes: "200s 250s",
expected: "150s 200s"
}, 'Animating a custom property of type <time>+ with a single keyframe');
animation_test({
syntax: "<time>+",
inherits: false,
initialValue: "50s 100s"
}, {
composite: "add",
keyframes: ["150s 200s", "250s 300s"],
expected: "250s 350s"
}, 'Animating a custom property of type <time>+ with additivity');
animation_test({
syntax: "<time>+",
inherits: false,
initialValue: "50s 100s"
}, {
composite: "add",
keyframes: "150s 200s",
expected: "125s 200s"
}, 'Animating a custom property of type <time>+ with a single keyframe and additivity');
animation_test({
syntax: "<time>+",
inherits: false,
initialValue: "0s 0s"
}, {
iterationComposite: "accumulate",
keyframes: ["0s 50s", "100s 100s"],
expected: "250s 275s"
}, 'Animating a custom property of type <time>+ with iterationComposite');
discrete_animation_test("<time>+", '10s 20s', '30s', 'Animating a custom property of type <time>+ with different lengths is discrete');
</script>

66
tests/wpt/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-transform-list-multiple-values.html Normal file
View file

@ -0,0 +1,66 @@
<!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: "<transform-list>",
inherits: false,
initialValue: "translateX(0px)"
}, {
keyframes: ["translateX(100px) scale(2)", "translateX(200px) scale(4)"],
expected: "translateX(150px) scale(3)"
}, 'Animating a custom property of type <transform-list> containing multiple values');
animation_test({
syntax: "<transform-list>",
inherits: false,
initialValue: "translateX(100px) scale(2)"
}, {
keyframes: "translateX(200px) scale(4)",
expected: "translateX(150px) scale(3)"
}, 'Animating a custom property of type <transform-list> containing multiple values with a single keyframe');
animation_test({
syntax: "<transform-list>",
inherits: false,
initialValue: "translateX(100px) scale(2)"
}, {
composite: "add",
keyframes: ["translateX(200px) scale(3)", "translateX(300px) scale(4)"],
expected: "translateX(100px) scale(2) translateX(250px) scale(3.5)"
}, 'Animating a custom property of type <transform-list> containing multiple values with additivity');
animation_test({
syntax: "<transform-list>",
inherits: false,
initialValue: "translateX(100px) scale(2)"
}, {
composite: "add",
keyframes: "translateX(300px) scale(3)",
expected: "translateX(100px) scale(2) translateX(150px) scale(2)"
}, 'Animating a custom property of type <transform-list> containing multiple values with a single keyframe and additivity');
animation_test({
syntax: "<transform-list>",
inherits: false,
initialValue: "translateX(100px) scale(2)"
}, {
iterationComposite: "accumulate",
keyframes: ["translateX(0px) scale(3)", "translateX(100px) scale(4)"],
expected: "translateX(250px) scale(11.5)"
}, 'Animating a custom property of type <transform-list> containing multiple values with iterationComposite');
animation_test({
syntax: "<transform-list>",
inherits: false,
initialValue: "translateX(0px)"
}, {
keyframes: ["translateX(100px) scale(2)", "rotate(180deg)"],
expected: "matrix(0, -1.5, 1.5, 0, 50, 0)"
}, 'Animating a custom property of type <transform-list> containing multiple values and with mismatching list lengths');
</script>

57
tests/wpt/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-transform-list-single-values.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: "<transform-list>",
inherits: false,
initialValue: "translateX(0px)"
}, {
keyframes: ["translateX(100px)", "translateX(200px)"],
expected: "translateX(150px)"
}, 'Animating a custom property of type <transform-list> containing a single value');
animation_test({
syntax: "<transform-list>",
inherits: false,
initialValue: "translateX(100px)"
}, {
keyframes: "translateX(200px)",
expected: "translateX(150px)"
}, 'Animating a custom property of type <transform-list> containing a single value with a single keyframe');
animation_test({
syntax: "<transform-list>",
inherits: false,
initialValue: "translateX(100px)"
}, {
composite: "add",
keyframes: ["translateX(200px)", "translateX(300px)"],
expected: "translateX(100px) translateX(250px)"
}, 'Animating a custom property of type <transform-list> containing a single value with additivity');
animation_test({
syntax: "<transform-list>",
inherits: false,
initialValue: "translateX(100px)"
}, {
composite: "add",
keyframes: "translateX(300px)",
expected: "translateX(100px) translateX(150px)"
}, 'Animating a custom property of type <transform-list> containing a single value with a single keyframe and additivity');
animation_test({
syntax: "<transform-list>",
inherits: false,
initialValue: "translateX(100px)"
}, {
iterationComposite: "accumulate",
keyframes: ["translateX(0px)", "translateX(100px)"],
expected: "translateX(250px)"
}, 'Animating a custom property of type <transform-list> containing a single value with iterationComposite');
</script>

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

@ -7,5 +7,7 @@
<script>
discrete_animation_test("<url>", 'url("https://example.com/from")', 'url("https://example.com/to")');
discrete_animation_test("<url>+", 'url("https://example.com/from1") url("https://example.com/from2")', 'url("https://example.com/to1") url("https://example.com/to2")');
discrete_animation_test("<url>#", 'url("https://example.com/from1"), url("https://example.com/from2")', 'url("https://example.com/to1"), url("https://example.com/to2")');
</script>

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

@ -148,7 +148,7 @@ function animation_test(property, values, description) {
}, description);
};
function discrete_animation_test(syntax, fromValue, toValue) {
function discrete_animation_test(syntax, fromValue, toValue, description) {
test(() => {
const name = generate_name();
@ -176,5 +176,5 @@ function discrete_animation_test(syntax, fromValue, toValue) {
checkAtProgress(0.5, toValue);
checkAtProgress(0.75, toValue);
checkAtProgress(1, toValue);
}, `Animating a custom property of type ${syntax} is discrete`);
}, description || `Animating a custom property of type ${syntax} is discrete`);
}