VT: Ensure view-transition-names are tree scoped.

This only changes vt name discovery to match the scope of the originating element (document). The presence of vt names still causes things like stacking context, which I think is correct. [email protected] Bug: 339438836 Change-Id: I47d3d1d78ca4938f259841ea04ab4b0b472914c9 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5531882 Reviewed-by: Khushal Sagar <[email protected]> Commit-Queue: Vladimir Levin <[email protected]> Cr-Commit-Position: refs/heads/main@{#1299414}
web-platform-tests · May 10, 2024 · 2478ccc · 2478ccc
1 parent ca4cd50
commit 2478ccc
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 0 deletions.
diff --git a/css/css-view-transitions/names-are-tree-scoped-ref.html b/css/css-view-transitions/names-are-tree-scoped-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: view-transition-names are tree scoped (ref)</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:[email protected]">
+<style>
+div {
+  width: 100px;
+  height: 100px;
+  background: green;
+}
+</style>
+
+<div></div>
diff --git a/css/css-view-transitions/names-are-tree-scoped.html b/css/css-view-transitions/names-are-tree-scoped.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: view-transition-names are tree scoped</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:[email protected]">
+<link rel="match" href="names-are-tree-scoped-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+div {
+  width: 100px;
+  height: 100px;
+  background: red;
+}
+
+#one {
+  view-transition-name: light1;
+}
+#two {
+  view-transition-name: light2;
+}
+#three {
+  view-transition-name: light3;
+}
+
+:root { view-transition-name: none; }
+html::view-transition-group(*) { animation-play-state: paused; }
+html::view-transition-old(*) { animation: unset; opacity: 0 }
+html::view-transition-new(*) { animation: unset; opacity: 0 }
+</style>
+
+<custom-component>
+  <template shadowrootmode="open">
+    <style>
+    div {
+      width: 100px;
+      height: 100px;
+      background: green;
+      view-transition-name: shadow;
+    }
+    </style>
+    <div>
+      <slot></slot>
+    </div>
+    <slot></slot>
+  </template>
+  <div id=one></div>
+  <div id=two></div>
+</custom-component>
+
+<div id=three></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+function runTest() {
+  document.startViewTransition().ready.then(takeScreenshot);
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
+</body>