commit 5c87bc080f174a87f638a2b3628c78eff5839433
parent dea522ce628265c9b9b2a6dcb18fb3b7d5ecb5bf
Author: Kevin Ellis <kevers@google.com>
Date: Mon, 8 Dec 2025 12:27:23 +0000
Bug 2004334 [wpt PR 56501] - [scoped-vt] VT pseudos escape overflow clip on the scoped element., a=testonly
Automatic update from web-platform-tests
[scoped-vt] VT pseudos escape overflow clip on the scoped element.
Bug: 463393319
Change-Id: Ie67714db5b8d49ae87597959433fd79c89547346
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7224470
Reviewed-by: Vladimir Levin <vmpstr@chromium.org>
Commit-Queue: Kevin Ellis <kevers@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1554198}
--
wpt-commits: 8ef94d2266f0e10bec3cbdfeb25ea838c23c270e
wpt-pr: 56501
Diffstat:
3 files changed, 105 insertions(+), 6 deletions(-)
diff --git a/testing/web-platform/tests/css/css-view-transitions/scoped/clip-on-target-in-callback-2-ref.html b/testing/web-platform/tests/css/css-view-transitions/scoped/clip-on-target-in-callback-2-ref.html
@@ -0,0 +1,28 @@
+<!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-inside {
+ margin-top: 150px;
+ width: 100px;
+ height: 50px;
+ background: green;
+}
+#target-outside {
+ width: 100px;
+ height: 50px;
+ background-color: rgba(0, 128, 0, 0.5);
+}
+</style>
+
+<div id="container">
+ <div id="target-inside"></div>
+ <div id="target-outside"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/scoped/clip-on-target-in-callback-2.html b/testing/web-platform/tests/css/css-view-transitions/scoped/clip-on-target-in-callback-2.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View Transitions: Fade out of clipped content</title>
+<!-- In this test #target is not participating in the view transition and
+ therefore should have the clipped portion fade out. -->
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
+<link rel="match" href="clip-on-target-in-callback-2-ref.html">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<!-- Accommodate small color mismatch -->
+<meta name="fuzzy" content="maxDifference=0-2; totalPixels=0-48600">
+<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;
+ position: relative;
+}
+#container.after {
+ overflow: clip;
+}
+
+#target {
+ margin-top: 150px;
+ width: 100px;
+ height: 100px;
+ background: green;
+}
+
+::view-transition-group(*),
+::view-transition-image-pair(*),
+::view-transition-old(*),
+::view-transition-new(*) {
+ /* freeze all animations at mid-point */
+ animation-duration: 100000s;
+ animation-delay: -50000s;
+ animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+
+</style>
+
+<div id="container">
+ <div id="target"></div>
+</div>
+
+<script>
+async function runTest() {
+ const vt = container.startViewTransition(() => {
+ container.classList.add("after");
+ });
+ await vt.ready;
+ takeScreenshotOnAnimationsReady();
+}
+
+waitForCompositorReady().then(runTest);
+</script>
+</body>
+</html>
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
@@ -1,9 +1,13 @@
<!DOCTYPE html>
<html class=reftest-wait>
<title>View Transitions: Clip on target in callback does not clip root</title>
+<!-- In this test #target is participating in the view transition and
+ therefore should escape clipping on the scoped element. -->
<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">
+<!-- Accommodate small color mismatch -->
+<meta name="fuzzy" content="maxDifference=0-2; totalPixels=0-48600">
<script src="/common/reftest-wait.js"></script>
<script src="/web-animations/testcommon.js"></script>
<style>
@@ -25,9 +29,14 @@
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; }
+::view-transition-group(*),
+::view-transition-image-pair(*),
+::view-transition-old(*),
+::view-transition-new(*) {
+ /* freeze all animations at start */
+ animation-duration: 100000s;
+ animation-timing-function: steps(1, jump-end);
+}
</style>
<div id="container">
@@ -35,10 +44,12 @@ html::view-transition-new(*) { animation: none; opacity: 1; }
</div>
<script>
-function runTest() {
- container.startViewTransition(() => {
+async function runTest() {
+ const vt = container.startViewTransition(() => {
container.classList.add("after");
- }).ready.then(takeScreenshot);
+ });
+ await vt.ready;
+ takeScreenshotOnAnimationsReady();
}
waitForCompositorReady().then(runTest);
