commit d82f3badfe102f786ee56c1a4ec6fa24ecdace04
parent 654d7a971bed8bad1fc9282df2415b40c50e9a37
Author: Vladimir Levin <vmpstr@chromium.org>
Date: Sat, 22 Nov 2025 21:13:29 +0000
Bug 2001688 [wpt PR 56195] - ScopedVT: Add a box decorations painting test, a=testonly
Automatic update from web-platform-tests
ScopedVT: Add a box decorations painting test
This patch adds a test where the scope has box decorations (border and
box shadow) to ensure that it's painted correctly via the old pseudo.
The scope is made visibility: hidden to make sure we're testing the
VT pseudo representation and not the box painting itself.
R=skobes@chromium.org, kevers@chromium.org
Change-Id: I6bf7b491a2d2e3fe0d98ee11ce55de3494af7925
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7187362
Reviewed-by: Steve Kobes <skobes@chromium.org>
Commit-Queue: Vladimir Levin <vmpstr@chromium.org>
Reviewed-by: Kevin Ellis <kevers@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1548586}
--
wpt-commits: d672e134e19b9e7b850a42e0fddc2a497dcf12bd
wpt-pr: 56195
Diffstat:
2 files changed, 99 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-view-transitions/scoped/box-decoration-painting-ref.html b/testing/web-platform/tests/css/css-view-transitions/scoped/box-decoration-painting-ref.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<meta name="title" content="Scoped VT: border and box shadow root painting (ref)">
+<meta name="author" content="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
+
+<style>
+#target {
+ position: relative;
+ top: 30px;
+ left: 30px;
+
+ width: 200px;
+ height: 300px;
+
+ background: blue;
+ border-width: 5px 10px 15px 20px;
+ border-style: solid;
+ border-color: yellow;
+
+ box-shadow: 10px 5px 0px 20px black;
+}
+</style>
+
+<div id=target></div>
+
+<script>
+failIfNot(target.startViewTransition, "Missing element.startViewTransition");
+
+function runTest() {
+ target.startViewTransition(() => {
+ target.classList.add("after");
+ }).ready.then(takeScreenshot);
+}
+
+waitForCompositorReady().then(runTest);
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/scoped/box-decoration-painting.html b/testing/web-platform/tests/css/css-view-transitions/scoped/box-decoration-painting.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<meta charset="utf-8">
+<meta name="title" content="Scoped VT: border and box shadow root painting">
+<meta name="author" content="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
+<link rel="match" href="box-decoration-painting-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<script src="/web-animations/testcommon.js"></script>
+<style>
+#target {
+ position: relative;
+ top: 30px;
+ left: 30px;
+
+ width: 200px;
+ height: 300px;
+
+ background: blue;
+ border-width: 5px 10px 15px 20px;
+ border-style: solid;
+ border-color: yellow;
+
+ box-shadow: 10px 5px 0px 20px black;
+}
+
+/* This is needed since we inherit from the scope and make the scope
+ not visible in the VT callback
+*/
+::view-transition { visibility: visible; }
+
+::view-transition-group(*) {
+ animation-play-state: paused;
+}
+::view-transition-old(*) {
+ animation: unset;
+ opacity: 1;
+}
+::view-transition-new(*) {
+ animation: unset;
+ opacity: 0;
+}
+#target.after {
+ visibility: hidden;
+}
+</style>
+
+<div id=target></div>
+
+<script>
+failIfNot(target.startViewTransition, "Missing element.startViewTransition");
+
+function runTest() {
+ target.startViewTransition(() => {
+ target.classList.add("after");
+ }).ready.then(takeScreenshot);
+}
+
+waitForCompositorReady().then(runTest);
+</script>
+
