Bug 1912798 [wpt PR 47568] - Make CSS view-transition-class a tree-sc…

…oped name, a=testonly Automatic update from web-platform-tests Make CSS view-transition-class a tree-scoped name Parse view-transition-class a s CSSScopedNameList, and match with the document tree-scoped when capturing the old+new element. CSSWG resolution: w3c/csswg-drafts#10529 (comment) Bug: 358159341 Change-Id: Ib40816b8358bb9390a427bc4ea456d86f6060eab Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5776943 Reviewed-by: Khushal Sagar <[email protected]> Commit-Queue: Noam Rosenthal <[email protected]> Cr-Commit-Position: refs/heads/main@{#1340430} -- wpt-commits: c88a90be14eeb523b2941c994e605da1feb61e77 wpt-pr: 47568
mozilla · Aug 15, 2024 · ba4ef6b · ba4ef6b
1 parent e52e9fc
commit ba4ef6b
Show file tree

Hide file tree

Showing 3 changed files with 167 additions and 0 deletions.
diff --git a/...atform/tests/css/css-view-transitions/shadow-part-with-class-inside-shadow-important.html b/...atform/tests/css/css-view-transitions/shadow-part-with-class-inside-shadow-important.html
@@ -0,0 +1,55 @@
+<!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;
+  view-transition-class: red;
+}
+
+: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;
+}
+html::view-transition-group(party.red) {
+  background: red;
+}
+</style>
+
+<custom-component>
+  <template shadowrootmode="open">
+    <style>
+      div {
+        width: 100px;
+        height: 100px;
+      }
+    </style>
+    <div part="party" style="view-transition-class: none !important"></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/...ing/web-platform/tests/css/css-view-transitions/shadow-part-with-class-inside-shadow.html b/...ing/web-platform/tests/css/css-view-transitions/shadow-part-with-class-inside-shadow.html
@@ -0,0 +1,54 @@
+<!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;
+}
+html::view-transition-group(party.red) {
+  background: red;
+}
+</style>
+
+<custom-component>
+  <template shadowrootmode="open">
+    <style>
+      div {
+        width: 100px;
+        height: 100px;
+      }
+    </style>
+    <div part="party" style="view-transition-class: red"></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/testing/web-platform/tests/css/css-view-transitions/shadow-part-with-class.html b/testing/web-platform/tests/css/css-view-transitions/shadow-part-with-class.html
@@ -0,0 +1,58 @@
+<!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;
+  view-transition-class: green;
+}
+
+: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: yellow;
+}
+html::view-transition-group(party.red) {
+  background: red;
+}
+html::view-transition-group(party.green) {
+  background: green;
+}
+</style>
+
+<custom-component>
+  <template shadowrootmode="open">
+    <style>
+      div {
+        width: 100px;
+        height: 100px;
+      }
+    </style>
+    <div part="party" style="view-transition-class: red"></div>
+  </template>
+</custom-component>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+function runTest() {
+  document.startViewTransition().ready.then(takeScreenshot);
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
+</body>