View transitions: names should be tree-scoped rather then nodes

See spec PR: w3c/csswg-drafts#10528 Using a new runtime flag so that it can be backported to M127. Bug: 349653208 Change-Id: Ifce6ee159ca44c5d8a54739ef050354eed5acf22
web-platform-tests · Jul 5, 2024 · b1e6136 · b1e6136
1 parent 54100d5
commit b1e6136
Show file tree

Hide file tree

Showing 3 changed files with 163 additions and 0 deletions.
diff --git a/css/css-view-transitions/shadow-part-with-name-nested.html b/css/css-view-transitions/shadow-part-with-name-nested.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: nested shadow parts should work with view-transition-name</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<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;
+}
+
+::part(party) {
+  view-transition-name: party;
+}
+
+: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 }
+html::view-transition-group(party) {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  background: green;
+}
+</style>
+
+<custom-component>
+  <template shadowrootmode="open">
+    <nested-component exportparts="party">
+      <style>
+        div {
+          width: 100px;
+          height: 100px;
+        }
+      </style>
+      <div part="party"></div>
+    </nested-component>
+  </template>
+</custom-component>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+function runTest() {
+  document.startViewTransition().ready.then(takeScreenshot);
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
+</body>
diff --git a/css/css-view-transitions/shadow-part-with-name-overridden-by-important.html b/css/css-view-transitions/shadow-part-with-name-overridden-by-important.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: shadow parts should give precedence to !important</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="match" href="names-are-tree-scoped-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+div {
+  width: 100px;
+  height: 100px;
+  background: green;
+  position: absolute;
+}
+
+::part(party) {
+  view-transition-name: animate-me;
+}
+
+html {
+  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 }
+html::view-transition-group(animate-me) {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  background: red;
+}
+</style>
+
+<div></div>
+
+<custom-component>
+  <template shadowrootmode="open">
+    <style>
+      div {
+        width: 100px;
+        height: 100px;
+        position: absolute;
+        view-transition-name: please-dont-animate-me !important;
+      }
+    </style>
+    <div part="party"></div>
+  </template>
+</custom-component>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+function runTest() {
+  document.startViewTransition().ready.then(takeScreenshot);
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
+</body>
diff --git a/css/css-view-transitions/shadow-part-with-name.html b/css/css-view-transitions/shadow-part-with-name.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: shadow parts </title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<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;
+}
+
+::part(party) {
+  view-transition-name: party;
+}
+
+: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 }
+html::view-transition-group(party) {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  background: green;
+}
+</style>
+
+<custom-component>
+  <template shadowrootmode="open">
+    <style>
+      div {
+        width: 100px;
+        height: 100px;
+      }
+    </style>
+    <div part="party"></div>
+  </template>
+</custom-component>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+function runTest() {
+  document.startViewTransition().ready.then(takeScreenshot);
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
+</body>