commit ceb71d252ddf69c21a56eebc1b37639cc388c79c
parent c692112d524cc752bcbd43a2c898a785f3779c33
Author: Vladimir Levin <vmpstr@chromium.org>
Date: Wed, 26 Nov 2025 09:01:11 +0000
Bug 2002288 [wpt PR 56262] - ScopedVT: Add scroll and clip tests, a=testonly
Automatic update from web-platform-tests
ScopedVT: Add scroll and clip tests
This adds scroll and clip tests. A couple of them fail with the current
implementation.
R=skobes@chromium.org, kevers@chromium.org
Bug: 460753333
Change-Id: Ia83559c51c136f65b4a0b7a6081365a29749904d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7187363
Reviewed-by: Kevin Ellis <kevers@chromium.org>
Commit-Queue: Vladimir Levin <vmpstr@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1549728}
--
wpt-commits: 09b9ffe544130191ef625df5364d8cf881d7f550
wpt-pr: 56262
Diffstat:
6 files changed, 232 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-view-transitions/scoped/clip-on-target-in-callback-ref.html b/testing/web-platform/tests/css/css-view-transitions/scoped/clip-on-target-in-callback-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>View Transitions: Clip on target in callback does not clip root (Ref)</title>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+
+<style>
+#container {
+ width: 200px;
+ height: 200px;
+ background: blue;
+ border: 5px solid black;
+}
+#target {
+ margin-top: 150px;
+ width: 100px;
+ height: 100px;
+ background: green;
+}
+</style>
+
+<div id="container">
+ <div id="target"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/scoped/clip-on-target-in-callback.html b/testing/web-platform/tests/css/css-view-transitions/scoped/clip-on-target-in-callback.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View Transitions: Clip on target in callback does not clip root</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
+<link rel="match" href="clip-on-target-in-callback-ref.html">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<script src="/common/reftest-wait.js"></script>
+<script src="/web-animations/testcommon.js"></script>
+<style>
+#container {
+ width: 200px;
+ height: 200px;
+ background: blue;
+ border: 5px solid black;
+}
+#container.after {
+ overflow: clip;
+}
+
+#target {
+ margin-top: 150px;
+ width: 100px;
+ height: 100px;
+ background: green;
+ view-transition-name: target;
+}
+
+html::view-transition-group(*) { animation-play-state: paused; }
+html::view-transition-old(*) { animation: none; opacity: 0; }
+html::view-transition-new(*) { animation: none; opacity: 1; }
+</style>
+
+<div id="container">
+ <div id="target"></div>
+</div>
+
+<script>
+function runTest() {
+ container.startViewTransition(() => {
+ container.classList.add("after");
+ }).ready.then(takeScreenshot);
+}
+
+waitForCompositorReady().then(runTest);
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-view-transitions/scoped/scrolled-target-position-ref.html b/testing/web-platform/tests/css/css-view-transitions/scoped/scrolled-target-position-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>View Transitions: Scrolled target capture position (ref)</title>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+#target {
+ width: 100px;
+ height: 100px;
+ overflow: scroll;
+ background: lightblue;
+}
+#child {
+ width: 50px;
+ height: 75px;
+ background: green;
+}
+#content {
+ width: 100px;
+ height: 400px;
+ background: yellow;
+}
+</style>
+
+<div id="target">
+ <div id="content"><div id=child></div></div>
+</div>
+
+<script>
+onload = () => {
+ target.scrollTop = 25;
+ takeScreenshot();
+}
+</script>
+
+</html>
diff --git a/testing/web-platform/tests/css/css-view-transitions/scoped/scrolled-target-position.html b/testing/web-platform/tests/css/css-view-transitions/scoped/scrolled-target-position.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View Transitions: Scrolled target capture position</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
+<link rel="match" href="scrolled-target-position-ref.html">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<script src="/common/reftest-wait.js"></script>
+<script src="/web-animations/testcommon.js"></script>
+
+<style>
+#target {
+ width: 100px;
+ height: 100px;
+ overflow: scroll;
+ background: lightblue;
+}
+#child {
+ width: 50px;
+ height: 75px;
+ background: green;
+}
+#content {
+ width: 100px;
+ height: 400px;
+ background: yellow;
+}
+
+html::view-transition-group(*) { animation-play-state: paused; }
+html::view-transition-old(*) { animation: none; opacity: 1; }
+html::view-transition-new(*) { animation: none; opacity: 0; }
+</style>
+
+<div id="target">
+ <div id="content"><div id=child></div></div>
+</div>
+
+<script>
+function runTest() {
+ target.scrollTop = 25;
+ target.startViewTransition().ready.then(takeScreenshot);
+}
+
+waitForCompositorReady().then(runTest);
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-view-transitions/scoped/target-in-scrolled-container-ref.html b/testing/web-platform/tests/css/css-view-transitions/scoped/target-in-scrolled-container-ref.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>View Transitions: Target in scrolled container capture position (ref)</title>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<script src="/common/reftest-wait.js"></script>
+<style>
+#scroller {
+ width: 200px;
+ height: 200px;
+ overflow: scroll;
+ background: lightgray;
+}
+#target {
+ width: 50px;
+ height: 50px;
+ background: green;
+ margin-top: 100px;
+ view-transition-name: target;
+}
+#spacer {
+ height: 200px;
+}
+</style>
+
+<div id="scroller">
+ <div id="target"></div>
+ <div id="spacer"></div>
+</div>
+
+<script>
+onload = () => {
+ scroller.scrollTop = 50;
+ takeScreenshot();
+};
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-view-transitions/scoped/target-in-scrolled-container.html b/testing/web-platform/tests/css/css-view-transitions/scoped/target-in-scrolled-container.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>View Transitions: Target in scrolled container capture position</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
+<link rel="match" href="target-in-scrolled-container-ref.html">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<script src="/common/reftest-wait.js"></script>
+<script src="/web-animations/testcommon.js"></script>
+<style>
+#scroller {
+ width: 200px;
+ height: 200px;
+ overflow: scroll;
+ background: lightgray;
+}
+#target {
+ width: 50px;
+ height: 50px;
+ background: green;
+ margin-top: 100px;
+ view-transition-name: target;
+}
+#spacer {
+ height: 200px;
+}
+
+html::view-transition-group(*) { animation-play-state: paused; }
+html::view-transition-old(*) { animation: none; opacity: 1; }
+html::view-transition-new(*) { animation: none; opacity: 0; }
+</style>
+
+<div id="scroller">
+ <div id="target"></div>
+ <div id="spacer"></div>
+</div>
+
+<script>
+function runTest() {
+ scroller.scrollTop = 50;
+ target.startViewTransition().ready.then(takeScreenshot);
+}
+
+waitForCompositorReady().then(runTest);
+</script>
+</html>
