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. R=khushalsagar@chromium.org Bug: 339438836 Change-Id: I47d3d1d78ca4938f259841ea04ab4b0b472914c9 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5531882 Reviewed-by: Khushal Sagar <khushalsagar@chromium.org> Commit-Queue: Vladimir Levin <vmpstr@chromium.org> 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:vmpstr@chromium.org">
+<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:vmpstr@chromium.org">
+<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>