forked from mirrors/gecko-dev
620b32f82d
Automatic update from web-platform-tests Re-enable composited scroll-driven animations. Ensures that scroll-driven animations remain running even after temporarily entering the finished state and turn compositing of SDA back on. Bug: 1454118 Change-Id: Ie39e6865f329d6f4c9d6fae61faa929ecaa12c33 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4624854 Reviewed-by: Kevin Ellis <kevers@chromium.org> Commit-Queue: Robert Flack <flackr@chromium.org> Cr-Commit-Position: refs/heads/main@{#1160007} -- wpt-commits: 6585ea16f5050a44182d3445b86cc66f73fb7670 wpt-pr: 40628
137 lines
3.1 KiB
HTML
137 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html class="reftest-wait">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="help" src="https://drafts.csswg.org/scroll-animations-1/">
|
|
<link rel="match" href="animation-fill-outside-range-ref.html">
|
|
<script src="/common/reftest-wait.js"></script>
|
|
<script src="/web-animations/testcommon.js"></script>
|
|
<style>
|
|
.scroller {
|
|
height: 200px;
|
|
width: 500px;
|
|
overflow: auto;
|
|
position: absolute;
|
|
top: 100px;
|
|
}
|
|
|
|
.anim {
|
|
position: absolute;
|
|
width: 100px;
|
|
height: 100px;
|
|
background: darkred;
|
|
view-timeline: --view;
|
|
}
|
|
.anim.contain {
|
|
background: green;
|
|
}
|
|
.spacer {
|
|
height: 1000px;
|
|
}
|
|
|
|
.before {
|
|
top: 450px;
|
|
}
|
|
.after {
|
|
top: 50px;
|
|
}
|
|
.contain {
|
|
top: 250px;
|
|
}
|
|
@keyframes opaque-before {
|
|
0% { opacity: 1; }
|
|
0.01% { opacity : 0; }
|
|
100% { opacity : 0; }
|
|
}
|
|
@keyframes opaque-after {
|
|
0% { opacity: 0; }
|
|
99.9% { opacity : 0; }
|
|
100% { opacity : 1; }
|
|
}
|
|
.indicator {
|
|
position: fixed;
|
|
top: 50px;
|
|
}
|
|
.contain .indicator {
|
|
top: 100px;
|
|
}
|
|
.contain .indicator:nth-child(2) {
|
|
left: 200px;
|
|
}
|
|
|
|
.after .indicator {
|
|
left: 200px;
|
|
}
|
|
|
|
.indicator > div {
|
|
display: inline-block;
|
|
width: 25px;
|
|
height: 25px;
|
|
position: relative;
|
|
border-radius: 100%;
|
|
box-sizing: border-box;
|
|
border: 2px solid black;
|
|
padding: 3px;
|
|
background: lightgray;
|
|
background-clip: content-box;
|
|
}
|
|
|
|
.indicator > div > div {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 100%;
|
|
background: green;
|
|
opacity: 0;
|
|
animation-fill-mode: both;
|
|
animation-timeline: --view;
|
|
}
|
|
|
|
.after .indicator > div > div,
|
|
.contain .indicator > div > div {
|
|
animation-name: opaque-after;
|
|
}
|
|
.before .indicator > div > div,
|
|
.contain .indicator:nth-child(2) > div > div {
|
|
animation-name: opaque-before;
|
|
}
|
|
|
|
.contain .indicator > div > div {
|
|
animation-range: entry;
|
|
}
|
|
|
|
.contain .indicator:nth-child(2) > div > div {
|
|
animation-range: exit;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<p>All of the activity indicators should be active as the animations should be filling.</p>
|
|
<div class="scroller">
|
|
<div class="anim after"><div class="indicator">After cover phase: <div><div></div></div></div></div>
|
|
<div class="anim before"><div class="indicator">Before cover phase: <div><div></div></div></div></div>
|
|
<div class="anim contain">
|
|
<div class="indicator entry">After entry phase: <div><div></div></div></div>
|
|
<div class="indicator exit">Before exit phase: <div><div></div></div></div>
|
|
</div>
|
|
<div class="spacer"></div>
|
|
</div>
|
|
</body>
|
|
<script>
|
|
async function run() {
|
|
let scroller = document.querySelector('.scroller');
|
|
// Scroll such that each animation becomes active.
|
|
scroller.scrollTo(0, 0);
|
|
await waitForCompositorReady();
|
|
scroller.scrollTo({top: 400});
|
|
await waitForNextFrame();
|
|
|
|
// Then scroll between them so that we are before one and after the other.
|
|
scroller.scrollTo({top: 200});
|
|
await waitForNextFrame();
|
|
takeScreenshot();
|
|
}
|
|
run();
|
|
</script>
|
|
</html>
|