mirror of
https://github.com/servo/servo.git
synced 2025-10-16 00:10:23 +01:00
433 lines
13 KiB
HTML
433 lines
13 KiB
HTML
<!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;
|
|
}
|
|
.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:y"></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, 'y');
|
|
}, '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:y"></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>
|
|
|
|
<template id=view_timeline_ancestor_attached_removed>
|
|
<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_ancestor_attached_removed);
|
|
let scroller = main.querySelector('.scroller');
|
|
let target = main.querySelector('.target');
|
|
let content = main.querySelector('.content');
|
|
await scrollTop(scroller, 350); // 50%
|
|
assert_equals(getComputedStyle(target).width, '100px'); // 0px => 200px, 50%
|
|
|
|
content.remove();
|
|
await waitForNextFrame();
|
|
assert_equals(getComputedStyle(target).width, '0px');
|
|
assert_equals(getComputedStyle(target).getPropertyValue('--applied'), '');
|
|
|
|
scroller.append(content);
|
|
await scrollTop(scroller, 350); // 50%
|
|
assert_equals(getComputedStyle(target).width, '100px'); // 0px => 200px, 50%
|
|
}, 'Removing/inserting ancestor attached element');
|
|
</script>
|
|
|
|
<template id=view_timeline_ancestor_attached_display_none>
|
|
<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_ancestor_attached_display_none);
|
|
let scroller = main.querySelector('.scroller');
|
|
let target = main.querySelector('.target');
|
|
let content = main.querySelector('.content');
|
|
await scrollTop(scroller, 350); // 50%
|
|
assert_equals(getComputedStyle(target).width, '100px'); // 0px => 200px, 50%
|
|
|
|
content.style.display = 'none';
|
|
await waitForNextFrame();
|
|
assert_equals(getComputedStyle(target).width, '0px');
|
|
assert_equals(getComputedStyle(target).getPropertyValue('--applied'), '');
|
|
|
|
content.style.display = 'block';
|
|
await scrollTop(scroller, 350); // 50%
|
|
assert_equals(getComputedStyle(target).width, '100px'); // 0px => 200px, 50%
|
|
}, 'Ancestor attached element becoming display:none/block');
|
|
</script>
|
|
|
|
<template id=view_timeline_dynamic_defer>
|
|
<style>
|
|
.inner-content {
|
|
margin: 100px 0px;
|
|
width: 20px;
|
|
height: 50px;
|
|
background-color: red;
|
|
}
|
|
</style>
|
|
<div class="scroller">
|
|
<div class="content timeline">
|
|
<div class="target">
|
|
<div class="inner-content timeline ancestor"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
promise_test(async (t) => {
|
|
inflate(t, view_timeline_dynamic_defer);
|
|
let target = main.querySelector('.target');
|
|
let scroller = main.querySelector('.scroller');
|
|
let outer = main.querySelector('.content');
|
|
let inner = main.querySelector('.inner-content');
|
|
|
|
// Outer view timeline range: [200, 500]
|
|
// Inner view timeline range: [200, 450]
|
|
|
|
await scrollTop(scroller, 275); // 25% (outer), 30% (inner)
|
|
|
|
// Attached to outer_view timeline (local).
|
|
assert_equals(getComputedStyle(target).width, '50px'); // 0px => 200px, 25%
|
|
|
|
// Effectively attached to inner.
|
|
outer.classList.add('defer');
|
|
await waitForNextFrame();
|
|
assert_equals(getComputedStyle(target).width, '60px'); // 0px => 200px, 30%
|
|
|
|
// Attached to outer_scroller again.
|
|
outer.classList.remove('defer');
|
|
await waitForNextFrame();
|
|
assert_equals(getComputedStyle(target).width, '50px'); // 0px => 200px, 25%
|
|
}, 'Dynamically becoming a deferred timeline');
|
|
</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>
|