mirror of
https://github.com/servo/servo.git
synced 2025-08-08 06:55:31 +01:00
Update web-platform-tests to revision b'8d8b273d2265095c7f5330ff231940e68fb49754'
This commit is contained in:
WPT Sync Bot
parent
bee09efcc5
commit
9b45fdb3f5
1819 changed files with 34819 additions and 33935 deletions
|
|
@ -8,6 +8,20 @@
|
|||
<script src="/web-animations/testcommon.js"></script>
|
||||
<script src="support/testcommon.js"></script>
|
||||
<style>
|
||||
@keyframes fade-in-out-without-timeline-range {
|
||||
0% { opacity: 0; }
|
||||
40% { opacity: 1; }
|
||||
60% { opacity: 1; }
|
||||
100% { opacity: 0; }
|
||||
}
|
||||
@keyframes fade-out-without-timeline-range {
|
||||
0% { opacity: 1; }
|
||||
100% { opacity: 0; }
|
||||
}
|
||||
@keyframes change-font-size-without-timeline-range {
|
||||
0% { font-size: 10px; }
|
||||
100% { font-size: 30px; }
|
||||
}
|
||||
@keyframes fade-in-out {
|
||||
entry 0% { opacity: 0; }
|
||||
entry 100% { opacity: 1; }
|
||||
|
|
@ -96,6 +110,203 @@ async function scrollTop(element, value) {
|
|||
await waitForNextFrame();
|
||||
}
|
||||
|
||||
// ---------------------------------
|
||||
// Tests without timeline range name
|
||||
// ---------------------------------
|
||||
|
||||
promise_test(async t => {
|
||||
let [container, div] = createTargetWithStuff(t, ['content', 'target', 'content']);
|
||||
container.style.overflow = 'hidden';
|
||||
div.style.animation = "fade-in-out-without-timeline-range 1s linear";
|
||||
div.style.animationTimeline = "view()";
|
||||
// So the range is [200px, 500px].
|
||||
|
||||
await scrollTop(container, 200);
|
||||
assert_equals(getComputedStyle(div).opacity, '0', 'At 0%');
|
||||
await scrollTop(container, 260);
|
||||
assert_equals(getComputedStyle(div).opacity, '0.5', 'At 20%');
|
||||
await scrollTop(container, 320);
|
||||
assert_equals(getComputedStyle(div).opacity, '1', 'At 40%');
|
||||
|
||||
await scrollTop(container, 380);
|
||||
assert_equals(getComputedStyle(div).opacity, '1', 'At 60%');
|
||||
await scrollTop(container, 440);
|
||||
assert_equals(getComputedStyle(div).opacity, '0.5', 'At 80%');
|
||||
await scrollTop(container, 500);
|
||||
assert_equals(getComputedStyle(div).opacity, '0', 'At 100%');
|
||||
}, 'animation-timeline: view() without timeline range name');
|
||||
|
||||
promise_test(async t => {
|
||||
let [container, div] = createTargetWithStuff(t, ['content', 'target', 'content']);
|
||||
container.style.overflow = 'hidden';
|
||||
div.style.animation = "fade-in-out-without-timeline-range 1s linear";
|
||||
div.style.animationTimeline = "view(50px)";
|
||||
// So the range is [250px, 450px].
|
||||
|
||||
await scrollTop(container, 250);
|
||||
assert_equals(getComputedStyle(div).opacity, '0', 'At 0%');
|
||||
await scrollTop(container, 290);
|
||||
assert_equals(getComputedStyle(div).opacity, '0.5', 'At 20%');
|
||||
await scrollTop(container, 330);
|
||||
assert_equals(getComputedStyle(div).opacity, '1', 'At 40%');
|
||||
|
||||
await scrollTop(container, 370);
|
||||
assert_equals(getComputedStyle(div).opacity, '1', 'At 60%');
|
||||
await scrollTop(container, 410);
|
||||
assert_equals(getComputedStyle(div).opacity, '0.5', 'At 80%');
|
||||
await scrollTop(container, 450);
|
||||
assert_equals(getComputedStyle(div).opacity, '0', 'At 100%');
|
||||
}, 'animation-timeline: view(50px) without timeline range name');
|
||||
|
||||
promise_test(async t => {
|
||||
let [container, div] = createTargetWithStuff(t, ['content', 'target', 'content']);
|
||||
container.style.overflow = 'hidden';
|
||||
div.style.animation = "fade-in-out-without-timeline-range 1s linear";
|
||||
div.style.animationTimeline = "view(auto 50px)";
|
||||
// So the range is [250px, 500px].
|
||||
|
||||
await scrollTop(container, 250);
|
||||
assert_equals(getComputedStyle(div).opacity, '0', 'At 0%');
|
||||
await scrollTop(container, 300);
|
||||
assert_equals(getComputedStyle(div).opacity, '0.5', 'At 20%');
|
||||
await scrollTop(container, 350);
|
||||
assert_equals(getComputedStyle(div).opacity, '1', 'At 40%');
|
||||
|
||||
await scrollTop(container, 400);
|
||||
assert_equals(getComputedStyle(div).opacity, '1', 'At 60%');
|
||||
await scrollTop(container, 450);
|
||||
assert_equals(getComputedStyle(div).opacity, '0.5', 'At 80%');
|
||||
await scrollTop(container, 500);
|
||||
assert_equals(getComputedStyle(div).opacity, '0', 'At 100%');
|
||||
}, 'animation-timeline: view(auto 50px) without timeline range name');
|
||||
|
||||
promise_test(async t => {
|
||||
let [container, div] = createTargetWithStuff(t, ['target', 'content']);
|
||||
container.style.overflow = 'hidden';
|
||||
div.style.animation = "fade-out-without-timeline-range 1s linear";
|
||||
div.style.animationTimeline = "view(inline)";
|
||||
// So the range is [-200px, 100px], but it is impossible to scroll to the
|
||||
// negative part.
|
||||
|
||||
await scrollLeft(container, 0);
|
||||
assert_approx_equals(parseFloat(getComputedStyle(div).opacity), 0.33333,
|
||||
0.00001, 'At 66.7%');
|
||||
// Note: 20% for each 60px.
|
||||
await scrollLeft(container, 40);
|
||||
assert_equals(getComputedStyle(div).opacity, '0.2', 'At 80%');
|
||||
await scrollLeft(container, 100);
|
||||
assert_equals(getComputedStyle(div).opacity, '0', 'At 100%');
|
||||
}, 'animation-timeline: view(inline) without timeline range name');
|
||||
|
||||
promise_test(async t => {
|
||||
let [container, div] = createTargetWithStuff(t, ['target', 'content']);
|
||||
container.style.overflow = 'hidden';
|
||||
div.style.animation = "fade-out-without-timeline-range 1s linear";
|
||||
div.style.animationTimeline = "view(horizontal)";
|
||||
// So the range is [-200px, 100px], but it is impossible to scroll to the
|
||||
// negative part.
|
||||
|
||||
await scrollLeft(container, 0);
|
||||
assert_approx_equals(parseFloat(getComputedStyle(div).opacity), 0.33333,
|
||||
0.00001, 'At 66.7%');
|
||||
// Note: 20% for each 60px.
|
||||
await scrollLeft(container, 40);
|
||||
assert_equals(getComputedStyle(div).opacity, '0.2', 'At 80%');
|
||||
await scrollLeft(container, 100);
|
||||
assert_equals(getComputedStyle(div).opacity, '0', 'At 100%');
|
||||
}, 'animation-timeline: view(horizontal) without timeline range name');
|
||||
|
||||
promise_test(async t => {
|
||||
let [container, div] = createTargetWithStuff(t, ['target', 'content']);
|
||||
div.style.animation = "fade-out-without-timeline-range 1s linear";
|
||||
div.style.animationTimeline = "view(vertical)";
|
||||
// So the range is [-200px, 100px], but it is impossible to scroll to the
|
||||
// negative part.
|
||||
|
||||
await scrollTop(container, 0);
|
||||
assert_approx_equals(parseFloat(getComputedStyle(div).opacity), 0.33333,
|
||||
0.00001, 'At 66.7%');
|
||||
// Note: 20% for each 60px.
|
||||
await scrollTop(container, 40);
|
||||
assert_equals(getComputedStyle(div).opacity, '0.2', 'At 80%');
|
||||
await scrollTop(container, 100);
|
||||
assert_equals(getComputedStyle(div).opacity, '0', 'At 100%');
|
||||
}, 'animation-timeline: view(vertical) without timeline range name');
|
||||
|
||||
promise_test(async t => {
|
||||
let [container, div] = createTargetWithStuff(t, ['target', 'content']);
|
||||
container.style.overflow = 'hidden';
|
||||
div.style.animation = "fade-out-without-timeline-range 1s linear";
|
||||
div.style.animationTimeline = "view(horizontal 50px)";
|
||||
// So the range is [-150px, 50px], but it is impossible to scroll to the
|
||||
// negative part.
|
||||
|
||||
// Note: 25% for each 50px.
|
||||
await scrollLeft(container, 0);
|
||||
assert_equals(getComputedStyle(div).opacity, '0.25', 'At 75%');
|
||||
await scrollLeft(container, 10);
|
||||
assert_equals(getComputedStyle(div).opacity, '0.2', 'At 80%');
|
||||
await scrollLeft(container, 50);
|
||||
assert_equals(getComputedStyle(div).opacity, '0', 'At 100%');
|
||||
}, 'animation-timeline: view(horizontal 50px) without timeline range name');
|
||||
|
||||
promise_test(async t => {
|
||||
let [container, div] = createTargetWithStuff(t, ['target', 'content']);
|
||||
container.style.overflow = 'hidden';
|
||||
div.style.animation = "fade-out-without-timeline-range 1s linear, " +
|
||||
"change-font-size-without-timeline-range 1s linear";
|
||||
div.style.animationTimeline = "view(50px), view(inline 50px)";
|
||||
|
||||
await scrollLeft(container, 0);
|
||||
assert_equals(getComputedStyle(div).fontSize, '25px', 'At 75% inline');
|
||||
await scrollLeft(container, 10);
|
||||
assert_equals(getComputedStyle(div).fontSize, '26px', 'At 80% inline');
|
||||
await scrollLeft(container, 50);
|
||||
assert_equals(getComputedStyle(div).fontSize, '30px', 'At 100% inline');
|
||||
|
||||
await scrollLeft(container, 0);
|
||||
|
||||
await scrollTop(container, 0);
|
||||
assert_equals(getComputedStyle(div).opacity, '0.25', 'At 75% block');
|
||||
await scrollTop(container, 10);
|
||||
assert_equals(getComputedStyle(div).opacity, '0.2', 'At 80% block');
|
||||
await scrollTop(container, 50);
|
||||
assert_equals(getComputedStyle(div).opacity, '0', 'At 100% block');
|
||||
|
||||
await scrollLeft(container, 10);
|
||||
await scrollTop(container, 10);
|
||||
assert_equals(getComputedStyle(div).fontSize, '26px', 'At 80% inline');
|
||||
assert_equals(getComputedStyle(div).opacity, '0.2', 'At 80% block');
|
||||
}, 'animation-timeline: view(50px), view(inline 50px) without timeline range ' +
|
||||
'name');
|
||||
|
||||
promise_test(async t => {
|
||||
let [container, div] = createTargetWithStuff(t, ['target', 'content']);
|
||||
container.style.overflow = 'hidden';
|
||||
div.style.animation = "fade-out-without-timeline-range 1s linear";
|
||||
|
||||
div.style.animationTimeline = "view(inline)";
|
||||
await scrollLeft(container, 0);
|
||||
assert_approx_equals(parseFloat(getComputedStyle(div).opacity), 0.33333,
|
||||
0.00001, 'At 66.7%');
|
||||
await scrollLeft(container, 40);
|
||||
assert_equals(getComputedStyle(div).opacity, '0.2', 'At 80%');
|
||||
await scrollLeft(container, 100);
|
||||
assert_equals(getComputedStyle(div).opacity, '0', 'At 100%');
|
||||
|
||||
div.style.animationTimeline = "view(inline 50px)";
|
||||
await scrollLeft(container, 0);
|
||||
assert_equals(getComputedStyle(div).opacity, '0.25', 'At 75%');
|
||||
await scrollLeft(container, 50);
|
||||
assert_equals(getComputedStyle(div).opacity, '0', 'At 100%');
|
||||
}, 'animation-timeline: view(inline) changes to view(inline 50px), without' +
|
||||
'timeline range name');
|
||||
|
||||
|
||||
// ---------------------------------
|
||||
// Tests with timeline range name
|
||||
// ---------------------------------
|
||||
|
||||
promise_test(async t => {
|
||||
let [container, div] = createTargetWithStuff(t, ['content', 'target', 'content']);
|
||||
div.style.animation = "fade-in-out 1s linear";
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Animation using progress based timeline</title>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
|
||||
<link rel="help" src="https://drafts.csswg.org/css-animations-2/#animation-timeline">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
|
||||
#scroller {
|
||||
overflow-y: auto;
|
||||
height: 200px;
|
||||
border: 2px solid green;
|
||||
position: relative;
|
||||
background: gray;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
height: 1000px;
|
||||
}
|
||||
|
||||
#align {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background: rgba(0, 0, 200, 0.2);
|
||||
color: white;
|
||||
position: absolute;
|
||||
border: 1px solid white;
|
||||
transform: translateY(200px);
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
#marker {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background: #640;
|
||||
position: absolute;
|
||||
top: 350px;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div id="scroller">
|
||||
<div id="align">TOP</div>
|
||||
<div class="spacer"></div>
|
||||
<div id="marker">BOTTOM</div>
|
||||
</div>
|
||||
<script>
|
||||
scroller.scrollTo(0, 200);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<title>Composited scroll-linked animation with initial scroll offset</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/">
|
||||
<link rel="match" href="scroll-animation-initial-offset-ref.html">
|
||||
<style>
|
||||
|
||||
#scroller {
|
||||
overflow-y: auto;
|
||||
height: 200px;
|
||||
border: 2px solid green;
|
||||
position: relative;
|
||||
background: gray;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
height: 1000px;
|
||||
}
|
||||
|
||||
@keyframes anim {
|
||||
0% { transform: translateY(0); }
|
||||
100% { transform: translateY(800px); }
|
||||
}
|
||||
|
||||
#align {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background: rgba(0, 0, 200, 0.2);
|
||||
color: white;
|
||||
position: absolute;
|
||||
border: 1px solid white;
|
||||
animation: anim linear 10s;
|
||||
animation-timeline: scroll();
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
#marker {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background: #640;
|
||||
position: absolute;
|
||||
top: 350px;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div id="scroller">
|
||||
<div id="align">TOP</div>
|
||||
<div class="spacer"></div>
|
||||
<div id="marker">BOTTOM</div>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
// Test that a scroll-linked animation of a composited property reacts
|
||||
// correctly to a programmatic scroll early during the page load.
|
||||
//
|
||||
// The scroll offset will change before the animation is "started" on the
|
||||
// compositor, so it needs to be able to handle a non-zero initial offset.
|
||||
//
|
||||
scroller.scrollTo(0, 200);
|
||||
|
||||
</script>
|
||||
<script src="/web-animations/testcommon.js"></script>
|
||||
<script>
|
||||
|
||||
document.documentElement.addEventListener('TestRendered', async () => {
|
||||
await waitForCompositorReady();
|
||||
await waitForNextFrame();
|
||||
await waitForNextFrame();
|
||||
document.documentElement.classList.remove("reftest-wait");
|
||||
}, { once: true });
|
||||
|
||||
</script>
|
||||
|
|
@ -122,7 +122,7 @@
|
|||
<template id=multiple_timelines>
|
||||
<style>
|
||||
#timelines {
|
||||
view-timeline: tv vertical, th horizontal;
|
||||
view-timeline: tv vertical ancestor, th horizontal ancestor;
|
||||
background-color: red;
|
||||
}
|
||||
#scroller {
|
||||
|
|
@ -132,6 +132,7 @@
|
|||
display: grid;
|
||||
grid-template-columns: 50px 50px 50px 50px 50px 50px 50px;
|
||||
grid-template-row: 50px 50px 50px 50px 50px 50px 50px;
|
||||
view-timeline: tv defer, th defer;
|
||||
}
|
||||
#scroller > div {
|
||||
z-index: -1;
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
overflow: hidden;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
view-timeline: t1 defer;
|
||||
}
|
||||
.scroller > div {
|
||||
height: 100px;
|
||||
|
|
@ -45,7 +46,7 @@
|
|||
<template id=dynamic_view_timeline_name>
|
||||
<style>
|
||||
.timeline {
|
||||
view-timeline-name: t1;
|
||||
view-timeline: t1 ancestor;
|
||||
}
|
||||
#target {
|
||||
animation: anim 1s linear;
|
||||
|
|
@ -68,27 +69,34 @@
|
|||
// scrollTop=50 is 75% for div75.
|
||||
div75.classList.add('timeline');
|
||||
await waitForCSSScrollTimelineStyle();
|
||||
assert_equals(getComputedStyle(target).zIndex, '75');
|
||||
assert_equals(getComputedStyle(target).zIndex, '75', 'div75');
|
||||
|
||||
// scrollTop=50 is 25% for div25.
|
||||
// Identical timelines in div75 and div25 creates an ambiguity.
|
||||
div25.classList.add('timeline');
|
||||
await waitForCSSScrollTimelineStyle();
|
||||
assert_equals(getComputedStyle(target).zIndex, '25');
|
||||
assert_equals(getComputedStyle(target).zIndex, '-1', 'ambiguous');
|
||||
// Removing the timeline from div75 unambiguously links div25 to the
|
||||
// timeline, making scrollTop=50 at 25% for div25.
|
||||
div75.classList.remove('timeline');
|
||||
await waitForCSSScrollTimelineStyle();
|
||||
assert_equals(getComputedStyle(target).zIndex, '25', 'div25');
|
||||
|
||||
// scrollTop=50 is before the timeline start for div_before.
|
||||
div25.classList.remove('timeline');
|
||||
div_before.classList.add('timeline');
|
||||
await waitForCSSScrollTimelineStyle();
|
||||
assert_equals(getComputedStyle(target).zIndex, '-1');
|
||||
assert_equals(getComputedStyle(target).zIndex, '-1', 'ahead of div_before');
|
||||
// Scroll to 25% (for div_before) to verify that we're linked to that
|
||||
// timeline.
|
||||
await scrollTop(scroller, 150);
|
||||
assert_equals(getComputedStyle(target).zIndex, '25');
|
||||
assert_equals(getComputedStyle(target).zIndex, '25', 'div_before');
|
||||
|
||||
// Now we should be back to div25's timeline, although with the new
|
||||
// scrollTop=150, it's actually at 75%.
|
||||
// Linking the timeline back to div25 verifies that the new scrollTop=150 is
|
||||
// actually at 75%.
|
||||
div_before.classList.remove('timeline');
|
||||
div25.classList.add('timeline');
|
||||
await waitForCSSScrollTimelineStyle();
|
||||
assert_equals(getComputedStyle(target).zIndex, '75');
|
||||
assert_equals(getComputedStyle(target).zIndex, '75', 'div25 again');
|
||||
}, 'Dynamically changing view-timeline-name');
|
||||
</script>
|
||||
|
||||
|
|
@ -98,7 +106,7 @@
|
|||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 100px;
|
||||
view-timeline-name: t1;
|
||||
view-timeline: t1 ancestor;
|
||||
}
|
||||
#target {
|
||||
animation: anim 1s linear;
|
||||
|
|
@ -117,10 +125,10 @@
|
|||
await scrollTop(scroller, 50); // 25% (vertical)
|
||||
await scrollLeft(scroller, 20); // 10% (horizontal)
|
||||
|
||||
assert_equals(getComputedStyle(target).zIndex, '25');
|
||||
assert_equals(getComputedStyle(target).zIndex, '25', 'vertical');
|
||||
timeline.style.viewTimelineAxis = 'horizontal';
|
||||
await waitForCSSScrollTimelineStyle();
|
||||
assert_equals(getComputedStyle(target).zIndex, '10');
|
||||
assert_equals(getComputedStyle(target).zIndex, '10', 'horizontal');
|
||||
}, 'Dynamically changing view-timeline-axis');
|
||||
</script>
|
||||
|
||||
|
|
@ -130,7 +138,7 @@
|
|||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 100px;
|
||||
view-timeline-name: t1;
|
||||
view-timeline: t1 ancestor;
|
||||
}
|
||||
#target {
|
||||
animation: anim 1s linear;
|
||||
|
|
@ -148,17 +156,17 @@
|
|||
|
||||
await scrollTop(scroller, 50); // 25% (without inset).
|
||||
|
||||
assert_equals(getComputedStyle(target).zIndex, '25');
|
||||
assert_equals(getComputedStyle(target).zIndex, '25', 'without inset');
|
||||
timeline.style.viewTimelineInset = '0px 50px';
|
||||
await waitForCSSScrollTimelineStyle();
|
||||
assert_equals(getComputedStyle(target).zIndex, '0');
|
||||
assert_equals(getComputedStyle(target).zIndex, '0', 'with inset');
|
||||
}, 'Dynamically changing view-timeline-inset');
|
||||
</script>
|
||||
|
||||
<template id=timeline_display_none>
|
||||
<style>
|
||||
#timeline {
|
||||
view-timeline-name: t1;
|
||||
view-timeline: t1 ancestor;
|
||||
}
|
||||
#target {
|
||||
animation: anim 1s linear;
|
||||
|
|
@ -176,12 +184,10 @@
|
|||
inflate(t, timeline_display_none);
|
||||
|
||||
await scrollTop(scroller, 50);
|
||||
assert_equals(getComputedStyle(target).zIndex, '25');
|
||||
assert_equals(getComputedStyle(target).zIndex, '25', 'display:block');
|
||||
timeline.style.display = 'none';
|
||||
// Animation is held at previous current time.
|
||||
assert_equals(getComputedStyle(target).zIndex, '25');
|
||||
const anim = target.getAnimations()[0];
|
||||
assert_equals(anim.startTime, null);
|
||||
assert_times_equal(anim.currentTime, 250);
|
||||
await waitForNextFrame();
|
||||
// The timeline became inactive.
|
||||
assert_equals(getComputedStyle(target).zIndex, '-1', 'display:none');
|
||||
}, 'Element with view-timeline becoming display:none');
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -57,9 +57,12 @@
|
|||
|
||||
<template id=timeline_preceding_sibling>
|
||||
<style>
|
||||
#scroller {
|
||||
view-timeline: t1 defer;
|
||||
}
|
||||
#timeline {
|
||||
height: 0px;
|
||||
view-timeline: t1;
|
||||
view-timeline: t1 ancestor;
|
||||
}
|
||||
#target {
|
||||
animation: anim 1s linear;
|
||||
|
|
@ -118,9 +121,12 @@
|
|||
|
||||
<template id=timeline_ancestor_sibling>
|
||||
<style>
|
||||
#scroller {
|
||||
view-timeline: t1 defer;
|
||||
}
|
||||
#timeline {
|
||||
height: 0px;
|
||||
view-timeline: t1;
|
||||
view-timeline: t1 ancestor;
|
||||
}
|
||||
#target {
|
||||
animation: anim 1s linear;
|
||||
|
|
@ -148,11 +154,14 @@
|
|||
}, 'view-timeline on ancestor sibling');
|
||||
</script>
|
||||
|
||||
<template id=timeline_ancestor_sibling_closest>
|
||||
<template id=timeline_ancestor_sibling_conflict>
|
||||
<style>
|
||||
#scroller {
|
||||
view-timeline: t1 defer;
|
||||
}
|
||||
#timeline1, #timeline2 {
|
||||
height: 0px;
|
||||
view-timeline: t1;
|
||||
view-timeline: t1 ancestor;
|
||||
}
|
||||
#target {
|
||||
animation: anim 1s linear;
|
||||
|
|
@ -175,61 +184,23 @@
|
|||
</template>
|
||||
<script>
|
||||
promise_test(async (t) => {
|
||||
inflate(t, timeline_ancestor_sibling_closest);
|
||||
inflate(t, timeline_ancestor_sibling_conflict);
|
||||
await waitForNextFrame();
|
||||
assert_equals(getComputedStyle(target).zIndex, '50');
|
||||
}, 'view-timeline on ancestor sibling, closest wins');
|
||||
assert_equals(getComputedStyle(target).zIndex, 'auto');
|
||||
}, 'view-timeline on ancestor sibling, conflict remains unresolved');
|
||||
</script>
|
||||
|
||||
<template id=timeline_ancestor_sibling_skips_nonmatching>
|
||||
<template id=timeline_ancestor_closer_timeline_wins>
|
||||
<style>
|
||||
#timeline1 {
|
||||
height: 0px;
|
||||
view-timeline: t1;
|
||||
#scroller {
|
||||
view-timeline: t1 defer;
|
||||
}
|
||||
#timeline2 {
|
||||
height: 0px;
|
||||
view-timeline: t2;
|
||||
}
|
||||
#target {
|
||||
animation: anim 1s linear;
|
||||
animation-timeline: t1;
|
||||
}
|
||||
</style>
|
||||
<div id=scroller class=scroller>
|
||||
<div></div>
|
||||
<div id=timeline1></div>
|
||||
<div></div>
|
||||
<div id=timeline2></div>
|
||||
<div>
|
||||
<div>
|
||||
<div id=target></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
promise_test(async (t) => {
|
||||
inflate(t, timeline_ancestor_sibling_skips_nonmatching);
|
||||
await waitForNextFrame();
|
||||
assert_equals(getComputedStyle(target).zIndex, '75');
|
||||
}, 'view-timeline on ancestor sibling, skips nonmatching names');
|
||||
</script>
|
||||
|
||||
<template id=timeline_ancestor_closer_scroll_timeline_wins>
|
||||
<style>
|
||||
#timeline {
|
||||
height: 0px;
|
||||
view-timeline: t1;
|
||||
view-timeline: t1 ancestor;
|
||||
}
|
||||
#scroll {
|
||||
overflow: auto;
|
||||
scroll-timeline: t1;
|
||||
}
|
||||
#scroll > div {
|
||||
height: 50px;
|
||||
#parent {
|
||||
scroll-timeline: t1 defer;
|
||||
}
|
||||
#target {
|
||||
animation: anim 1s linear;
|
||||
|
|
@ -240,13 +211,8 @@
|
|||
<div></div>
|
||||
<div id=timeline></div>
|
||||
<div></div>
|
||||
<div id=scroll>
|
||||
<div></div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<div id=target></div>
|
||||
</div>
|
||||
<div id=parent>
|
||||
<div id=target></div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
|
|
@ -254,18 +220,22 @@
|
|||
</template>
|
||||
<script>
|
||||
promise_test(async (t) => {
|
||||
inflate(t, timeline_ancestor_closer_scroll_timeline_wins);
|
||||
inflate(t, timeline_ancestor_closer_timeline_wins);
|
||||
await waitForNextFrame();
|
||||
assert_equals(getComputedStyle(target).zIndex, '0');
|
||||
}, 'view-timeline on ancestor sibling, closer scroll-timeline wins');
|
||||
assert_equals(getComputedStyle(target).zIndex, 'auto');
|
||||
}, 'view-timeline on ancestor sibling, closer timeline wins');
|
||||
</script>
|
||||
|
||||
<template id=timeline_ancestor_scroll_timeline_wins_on_same_element>
|
||||
<style>
|
||||
#scroller {
|
||||
view-timeline: t1 defer;
|
||||
scroll-timeline: t1 defer;
|
||||
}
|
||||
#timelines {
|
||||
height: 0px;
|
||||
view-timeline: t1;
|
||||
scroll-timeline: t1;
|
||||
view-timeline: t1 ancestor;
|
||||
scroll-timeline: t1 ancestor;
|
||||
overflow: auto;
|
||||
}
|
||||
#timelines > div {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue