commit 4187b442aa137a924cb07b47f92ae2083672a00d
parent 2b1ce9569cb3967bedae1b11bb6d104379f07c72
Author: Vladimir Levin <vmpstr@chromium.org>
Date: Wed, 12 Nov 2025 08:51:05 +0000
Bug 1999434 [wpt PR 55969] - VT: Escape view transition names when creating dynamic styles., a=testonly
Automatic update from web-platform-tests
VT: Escape view transition names when creating dynamic styles.
We need to escape the view transition names that are part of dynamic
styles (for example @keyframes). This patch does this.
R=chrishtr@chromium.org
Bug: 458082819
Change-Id: I34f87315dd2f1b4e74380fc831069d84c5fb85aa
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7139462
Reviewed-by: Chris Harrelson <chrishtr@chromium.org>
Commit-Queue: Vladimir Levin <vmpstr@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1542911}
--
wpt-commits: 8ac56ca5bff0294794dfaaef0a9c3ee5b2da2d1b
wpt-pr: 55969
Diffstat:
2 files changed, 65 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-view-transitions/escaped-name-ref.html b/testing/web-platform/tests/css/css-view-transitions/escaped-name-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: escaped names (ref)</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<style>
+.box {
+ background: green;
+ width: 100px;
+ height: 100px;
+ position: relative;
+}
+</style>
+
+<div class="box"></div>
+<div class="box"></div>
+<div class="box"></div>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/escaped-name.html b/testing/web-platform/tests/css/css-view-transitions/escaped-name.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: escaped names</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="escaped-name-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+:root { view-transition-name: none; }
+#first { view-transition-name: first\!; }
+#second { view-transition-name: secon\'d; }
+#third { view-transition-name: third\000021; }
+.box {
+ background: green;
+ width: 100px;
+ height: 100px;
+ position: relative;
+}
+::view-transition-group(*),
+::view-transition-new(*),
+::view-transition-old(*),
+::view-transition-image-pair(*) {
+ animation-play-state: paused;
+}
+.box.after {
+ background: red;
+ left: 100px;
+}
+</style>
+
+<div class="box" id="first"></div>
+<div class="box" id="second"></div>
+<div class="box" id="third"></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+ document.startViewTransition(() => {
+ first.classList.add("after");
+ second.classList.add("after");
+ third.classList.add("after");
+ }).ready.then(takeScreenshot);
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
