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

Update web-platform-tests to revision b'56123c260eff2131bc355b66530d6f0b18b20b2c'

Browse source
This commit is contained in:
WPT Sync Bot 2022-12-14 01:20:38 +00:00
parent ba48966934
commit 82db1c49ad
136 changed files with 1358 additions and 1444 deletions
Download patch file Download diff file Expand all files Collapse all files

34
tests/wpt/web-platform-tests/scroll-animations/css/animation-shorthand.html
View file

@ -10,45 +10,23 @@
<script>
test_valid_value('animation',
'1s linear 1s 2 reverse forwards paused anim');
test_valid_value('animation',
'1s linear 1s 2 reverse forwards paused anim timeline');
test_valid_value('animation',
'1s linear 1s 2 reverse forwards paused anim none');
test_valid_value('animation',
'1s linear 1s 2 reverse forwards paused anim "initial"');
test_valid_value('animation',
'1s linear 1s 2 reverse forwards paused anim auto',
'1s linear 1s 2 reverse forwards paused anim');
test_valid_value('animation',
'1s linear 1s 2 reverse forwards paused anim scroll()');
test_invalid_value('animation',
'1s linear 1s 2 reverse forwards paused anim initial');
test_invalid_value('animation',
'1s linear 1s 2 reverse forwards paused anim 2000');
test_invalid_value('animation',
'1s linear 1s 2 reverse forwards paused anim scroll(abc block)');
'1s linear 1s 2 reverse forwards paused anim scroll()');
test_invalid_value('animation',
'1s linear 1s 2 reverse forwards paused anim scroll(inline abc)');
test_invalid_value('animation',
'1s linear 1s 2 reverse forwards paused anim scroll(abc)');
test_invalid_value('animation',
'1s linear 1s 2 reverse forwards paused anim scroll("string")');
'1s linear 1s 2 reverse forwards paused anim timeline');
test_computed_value('animation',
'1s linear 1s 2 reverse forwards paused anim');
test_computed_value('animation',
'1s linear 1s 2 reverse forwards paused anim timeline');
test_computed_value('animation',
'1s linear 1s 2 reverse forwards paused anim none');
test_computed_value('animation',
'1s linear 1s 2 reverse forwards paused anim auto',
'1s linear 1s 2 reverse forwards paused anim');
test_shorthand_value('animation',
`1s linear 1s 2 reverse forwards paused anim1 timeline,
1s linear 1s 2 reverse forwards paused anim2 none,
1s linear 1s 2 reverse forwards paused anim3 auto`,
`1s linear 1s 2 reverse forwards paused anim1,
1s linear 1s 2 reverse forwards paused anim2,
1s linear 1s 2 reverse forwards paused anim3`,
{
'animation-duration': '1s, 1s, 1s',
'animation-timing-function': 'linear, linear, linear',
@ -58,6 +36,6 @@ test_shorthand_value('animation',
'animation-fill-mode': 'forwards, forwards, forwards',
'animation-play-state': 'paused, paused, paused',
'animation-name': 'anim1, anim2, anim3',
'animation-timeline': 'timeline, none, auto'
'animation-timeline': 'auto, auto, auto'
});
</script>

68
tests/wpt/web-platform-tests/scroll-animations/css/animation-timeline-named-scroll-progress-timeline.tentative.html
View file

@ -39,6 +39,8 @@
<script>
"use strict";
setup(assert_implements_animation_timeline);
function createScroller(t, scrollerSizeClass) {
let scroller = document.createElement('div');
let className = scrollerSizeClass || 'square';
@ -89,7 +91,8 @@ promise_test(async t => {
target.appendChild(content);
target.style.scrollTimelineName = 'timeline';
target.style.animation = "anim 10s linear timeline";
target.style.animation = "anim 10s linear";
target.style.animationTimeline = 'timeline';
target.scrollTop = 50; // 50%, in [0, 100].
await waitForNextFrame();
@ -111,7 +114,8 @@ promise_test(async t => {
parent.insertBefore(target, parent.firstElementChild);
parent.style.scrollTimelineName = 'timeline';
target.style.animation = "anim 10s linear timeline";
target.style.animation = "anim 10s linear";
target.style.animationTimeline = 'timeline';
parent.scrollTop = 100; // 50%, in [0, 200].
await waitForNextFrame();
@ -128,7 +132,8 @@ promise_test(async t => {
document.body.appendChild(target);
sibling.style.scrollTimelineName = 'timeline';
target.style.animation = "anim 10s linear timeline";
target.style.animation = "anim 10s linear";
target.style.animationTimeline = 'timeline';
sibling.scrollTop = 50; // 50%, in [0, 100].
await waitForNextFrame();
@ -149,7 +154,8 @@ promise_test(async t => {
parent.appendChild(target);
sibling.style.scrollTimelineName = 'timeline';
target.style.animation = "anim 10s linear timeline";
target.style.animation = "anim 10s linear";
target.style.animationTimeline = 'timeline';
sibling.scrollTop = 50; // 50%, in [0, 100].
await waitForNextFrame();
@ -170,7 +176,8 @@ promise_test(async t => {
document.body.appendChild(sibling);
sibling.style.scrollTimelineName = 'timeline';
target.style.animation = "anim 10s linear timeline";
target.style.animation = "anim 10s linear";
target.style.animationTimeline = 'timeline';
sibling.scrollTop = 50; // 50%, in [0, 100].
await waitForNextFrame();
@ -199,7 +206,8 @@ promise_test(async t => {
parent.style.scrollTimelineName = 'timeline';
parent.style.scrollTimelineAxis = 'inline';
sibling.style.scrollTimelineName = 'timeline';
target.style.animation = "anim 10s linear timeline";
target.style.animation = "anim 10s linear";
target.style.animationTimeline = 'timeline';
parent.scrollTop = 50; // 25%, in [0, 200].
sibling.scrollTop = 50; // 50%, in [0, 100].
@ -224,7 +232,8 @@ promise_test(async t => {
document.body.appendChild(target);
sibling.style.scrollTimelineName = 'timeline';
target.style.animation = "anim 10s linear timeline";
target.style.animation = "anim 10s linear";
target.style.animationTimeline = 'timeline';
sibling.scrollTop = 50; // 50%, in [0, 100].
await waitForNextFrame();
@ -248,7 +257,8 @@ promise_test(async t => {
main.appendChild(sibling);
main.appendChild(target);
target.style.animation = 'anim 10s linear timeline';
target.style.animation = 'anim 10s linear';
target.style.animationTimeline = 'timeline';
sibling.scrollTop = 50; // 50%, in [50, 150].
await waitForNextFrame();
@ -270,7 +280,8 @@ promise_test(async t => {
// <div id='target'></div>
document.body.appendChild(target);
target.style.animation = 'anim 10s linear timeline';
target.style.animation = 'anim 10s linear';
target.style.animationTimeline = 'timeline';
// Unknown animation-timeline, current time held at zero.
assert_equals(getComputedStyle(target).translate, '50px');
@ -302,7 +313,8 @@ promise_test(async t => {
await waitForNextFrame();
scroller.style.scrollTimelineName = 'timeline';
target.style.animation = 'anim 10s linear timeline';
target.style.animation = 'anim 10s linear';
target.style.animationTimeline = 'timeline';
await waitForCSSScrollTimelineStyle();
assert_equals(getComputedStyle(target).translate, '100px');
@ -329,7 +341,8 @@ promise_test(async t => {
document.body.appendChild(target);
scroller.style.scrollTimelineName = 'timeline';
target.style.animation = 'anim 10s linear timeline';
target.style.animation = 'anim 10s linear';
target.style.animationTimeline = 'timeline';
// Unknown animation-timeline, current time held at zero.
assert_equals(getComputedStyle(target).translate, '50px');
@ -353,7 +366,8 @@ promise_test(async t => {
await waitForNextFrame();
scroller.style.scrollTimelineName = 'timeline';
target.style.animation = 'anim 10s linear timeline';
target.style.animation = 'anim 10s linear';
target.style.animationTimeline = 'timeline';
await waitForCSSScrollTimelineStyle();
assert_equals(getComputedStyle(target).translate, '100px');
@ -377,7 +391,8 @@ promise_test(async t => {
scroller.style.scrollTimelineName = 'timeline';
scroller.style.display = 'none';
target.style.animation = "anim 10s linear timeline";
target.style.animation = "anim 10s linear";
target.style.animationTimeline = 'timeline';
await waitForNextFrame();
@ -407,7 +422,8 @@ promise_test(async t => {
scroller.style.scrollTimelineName = 'timeline-A';
scroller.scrollTop = 50;
target.style.animation = "anim 10s linear timeline-B";
target.style.animation = "anim 10s linear";
target.style.animationTimeline = 'timeline-B';
await waitForNextFrame();
@ -436,7 +452,8 @@ promise_test(async t => {
scroller.style.scrollTimelineName = 'timeline-A';
scroller.scrollTop = 50;
target.style.animation = "anim 10s linear timeline-A";
target.style.animation = "anim 10s linear";
target.style.animationTimeline = 'timeline-A';
await waitForNextFrame();
@ -458,7 +475,8 @@ promise_test(async t => {
let scroller1 = createScroller(t);
let scroller2 = createScroller(t);
target.style.animation = 'anim 10s linear timeline';
target.style.animation = 'anim 10s linear';
target.style.animationTimeline = 'timeline';
scroller1.style.scrollTimelineName = 'timeline';
scroller2.style.scrollTimelineName = 'timeline';
scroller1.id = 'A';
@ -496,7 +514,8 @@ promise_test(async t => {
let target = createTarget(t);
let scroller1 = createScroller(t);
target.style.animation = 'anim 10s linear timeline';
target.style.animation = 'anim 10s linear';
target.style.animationTimeline = 'timeline';
scroller1.style.scrollTimelineName = 'timeline';
scroller1.id = 'A';
@ -541,7 +560,8 @@ promise_test(async t => {
// <div id='target'></div>
document.body.append(target);
target.style.animation = "anim 10s linear timeline";
target.style.animation = "anim 10s linear";
target.style.animationTimeline = 'timeline';
await waitForNextFrame();
@ -579,7 +599,8 @@ promise_test(async t => {
document.body.appendChild(target);
scroller.style.scrollTimeline = 'timeline block';
target.style.animation = "anim 10s linear timeline";
target.style.animation = "anim 10s linear";
target.style.animationTimeline = 'timeline';
scroller.scrollLeft = 50;
await waitForNextFrame();
@ -594,7 +615,8 @@ promise_test(async t => {
document.body.appendChild(target);
scroller.style.scrollTimeline = 'timeline inline';
target.style.animation = "anim 10s linear timeline";
target.style.animation = "anim 10s linear";
target.style.animationTimeline = 'timeline';
scroller.scrollTop = 50;
await waitForNextFrame();
@ -609,7 +631,8 @@ promise_test(async t => {
document.body.appendChild(target);
scroller.style.scrollTimeline = 'timeline horizontal';
target.style.animation = "anim 10s linear timeline";
target.style.animation = "anim 10s linear";
target.style.animationTimeline = 'timeline';
scroller.scrollLeft = 50;
await waitForNextFrame();
@ -624,7 +647,8 @@ promise_test(async t => {
document.body.appendChild(target);
scroller.style.scrollTimeline = 'timeline vertical';
target.style.animation = "anim 10s linear timeline";
target.style.animation = "anim 10s linear";
target.style.animationTimeline = 'timeline';
scroller.scrollTop = 50;
await waitForNextFrame();

18
tests/wpt/web-platform-tests/scroll-animations/css/animation-timeline-scroll-functional-notation.tentative.html
View file

@ -6,6 +6,7 @@
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/web-animations/testcommon.js"></script>
<script src="support/testcommon.js"></script>
<style>
@keyframes anim {
from { translate: 50px; }
@ -43,6 +44,8 @@
<script>
"use strict";
setup(assert_implements_animation_timeline);
const root = document.scrollingElement;
const createTargetWithStuff = function(t, contentClass) {
let container = document.createElement('div');
@ -83,7 +86,8 @@ async function scrollTop(element, value) {
promise_test(async t => {
let [container, div] = createTargetWithStuff(t, 'block-content');
div.style.animation = "anim 10s linear scroll(nearest)";
div.style.animation = "anim 10s linear";
div.style.animationTimeline = "scroll(nearest)";
await scrollTop(root, 50);
assert_equals(getComputedStyle(div).translate, '50px');
@ -96,7 +100,8 @@ promise_test(async t => {
promise_test(async t => {
let [container, div] = createTargetWithStuff(t, 'block-content');
div.style.animation = "anim 10s linear scroll(root)";
div.style.animation = "anim 10s linear";
div.style.animationTimeline = "scroll(root)";
await scrollTop(container, 50);
assert_equals(getComputedStyle(div).translate, '50px');
@ -109,7 +114,8 @@ promise_test(async t => {
promise_test(async t => {
let [container, div] = createTargetWithStuff(t, 'inline-content');
div.style.animation = "anim 10s linear scroll(inline)";
div.style.animation = "anim 10s linear";
div.style.animationTimeline = "scroll(inline)";
await scrollLeft(container, 50);
assert_equals(getComputedStyle(div).translate, '100px');
@ -118,7 +124,8 @@ promise_test(async t => {
promise_test(async t => {
let [container, div] = createTargetWithStuff(t, 'block-content');
container.style.writingMode = 'vertical-lr';
div.style.animation = "anim 10s linear scroll(horizontal)";
div.style.animation = "anim 10s linear";
div.style.animationTimeline = "scroll(horizontal)";
await scrollLeft(container, 50);
assert_equals(getComputedStyle(div).translate, '100px');
@ -127,7 +134,8 @@ promise_test(async t => {
promise_test(async t => {
let [container, div] = createTargetWithStuff(t, 'inline-content');
container.style.writingMode = 'vertical-lr';
div.style.animation = "anim 10s linear scroll(vertical)";
div.style.animation = "anim 10s linear";
div.style.animationTimeline = "scroll(vertical)";
await scrollTop(container, 50);
assert_equals(getComputedStyle(div).translate, '100px');

6
tests/wpt/web-platform-tests/scroll-animations/css/get-animations-inactive-timeline.html
View file

@ -6,6 +6,7 @@
href="https://www.w3.org/TR/web-animations-1/#animation-effect-phases-and-states">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/testcommon.js"></script>
<style>
@keyframes slide {
from { transform: translateX(100px); }
@ -26,7 +27,8 @@
background-color: green;
height: 100px;
width: 100px;
animation: slide 1s linear timeline;
animation: slide 1s linear;
animation-timeline: timeline;
}
</style>
<body>
@ -36,6 +38,8 @@
</div>
</body>
<script type="text/javascript">
setup(assert_implements_animation_timeline);
promise_test(async t => {
// Newly created timeline is inactive,
let animations = document.getAnimations();

38
tests/wpt/web-platform-tests/scroll-animations/css/progress-based-animation-animation-longhand-properties.tentative.html
View file

@ -28,6 +28,8 @@
<script>
"use strict";
setup(assert_implements_animation_timeline);
const createTargetAndScroller = function(t) {
let container = document.createElement('div');
container.id = 'container';
@ -69,7 +71,8 @@ async function scrollTop(element, value) {
promise_test(async t => {
let [target, scroller] = createTargetAndScroller(t);
target.style.animation = '10s linear anim scroll(nearest)';
target.style.animation = '10s linear anim';
target.style.animationTimeline = 'scroll(nearest)';
await scrollTop(scroller, 25); // [0, 100].
assert_equals(getComputedStyle(target).translate, '25px');
@ -77,7 +80,8 @@ promise_test(async t => {
promise_test(async t => {
let [target, scroller] = createTargetAndScroller(t);
target.style.animation = '0s linear anim forwards scroll(nearest)';
target.style.animation = '0s linear anim forwards';
target.style.animationTimeline = 'scroll(nearest)';
await scrollTop(scroller, 25); // [0, 100].
assert_equals(getComputedStyle(target).translate, '100px');
@ -90,7 +94,8 @@ promise_test(async t => {
promise_test(async t => {
let [target, scroller] = createTargetAndScroller(t);
target.style.animation = '10s linear anim scroll(nearest)';
target.style.animation = '10s linear anim';
target.style.animationTimeline = 'scroll(nearest)';
await scrollTop(scroller, 25); // [0, 100].
assert_equals(getComputedStyle(target).translate, '25px');
@ -108,7 +113,8 @@ promise_test(async t => {
promise_test(async t => {
let [target, scroller] = createTargetAndScroller(t);
target.style.animation = '10s linear anim forwards scroll(nearest)';
target.style.animation = '10s linear anim forwards';
target.style.animationTimeline = 'scroll(nearest)';
target.style.animationIterationCount = '0';
await scrollTop(scroller, 25); // [0, 100].
@ -117,7 +123,8 @@ promise_test(async t => {
promise_test(async t => {
let [target, scroller] = createTargetAndScroller(t);
target.style.animation = '10s linear anim forwards scroll(nearest)';
target.style.animation = '10s linear anim forwards';
target.style.animationTimeline = 'scroll(nearest)';
target.style.animationIterationCount = 'infinite';
await scrollTop(scroller, 25); // [0, 100].
@ -131,7 +138,8 @@ promise_test(async t => {
promise_test(async t => {
let [target, scroller] = createTargetAndScroller(t);
target.style.animation = '10s linear anim scroll(nearest)';
target.style.animation = '10s linear anim';
target.style.animationTimeline = 'scroll(nearest)';
await scrollTop(scroller, 25) // [0, 100].
assert_equals(getComputedStyle(target).translate, '25px');
@ -139,7 +147,8 @@ promise_test(async t => {
promise_test(async t => {
let [target, scroller] = createTargetAndScroller(t);
target.style.animation = '10s linear anim scroll(nearest)';
target.style.animation = '10s linear anim';
target.style.animationTimeline = 'scroll(nearest)';
target.style.animationDirection = 'reverse';
await scrollTop(scroller, 25); // 25% in the reversing direction.
@ -148,7 +157,8 @@ promise_test(async t => {
promise_test(async t => {
let [target, scroller] = createTargetAndScroller(t);
target.style.animation = '10s linear anim scroll(nearest)';
target.style.animation = '10s linear anim';
target.style.animationTimeline = 'scroll(nearest)';
target.style.animationIterationCount = '2';
target.style.animationDirection = 'alternate';
@ -161,7 +171,8 @@ promise_test(async t => {
promise_test(async t => {
let [target, scroller] = createTargetAndScroller(t);
target.style.animation = '10s linear anim scroll(nearest)';
target.style.animation = '10s linear anim';
target.style.animationTimeline = 'scroll(nearest)';
target.style.animationIterationCount = '2';
target.style.animationDirection = 'alternate-reverse';
@ -179,7 +190,8 @@ promise_test(async t => {
promise_test(async t => {
let [target, scroller] = createTargetAndScroller(t);
target.style.animation = '10s linear anim scroll(nearest)';
target.style.animation = '10s linear anim';
target.style.animationTimeline = 'scroll(nearest)';
await scrollTop(scroller, 25); // [0, 100].
assert_equals(getComputedStyle(target).translate, '25px');
@ -204,7 +216,8 @@ promise_test(async t => {
promise_test(async t => {
let [target, scroller] = createTargetAndScroller(t);
target.style.animation = '10s linear anim scroll(nearest)';
target.style.animation = '10s linear anim';
target.style.animationTimeline = 'scroll(nearest)';
// active
// |--------------------|
@ -225,7 +238,8 @@ promise_test(async t => {
promise_test(async t => {
let [target, scroller] = createTargetAndScroller(t);
target.style.animation = '10s linear anim scroll(nearest)';
target.style.animation = '10s linear anim';
target.style.animationTimeline = 'scroll(nearest)';
target.style.animationDelay = '10s';
target.style.animationDelayStart = '10s'; // crbug.com/1375994

5
tests/wpt/web-platform-tests/scroll-animations/css/scroll-timeline-document-scroller-quirks.html
View file

@ -14,7 +14,8 @@
to { z-index: 100; }
}
#element {
animation: anim forwards scroll(root);
animation: anim forwards;
animation-timeline: scroll(root);
}
#spacer {
height: 200vh;
@ -26,6 +27,8 @@
<script>
'use strict';
setup(assert_implements_animation_timeline);
promise_test(async () => {
await waitForCSSScrollTimelineStyle();
assert_equals(getComputedStyle(element).zIndex, "100");

5
tests/wpt/web-platform-tests/scroll-animations/css/scroll-timeline-in-container-query.html
View file

@ -39,7 +39,8 @@
#element {
height: 10px;
width: 10px;
animation: expand 10s linear timeline;
animation: expand 10s linear;
animation-timeline: timeline;
background-color: rgb(0, 0, 0);
}
</style>
@ -53,6 +54,8 @@
</div>
</div>
<script>
setup(assert_implements_animation_timeline);
promise_test(async (t) => {
element.offsetTop;
scroller.scrollTop = 50;

9
tests/wpt/web-platform-tests/scroll-animations/css/scroll-timeline-multi-pass.tentative.html
View file

@ -5,6 +5,7 @@
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/web-animations/testcommon.js"></script>
<script src="support/testcommon.js"></script>
<style>
@keyframes expand_width {
from { width: 100px; }
@ -27,11 +28,13 @@
}
#element1 {
width: 1px;
animation: expand_width 10s timeline1;
animation: expand_width 10s;
animation-timeline: timeline1;
}
#element2 {
height: 1px;
animation: expand_height 10s timeline2;
animation: expand_height 10s;
animation-timeline: timeline2;
}
</style>
<main id=main>
@ -41,6 +44,8 @@
</div>
</main>
<script>
setup(assert_implements_animation_timeline);
function insertScroller(timeline_name) {
let scroller = document.createElement('div');
scroller.classList.add('scroller');

5
tests/wpt/web-platform-tests/scroll-animations/css/scroll-timeline-nearest-dirty.html
View file

@ -17,7 +17,8 @@
height: 100px;
}
#element {
animation: anim forwards scroll();
animation: anim forwards;
animation-timeline: scroll();
}
#spacer {
height: 200px;
@ -29,6 +30,8 @@
</div>
<script>
setup(assert_implements_animation_timeline);
promise_test(async () => {
await waitForCSSScrollTimelineStyle();
assert_equals(getComputedStyle(element).zIndex, '100');

8
tests/wpt/web-platform-tests/scroll-animations/css/scroll-timeline-paused-animations.html
View file

@ -24,6 +24,8 @@
<script>
'use strict';
setup(assert_implements_animation_timeline);
async function resetScrollPosition() {
// Reset to 0 so we don't affect following tests.
document.scrollingElement.scrollTop = 0;
@ -36,7 +38,8 @@ promise_test(async t => {
const scroller = document.scrollingElement;
t.add_cleanup(resetScrollPosition);
div.style.animation = 'anim 100s linear paused scroll(root)';
div.style.animation = 'anim 100s linear paused';
div.style.animationTimeline = 'scroll(root)';
await waitForCSSScrollTimelineStyle();
const anim = div.getAnimations()[0];
@ -57,7 +60,8 @@ promise_test(async t => {
const scroller = document.scrollingElement;
await waitForNextFrame();
div.style.animation = 'anim 100s linear forwards scroll(root)';
div.style.animation = 'anim 100s linear forwards';
div.style.animationTimeline = 'scroll(root)';
await waitForCSSScrollTimelineStyle();
const anim = div.getAnimations()[0];

5
tests/wpt/web-platform-tests/scroll-animations/css/scroll-timeline-responsiveness-from-endpoint.html
View file

@ -25,6 +25,8 @@
<script>
'use strict';
setup(assert_implements_animation_timeline);
promise_test(async t => {
const div = addDiv(t, { style: 'width: 50px; height: 100px;' });
const filling = addDiv(t, { class: 'fill-vh' });
@ -32,7 +34,8 @@ promise_test(async t => {
scroller.scrollTop = 0;
await waitForNextFrame();
div.style.animation = 'anim 100s linear scroll(root)';
div.style.animation = 'anim 100s linear';
div.style.animationTimeline = 'scroll(root)';
await waitForCSSScrollTimelineStyle();
const anim = div.getAnimations()[0];

5
tests/wpt/web-platform-tests/scroll-animations/css/scroll-timeline-root-dirty.html
View file

@ -12,7 +12,8 @@
to { z-index: 100; }
}
#element {
animation: anim forwards scroll(root);
animation: anim forwards;
animation-timeline: scroll(root);
}
#spacer {
height: 200vh;
@ -22,6 +23,8 @@
<div id=spacer></div>
<script>
setup(assert_implements_animation_timeline);
promise_test(async () => {
await waitForCSSScrollTimelineStyle();
assert_equals(getComputedStyle(element).zIndex, '100');

5
tests/wpt/web-platform-tests/scroll-animations/css/scroll-timeline-sibling-gcs.html
View file

@ -23,7 +23,8 @@
#element {
height: 10px;
width: 10px;
animation: anim 10s linear timeline;
animation: anim 10s linear;
animation-timeline: timeline;
background-color: rgb(0, 0, 0);
}
</style>
@ -36,6 +37,8 @@
</div>
</div>
<script>
setup(assert_implements_animation_timeline);
promise_test(async (t) => {
element.offsetTop;
scroller.scrollTop = 50;

9
tests/wpt/web-platform-tests/scroll-animations/css/scroll-timeline-specified-scroller-print.html
View file

@ -28,7 +28,14 @@
width: 100px;
height: 100px;
background-color: green;
animation: anim 1s linear timeline;
animation: anim 1s linear;
animation-timeline: timeline;
}
@supports not (animation-timeline:timeline) {
#box {
animation-play-state: paused;
}
}
</style>

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

@ -12,3 +12,8 @@ async function waitForCSSScrollTimelineStyle() {
await waitForNextFrame();
await waitForNextFrame();
}
function assert_implements_animation_timeline() {
assert_implements(CSS.supports('animation-timeline:foo'),
'animation-timeline not supported');
}

94
tests/wpt/web-platform-tests/scroll-animations/css/timeline-range-name-offset-in-keyframes.tentative.html Normal file
View file

@ -0,0 +1,94 @@
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>Timeline offset in Animation Keyframes</title>
<link rel="help" href="https://w3c.github.io/csswg-drafts/scroll-animations-1/#named-range-keyframes">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/web-animations/testcommon.js"></script>
<script src="support/testcommon.js"></script>
<style>
@keyframes fade-in-out-animation {
enter 0%, exit 100% { opacity: 0 }
enter 100%, exit 0% { opacity: 1 }
}
#subject {
background-color: rgba(0, 0, 255);
height: 200px;
width: 200px;
view-timeline-name: foo;
animation: linear 1s both fade-in-out-animation;
animation-timeline: foo;
}
#container {
border: 5px solid black;
height: 400px;
width: 400px;
overflow-y: scroll;
resize: both;
}
.spacer {
height: 600px;
width: 100%;
}
</style>
<body onload="runTests()">
<div id="container">
<div class="spacer"></div>
<div id="subject"></div>
<div class="spacer"></div>
</div>
</body>
<script type="text/javascript">
setup(assert_implements_animation_timeline);
function runTests() {
promise_test(async t => {
// scrollTop=200 to 400 is the enter range
container.scrollTop = 200;
await waitForNextFrame();
assert_equals(getComputedStyle(subject).opacity, '0', 'Effect at enter 0%');
container.scrollTop = 300;
await waitForNextFrame();
assert_equals(getComputedStyle(subject).opacity, '0.5', 'Effect at enter 50%');
container.scrollTop = 400;
await waitForNextFrame();
assert_equals(getComputedStyle(subject).opacity, '1', 'Effect at enter 100%');
// scrollTop=600-800 is the exit range
container.scrollTop = 600;
await waitForNextFrame();
assert_equals(getComputedStyle(subject).opacity, '1', 'Effect at exit 0%');
container.scrollTop = 700;
await waitForNextFrame();
assert_equals(getComputedStyle(subject).opacity, '0.5', 'Effect at exit 50%');
container.scrollTop = 800;
await waitForNextFrame();
assert_equals(getComputedStyle(subject).opacity, '0', 'Effect at exit 100%');
// First change scrollTop so that you are at enter 100%, then resize the container in a way
// that scrollTop is the same, but now the animation is at enter 50% and check opacity.
// After changing the height of container, scrollTop=300-500 is the enter range
container.scrollTop = 400;
await waitForNextFrame();
assert_equals(getComputedStyle(subject).opacity, '1', 'Effect at enter 100%');
container.style.height = '300px';
await waitForNextFrame();
assert_equals(getComputedStyle(subject).opacity, '0.5', 'Effect at enter 50%');
// After changing the height of container, scrollTop=600-800 is still the exit range
container.scrollTop = 700;
await waitForNextFrame();
assert_equals(getComputedStyle(subject).opacity, '0.5', 'Effect at exit 50%');
});
}
</script>
</html>

19
tests/wpt/web-platform-tests/scroll-animations/css/view-timeline-animation.html
View file

@ -4,6 +4,7 @@
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/web-animations/testcommon.js"></script>
<script src="support/testcommon.js"></script>
<style>
@keyframes anim {
from { z-index: 0; }
@ -31,6 +32,8 @@
</style>
<main id=main></main>
<script>
setup(assert_implements_animation_timeline);
function inflate(t, template) {
t.add_cleanup(() => main.replaceChildren());
main.append(template.content.cloneNode(true));
@ -49,7 +52,8 @@
<style>
#target {
view-timeline: t1;
animation: anim 1s linear t1;
animation: anim 1s linear;
animation-timeline: t1;
}
</style>
<div id=scroller class=vertical-scroller>
@ -83,7 +87,8 @@
<style>
#target {
view-timeline: t1 horizontal;
animation: anim 1s linear t1;
animation: anim 1s linear;
animation-timeline: t1;
}
</style>
<div id=scroller class=horizontal-scroller>
@ -132,8 +137,14 @@
width: 50px;
height: 50px;
}
#target_v { animation: anim 1s linear tv; }
#target_h { animation: anim 1s linear th; }
#target_v {
animation: anim 1s linear;
animation-timeline: tv;
}
#target_h {
animation: anim 1s linear;
animation-timeline: th;
}
</style>
<div id=scroller>
<!-- Created dynamically -->

6
tests/wpt/web-platform-tests/scroll-animations/css/view-timeline-delay-animation.html
View file

@ -4,6 +4,7 @@
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/web-animations/testcommon.js"></script>
<script src="support/testcommon.js"></script>
<style>
@keyframes anim {
from { z-index: 0; background-color: skyblue;}
@ -31,6 +32,8 @@
</div>
</template>
<script>
setup(assert_implements_animation_timeline);
function inflate(t, template) {
t.add_cleanup(() => main.replaceChildren());
main.append(template.content.cloneNode(true));
@ -59,7 +62,8 @@
// work around a bug.
await waitForNextFrame();
target.style.animation = 'anim 10s linear t1';
target.style.animation = 'anim 10s linear';
target.style.animationTimeline = 't1';
target.style.animationDelayStart = options.startDelay;
target.style.animationDelayEnd = options.endDelay;

14
tests/wpt/web-platform-tests/scroll-animations/css/view-timeline-dynamic.html
View file

@ -25,6 +25,8 @@
</style>
<main id=main></main>
<script>
setup(assert_implements_animation_timeline);
function inflate(t, template) {
t.add_cleanup(() => main.replaceChildren());
main.append(template.content.cloneNode(true));
@ -46,7 +48,8 @@
view-timeline-name: t1;
}
#target {
animation: anim 1s linear t1;
animation: anim 1s linear;
animation-timeline: t1;
}
</style>
<div id=scroller class=scroller>
@ -98,7 +101,8 @@
view-timeline-name: t1;
}
#target {
animation: anim 1s linear t1;
animation: anim 1s linear;
animation-timeline: t1;
}
</style>
<div id=scroller class=scroller>
@ -129,7 +133,8 @@
view-timeline-name: t1;
}
#target {
animation: anim 1s linear t1;
animation: anim 1s linear;
animation-timeline: t1;
}
</style>
<div id=scroller class=scroller>
@ -156,7 +161,8 @@
view-timeline-name: t1;
}
#target {
animation: anim 1s linear t1;
animation: anim 1s linear;
animation-timeline: t1;
}
</style>
<div id=scroller class=scroller>

78
tests/wpt/web-platform-tests/scroll-animations/css/view-timeline-inset-animation.html
View file

@ -4,6 +4,7 @@
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/web-animations/testcommon.js"></script>
<script src="support/testcommon.js"></script>
<style>
@keyframes anim {
from { z-index: 0; }
@ -23,6 +24,8 @@
</style>
<main id=main></main>
<script>
setup(assert_implements_animation_timeline);
function inflate(t, template) {
t.add_cleanup(() => main.replaceChildren());
main.append(template.content.cloneNode(true));
@ -89,7 +92,8 @@
#target {
view-timeline: t1;
view-timeline-inset: 10px;
animation: anim 1s linear t1;
animation: anim 1s linear;
animation-timeline: t1;
}
</style>
<div id=scroller class=vertical>
@ -112,7 +116,8 @@
#target {
view-timeline: t1;
view-timeline-inset: 10px 20px;
animation: anim 1s linear t1;
animation: anim 1s linear;
animation-timeline: t1;
}
</style>
<div id=scroller class=vertical>
@ -136,7 +141,8 @@
font-size: 10px;
view-timeline: t1;
view-timeline-inset: 10px 2em;
animation: anim 1s linear t1;
animation: anim 1s linear;
animation-timeline: t1;
}
</style>
<div id=scroller class=vertical>
@ -160,7 +166,8 @@
font-size: 10px;
view-timeline: t1;
view-timeline-inset: calc(5px + max(1%, 5%)) 20%;
animation: anim 1s linear t1;
animation: anim 1s linear;
animation-timeline: t1;
}
</style>
<div id=scroller class=vertical>
@ -183,7 +190,8 @@
#target {
view-timeline: t1;
view-timeline-inset: -10px -20px;
animation: anim 1s linear t1;
animation: anim 1s linear;
animation-timeline: t1;
}
</style>
<div id=scroller class=vertical>
@ -206,7 +214,8 @@
#target {
view-timeline: t1 horizontal;
view-timeline-inset: 10px 20px;
animation: anim 1s linear t1;
animation: anim 1s linear;
animation-timeline: t1;
}
</style>
<div id=scroller>
@ -229,7 +238,8 @@
#target {
view-timeline: t1 block;
view-timeline-inset: 10px 20px;
animation: anim 1s linear t1;
animation: anim 1s linear;
animation-timeline: t1;
}
</style>
<div id=scroller>
@ -252,7 +262,8 @@
#target {
view-timeline: t1 inline;
view-timeline-inset: 10px 20px;
animation: anim 1s linear t1;
animation: anim 1s linear;
animation-timeline: t1;
}
</style>
<div id=scroller>
@ -278,7 +289,8 @@
#target {
view-timeline: t1 block;
view-timeline-inset: auto auto;
animation: anim 1s linear t1;
animation: anim 1s linear;
animation-timeline: t1;
}
</style>
<div id=scroller>
@ -305,7 +317,8 @@
#target {
view-timeline: t1 block;
view-timeline-inset: auto auto;
animation: anim 1s linear t1;
animation: anim 1s linear;
animation-timeline: t1;
}
</style>
<div id=scroller>
@ -332,7 +345,8 @@
#target {
view-timeline: t1 block;
view-timeline-inset: auto auto;
animation: anim 1s linear t1;
animation: anim 1s linear;
animation-timeline: t1;
}
</style>
<div id=scroller>
@ -359,7 +373,8 @@
#target {
view-timeline: t1 inline;
view-timeline-inset: auto auto;
animation: anim 1s linear t1;
animation: anim 1s linear;
animation-timeline: t1;
}
</style>
<div id=scroller>
@ -386,7 +401,8 @@
#target {
view-timeline: t1 inline;
view-timeline-inset: auto auto;
animation: anim 1s linear t1;
animation: anim 1s linear;
animation-timeline: t1;
}
</style>
<div id=scroller>
@ -413,7 +429,8 @@
#target {
view-timeline: t1 inline;
view-timeline-inset: auto auto;
animation: anim 1s linear t1;
animation: anim 1s linear;
animation-timeline: t1;
}
</style>
<div id=scroller>
@ -440,7 +457,8 @@
#target {
view-timeline: t1 inline;
view-timeline-inset: auto auto;
animation: anim 1s linear t1;
animation: anim 1s linear;
animation-timeline: t1;
}
</style>
<div id=scroller>
@ -468,7 +486,8 @@
#target {
view-timeline: t1 inline;
view-timeline-inset: auto auto;
animation: anim 1s linear t1;
animation: anim 1s linear;
animation-timeline: t1;
}
</style>
<div id=scroller>
@ -496,7 +515,8 @@
#target {
view-timeline: t1 inline;
view-timeline-inset: auto auto;
animation: anim 1s linear t1;
animation: anim 1s linear;
animation-timeline: t1;
}
</style>
<div id=scroller>
@ -522,7 +542,8 @@
#target {
view-timeline: t1 vertical;
view-timeline-inset: auto auto;
animation: anim 1s linear t1;
animation: anim 1s linear;
animation-timeline: t1;
}
</style>
<div id=scroller>
@ -549,7 +570,8 @@
#target {
view-timeline: t1 vertical;
view-timeline-inset: auto auto;
animation: anim 1s linear t1;
animation: anim 1s linear;
animation-timeline: t1;
}
</style>
<div id=scroller>
@ -577,7 +599,8 @@
#target {
view-timeline: t1 vertical;
view-timeline-inset: auto auto;
animation: anim 1s linear t1;
animation: anim 1s linear;
animation-timeline: t1;
}
</style>
<div id=scroller>
@ -603,7 +626,8 @@
#target {
view-timeline: t1 horizontal;
view-timeline-inset: auto auto;
animation: anim 1s linear t1;
animation: anim 1s linear;
animation-timeline: t1;
}
</style>
<div id=scroller>
@ -630,7 +654,8 @@
#target {
view-timeline: t1 horizontal;
view-timeline-inset: auto auto;
animation: anim 1s linear t1;
animation: anim 1s linear;
animation-timeline: t1;
}
</style>
<div id=scroller>
@ -657,7 +682,8 @@
#target {
view-timeline: t1 horizontal;
view-timeline-inset: auto auto;
animation: anim 1s linear t1;
animation: anim 1s linear;
animation-timeline: t1;
}
</style>
<div id=scroller>
@ -684,7 +710,8 @@
#target {
view-timeline: t1 horizontal;
view-timeline-inset: auto auto;
animation: anim 1s linear t1;
animation: anim 1s linear;
animation-timeline: t1;
}
</style>
<div id=scroller>
@ -711,7 +738,8 @@
#target {
view-timeline: t1;
view-timeline-inset: 10% auto;
animation: anim 1s linear t1;
animation: anim 1s linear;
animation-timeline: t1;
}
</style>
<div id=scroller>

25
tests/wpt/web-platform-tests/scroll-animations/css/view-timeline-lookup.html
View file

@ -4,6 +4,7 @@
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/web-animations/testcommon.js"></script>
<script src="support/testcommon.js"></script>
<style>
@keyframes anim {
from { z-index: 0; }
@ -33,7 +34,8 @@
#target {
height: 0px;
view-timeline: t1;
animation: anim 1s linear t1;
animation: anim 1s linear;
animation-timeline: t1;
}
</style>
<div id=scroller class=scroller>
@ -60,7 +62,8 @@
view-timeline: t1;
}
#target {
animation: anim 1s linear t1;
animation: anim 1s linear;
animation-timeline: t1;
}
</style>
<div id=scroller class=scroller>
@ -88,7 +91,8 @@
view-timeline: t1;
}
#target {
animation: anim 1s linear t1;
animation: anim 1s linear;
animation-timeline: t1;
}
</style>
<div id=scroller class=scroller>
@ -119,7 +123,8 @@
view-timeline: t1;
}
#target {
animation: anim 1s linear t1;
animation: anim 1s linear;
animation-timeline: t1;
}
</style>
<div id=scroller class=scroller>
@ -150,7 +155,8 @@
view-timeline: t1;
}
#target {
animation: anim 1s linear t1;
animation: anim 1s linear;
animation-timeline: t1;
}
</style>
<div id=scroller class=scroller>
@ -186,7 +192,8 @@
view-timeline: t2;
}
#target {
animation: anim 1s linear t1;
animation: anim 1s linear;
animation-timeline: t1;
}
</style>
<div id=scroller class=scroller>
@ -225,7 +232,8 @@
height: 50px;
}
#target {
animation: anim 1s linear t1;
animation: anim 1s linear;
animation-timeline: t1;
}
</style>
<div id=scroller class=scroller>
@ -265,7 +273,8 @@
height: 50px;
}
#target {
animation: anim 1s linear t1;
animation: anim 1s linear;
animation-timeline: t1;
}
</style>
<div id=scroller class=scroller>

9
tests/wpt/web-platform-tests/scroll-animations/css/view-timeline-used-values.html
View file

@ -5,6 +5,7 @@
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/web-animations/testcommon.js"></script>
<script src="support/testcommon.js"></script>
<style>
@keyframes anim {
from { z-index: 0; }
@ -23,6 +24,8 @@
</style>
<main id=main></main>
<script>
setup(assert_implements_animation_timeline);
function inflate(t, template) {
t.add_cleanup(() => main.replaceChildren());
main.append(template.content.cloneNode(true));
@ -42,7 +45,8 @@
#target {
view-timeline-name: t1, t2; /* Two items */
view-timeline-axis: inline; /* One item */
animation: anim 1s linear t2;
animation: anim 1s linear;
animation-timeline: t2;
}
</style>
<div id=scroller class=scroller>
@ -74,7 +78,8 @@
#target {
view-timeline-name: t1, t2; /* Two items */
view-timeline-inset: 100px; /* One item */
animation: anim 1s linear t2;
animation: anim 1s linear;
animation-timeline: t2;
}
</style>
<div id=scroller class=scroller>