commit e5b8b1714b4966b49f2dd47527da2c605fac17c6
parent e08066ca95ade0ef68cf4ccdf6629b57faca646c
Author: Vladimir Levin <vmpstr@chromium.org>
Date: Sat, 22 Nov 2025 21:11:37 +0000
Bug 2001373 [wpt PR 56128] - VT: Add an interleaving non-containing clipper test, a=testonly
Automatic update from web-platform-tests
VT: Add an interleaving non-containing clipper test
This patch adds a test in which a scope is within a clipper but the
clipper is not a containing block. The idea is that the view transition
should still be clipped by the clipper
R=skobes@chromium.org, kevers@chromium.org
Change-Id: If551348a72d35da99983d1a1dfcfa9935966cb2b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7173923
Reviewed-by: Steve Kobes <skobes@chromium.org>
Commit-Queue: Vladimir Levin <vmpstr@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1547796}
--
wpt-commits: 2eb05c2068533cf07c45b0e5abd9ed80cc194329
wpt-pr: 56128
Diffstat:
2 files changed, 67 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-view-transitions/scoped/clipper-non-containing-block-ref.html b/testing/web-platform/tests/css/css-view-transitions/scoped/clipper-non-containing-block-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<meta name="title" content="Test that a clipper clips the view transition (ref)">
+<meta name="author" content="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
+
+<style>
+div {
+ background: blue;
+ width: 100px;
+ height: 100px;
+}
+</style>
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/scoped/clipper-non-containing-block.html b/testing/web-platform/tests/css/css-view-transitions/scoped/clipper-non-containing-block.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<meta charset="utf-8">
+<meta name="title" content="Test that a clipper clips the view transition">
+<meta name="author" content="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
+<link rel="match" href="clipper-non-containing-block-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<script src="/web-animations/testcommon.js"></script>
+<style>
+.clipper {
+ overflow: clip;
+ width: 100px;
+ height: 100px;
+}
+#target {
+ width: 200px;
+ height: 300px;
+ background: blue;
+}
+::view-transition-group(*) {
+ animation-play-state: paused;
+}
+::view-transition-old(*) {
+ animation: unset;
+ opacity: 1;
+}
+::view-transition-new(*) {
+ animation: unset;
+ opacity: 0;
+}
+#target.after {
+ background: red;
+}
+</style>
+
+<div class=clipper>
+ <div id=target></div>
+</div>
+
+<script>
+failIfNot(target.startViewTransition, "Missing element.startViewTransition");
+
+function runTest() {
+ target.startViewTransition(() => {
+ target.classList.add("after");
+ }).ready.then(takeScreenshot);
+}
+
+waitForCompositorReady().then(runTest);
+</script>
+
