Kevin Ellis
b89ed2465e
Automatic update from web-platform-tests [SDA] Fix naming conflict resolution Resolving name conflicts by selecting last in flat tree order was already implemented behind a flag. The same flag was used for making names global by default. This patch decouples conflict resolution from global scope. Though resolutions on the same issue (#12581) handling the full set of resolutions requires updating more tests, which in turns entails more risk, and potentially slowing the upstream merge. Remaining resolutions on this issue will be tackled in follow up CLs. https://chromestatus.com/feature/5139380420345856 Bug: 519612140 Change-Id: Id0d53dbb27b8bedeb246aa4091f6ab04840cf2f4 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7899178 Commit-Queue: Kevin Ellis <kevers@chromium.org> Reviewed-by: Robert Flack <flackr@chromium.org> Cr-Commit-Position: refs/heads/main@{#1642366} -- wpt-commits: d80bfc6ef0909bb6f71d41339532e37ffd30cad8 wpt-pr: 60427
116 lines
3.3 KiB
HTML
116 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
|
<title>Deferred timelines via Animation.timeline</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; }
|
|
to { width: 200px; }
|
|
}
|
|
.scroller {
|
|
overflow-y: hidden;
|
|
width: 200px;
|
|
height: 200px;
|
|
}
|
|
.scroller > .content {
|
|
margin: 400px 0px;
|
|
width: 100px;
|
|
height: 100px;
|
|
background-color: green;
|
|
}
|
|
.animating {
|
|
background-color: coral;
|
|
width: 0px;
|
|
animation: anim auto linear;
|
|
animation-timeline: --t1;
|
|
}
|
|
.timeline {
|
|
scroll-timeline-name: --t1;
|
|
}
|
|
.scope {
|
|
timeline-scope: --t1;
|
|
}
|
|
</style>
|
|
|
|
<template id=animation_timeline_attached>
|
|
<div class="scope">
|
|
<div class=animating>Test</div>
|
|
<div class="scroller timeline">
|
|
<div class="content animating"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
promise_test(async (t) => {
|
|
inflate(t, animation_timeline_attached);
|
|
let scroller = main.querySelector('.scroller');
|
|
let animating = Array.from(main.querySelectorAll('.animating'));
|
|
|
|
assert_equals(animating.length, 2);
|
|
let animations = animating.map((e) => e.getAnimations()[0]);
|
|
assert_equals(animations.length, 2);
|
|
|
|
// animations[0] is attached via deferred timeline (timeline-scope),
|
|
// and animations[1] is attached directly.
|
|
assert_equals(animations[0].timeline, animations[1].timeline);
|
|
}, 'Animation.timeline returns attached timeline');
|
|
</script>
|
|
|
|
<template id=animation_timeline_inactive>
|
|
<div class="scope">
|
|
<div class=animating>Test</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
promise_test(async (t) => {
|
|
inflate(t, animation_timeline_inactive);
|
|
let scroller = main.querySelector('.scroller');
|
|
let animating = main.querySelector('.animating');
|
|
|
|
// https://github.com/w3c/csswg-drafts/issues/13807
|
|
// RESOLVED: unresolved timelines are represented in the OM as null
|
|
assert_equals(animating.getAnimations()[0].timeline, null);
|
|
}, 'Animation.timeline returns null for an inactive deferred timeline');
|
|
</script>
|
|
|
|
<template id=animation_timeline_overattached>
|
|
<div class="scope">
|
|
<div class=animating>Test</div>
|
|
<div class="scroller timeline" id="a">
|
|
<div class="content"></div>
|
|
</div>
|
|
<div class="scroller timeline" id="b">
|
|
<div class="content"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
promise_test(async (t) => {
|
|
inflate(t, animation_timeline_overattached);
|
|
const scroller = main.querySelector('.scroller');
|
|
const animating = main.querySelector('.animating');
|
|
const timeline = animating.getAnimations()[0].timeline;
|
|
|
|
// https://github.com/w3c/csswg-drafts/issues/12581
|
|
// RESOLVED: change timeline clash resolution to use last in tree order
|
|
assert_true(!!timeline, 'timeline naming conflict resolved');
|
|
assert_equals(timeline.source.id, "b");
|
|
}, 'Animation.timeline naming conflict resolves to last in tree order');
|
|
</script>
|