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}
diff --git a/cc/animation/keyframe_effect.cc b/cc/animation/keyframe_effect.cc
index d461caa0..675e651 100644
--- a/cc/animation/keyframe_effect.cc
+++ b/cc/animation/keyframe_effect.cc
@@ -1038,7 +1038,10 @@
bool keyframe_model_finished = false;
for (auto& keyframe_model : keyframe_models()) {
- if (!keyframe_model->is_finished() &&
+ // Scroll driven animations are never finished as the user may scroll back
+ // into the active range.
+ if (!animation_->IsScrollLinkedAnimation() &&
+ !keyframe_model->is_finished() &&
keyframe_model->IsFinishedAt(monotonic_time)) {
keyframe_model->SetRunState(gfx::KeyframeModel::FINISHED, monotonic_time);
keyframe_model_finished = true;
diff --git a/third_party/blink/renderer/platform/runtime_enabled_features.json5 b/third_party/blink/renderer/platform/runtime_enabled_features.json5
index 65542cd4..bcd5b44 100644
--- a/third_party/blink/renderer/platform/runtime_enabled_features.json5
+++ b/third_party/blink/renderer/platform/runtime_enabled_features.json5
@@ -3128,7 +3128,7 @@
},
{
name: "ScrollTimelineOnCompositor",
- status: "test"
+ status: "stable"
},
// Implements documentElement.scrollTop/Left and bodyElement.scrollTop/Left
// as per the spec, matching other Web engines.
diff --git a/third_party/blink/web_tests/external/wpt/scroll-animations/css/animation-fill-outside-range-ref.html b/third_party/blink/web_tests/external/wpt/scroll-animations/css/animation-fill-outside-range-ref.html
new file mode 100644
index 0000000..998576b
--- /dev/null
+++ b/third_party/blink/web_tests/external/wpt/scroll-animations/css/animation-fill-outside-range-ref.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html>
+<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/">
+<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;
+ }
+ .anim.contain {
+ background: green;
+ }
+ .spacer {
+ height: 1000px;
+ }
+
+ .before {
+ top: 450px;
+ }
+ .after {
+ top: 50px;
+ }
+ .contain {
+ top: 250px;
+ }
+ .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: 1;
+ will-change: opacity;
+ }
+
+</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>
+ function run() {
+ let scroller = document.querySelector('.scroller');
+ scroller.scrollTo({top: 200});
+ }
+ run();
+</script>
+</html>
diff --git a/third_party/blink/web_tests/external/wpt/scroll-animations/css/animation-fill-outside-range-test.html b/third_party/blink/web_tests/external/wpt/scroll-animations/css/animation-fill-outside-range-test.html
new file mode 100644
index 0000000..90d4f451
--- /dev/null
+++ b/third_party/blink/web_tests/external/wpt/scroll-animations/css/animation-fill-outside-range-test.html
@@ -0,0 +1,137 @@
+<!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>
diff --git a/third_party/blink/web_tests/external/wpt/scroll-animations/css/animation-inactive-outside-range-ref.html b/third_party/blink/web_tests/external/wpt/scroll-animations/css/animation-inactive-outside-range-ref.html
index ea3215e..b9ed25d 100644
--- a/third_party/blink/web_tests/external/wpt/scroll-animations/css/animation-inactive-outside-range-ref.html
+++ b/third_party/blink/web_tests/external/wpt/scroll-animations/css/animation-inactive-outside-range-ref.html
@@ -21,6 +21,9 @@
background: darkred;
view-timeline: --view;
}
+ .anim.contain {
+ background: green;
+ }
.spacer {
height: 1000px;
}
@@ -31,9 +34,18 @@
.after {
top: 50px;
}
+ .contain {
+ top: 250px;
+ }
.indicator {
position: fixed;
- top: 315px;
+ top: 50px;
+ }
+ .contain .indicator {
+ top: 100px;
+ }
+ .contain .indicator:nth-child(2) {
+ left: 200px;
}
.after .indicator {
@@ -63,10 +75,14 @@
</style>
</head>
<body>
- <p>Neither of the activity indicators should be active as both of the observed elements are out of view.</p>
+ <p>None of the activity indicators should be active all of the animations are outside of their active range.</p>
<div class="scroller">
- <div class="anim after"><div class="indicator">After phase: <div><div></div></div></div></div>
- <div class="anim before"><div class="indicator">Before phase: <div><div></div></div></div></div>
+ <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>
diff --git a/third_party/blink/web_tests/external/wpt/scroll-animations/css/animation-inactive-outside-range-test.html b/third_party/blink/web_tests/external/wpt/scroll-animations/css/animation-inactive-outside-range-test.html
index c0021a1f..a17cdb0 100644
--- a/third_party/blink/web_tests/external/wpt/scroll-animations/css/animation-inactive-outside-range-test.html
+++ b/third_party/blink/web_tests/external/wpt/scroll-animations/css/animation-inactive-outside-range-test.html
@@ -23,6 +23,9 @@
background: darkred;
view-timeline: --view;
}
+ .anim.contain {
+ background: green;
+ }
.spacer {
height: 1000px;
}
@@ -33,13 +36,22 @@
.after {
top: 50px;
}
+ .contain {
+ top: 250px;
+ }
@keyframes active-opacity {
0% { opacity: 1; }
100% { opacity: 1; }
}
.indicator {
position: fixed;
- top: 315px;
+ top: 50px;
+ }
+ .contain .indicator {
+ top: 100px;
+ }
+ .contain .indicator:nth-child(2) {
+ left: 200px;
}
.after .indicator {
@@ -68,13 +80,26 @@
animation: active-opacity;
animation-timeline: --view;
}
+
+ .contain .indicator > div > div {
+ animation-range: entry;
+ }
+
+ .contain .indicator:nth-child(2) > div > div {
+ animation-range: exit;
+ }
+
</style>
</head>
<body>
- <p>Neither of the activity indicators should be active as both of the observed elements are out of view.</p>
+ <p>None of the activity indicators should be active all of the animations are outside of their active range.</p>
<div class="scroller">
- <div class="anim after"><div class="indicator">After phase: <div><div></div></div></div></div>
- <div class="anim before"><div class="indicator">Before phase: <div><div></div></div></div></div>
+ <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>
@@ -82,13 +107,13 @@
async function run() {
let scroller = document.querySelector('.scroller');
// Scroll such that each animation becomes active.
- scroller.scrollTo(0, 0);
+ scroller.scrollTo({top: 0});
await waitForCompositorReady();
- scroller.scrollTo(0, 400);
+ scroller.scrollTo({top: 400});
await waitForNextFrame();
// Then scroll between them so that we are before one and after the other.
- scroller.scrollTo(0, 200);
+ scroller.scrollTo({top: 200});
await waitForNextFrame();
takeScreenshot();
}
diff --git a/third_party/blink/web_tests/external/wpt/scroll-animations/view-timelines/animation-events.html b/third_party/blink/web_tests/external/wpt/scroll-animations/view-timelines/animation-events.html
new file mode 100644
index 0000000..b456794
--- /dev/null
+++ b/third_party/blink/web_tests/external/wpt/scroll-animations/view-timelines/animation-events.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html id="top">
+<meta charset="utf-8">
+<title>View timeline delay</title>
+<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#events">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/web-animations/testcommon.js"></script>
+<style>
+ #container {
+ border: 10px solid lightgray;
+ overflow: auto;
+ height: 200px;
+ width: 200px;
+ }
+ .spacer {
+ height: 400px;
+ }
+ #target {
+ background-color: green;
+ height: 100px;
+ }
+</style>
+<body>
+ <div id="container">
+ <div class="spacer"></div>
+ <div id="target"></div>
+ <div class="spacer"></div>
+ </div>
+</body>
+<script type="text/javascript">
+ const keyframes = {transform: ['translateX(0)', 'translateX(100px)']};
+ let target = document.getElementById('target');
+ let scroller = document.querySelector('#container');
+ let timeline = new ViewTimeline({subject: target});
+ promise_test(async t => {
+ let animation = target.animate(keyframes, {
+ timeline,
+ fill: 'both'
+ });
+ scroller.scrollTo({top: 0});
+ await waitForCompositorReady();
+ let finishedPromise = animation.finished;
+ let finished = false;
+ let finishEvents = 0;
+ finishedPromise.then(() => {
+ finished = true;
+ });
+ animation.addEventListener('finish', () => { finishEvents++; });
+
+ scroller.scrollTo({top: 100});
+ await waitForNextFrame();
+ assert_false(finished, "Animation is not finished before starting");
+ assert_equals(finishEvents, 0, "No finish event before scrolling");
+
+ scroller.scrollTo({top: 400});
+ await waitForNextFrame();
+ assert_false(finished, "Animation is not finished while active");
+ assert_equals(finishEvents, 0, "No finish event while active");
+
+ scroller.scrollTo({top: 600});
+ await waitForNextFrame();
+ assert_true(finished, "Animation is finished after passing end");
+ assert_equals(finishEvents, 1, "A finish event is generated after end");
+
+ scroller.scrollTo({top: 400});
+ await waitForNextFrame();
+ assert_not_equals(finishedPromise, animation.finished,
+ "A new finish promise is created when back in active range");
+ finished = false;
+ animation.finished.then(() => {
+ finished = true;
+ });
+
+ scroller.scrollTo({top: 600});
+ await waitForNextFrame();
+ assert_true(finished, "Finishes after passing end");
+ assert_equals(finishEvents, 2, "Another finish event is generated after end");
+ animation.cancel();
+ }, 'View timeline generates and resolves finish promises and events' );
+
+
+</script>
