commit 4a435b6e1f4b155ec9fd108d47b312af9942fb14
parent 91bfea71d9fbba8c0d835638f805b8403eacaa80
Author: Stefan Zager <szager@chromium.org>
Date: Tue, 21 Oct 2025 10:35:36 +0000
Bug 1995013 [wpt PR 55510] - Service IntersectionObserver while composited animations are running, a=testonly
Automatic update from web-platform-tests
Service IntersectionObserver while composited animations are running
As long as there are active IntersectionObservers and animations
running on the compositor thread, we must force main frames.
Bug: chromium:40914013
Change-Id: Ib3879acd16562aff944e2a1f67553422d8b77700
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7006896
Commit-Queue: Stefan Zager <szager@chromium.org>
Reviewed-by: Robert Flack <flackr@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1531473}
--
wpt-commits: 7193cde7a080ea340a31ff99f4b949894b48e4c5
wpt-pr: 55510
Diffstat:
3 files changed, 116 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/intersection-observer/animating.html b/testing/web-platform/tests/intersection-observer/animating.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/intersection-observer-test-utils.js"></script>
+
+<style>
+pre, #log {
+ position: absolute;
+ top: 0;
+ left: 200px;
+}
+#target {
+ width: 100px;
+ height: 100px;
+ background-color: lightblue;
+ will-change: transform;
+}
+@keyframes slideup {
+ 0% { transform: translateY(0) }
+ 30% { transform: translateY(0) }
+ 31% { transform: translateY(-2000px) }
+ 100% { transform: translateY(-2000px) }
+}
+</style>
+
+<div id="target"></div>
+
+<script>
+promise_test(t => {
+ return new Promise(async function(resolve, reject) {
+ let entries = [];
+ let target = document.getElementById("target");
+ let observer = new IntersectionObserver(function(changes) {
+ entries = entries.concat(changes);
+ changes.forEach(entry => {
+ if (!entry.isIntersecting) {
+ resolve("Received not-intersecting notification before animationend.");
+ }
+ });
+ });
+ observer.observe(target);
+ await waitForNotification();
+ assert_equals(entries.length, 1);
+ assert_true(entries[0].isIntersecting);
+ target.style.animation = "3s linear slideup";
+ setTimeout(() => {
+ reject("Did not get a not-intersecting notification within 2 seconds.");
+ }, 2000);
+ });
+}, "IntersectionObserver generates notifications when "
+ + "a transform animation changes intersection state");
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/v2/animated-opacity.html b/testing/web-platform/tests/intersection-observer/v2/animated-opacity.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/intersection-observer-test-utils.js"></script>
+
+<style>
+pre, #log {
+ position: absolute;
+ top: 0;
+ left: 200px;
+}
+#target {
+ background-color: lightblue;
+}
+#occluder {
+ margin-top: -1rem;
+ opacity: 0;
+ will-change: opacity;
+ width: 100px;
+ height: 100px;
+ background-color: pink;
+}
+@keyframes fadein {
+ 0% { opacity: 0 }
+ 30% { opacity: 0 }
+ 31% { opacity: 0.5 }
+ 100% { opacity: 0.5 }
+}
+</style>
+
+<div id="target">Hello, world!</div>
+<div id="occluder"></div>
+
+<script>
+promise_test(t => {
+ return new Promise(async function(resolve, reject) {
+ let entries = [];
+ let target = document.getElementById("target");
+ let observer = new IntersectionObserver(function(changes) {
+ entries = entries.concat(changes);
+ changes.forEach(entry => {
+ if (!entry.isVisible) {
+ resolve("Received not-visible notification before animationend.");
+ }
+ });
+ }, { trackVisibility: true, delay: 100 });
+ assert_true(observer.trackVisibility);
+ observer.observe(target);
+ await waitForNotification();
+ assert_equals(entries.length, 1);
+ assert_true(entries[0].isVisible);
+ let occluder = document.getElementById("occluder");
+ occluder.style.animation = "3s linear fadein";
+ setTimeout(() => {
+ reject("Did not get a not-visible notification within 2 seconds.");
+ }, 2000);
+ });
+}, "IntersectionObserver generates notifications when "
+ + "an opacity animation changes occlusion state.");
+</script>
diff --git a/testing/web-platform/tests/lint.ignore b/testing/web-platform/tests/lint.ignore
@@ -217,8 +217,10 @@ SET TIMEOUT: html/webappapis/scripting/events/event-handler-processing-algorithm
SET TIMEOUT: html/webappapis/scripting/processing-model-2/*
SET TIMEOUT: IndexedDB/*
SET TIMEOUT: infrastructure/*
+SET TIMEOUT: intersection-observer/animating.html
SET TIMEOUT: intersection-observer/resources/*
SET TIMEOUT: intersection-observer/target-in-different-window.html
+SET TIMEOUT: intersection-observer/v2/animated-opacity.html
SET TIMEOUT: js-self-profiling/resources/profiling-script.js
SET TIMEOUT: measure-memory/*
SET TIMEOUT: media-source/mediasource-util.js
