mirror of
https://github.com/servo/servo.git
synced 2025-09-01 02:28:21 +01:00
Update web-platform-tests to revision b'f0b66362cc5dec54d81e0a56458b48f310a2eba9'
This commit is contained in:
WPT Sync Bot
parent
766917ef4f
commit
75286b8eab
467 changed files with 8309 additions and 3209 deletions
|
|
@ -13,7 +13,7 @@
|
|||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
#scroller > div {
|
||||
#scroller > #content {
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
|
|
@ -36,9 +36,9 @@
|
|||
</style>
|
||||
<main>
|
||||
<div id=scroller>
|
||||
<div></div>
|
||||
<div id=content></div>
|
||||
<div id=element></div>
|
||||
</div>
|
||||
<div id=element></div>
|
||||
</main>
|
||||
<script>
|
||||
promise_test(async (t) => {
|
||||
|
|
|
|||
|
|
@ -41,8 +41,8 @@
|
|||
|
||||
<div id="scroller">
|
||||
<div id="contents"></div>
|
||||
<div id="box"></div>
|
||||
</div>
|
||||
<div id="box"></div>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
|
|
|
|||
|
|
@ -23,8 +23,8 @@
|
|||
|
||||
<div id="scroller">
|
||||
<div id="contents"></div>
|
||||
<div id="box"></div>
|
||||
</div>
|
||||
<div id="box"></div>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@
|
|||
animation-duration: 10s;
|
||||
animation-timing-function: linear;
|
||||
animation-timeline: top_timeline;
|
||||
position: absolute;
|
||||
}
|
||||
/* Ensure stable expectations if feature is not supported */
|
||||
@supports not (animation-timeline:foo) {
|
||||
|
|
@ -35,8 +36,10 @@
|
|||
}
|
||||
</style>
|
||||
<main>
|
||||
<div id=scroller1><div></div></div>
|
||||
<div id=element></div>
|
||||
<div id=scroller1>
|
||||
<div></div>
|
||||
<div id=element></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
window.onload = async () => {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,296 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Scroll Timeline Attachment</title>
|
||||
<link rel="help" src="https://github.com/w3c/csswg-drafts/issues/7759">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/web-animations/testcommon.js"></script>
|
||||
|
||||
<main id=main></main>
|
||||
<script>
|
||||
function inflate(t, template) {
|
||||
t.add_cleanup(() => main.replaceChildren());
|
||||
main.append(template.content.cloneNode(true));
|
||||
main.offsetTop;
|
||||
}
|
||||
|
||||
async function scrollTop(e, value) {
|
||||
e.scrollTop = value;
|
||||
await waitForNextFrame();
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
@keyframes anim {
|
||||
from { width: 0px; --applied:true; }
|
||||
to { width: 200px; --applied:true; }
|
||||
}
|
||||
|
||||
.scroller {
|
||||
overflow-y: hidden;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
.scroller > .content {
|
||||
margin: 400px 0px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
}
|
||||
.target {
|
||||
background-color: coral;
|
||||
width: 0px;
|
||||
animation: anim auto linear;
|
||||
animation-timeline: t1;
|
||||
}
|
||||
.timeline {
|
||||
scroll-timeline-name: t1;
|
||||
}
|
||||
.local {
|
||||
scroll-timeline-attachment: local;
|
||||
}
|
||||
.defer {
|
||||
scroll-timeline-attachment: defer;
|
||||
}
|
||||
.ancestor {
|
||||
scroll-timeline-attachment: ancestor;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
<!-- Basic Behavior -->
|
||||
|
||||
<template id=scroll_timeline_defer>
|
||||
<div class="timeline defer">
|
||||
<div class=target>Test</div>
|
||||
<div class="scroller timeline ancestor">
|
||||
<div class=content></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
promise_test(async (t) => {
|
||||
inflate(t, scroll_timeline_defer);
|
||||
let scroller = main.querySelector('.scroller');
|
||||
let target = main.querySelector('.target');
|
||||
await scrollTop(scroller, 350); // 50%
|
||||
assert_equals(getComputedStyle(target).width, '100px'); // 0px => 200px, 50%
|
||||
}, 'Descendant can attach to deferred timeline');
|
||||
</script>
|
||||
|
||||
<template id=scroll_timeline_defer_no_attach>
|
||||
<div class="timeline defer">
|
||||
<div class=target>Test</div>
|
||||
<div class="scroller timeline">
|
||||
<div class=content></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
promise_test(async (t) => {
|
||||
inflate(t, scroll_timeline_defer_no_attach);
|
||||
let scroller = main.querySelector('.scroller');
|
||||
let target = main.querySelector('.target');
|
||||
await scrollTop(scroller, 350); // 50%
|
||||
assert_equals(getComputedStyle(target).width, '0px');
|
||||
assert_equals(getComputedStyle(target).getPropertyValue('--applied'), '');
|
||||
}, 'Deferred timeline with no attachments');
|
||||
</script>
|
||||
|
||||
<template id=scroll_timeline_local_ancestor>
|
||||
<div class="scroller timeline local">
|
||||
<div class=content>
|
||||
<div class=target>Test</div>
|
||||
<div class="scroller timeline ancestor">
|
||||
<div class=content></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
promise_test(async (t) => {
|
||||
inflate(t, scroll_timeline_local_ancestor);
|
||||
let scroller = main.querySelector('.scroller');
|
||||
let target = main.querySelector('.target');
|
||||
await scrollTop(scroller, 350); // 50%
|
||||
assert_equals(getComputedStyle(target).width, '100px'); // 0px => 200px, 50%
|
||||
}, 'Timeline with ancestor attachment does not attach to local');
|
||||
</script>
|
||||
|
||||
<template id=scroll_timeline_defer_two_attachments>
|
||||
<div class="timeline defer">
|
||||
<div class=target>Test</div>
|
||||
<div class="scroller timeline ancestor">
|
||||
<div class=content></div>
|
||||
</div>
|
||||
<!-- Extra attachment -->
|
||||
<div class="timeline ancestor"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
promise_test(async (t) => {
|
||||
inflate(t, scroll_timeline_defer_two_attachments);
|
||||
let scroller = main.querySelector('.scroller');
|
||||
let target = main.querySelector('.target');
|
||||
await scrollTop(scroller, 350); // 50%
|
||||
assert_equals(getComputedStyle(target).width, '0px');
|
||||
assert_equals(getComputedStyle(target).getPropertyValue('--applied'), '');
|
||||
}, 'Deferred timeline with two attachments');
|
||||
</script>
|
||||
|
||||
<!-- Effective Axis of ScrollTimeline -->
|
||||
|
||||
<template id=scroll_timeline_defer_axis>
|
||||
<div class="timeline defer" style="scroll-timeline-axis:inline">
|
||||
<div class=target>Test</div>
|
||||
<div class="scroller timeline ancestor" style="scroll-timeline-axis:vertical">
|
||||
<div class=content></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
promise_test(async (t) => {
|
||||
inflate(t, scroll_timeline_defer_axis);
|
||||
let target = main.querySelector('.target');
|
||||
assert_equals(target.getAnimations().length, 1);
|
||||
let anim = target.getAnimations()[0];
|
||||
assert_not_equals(anim.timeline, null);
|
||||
assert_equals(anim.timeline.axis, 'vertical');
|
||||
}, 'Axis of deferred timeline is taken from attached timeline');
|
||||
</script>
|
||||
|
||||
|
||||
<template id=scroll_timeline_defer_axis_multiple>
|
||||
<div class="timeline defer" style="scroll-timeline-axis:inline">
|
||||
<div class=target>Test</div>
|
||||
<div class="scroller timeline ancestor" style="scroll-timeline-axis:vertical">
|
||||
<div class=content></div>
|
||||
</div>
|
||||
<!-- Extra attachment -->
|
||||
<div class="timeline ancestor"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
promise_test(async (t) => {
|
||||
inflate(t, scroll_timeline_defer_axis_multiple);
|
||||
let target = main.querySelector('.target');
|
||||
assert_equals(target.getAnimations().length, 1);
|
||||
let anim = target.getAnimations()[0];
|
||||
assert_not_equals(anim.timeline, null);
|
||||
assert_equals(anim.timeline.axis, 'block');
|
||||
}, 'Axis of deferred timeline with multiple attachments');
|
||||
</script>
|
||||
|
||||
|
||||
<!-- Dynamic Reattachment -->
|
||||
|
||||
|
||||
<template id=scroll_timeline_reattach>
|
||||
<div class="timeline defer">
|
||||
<div class=target>Test</div>
|
||||
<div class="scroller timeline ancestor">
|
||||
<div class=content></div>
|
||||
</div>
|
||||
<div class="scroller timeline">
|
||||
<div class=content></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
promise_test(async (t) => {
|
||||
inflate(t, scroll_timeline_reattach);
|
||||
let scrollers = main.querySelectorAll('.scroller');
|
||||
assert_equals(scrollers.length, 2);
|
||||
let target = main.querySelector('.target');
|
||||
await scrollTop(scrollers[0], 350); // 50%
|
||||
await scrollTop(scrollers[1], 175); // 25%
|
||||
|
||||
// Attached to scrollers[0].
|
||||
assert_equals(getComputedStyle(target).width, '100px'); // 0px => 200px, 50%
|
||||
|
||||
// Reattach to scrollers[1].
|
||||
scrollers[0].classList.remove('ancestor');
|
||||
scrollers[1].classList.add('ancestor');
|
||||
|
||||
await waitForNextFrame();
|
||||
assert_equals(getComputedStyle(target).width, '50px'); // 0px => 200px, 25%
|
||||
}, 'Dynamically re-attaching');
|
||||
</script>
|
||||
|
||||
|
||||
<template id=scroll_timeline_dynamic_attach_second>
|
||||
<div class="timeline defer">
|
||||
<div class=target>Test</div>
|
||||
<div class="scroller timeline">
|
||||
<div class=content></div>
|
||||
</div>
|
||||
<div class="scroller timeline">
|
||||
<div class=content></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
promise_test(async (t) => {
|
||||
inflate(t, scroll_timeline_dynamic_attach_second);
|
||||
let scrollers = main.querySelectorAll('.scroller');
|
||||
assert_equals(scrollers.length, 2);
|
||||
let target = main.querySelector('.target');
|
||||
await scrollTop(scrollers[0], 350); // 50%
|
||||
await scrollTop(scrollers[1], 175); // 25%
|
||||
|
||||
// Attached to no timelines initially:
|
||||
assert_equals(getComputedStyle(target).width, '0px');
|
||||
assert_equals(getComputedStyle(target).getPropertyValue('--applied'), '');
|
||||
|
||||
// Attach to scrollers[0].
|
||||
scrollers[0].classList.add('ancestor');
|
||||
await waitForNextFrame();
|
||||
assert_equals(getComputedStyle(target).width, '100px'); // 0px => 200px, 50%
|
||||
|
||||
// Also attach scrollers[1].
|
||||
scrollers[1].classList.add('ancestor');
|
||||
|
||||
await waitForNextFrame();
|
||||
assert_equals(getComputedStyle(target).width, '0px');
|
||||
assert_equals(getComputedStyle(target).getPropertyValue('--applied'), '');
|
||||
}, 'Dynamically attaching');
|
||||
</script>
|
||||
|
||||
|
||||
<template id=scroll_timeline_dynamic_detach_second>
|
||||
<div class="timeline defer">
|
||||
<div class=target>Test</div>
|
||||
<div class="scroller timeline ancestor">
|
||||
<div class=content></div>
|
||||
</div>
|
||||
<div class="scroller timeline ancestor">
|
||||
<div class=content></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
promise_test(async (t) => {
|
||||
inflate(t, scroll_timeline_dynamic_detach_second);
|
||||
let scrollers = main.querySelectorAll('.scroller');
|
||||
assert_equals(scrollers.length, 2);
|
||||
let target = main.querySelector('.target');
|
||||
await scrollTop(scrollers[0], 350); // 50%
|
||||
await scrollTop(scrollers[1], 175); // 25%
|
||||
|
||||
// Attached to two timelines initially:
|
||||
assert_equals(getComputedStyle(target).width, '0px');
|
||||
assert_equals(getComputedStyle(target).getPropertyValue('--applied'), '');
|
||||
|
||||
// Detach scrollers[1].
|
||||
scrollers[1].classList.remove('ancestor');
|
||||
|
||||
await waitForNextFrame();
|
||||
assert_equals(getComputedStyle(target).width, '100px'); // 0px => 200px, 50%
|
||||
|
||||
// Also detach scrollers[0].
|
||||
scrollers[0].classList.remove('ancestor');
|
||||
|
||||
await waitForNextFrame();
|
||||
assert_equals(getComputedStyle(target).width, '0px');
|
||||
assert_equals(getComputedStyle(target).getPropertyValue('--applied'), '');
|
||||
}, 'Dynamically detaching');
|
||||
</script>
|
||||
|
|
@ -41,15 +41,16 @@
|
|||
scroll-timeline: timeline_inline_in_vertical inline;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
#container > div {
|
||||
.target {
|
||||
width: 0px;
|
||||
animation-name: expand;
|
||||
animation-duration: 10s;
|
||||
animation-timing-function: linear;
|
||||
position: absolute;
|
||||
}
|
||||
/* Ensure stable expectations if feature is not supported */
|
||||
@supports not (animation-timeline:foo) {
|
||||
#container > div { animation-play-state: paused; }
|
||||
.target { animation-play-state: paused; }
|
||||
}
|
||||
#element_initial_axis { animation-timeline: timeline_initial_axis; }
|
||||
#element_vertical { animation-timeline: timeline_vertical; }
|
||||
|
|
@ -59,21 +60,33 @@
|
|||
#element_block_in_vertical { animation-timeline: timeline_block_in_vertical; }
|
||||
#element_inline_in_vertical { animation-timeline: timeline_inline_in_vertical; }
|
||||
</style>
|
||||
<div class=scroller id=timeline_initial_axis><div class=contents></div></div>
|
||||
<div class=scroller id=timeline_vertical><div class=contents></div></div>
|
||||
<div class=scroller id=timeline_horizontal><div class=contents></div></div>
|
||||
<div class=scroller id=timeline_block_in_horizontal><div class=contents></div></div>
|
||||
<div class=scroller id=timeline_inline_in_horizontal><div class=contents></div></div>
|
||||
<div class=scroller id=timeline_block_in_vertical><div class=contents></div></div>
|
||||
<div class=scroller id=timeline_inline_in_vertical><div class=contents></div></div>
|
||||
<div id=container>
|
||||
<div id=element_initial_axis></div>
|
||||
<div id=element_vertical></div>
|
||||
<div id=element_horizontal></div>
|
||||
<div id=element_block_in_horizontal></div>
|
||||
<div id=element_inline_in_horizontal></div>
|
||||
<div id=element_block_in_vertical></div>
|
||||
<div id=element_inline_in_vertical></div>
|
||||
<div class=scroller id=timeline_initial_axis>
|
||||
<div class=contents></div>
|
||||
<div class=target id=element_initial_axis></div>
|
||||
</div>
|
||||
<div class=scroller id=timeline_vertical>
|
||||
<div class=contents></div>
|
||||
<div class=target id=element_vertical></div>
|
||||
</div>
|
||||
<div class=scroller id=timeline_horizontal>
|
||||
<div class=contents></div>
|
||||
<div class=target id=element_horizontal></div>
|
||||
</div>
|
||||
<div class=scroller id=timeline_block_in_horizontal>
|
||||
<div class=contents></div>
|
||||
<div class=target id=element_block_in_horizontal></div>
|
||||
</div>
|
||||
<div class=scroller id=timeline_inline_in_horizontal>
|
||||
<div class=contents></div>
|
||||
<div class=target id=element_inline_in_horizontal></div>
|
||||
</div>
|
||||
<div class=scroller id=timeline_block_in_vertical>
|
||||
<div class=contents></div>
|
||||
<div class=target id=element_block_in_vertical></div>
|
||||
</div>
|
||||
<div class=scroller id=timeline_inline_in_vertical>
|
||||
<div class=contents></div>
|
||||
<div class=target id=element_inline_in_vertical></div>
|
||||
</div>
|
||||
<script>
|
||||
// Animations linked to vertical scroll-timelines are at 75% progress.
|
||||
|
|
|
|||
|
|
@ -62,7 +62,10 @@
|
|||
async function runTest() {
|
||||
promise_test(async t => {
|
||||
await waitForNextFrame();
|
||||
const anim = document.getAnimations()[0];
|
||||
const anims = document.getAnimations();
|
||||
assert_equals(anims.length, 1,
|
||||
"Should have one animation attatched to the view-timeline");
|
||||
const anim = anims[0];
|
||||
await anim.ready;
|
||||
await waitForNextFrame();
|
||||
|
||||
|
|
|
|||
|
|
@ -51,7 +51,6 @@
|
|||
// scrollTop=200 to 400 is the entry range
|
||||
container.scrollTop = 200;
|
||||
await waitForNextFrame();
|
||||
const anim = document.getAnimations()[0];
|
||||
assert_equals(getComputedStyle(subject).opacity, '0',
|
||||
'Effect at entry 0%');
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Animations using view-timeline</title>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
|
||||
<link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#view-timelines-named">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,338 @@
|
|||
<!DOCTYPE html>
|
||||
<title>View Timeline Attachment</title>
|
||||
<link rel="help" src="https://github.com/w3c/csswg-drafts/issues/7759">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/web-animations/testcommon.js"></script>
|
||||
|
||||
<main id=main></main>
|
||||
<script>
|
||||
function inflate(t, template) {
|
||||
t.add_cleanup(() => main.replaceChildren());
|
||||
main.append(template.content.cloneNode(true));
|
||||
main.offsetTop;
|
||||
}
|
||||
|
||||
async function scrollTop(e, value) {
|
||||
e.scrollTop = value;
|
||||
await waitForNextFrame();
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
@keyframes anim {
|
||||
from { width: 0px; --applied:true; }
|
||||
to { width: 200px; --applied:true; }
|
||||
}
|
||||
|
||||
.scroller {
|
||||
overflow-y: hidden;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
.scroller > .content {
|
||||
margin: 400px 0px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
}
|
||||
.target {
|
||||
background-color: coral;
|
||||
width: 0px;
|
||||
animation: anim auto linear;
|
||||
animation-timeline: t1;
|
||||
}
|
||||
/*
|
||||
.defer {
|
||||
view-timeline-name: t1;
|
||||
view-timeline-attachment: defer;
|
||||
}
|
||||
*/
|
||||
.timeline {
|
||||
view-timeline-name: t1;
|
||||
}
|
||||
.local {
|
||||
view-timeline-attachment: local;
|
||||
}
|
||||
.defer {
|
||||
view-timeline-attachment: defer;
|
||||
}
|
||||
.ancestor {
|
||||
view-timeline-attachment: ancestor;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<!-- Basic Behavior -->
|
||||
|
||||
<template id=view_timeline_defer>
|
||||
<div class="timeline defer">
|
||||
<div class=target>Test</div>
|
||||
<div class=scroller>
|
||||
<div class="content timeline ancestor"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
promise_test(async (t) => {
|
||||
inflate(t, view_timeline_defer);
|
||||
let scroller = main.querySelector('.scroller');
|
||||
let target = main.querySelector('.target');
|
||||
await scrollTop(scroller, 350); // 50%
|
||||
assert_equals(getComputedStyle(target).width, '100px'); // 0px => 200px, 50%
|
||||
}, 'Descendant can attach to deferred timeline');
|
||||
</script>
|
||||
|
||||
<template id=view_timeline_defer_no_attach>
|
||||
<div class="timeline defer">
|
||||
<div class=target>Test</div>
|
||||
<div class=scroller>
|
||||
<div class="timeline content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
promise_test(async (t) => {
|
||||
inflate(t, view_timeline_defer_no_attach);
|
||||
let scroller = main.querySelector('.scroller');
|
||||
let target = main.querySelector('.target');
|
||||
await scrollTop(scroller, 350); // 50%
|
||||
assert_equals(getComputedStyle(target).width, '0px');
|
||||
assert_equals(getComputedStyle(target).getPropertyValue('--applied'), '');
|
||||
}, 'Deferred timeline with no attachments');
|
||||
</script>
|
||||
|
||||
<template id=view_timeline_defer_two_attachments>
|
||||
<div class="timeline defer">
|
||||
<div class=target>Test</div>
|
||||
<div class=scroller>
|
||||
<div class="content timeline ancestor"></div>
|
||||
<!-- Extra attachment -->
|
||||
<div class="timeline ancestor"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
promise_test(async (t) => {
|
||||
inflate(t, view_timeline_defer_two_attachments);
|
||||
let scroller = main.querySelector('.scroller');
|
||||
let target = main.querySelector('.target');
|
||||
await scrollTop(scroller, 350); // 50%
|
||||
assert_equals(getComputedStyle(target).width, '0px');
|
||||
assert_equals(getComputedStyle(target).getPropertyValue('--applied'), '');
|
||||
}, 'Deferred timeline with two attachments');
|
||||
</script>
|
||||
|
||||
<!-- Effective Axis of ViewTimeline -->
|
||||
|
||||
<template id=view_timeline_defer_axis>
|
||||
<div class="timeline defer" style="view-timeline-axis:inline">
|
||||
<div class=target>Test</div>
|
||||
<div class=scroller>
|
||||
<div class="content timeline ancestor" style="view-timeline-axis:vertical"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
promise_test(async (t) => {
|
||||
inflate(t, view_timeline_defer_axis);
|
||||
let target = main.querySelector('.target');
|
||||
assert_equals(target.getAnimations().length, 1);
|
||||
let anim = target.getAnimations()[0];
|
||||
assert_not_equals(anim.timeline, null);
|
||||
assert_equals(anim.timeline.axis, 'vertical');
|
||||
}, 'Axis of deferred timeline is taken from attached timeline');
|
||||
</script>
|
||||
|
||||
<template id=view_timeline_defer_axis_multiple>
|
||||
<div class="timeline defer" style="view-timeline-axis:inline">
|
||||
<div class=target>Test</div>
|
||||
<div class=scroller>
|
||||
<div class="content timeline ancestor" style="view-timeline-axis:vertical"></div>
|
||||
<!-- Extra attachment -->
|
||||
<div class="timeline ancestor"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
promise_test(async (t) => {
|
||||
inflate(t, view_timeline_defer_axis_multiple);
|
||||
let target = main.querySelector('.target');
|
||||
assert_equals(target.getAnimations().length, 1);
|
||||
let anim = target.getAnimations()[0];
|
||||
assert_not_equals(anim.timeline, null);
|
||||
assert_equals(anim.timeline.axis, 'block');
|
||||
}, 'Axis of deferred timeline with multiple attachments');
|
||||
</script>
|
||||
|
||||
<!-- Effective Inset of ViewTimeline -->
|
||||
|
||||
<template id=view_timeline_inset>
|
||||
<div class="timeline defer" style="view-timeline-inset:0px">
|
||||
<div class=target>Test</div>
|
||||
<div class=scroller>
|
||||
<div class="content timeline ancestor" style="view-timeline-inset:50px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
promise_test(async (t) => {
|
||||
inflate(t, view_timeline_inset);
|
||||
let scroller = main.querySelector('.scroller');
|
||||
let target = main.querySelector('.target');
|
||||
|
||||
// Range: [200, 500] + [50, -50] (inset) = [250, 450]
|
||||
await scrollTop(scroller, 300); // 25%
|
||||
assert_equals(getComputedStyle(target).width, '50px'); // 0px => 200px, 25%
|
||||
}, 'Inset of deferred timeline is taken from attached timeline');
|
||||
</script>
|
||||
|
||||
<!-- Dynamic Reattachment -->
|
||||
|
||||
<template id=view_timeline_reattach>
|
||||
<div class="timeline defer">
|
||||
<div class=target>Test</div>
|
||||
<div class=scroller>
|
||||
<div class="content timeline ancestor"></div>
|
||||
</div>
|
||||
<div class=scroller>
|
||||
<div class="content timeline"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
promise_test(async (t) => {
|
||||
inflate(t, view_timeline_reattach);
|
||||
let scrollers = main.querySelectorAll('.scroller');
|
||||
let contents = main.querySelectorAll('.content');
|
||||
assert_equals(scrollers.length, 2);
|
||||
let target = main.querySelector('.target');
|
||||
// Range: [200, 500]
|
||||
await scrollTop(scrollers[0], 350); // 50%
|
||||
await scrollTop(scrollers[1], 275); // 25%
|
||||
|
||||
// Attached to contents[0].
|
||||
assert_equals(getComputedStyle(target).width, '100px'); // 0px => 200px, 50%
|
||||
|
||||
// Reattach to contents[1].
|
||||
contents[0].classList.remove('ancestor');
|
||||
contents[1].classList.add('ancestor');
|
||||
|
||||
await waitForNextFrame();
|
||||
assert_equals(getComputedStyle(target).width, '50px'); // 0px => 200px, 25%
|
||||
}, 'Dynamically re-attaching');
|
||||
</script>
|
||||
|
||||
|
||||
<template id=view_timeline_dynamic_attach_second>
|
||||
<div class="timeline defer">
|
||||
<div class=target>Test</div>
|
||||
<div class=scroller>
|
||||
<div class="timeline content"></div>
|
||||
</div>
|
||||
<div class=scroller>
|
||||
<div class="timeline content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
promise_test(async (t) => {
|
||||
inflate(t, view_timeline_dynamic_attach_second);
|
||||
let scrollers = main.querySelectorAll('.scroller');
|
||||
let contents = main.querySelectorAll('.content');
|
||||
assert_equals(scrollers.length, 2);
|
||||
let target = main.querySelector('.target');
|
||||
// Range: [200, 500]
|
||||
await scrollTop(scrollers[0], 350); // 50%
|
||||
await scrollTop(scrollers[1], 275); // 25%
|
||||
|
||||
// Attached to no timelines initially:
|
||||
assert_equals(getComputedStyle(target).width, '0px');
|
||||
assert_equals(getComputedStyle(target).getPropertyValue('--applied'), '');
|
||||
|
||||
// Attach to contents[0].
|
||||
contents[0].classList.add('ancestor');
|
||||
await waitForNextFrame();
|
||||
assert_equals(getComputedStyle(target).width, '100px'); // 0px => 200px, 50%
|
||||
|
||||
// Also attach contents[1].
|
||||
contents[1].classList.add('ancestor');
|
||||
|
||||
await waitForNextFrame();
|
||||
assert_equals(getComputedStyle(target).width, '0px');
|
||||
assert_equals(getComputedStyle(target).getPropertyValue('--applied'), '');
|
||||
}, 'Dynamically attaching');
|
||||
</script>
|
||||
|
||||
|
||||
<template id=view_timeline_dynamic_detach_second>
|
||||
<div class="timeline defer">
|
||||
<div class=target>Test</div>
|
||||
<div class=scroller>
|
||||
<div class="content timeline ancestor"></div>
|
||||
</div>
|
||||
<div class=scroller>
|
||||
<div class="content timeline ancestor"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
promise_test(async (t) => {
|
||||
inflate(t, view_timeline_dynamic_detach_second);
|
||||
let scrollers = main.querySelectorAll('.scroller');
|
||||
let contents = main.querySelectorAll('.content');
|
||||
assert_equals(scrollers.length, 2);
|
||||
let target = main.querySelector('.target');
|
||||
// Range: [200, 500]
|
||||
await scrollTop(scrollers[0], 350); // 50%
|
||||
await scrollTop(scrollers[1], 275); // 25%
|
||||
|
||||
// Attached to two timelines initially:
|
||||
assert_equals(getComputedStyle(target).width, '0px');
|
||||
assert_equals(getComputedStyle(target).getPropertyValue('--applied'), '');
|
||||
|
||||
// Detach contents[1].
|
||||
contents[1].classList.remove('ancestor');
|
||||
|
||||
await waitForNextFrame();
|
||||
assert_equals(getComputedStyle(target).width, '100px'); // 0px => 200px, 50%
|
||||
|
||||
// Also detach contents[0].
|
||||
contents[0].classList.remove('ancestor');
|
||||
|
||||
await waitForNextFrame();
|
||||
assert_equals(getComputedStyle(target).width, '0px');
|
||||
assert_equals(getComputedStyle(target).getPropertyValue('--applied'), '');
|
||||
}, 'Dynamically detaching');
|
||||
</script>
|
||||
|
||||
<!-- ViewTimelines and ScrollTimelines -->
|
||||
|
||||
<template id=view_scroll_timeline_defer>
|
||||
<div style="scroll-timeline: t1 defer">
|
||||
<div class=target>Test1</div>
|
||||
<div class="timeline defer">
|
||||
<div class=target>Test2</div>
|
||||
<div class=scroller style="scroll-timeline: t1 ancestor;">
|
||||
<div class="content timeline ancestor" style="view-timeline-inset: 0px 50px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
promise_test(async (t) => {
|
||||
inflate(t, view_scroll_timeline_defer);
|
||||
let scroller = main.querySelector('.scroller');
|
||||
let targets = main.querySelectorAll('.target');
|
||||
await scrollTop(scroller, 350);
|
||||
|
||||
// Attached to ScrollTimeline:
|
||||
// Range: [0, 700]
|
||||
// 350 => 50%
|
||||
assert_equals(getComputedStyle(targets[0]).width, '100px');
|
||||
|
||||
// Attached to ViewTimeline:
|
||||
// Range: [200, 500] + [50, 0] (inset) = [250, 500]
|
||||
// 350 => 40%
|
||||
assert_equals(getComputedStyle(targets[1]).width, '80px');
|
||||
}, 'Mixing deferred scroll and view-timelines');
|
||||
</script>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Animations using view-timeline-inset</title>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
|
||||
<link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#propdef-view-timeline-inset">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
|
|
|||
|
|
@ -80,7 +80,10 @@
|
|||
|
||||
promise_test(async t => {
|
||||
await waitForNextFrame();
|
||||
const anim = document.getAnimations()[0];
|
||||
const anims = document.getAnimations();
|
||||
assert_equals(anims.length, 1,
|
||||
"Should have one animation attatched to the view-timeline");
|
||||
const anim = anims[0];
|
||||
await anim.ready;
|
||||
await waitForNextFrame();
|
||||
|
||||
|
|
|
|||
|
|
@ -260,8 +260,7 @@
|
|||
}, 'view-timeline on ancestor sibling, closer scroll-timeline wins');
|
||||
</script>
|
||||
|
||||
|
||||
<template id=timeline_ancestor_view_timeline_wins_on_same_element>
|
||||
<template id=timeline_ancestor_scroll_timeline_wins_on_same_element>
|
||||
<style>
|
||||
#timelines {
|
||||
height: 0px;
|
||||
|
|
@ -294,8 +293,11 @@
|
|||
</template>
|
||||
<script>
|
||||
promise_test(async (t) => {
|
||||
inflate(t, timeline_ancestor_view_timeline_wins_on_same_element);
|
||||
inflate(t, timeline_ancestor_scroll_timeline_wins_on_same_element);
|
||||
await waitForNextFrame();
|
||||
assert_equals(getComputedStyle(target).zIndex, '75');
|
||||
}, 'view-timeline on ancestor sibling, view-timeline wins on same element');
|
||||
// In case of a name conflict on the same element, scroll progress timelines
|
||||
// take precedence over view progress timelines.
|
||||
// https://drafts.csswg.org/scroll-animations-1/#timeline-scope
|
||||
assert_equals(getComputedStyle(target).zIndex, '0');
|
||||
}, 'view-timeline on ancestor sibling, scroll-timeline wins on same element');
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue