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

Update web-platform-tests to revision b'b728032f59a396243864b0f8584e7211e3632005'

Browse source
This commit is contained in:
WPT Sync Bot 2022-11-10 01:22:36 +00:00
parent ace9b32b1c
commit df68c4e5d1
15632 changed files with 514865 additions and 155000 deletions
Download patch file Download diff file Expand all files Collapse all files

14
tests/wpt/web-platform-tests/css/css-animations/CSSAnimation-effect.tentative.html
View file

@ -131,6 +131,14 @@ promise_test(async t => {
}, 'After replacing a finished animation\'s effect with a longer one ' +
'it fires an animationstart event');
test(t => {
const div = addDiv(t);
div.style.animation = 'anim 100s';
div.style.animationComposition = 'add';
const animation = div.getAnimations()[0];
assert_equals(animation.effect.composite, 'add');
}, 'Setting animation-composition sets the composite property on the effect');
test(t => {
const div = addDiv(t);
@ -161,6 +169,7 @@ test(t => {
div.style.animationDelay = '8s';
div.style.animationFillMode = 'both';
div.style.animationPlayState = 'paused';
div.style.animationComposition = 'add';
// Update the keyframes
keyframesRule.deleteRule(0);
@ -197,6 +206,11 @@ test(t => {
'200px',
'keyframes should be the value set by the API'
);
assert_equals(
animation.effect.composite,
'replace',
'composite should be the value set by the API'
);
// Unlike the other properties animation-play-state maps to the Animation
// not the KeyframeEffect so it should be overridden.

26
tests/wpt/web-platform-tests/css/css-animations/CSSAnimation-getKeyframes-crash.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="help" href="https://crbug.com/1326225">
<title>Crash test calling getKeyframes on an orphaned element</title>
</head>
<style type="text/css">
@keyframes anim {
from { left: 0; }
}
</style>
<body>
<div id="container">
<div id="target">
</div>
</div>
</body>
<script type="text/javascript">
target.style.animation = "anim 0.01s";
var animation = target.getAnimations()[0];
container.innerHTML = 1;
animation.effect.getKeyframes()[0].hasOwnProperty();
</script>
</html>

164
tests/wpt/web-platform-tests/css/css-animations/KeyframeEffect-getKeyframes.tentative.html
View file

@ -37,7 +37,7 @@
@keyframes anim-simple-timing {
from { color: rgb(0, 0, 0); animation-timing-function: linear; }
50% { color: rgb(0, 0, 255); animation-timing-function: ease-in-out; }
50% { color: rgb(0, 0, 255); animation-timing-function: ease-in-out; }
to { color: rgb(255, 255, 255); animation-timing-function: step-end; }
}
@ -47,6 +47,18 @@
to { color: rgb(255, 255, 255); }
}
@keyframes anim-simple-composite {
from { color: rgb(0, 0, 0); animation-composition: replace; }
50% { color: rgb(0, 0, 255); animation-composition: add; }
to { color: rgb(255, 255, 255); animation-composition: accumulate; }
}
@keyframes anim-simple-composite-some {
from { color: rgb(0, 0, 0); animation-composition: add; }
50% { color: rgb(0, 0, 255); }
to { color: rgb(255, 255, 255); }
}
@keyframes anim-simple-shorthand {
from { margin: 8px; }
to { margin: 16px; }
@ -113,6 +125,28 @@
to { margin-top: 20px; margin-right: 20px; margin-bottom: 20px; }
}
@keyframes anim-merge-offset-and-composite {
from { color: rgb(0, 0, 0); animation-composition: add; }
to { color: rgb(255, 255, 255); }
from { margin-top: 8px; animation-composition: accumulate; }
to { margin-top: 16px; }
from { font-size: 16px; animation-composition: add; }
to { font-size: 32px; }
from { padding-left: 2px; animation-composition: accumulate; }
to { padding-left: 4px; }
}
@keyframes anim-merge-offset-easing-and-composite {
from { color: rgb(0, 0, 0); animation-composition: add; }
to { color: rgb(255, 255, 255); }
from { margin-top: 8px; animation-composition: accumulate; }
to { margin-top: 16px; }
from { font-size: 16px; animation-composition: add; animation-timing-function: linear; }
to { font-size: 32px; }
from { padding-left: 2px; animation-composition: accumulate; }
to { padding-left: 4px; }
}
@keyframes anim-overriding {
from { padding-top: 50px }
50%, from { padding-top: 30px } /* wins: 0% */
@ -156,6 +190,12 @@
from { transform: translate(100px, 0) }
to { --not-used: 200px }
}
@keyframes anim-only-timing-function-for-from-and-to {
from, to { animation-timing-function: linear }
50% { left: 10px }
}
</style>
<body>
<div id="log"></div>
@ -182,6 +222,12 @@ const kTimingFunctionValues = [
"cubic-bezier(0, 0.25, 0.75, 1)"
];
const kCompositeValues = [
"replace",
"add",
"accumulate"
];
test(t => {
const div = addDiv(t);
@ -271,6 +317,58 @@ test(t => {
}, 'KeyframeEffect.getKeyframes() returns frames with expected easing'
+ ' values, when the easing is specified on some keyframes');
test(t => {
for (const composite of kCompositeValues) {
const div = addDiv(t);
div.style.animation = 'anim-simple-three 100s';
div.style.animationComposition = composite;
const frames = getKeyframes(div);
assert_equals(frames.length, 3, "number of frames");
for (let i = 0; i < frames.length; i++) {
assert_equals(frames[i].composite, "auto",
"value for 'composite' on ComputedKeyframe #" + i);
}
}
}, 'KeyframeEffect.getKeyframes() returns frames with expected composite'
+ ' values, when the composite is set on the effect using animation-composition on the'
+ ' element');
test(t => {
const div = addDiv(t);
div.style.animation = 'anim-simple-composite 100s';
const frames = getKeyframes(div);
assert_equals(frames.length, 3, "number of frames");
assert_equals(frames[0].composite, "replace",
"value of 'composite' on ComputedKeyframe #0");
assert_equals(frames[1].composite, "add",
"value of 'composite' on ComputedKeyframe #1");
assert_equals(frames[2].composite, "accumulate",
"value of 'composite' on ComputedKeyframe #2");
}, 'KeyframeEffect.getKeyframes() returns frames with expected composite'
+ ' values, when the composite is specified on each keyframe');
test(t => {
const div = addDiv(t);
div.style.animation = 'anim-simple-composite-some 100s';
div.style.animationComposition = 'accumulate';
const frames = getKeyframes(div);
assert_equals(frames.length, 3, "number of frames");
assert_equals(frames[0].composite, "add",
"value of 'composite' on ComputedKeyframe #0");
assert_equals(frames[1].composite, "auto",
"value of 'composite' on ComputedKeyframe #1");
assert_equals(frames[2].composite, "auto",
"value of 'composite' on ComputedKeyframe #2");
}, 'KeyframeEffect.getKeyframes() returns frames with expected composite'
+ ' values, when the composite is specified on some keyframes');
test(t => {
const div = addDiv(t);
div.style.animation = 'anim-simple-shorthand 100s';
@ -458,6 +556,48 @@ test(t => {
'animation with multiple keyframes for the same time and with ' +
'different but equivalent easing functions');
test(t => {
const div = addDiv(t);
div.style.animation = 'anim-merge-offset-and-composite 100s';
const frames = getKeyframes(div);
const expected = [
{ offset: 0, computedOffset: 0, easing: "ease", composite: "add",
color: "rgb(0, 0, 0)", fontSize: "16px" },
{ offset: 0, computedOffset: 0, easing: "ease", composite: "accumulate",
marginTop: "8px", paddingLeft: "2px" },
{ offset: 1, computedOffset: 1, easing: "ease", composite: "auto",
color: "rgb(255, 255, 255)", fontSize: "32px", marginTop: "16px",
paddingLeft: "4px" },
];
assert_frame_lists_equal(frames, expected);
}, 'KeyframeEffect.getKeyframes() returns expected frames for an ' +
'animation with multiple keyframes for the same time and with ' +
'different composite operations');
test(t => {
const div = addDiv(t);
div.style.animation = 'anim-merge-offset-easing-and-composite 100s';
const frames = getKeyframes(div);
const expected = [
{ offset: 0, computedOffset: 0, easing: "ease", composite: "add",
color: "rgb(0, 0, 0)" },
{ offset: 0, computedOffset: 0, easing: "ease", composite: "accumulate",
marginTop: "8px", paddingLeft: "2px" },
{ offset: 0, computedOffset: 0, easing: "linear", composite: "add",
fontSize: "16px" },
{ offset: 1, computedOffset: 1, easing: "ease", composite: "auto",
color: "rgb(255, 255, 255)", fontSize: "32px", marginTop: "16px",
paddingLeft: "4px" },
];
assert_frame_lists_equal(frames, expected);
}, 'KeyframeEffect.getKeyframes() returns expected frames for an ' +
'animation with multiple keyframes for the same time and with ' +
'different easing functions and composite operations');
test(t => {
const div = addDiv(t);
div.style.animation = 'anim-overriding 100s';
@ -558,7 +698,7 @@ test(t => {
{ offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
backgroundSize: "auto" },
{ offset: 1, computedOffset: 1, easing: "ease", composite: "auto",
backgroundSize: "50%, 6px, contain" },
backgroundSize: "50% auto, 6px auto, contain" },
];
for (let i = 0; i < frames.length; i++) {
@ -568,7 +708,7 @@ test(t => {
// Test inheriting a background-size value
expected[0].backgroundSize = div.style.backgroundSize =
"30px, 40%, auto";
"30px auto, 40% auto, auto";
frames = getKeyframes(div);
for (let i = 0; i < frames.length; i++) {
@ -696,5 +836,23 @@ test(t => {
);
}, 'KeyframeEffect.getKeyframes() reflects changes to @keyframes rules');
test(t => {
const div = addDiv(t);
div.style.animation = 'anim-only-timing-function-for-from-and-to 100s';
const frames = getKeyframes(div);
const expected = [
{ offset: 0, computedOffset: 0, easing: "linear", composite: "auto" },
{ offset: 0, computedOffset: 0, easing: "ease", composite: "auto", left: "auto" },
{ offset: 0.5, computedOffset: 0.5, easing: "ease", composite: "auto", left: "10px" },
{ offset: 1, computedOffset: 1, easing: "linear", composite: "auto" },
{ offset: 1, computedOffset: 1, easing: "ease", composite: "auto", left: "auto" }
];
assert_frame_lists_equal(frames, expected);
}, 'KeyframeEffect.getKeyframes() returns expected values for ' +
'animations with implicit values and a non-default timing' +
'function specified for 0% and 100%');
</script>
</body>

27
tests/wpt/web-platform-tests/css/css-animations/animation-multiple-from-to-keyframes-with-only-timing-function.html Normal file
View file

@ -0,0 +1,27 @@
<!doctype html>
<meta charset=utf-8>
<title>Multiple from and to keyframes</title>
<link rel="help" href="https://drafts.csswg.org/css-animations-1/">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/testcommon.js"></script>
<style>
@keyframes multiple-from-to-keyframes {
from, to { animation-timing-function: cubic-bezier(0, 0, 1, 1) }
from { left: 50px }
to { left: 150px }
}
</style>
<div id="log"></div>
<script>
'use strict';
test(t => {
const div = addDiv(t);
div.style.animation = 'multiple-from-to-keyframes 100s -50s linear';
assert_equals(getComputedStyle(div).left, "100px");
}, 'Animations should not use an implicit value when the first rule within a @keyframes rule specifies "from" and "to" but only specifies a timing function.');
</script>

44
tests/wpt/web-platform-tests/css/css-animations/animation-play-state-005.tentative.html Normal file
View file

@ -0,0 +1,44 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>CSS animations shouldn't restart after resetting its play state</title>
<link rel="help" href="https://drafts.csswg.org/css-animations-2/#animation-play-state">
<link rel="help" href="https://drafts.csswg.org/web-animations-1/#playing-an-animation-section">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7145">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/testcommon.js"></script>
<style>
@keyframes anim {
from { transform: translateX(100px); }
to { transform: translateX(200px); }
}
</style>
<body>
<div id="log"></div>
<script>
'use strict';
// Check that the auto-rewind flag is set to false when playing an animation in
// response to a change in animation-play-state.
promise_test(async t => {
const div = addDiv(t, { style: 'animation: anim 100ms' });
await new Promise(function (resolve) {
div.addEventListener('animationend', () => {
// After the animation ends, change animation-play-state to paused, flush,
// then change it back to running to trigger the re-start.
div.style.animationPlayState = 'paused';
getComputedStyle(div).animationPlayState;
div.style.animationPlayState = 'running';
getComputedStyle(div).animationPlayState;
resolve();
});
});
// Check the animation has not restarted.
assert_equals(div.getAnimations().length, 0);
assert_equals(getComputedStyle(div).transform, 'none');
}, 'CSS animation should not restart after resetting its animation-play-state');
</script>
</body>

36
tests/wpt/web-platform-tests/css/css-animations/animation-style-element-replaced-with-keyframes-rule-of-same-name.html Normal file
View file

@ -0,0 +1,36 @@
<!doctype html>
<meta charset=utf-8>
<title>Changes to @keyframes rules</title>
<link rel="help" href="https://drafts.csswg.org/css-animations-1/">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/testcommon.js"></script>
<div id="log"></div>
<script>
'use strict';
test(t => {
const div = addDiv(t);
const originalStyleElement = document.createElement("style");
originalStyleElement.textContent = '@keyframes anim-custom { from, to { left: 100px } }';
document.head.appendChild(originalStyleElement);
t.add_cleanup(() => originalStyleElement.remove());
div.style.animation = 'anim-custom 100s';
const computedStyle = getComputedStyle(div);
assert_equals(computedStyle.left, "100px", "The initial @keyframes rule is applied");
// Remove the original style element and add a new one with an animation with the same name.
const newStyleElement = document.createElement("style");
newStyleElement.textContent = '@keyframes anim-custom { from, to { left: 200px } }';
originalStyleElement.replaceWith(newStyleElement);
t.add_cleanup(() => newStyleElement.remove());
assert_equals(computedStyle.left, "200px", "The new @keyframes rule is applied");
}, 'Replacing a <style> element with a new <style> element while both containing the different @keyframes rule with the same name dynamically updates running animations.');
</script>

42
tests/wpt/web-platform-tests/css/css-animations/crashtests/replace-keyframes-animating-filter-001.html Normal file
View file

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html class="test-wait">
<title>CSS Test (Animations): Changing an @keyframes that animates filter</title>
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Google" href="http://www.google.com/">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1301937">
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#keyframes">
<link rel="help" href="https://drafts.fxtf.org/filter-effects/#supported-filter-functions">
<link rel="help" href="https://drafts.csswg.org/cssom-1/#the-cssstylesheet-interface">
<meta name="assert" content="This should not crash.">
<style>
#el1 {
height: 100px;
width: 100px;
animation: kf1 2s linear;
}
@keyframes kf1 {
from { filter: grayscale(0.9) }
to { filter: grayscale(0.8) }
}
</style>
<div id="el1"></div>
<script>
document.documentElement.addEventListener("TestRendered", step1);
function step1() {
requestAnimationFrame(function() { requestAnimationFrame(step2); });
}
function step2() {
let css = document.styleSheets[0];
css.insertRule("@keyframes kf1 { from { color: blue } to { color: blue } } ", css.rules.length);
requestAnimationFrame(step3);
}
function step3() {
document.documentElement.classList.remove("test-wait");
}
</script>

44
tests/wpt/web-platform-tests/css/css-animations/dialog-animation.html Normal file
View file

@ -0,0 +1,44 @@
<!doctype html>
<meta charset=utf-8>
<title>CSS Animations on a &lt;dialog></title>
<link rel="help" href="https://drafts.csswg.org/css-animations-1/">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/testcommon.js"></script>
<style>
dialog[open] {
animation: dialog-open-animation 1ms;
}
@keyframes dialog-open-animation {
from { opacity: 0 }
}
</style>
<div id="log"></div>
<script>
"use strict";
promise_test(async t => {
const dialog = addElement(t, "dialog");
// Open the dialog a first time, this should trigger a CSS Animation.
dialog.open = true;
const animations = dialog.getAnimations();
assert_equals(animations.length, 1, "As the <dialog> is shown intially an animation is started");
await animations[0].finished;
await waitForNextFrame();
dialog.open = false;
assert_equals(dialog.getAnimations().length, 0, "As the <dialog> is closed the animation is removed");
await waitForNextFrame();
dialog.open = true;
assert_equals(dialog.getAnimations().length, 1, "As the <dialog> is shown again an animation is started again");
}, "CSS Animations tied to <dialog open> are canceled and restarted as the dialog is hidden and shown");
</script>

44
tests/wpt/web-platform-tests/css/css-animations/dialog-backdrop-animation.html Normal file
View file

@ -0,0 +1,44 @@
<!doctype html>
<meta charset=utf-8>
<title>CSS Animations on a &lt;dialog> ::backdrop</title>
<link rel="help" href="https://drafts.csswg.org/css-animations-1/">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/testcommon.js"></script>
<style>
dialog[open]::backdrop {
animation: dialog-backdrop-animation 1ms;
}
@keyframes dialog-backdrop-animation {
from { opacity: 0 }
}
</style>
<div id="log"></div>
<script>
"use strict";
promise_test(async t => {
const dialog = addElement(t, "dialog");
// Open the dialog a first time, this should trigger a CSS Animation.
dialog.showModal();
const animations = dialog.getAnimations({ subtree: true });
assert_equals(animations.length, 1, "As the <dialog> is shown intially an animation is started on its ::backdrop");
await animations[0].finished;
await waitForNextFrame();
dialog.close();
assert_equals(dialog.getAnimations({ subtree: true }).length, 0, "As the <dialog> is closed the animation is removed from its ::backdrop");
await waitForNextFrame();
dialog.showModal();
assert_equals(dialog.getAnimations({ subtree: true }).length, 1, "As the <dialog> is shown again an animation is started again on its ::backdrop");
}, "CSS Animations on a <dialog> ::backdrop are canceled and restarted as the dialog is hidden and shown");
</script>

26
tests/wpt/web-platform-tests/css/css-animations/inheritance-pseudo-element-ref.html Normal file
View file

@ -0,0 +1,26 @@
<!doctype html>
<title>CSS Test Reference</title>
<style>
body {
font-size: 30px;
}
.container {
font-size: 5px;
height: 40px;
}
.container::after {
content: "";
display: block;
border: 2px solid blue;
width: 1em;
height: 1em;
font-size: 1em;
}
</style>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>

49
tests/wpt/web-platform-tests/css/css-animations/inheritance-pseudo-element.html Normal file
View file

@ -0,0 +1,49 @@
<!doctype html>
<title>@keyframes + pseudo-element inherits from the right style.</title>
<link rel="author" href="https://mozilla.org" title="Mozilla">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1757017">
<link rel="help" href="https://drafts.csswg.org/css-animations/#property-index">
<link rel="match" href="inheritance-pseudo-element-ref.html">
<style>
body {
font-size: 30px;
}
.container {
font-size: 5px;
height: 40px;
}
.container::after {
content: "";
display: block;
border: 2px solid blue;
width: 1em;
height: 1em;
}
@keyframes kf-fs5px { from, to { font-size: 5px; } }
.fs5px::after {
animation: kf-fs5px 1s infinite;
}
@keyframes kf-fs1em { from, to { font-size: 1em; } }
.fs1em::after {
animation: kf-fs1em 1s infinite;
}
@keyframes kf-fs100p { from, to { font-size: 100%; } }
.fs100p::after {
animation: kf-fs100p 1s infinite;
}
@keyframes kf-fsinherit { from, to { font-size: inherit; } }
.fsinherit::after {
animation: kf-fsinherit 1s infinite;
}
</style>
<div class="container"></div>
<div class="container fs5px"></div>
<div class="container fs1em"></div>
<div class="container fs100p"></div>
<div class="container fsinherit"></div>

13
tests/wpt/web-platform-tests/css/css-animations/keyframes-zero-angle-crash.html Normal file
View file

@ -0,0 +1,13 @@
<!doctype html>
<html>
<title>CSS Animations Test: Chrome crash when using zero angles in keyframes</title>
<link rel="help" href="https://crbug.com/1307230">
<body>
<div id="test_div">
Output does not matter, only check that we do not crash with zero angles.
</div>
<script>
let anim = new KeyframeEffect(test_div, [{ "transform": "rotate(0) scale3D(1,1,1)" }]);
new Animation(anim, document.timeline);
</script>
</body>

18
tests/wpt/web-platform-tests/css/css-animations/parsing/animation-composition-computed.tentative.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Animations: getComputedStyle().animationComposition</title>
<link rel="help" href="https://drafts.csswg.org/css-animations-2/#propdef-animation-composition">
<meta name="assert" content="animation-composition computed value is as specified.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<script>
test_computed_value("animation-composition", "replace, add, accumulate");
</script>
</body>
</html>

21
tests/wpt/web-platform-tests/css/css-animations/parsing/animation-composition-invalid.tentative.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Animations: parsing animation-composition with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-animations-2/#propdef-animation-composition">
<meta name="assert" content="animation-composition supports only the grammar '<single-animation-composition> #'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("animation-composition", "auto");
test_invalid_value("animation-composition", "add replace");
test_invalid_value("animation-composition", "add, initial");
test_invalid_value("animation-composition", "initial, add");
</script>
</body>
</html>

20
tests/wpt/web-platform-tests/css/css-animations/parsing/animation-composition-valid.tentative.html Normal file
View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Animations: parsing animation-composition with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-animations-2/#propdef-animation-composition">
<meta name="assert" content="animation-composition supports the full grammar '<single-animation-composition> #'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("animation-composition", "replace");
test_valid_value("animation-composition", "add");
test_valid_value("animation-composition", "accumulate");
test_valid_value("animation-composition", "replace, add, accumulate");
</script>
</body>
</html>

5
tests/wpt/web-platform-tests/css/css-animations/parsing/animation-computed.html
View file

@ -16,6 +16,11 @@
// <single-animation-iteration-count> || <single-animation-direction> ||
// <single-animation-fill-mode> || <single-animation-play-state> ||
// [ none | <keyframes-name> ]
test(() => {
assert_equals(getComputedStyle(document.getElementById('target')).animation, "0s ease 0s 1 normal none running none");
}, "Default animation value");
test_computed_value("animation", "1s", "1s ease 0s 1 normal none running none");
test_computed_value("animation", "cubic-bezier(0, -2, 1, 3)", "0s cubic-bezier(0, -2, 1, 3) 0s 1 normal none running none");
test_computed_value("animation", "1s -3s", "1s ease -3s 1 normal none running none");

23
tests/wpt/web-platform-tests/css/css-animations/parsing/animation-delay-end-computed.html Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#propdef-animation-delay-start">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
<div id="target"></div>
<script>
test_computed_value("animation-delay-start", "initial", "0s");
test_computed_value("animation-delay-start", "-500ms", "-0.5s");
test_computed_value("animation-delay-start", "calc(2 * 3s)", "6s");
test_computed_value("animation-delay-start", "20s, 10s");
test_computed_value("animation-delay-start", "cover 0%");
test_computed_value("animation-delay-start", "COVER 0%", "cover 0%");
test_computed_value("animation-delay-start", "cover 100%");
test_computed_value("animation-delay-start", "cover 120%");
test_computed_value("animation-delay-start", "cover 42%");
test_computed_value("animation-delay-start", "cover -42%");
test_computed_value("animation-delay-start", "contain 42%");
test_computed_value("animation-delay-start", "exit 42%");
test_computed_value("animation-delay-start", "exit calc(41% + 1%)", "exit 42%");
test_computed_value("animation-delay-start", "exit 1%, cover 2%, contain 100%");
</script>

29
tests/wpt/web-platform-tests/css/css-animations/parsing/animation-delay-end-invalid.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#propdef-animation-delay-start">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
<script>
test_invalid_value("animation-delay-start", "infinite");
test_invalid_value("animation-delay-start", "0");
test_invalid_value("animation-delay-start", "1s 2s");
test_invalid_value("animation-delay-start", "1s / 2s");
test_invalid_value("animation-delay-start", "100px");
test_invalid_value("animation-delay-start", "100%");
test_invalid_value("animation-delay-start", "peek 50%");
test_invalid_value("animation-delay-start", "50% contain");
test_invalid_value("animation-delay-start", "50% cover");
test_invalid_value("animation-delay-start", "50% entry");
test_invalid_value("animation-delay-start", "50% enter");
test_invalid_value("animation-delay-start", "50% exit");
test_invalid_value("animation-delay-start", "contain contain");
test_invalid_value("animation-delay-start", "auto");
test_invalid_value("animation-delay-start", "none");
test_invalid_value("animation-delay-start", "cover 50% enter 50%");
test_invalid_value("animation-delay-start", "cover 100px");
test_invalid_value("animation-delay-start", "cover");
test_invalid_value("animation-delay-start", "contain");
test_invalid_value("animation-delay-start", "enter");
test_invalid_value("animation-delay-start", "exit");
</script>

26
tests/wpt/web-platform-tests/css/css-animations/parsing/animation-delay-end-valid.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#propdef-animation-delay-start">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
<script>
test_valid_value("animation-delay-start", "-5ms");
test_valid_value("animation-delay-start", "0s");
test_valid_value("animation-delay-start", "10s");
test_valid_value("animation-delay-start", "20s, 10s");
// https://drafts.csswg.org/scroll-animations-1/#view-timelines-ranges
test_valid_value("animation-delay-start", "cover 0%");
test_valid_value("animation-delay-start", "cover 100%");
test_valid_value("animation-delay-start", "cover 120%");
test_valid_value("animation-delay-start", "cover 42%");
test_valid_value("animation-delay-start", "cover -42%");
test_valid_value("animation-delay-start", "contain 42%");
test_valid_value("animation-delay-start", "exit 42%");
test_valid_value("animation-delay-start", "exit 1%, cover 2%, contain 100%");
// There's an open issue in the spec about "enter" vs "entry".
//
// https://drafts.csswg.org/scroll-animations-1/#valdef-animation-timeline-range-entry
test_valid_value("animation-delay-start", "enter 42%");
</script>

23
tests/wpt/web-platform-tests/css/css-animations/parsing/animation-delay-start-computed.html Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#propdef-animation-delay-start">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
<div id="target"></div>
<script>
test_computed_value("animation-delay-start", "initial", "0s");
test_computed_value("animation-delay-start", "-500ms", "-0.5s");
test_computed_value("animation-delay-start", "calc(2 * 3s)", "6s");
test_computed_value("animation-delay-start", "20s, 10s");
test_computed_value("animation-delay-start", "cover 0%");
test_computed_value("animation-delay-start", "COVER 0%", "cover 0%");
test_computed_value("animation-delay-start", "cover 100%");
test_computed_value("animation-delay-start", "cover 120%");
test_computed_value("animation-delay-start", "cover 42%");
test_computed_value("animation-delay-start", "cover -42%");
test_computed_value("animation-delay-start", "contain 42%");
test_computed_value("animation-delay-start", "exit 42%");
test_computed_value("animation-delay-start", "exit calc(41% + 1%)", "exit 42%");
test_computed_value("animation-delay-start", "exit 1%, cover 2%, contain 100%");
</script>

29
tests/wpt/web-platform-tests/css/css-animations/parsing/animation-delay-start-invalid.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#propdef-animation-delay-start">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
<script>
test_invalid_value("animation-delay-start", "infinite");
test_invalid_value("animation-delay-start", "0");
test_invalid_value("animation-delay-start", "1s 2s");
test_invalid_value("animation-delay-start", "1s / 2s");
test_invalid_value("animation-delay-start", "100px");
test_invalid_value("animation-delay-start", "100%");
test_invalid_value("animation-delay-start", "peek 50%");
test_invalid_value("animation-delay-start", "50% contain");
test_invalid_value("animation-delay-start", "50% cover");
test_invalid_value("animation-delay-start", "50% entry");
test_invalid_value("animation-delay-start", "50% enter");
test_invalid_value("animation-delay-start", "50% exit");
test_invalid_value("animation-delay-start", "contain contain");
test_invalid_value("animation-delay-start", "auto");
test_invalid_value("animation-delay-start", "none");
test_invalid_value("animation-delay-start", "cover 50% enter 50%");
test_invalid_value("animation-delay-start", "cover 100px");
test_invalid_value("animation-delay-start", "cover");
test_invalid_value("animation-delay-start", "contain");
test_invalid_value("animation-delay-start", "enter");
test_invalid_value("animation-delay-start", "exit");
</script>

26
tests/wpt/web-platform-tests/css/css-animations/parsing/animation-delay-start-valid.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#propdef-animation-delay-start">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
<script>
test_valid_value("animation-delay-start", "-5ms");
test_valid_value("animation-delay-start", "0s");
test_valid_value("animation-delay-start", "10s");
test_valid_value("animation-delay-start", "20s, 10s");
// https://drafts.csswg.org/scroll-animations-1/#view-timelines-ranges
test_valid_value("animation-delay-start", "cover 0%");
test_valid_value("animation-delay-start", "cover 100%");
test_valid_value("animation-delay-start", "cover 120%");
test_valid_value("animation-delay-start", "cover 42%");
test_valid_value("animation-delay-start", "cover -42%");
test_valid_value("animation-delay-start", "contain 42%");
test_valid_value("animation-delay-start", "exit 42%");
test_valid_value("animation-delay-start", "exit 1%, cover 2%, contain 100%");
// There's an open issue in the spec about "enter" vs "entry".
//
// https://drafts.csswg.org/scroll-animations-1/#valdef-animation-timeline-range-entry
test_valid_value("animation-delay-start", "enter 42%");
</script>

3
tests/wpt/web-platform-tests/css/css-animations/parsing/animation-name-computed.html
View file

@ -20,8 +20,9 @@ test_computed_value("animation-name", 'ease-in');
test_computed_value("animation-name", 'infinite');
test_computed_value("animation-name", 'paused');
test_computed_value("animation-name", 'first, second, third');
test_computed_value("animation-name", '"something"', ["something", '"something"']);
// TODO: Test strings, after https://github.com/w3c/csswg-drafts/issues/2435
// TODO: Test more strings, after https://github.com/w3c/csswg-drafts/issues/2435
// is resolved.
// Examples that need testing either here or in animation-name-invalid.html :
// '"Initial"', '"initial"', '"None"', '"Default"', '" x "', "1", '" "', '""',

2
tests/wpt/web-platform-tests/css/css-animations/parsing/animation-name-invalid.html
View file

@ -18,6 +18,8 @@ test_invalid_value("animation-name", 'one, initial');
test_invalid_value("animation-name", 'one, inherit');
test_invalid_value("animation-name", 'one, unset');
test_invalid_value("animation-name", 'default, two');
test_invalid_value("animation-name", 'revert, three');
test_invalid_value("animation-name", 'revert-layer, four');
</script>
</body>
</html>

6
tests/wpt/web-platform-tests/css/css-animations/parsing/animation-name-valid.html
View file

@ -20,10 +20,10 @@ test_valid_value("animation-name", 'infinite');
test_valid_value("animation-name", 'paused');
test_valid_value("animation-name", 'first, second, third');
test_valid_value("animation-name", '"string"');
test_valid_value("animation-name", '"multi word string"');
test_valid_value("animation-name", '"string"', ['"string"', "string"]);
test_valid_value("animation-name", '"multi word string"', ['"multi word string"', "multi\\ word\\ string"]);
test_valid_value("animation-name", '"initial"');
test_valid_value("animation-name", '"---\\22---"', '\"---\\\"---\"');
test_valid_value("animation-name", '"---\\22---"', ['\"---\\\"---\"', '---\\\"---']);
</script>
</body>
</html>

36
tests/wpt/web-platform-tests/css/css-animations/parsing/animation-timing-function-computed.html
View file

@ -1,36 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Animations: getComputedStyle().animationTimingFunction</title>
<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation-timing-function">
<meta name="assert" content="animation-timing-function computed value is a computed <easing-function> list.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<script>
test_computed_value("animation-timing-function", "linear");
test_computed_value("animation-timing-function", "ease");
test_computed_value("animation-timing-function", "ease-in");
test_computed_value("animation-timing-function", "ease-out");
test_computed_value("animation-timing-function", "ease-in-out");
test_computed_value("animation-timing-function", "cubic-bezier(0.1, 0.2, 0.8, 0.9)");
test_computed_value("animation-timing-function", "cubic-bezier(0, -2, 1, 3)");
test_computed_value("animation-timing-function", "cubic-bezier(0, 0.7, 1, 1.3)");
test_computed_value("animation-timing-function", "steps(4, start)");
test_computed_value("animation-timing-function", "steps(2, end)", "steps(2)");
test_computed_value("animation-timing-function", "steps(2, jump-start)");
test_computed_value("animation-timing-function", "steps(2, jump-end)", "steps(2)");
test_computed_value("animation-timing-function", "steps(2, jump-both)");
test_computed_value("animation-timing-function", "steps(2, jump-none)");
test_computed_value("animation-timing-function", "linear, ease, linear");
</script>
</body>
</html>

26
tests/wpt/web-platform-tests/css/css-animations/parsing/animation-timing-function-invalid.html
View file

@ -1,26 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Animations: parsing animation-timing-function with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation-timing-function">
<meta name="assert" content="animation-timing-function supports only the grammar '<timing-function> #'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("animation-timing-function", "auto");
test_invalid_value("animation-timing-function", "ease-in ease-out");
test_invalid_value("animation-timing-function", "cubic-bezier(1, 2, 3)");
test_invalid_value("animation-timing-function", "cubic-bezier(1, 2, 3, infinite)");
test_invalid_value("animation-timing-function", "cubic-bezier(1, 2, 3, 4, 5)");
test_invalid_value("animation-timing-function", "cubic-bezier(-0.1, 0.1, 0.5, 0.9)");
test_invalid_value("animation-timing-function", "cubic-bezier(0.5, 0.1, 1.1, 0.9)");
test_invalid_value("animation-timing-function", "initial, cubic-bezier(0, -2, 1, 3)");
test_invalid_value("animation-timing-function", "cubic-bezier(0, -2, 1, 3), initial");
</script>
</body>
</html>

35
tests/wpt/web-platform-tests/css/css-animations/parsing/animation-timing-function-valid.html
View file

@ -1,35 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Animations: parsing animation-timing-function with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation-timing-function">
<meta name="assert" content="animation-timing-function supports the full grammar '<timing-function> #'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("animation-timing-function", "linear");
test_valid_value("animation-timing-function", "ease");
test_valid_value("animation-timing-function", "ease-in");
test_valid_value("animation-timing-function", "ease-out");
test_valid_value("animation-timing-function", "ease-in-out");
test_valid_value("animation-timing-function", "cubic-bezier(0.1, 0.2, 0.8, 0.9)");
test_valid_value("animation-timing-function", "cubic-bezier(0, -2, 1, 3)");
test_valid_value("animation-timing-function", "cubic-bezier(0, 0.7, 1, 1.3)");
test_valid_value("animation-timing-function", "steps(4, start)");
test_valid_value("animation-timing-function", "steps(2, end)", "steps(2)");
test_valid_value("animation-timing-function", "steps(2, jump-start)");
test_valid_value("animation-timing-function", "steps(2, jump-end)", "steps(2)");
test_valid_value("animation-timing-function", "steps(2, jump-both)");
test_valid_value("animation-timing-function", "steps(2, jump-none)");
test_valid_value("animation-timing-function", "linear, ease, linear");
</script>
</body>
</html>

35
tests/wpt/web-platform-tests/css/css-animations/parsing/keyframes-allowed-properties.html Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<title>Tests which properties are allowed in @keyframes</title>
<link rel="help" href="https://drafts.csswg.org/css-animations/#typedef-keyframe-block">
<link rel="author" href="mailto:xiaochengh@chromium.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style id=sheet>
@keyframes foo {
from {
/* Non-animation properties are allowed */
margin-top: 10px;
/* animation-timing-function is specially allowed */
animation-timing-function: ease;
/* All other animation properties are not allowed */
animation-name: none;
animation-duration: 1s;
animation-iteration-count: 1;
animation-direction: normal;
animation-play-state: running;
animation-delay: 0s;
animation-fill-mode: none;
/* The animation shorthand is also not allowed */
animation: bar 1s infinite;
}
}
</style>
<script>
test(() => {
const keyframe = sheet.sheet.cssRules[0].cssRules[0];
const style = keyframe.style;
assert_equals(style.length, 2);
assert_equals(style.marginTop, '10px');
assert_equals(style.animationTimingFunction, 'ease');
}, '@keyframes allows all non-animation properties and animation-timing-function');
</script>

46
tests/wpt/web-platform-tests/css/css-animations/parsing/keyframes-name-invalid.html Normal file
View file

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Animations: parsing @keyframes name with invalid values</title>
<link rel="author" title="yisibl(一丝)" href="https://github.com/yisibl"/>
<link rel="help" href="https://drafts.csswg.org/css-animations/#typedef-keyframes-name">
<meta name="assert" content="@keyframes name supports the full grammar '<custom-ident> | <string>'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<div>
<main id="main"></main>
</div>
<script>
test_keyframes_name_invalid('none');
// The CSS-wide keywords are not valid <custom-ident>s. The default keyword is reserved and is also not a valid <custom-ident>.
// Spec: https://drafts.csswg.org/css-values-4/#identifier-value
test_keyframes_name_invalid('default');
test_keyframes_name_invalid('initial');
test_keyframes_name_invalid('inherit');
test_keyframes_name_invalid('unset');
test_keyframes_name_invalid('revert');
test_keyframes_name_invalid('revert-layer');
test_keyframes_name_invalid('12');
test_keyframes_name_invalid('-12');
test_keyframes_name_invalid('12foo');
test_keyframes_name_invalid('foo.bar');
test_keyframes_name_invalid('one two');
test_keyframes_name_invalid('one, two');
test_keyframes_name_invalid('one, initial');
test_keyframes_name_invalid('one, inherit');
test_keyframes_name_invalid('one, unset');
test_keyframes_name_invalid('default, two');
test_keyframes_name_invalid('revert, three');
test_keyframes_name_invalid('revert-layer, four');
// TODO: https://bugs.chromium.org/p/chromium/issues/detail?id=1342609
// test_keyframes_name_invalid('--foo');
</script>
</body>
</html>

70
tests/wpt/web-platform-tests/css/css-animations/parsing/keyframes-name-valid.html Normal file
View file

@ -0,0 +1,70 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Animations: parsing @keyframes name with valid values</title>
<link rel="author" title="yisibl(一丝)" href="https://github.com/yisibl"/>
<link rel="help" href="https://drafts.csswg.org/css-animations/#typedef-keyframes-name">
<meta name="assert" content="@keyframes name supports the full grammar '<custom-ident> | <string>'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<div>
<main id="main"></main>
</div>
<script>
// Test <custom-ident>
test_keyframes_name_valid(' foo ');
test_keyframes_name_valid(' foo');
test_keyframes_name_valid('-foo');
test_keyframes_name_valid('_bar');
test_keyframes_name_valid('__bar');
test_keyframes_name_valid('__bar__');
test_keyframes_name_valid('ease-out');
test_keyframes_name_valid('example');
test_keyframes_name_valid('EXAMPLE');
test_keyframes_name_valid('not');
test_keyframes_name_valid('and');
test_keyframes_name_valid('all');
test_keyframes_name_valid('or');
// <custom-ident> may disable the `auto/normal` keywords in the future
// https://github.com/w3c/csswg-drafts/issues/7431
test_keyframes_name_valid('auto');
test_keyframes_name_valid('normal');
// Test <string>
test_keyframes_name_valid('" foo "');
test_keyframes_name_valid('" foo"');
test_keyframes_name_valid('"-foo"');
test_keyframes_name_valid('"_bar"');
test_keyframes_name_valid('"__bar"');
test_keyframes_name_valid('"__bar__"');
test_keyframes_name_valid('"ease-out"');
test_keyframes_name_valid('"example"');
test_keyframes_name_valid('"EXAMPLE"');
test_keyframes_name_valid('"one two"');
test_keyframes_name_valid('"one, two"');
test_keyframes_name_valid('"not"');
test_keyframes_name_valid('"and"');
test_keyframes_name_valid('"all"');
test_keyframes_name_valid('"or"');
test_keyframes_name_valid('"auto"');
test_keyframes_name_valid('"normal"');
test_keyframes_name_valid('"none"');
test_keyframes_name_valid('"default"');
test_keyframes_name_valid('"initial"');
test_keyframes_name_valid('"inherit"');
test_keyframes_name_valid('"unset"');
test_keyframes_name_valid('"revert"');
test_keyframes_name_valid('"revert-layer"');
</script>
</body>
</html>

42
tests/wpt/web-platform-tests/css/css-animations/support/testcommon.js
View file

@ -86,6 +86,32 @@ function assert_frame_lists_equal(actual, expected) {
}
}
/**
* Appends an element to the document body.
*
* @param t The testharness.js Test object. If provided, this will be used
* to register a cleanup callback to remove the div when the test
* finishes.
*
* @param name A string specifying the element name.
*
* @param attrs A dictionary object with attribute names and values to set on
* the div.
*/
function addElement(t, name, attrs) {
var element = document.createElement(name);
if (attrs) {
for (var attrName in attrs) {
element.setAttribute(attrName, attrs[attrName]);
}
}
document.body.appendChild(element);
if (t && typeof t.add_cleanup === 'function') {
t.add_cleanup(() => element.remove());
}
return element;
}
/**
* Appends a div to the document body.
*
@ -97,21 +123,7 @@ function assert_frame_lists_equal(actual, expected) {
* the div.
*/
function addDiv(t, attrs) {
var div = document.createElement('div');
if (attrs) {
for (var attrName in attrs) {
div.setAttribute(attrName, attrs[attrName]);
}
}
document.body.appendChild(div);
if (t && typeof t.add_cleanup === 'function') {
t.add_cleanup(function() {
if (div.parentNode) {
div.remove();
}
});
}
return div;
return addElement(t, "div", attrs);
}
/**

12
tests/wpt/web-platform-tests/css/css-animations/translation-animation-on-important-property-ref.html Normal file
View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<title>Translation animation on important property</title>
<link rel="help" href="https://crbug.com/1324679">
<style>
#target {
width: 100px;
height: 100px;
background: green;
transform: none !important;
}
</style>
<div id="target"></div>

18
tests/wpt/web-platform-tests/css/css-animations/translation-animation-on-important-property.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<title>Translation animation on important property</title>
<link rel="help" href="https://crbug.com/1324679">
<link rel="match" href="translation-animation-on-important-property-ref.html">
<style>
@keyframes move {
0% {transform: translateX(0px);}
100% {transform: translateX(100px);}
}
#target {
width: 100px;
height: 100px;
background: green;
transform: none !important;
animation: move 10000s cubic-bezier(0, 1, 1, 0) -5000s;
}
</style>
<div id="target"></div>