Implement view-transition-name: match-element

As per CSS resolution, match-element works identically to auto, except it doesn't start with ID. See w3c/csswg-drafts#10995 (comment) Using a different flag from `auto` as that behavior is controversial. WPTs are imported directly from a WebKit PR that's not yet merged. Bug: 365997248 Change-Id: I00973545bfbae116113e9adaea12c8bcc7ea0dd5 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6105953 Auto-Submit: Noam Rosenthal <[email protected]> Reviewed-by: Vladimir Levin <[email protected]> Commit-Queue: Vladimir Levin <[email protected]> Cr-Commit-Position: refs/heads/main@{#1398756}
web-platform-tests · Dec 19, 2024 · 437e022 · 437e022
1 parent f3acbb2
commit 437e022
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 1 deletion.
diff --git a/css/css-view-transitions/match-element-name.html b/css/css-view-transitions/match-element-name.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: using match-element name</title>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
+<link rel="match" href="auto-name-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+div {
+  width: 100px;
+  height: 100px;
+}
+
+main {
+  display: flex;
+  flex-direction: column;
+}
+
+.item {
+  view-transition-name: match-element;
+  view-transition-class: item;
+}
+
+main.switch .item1 {
+  order: 2;
+}
+
+.item1 {
+  background: green;
+}
+
+.item2 {
+  background: yellow;
+  position: relative;
+  left: 100px;
+}
+
+html::view-transition {
+  background: rebeccapurple;
+}
+
+:root { view-transition-name: none; }
+html::view-transition-group(.item) {
+  animation-timing-function: steps(2, start);
+  animation-play-state: paused;
+}
+html::view-transition-old(*),
+html::view-transition-new(*)
+ { animation-play-state: paused; }
+html::view-transition-old(*) { animation: unset; opacity: 0 }
+html::view-transition-new(*) { animation: unset; opacity: 1 }
+
+/* This should not be used */
+html::view-transition-group(unused-id) {
+  background: red;
+}
+html::view-transition-old(unused-id),
+html::view-transition-new(unused-id) {
+  opacity: 0;
+}
+</style>
+
+<main>
+  <div class="item item1" id="unused-id"></div>
+  <div class="item item2"></div>
+</main>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+function runTest() {
+  document.startViewTransition(() => {
+    document.querySelector("main").classList.toggle("switch");
+  }).ready.then(takeScreenshot);
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
+</body>
+</html>
diff --git a/css/css-view-transitions/parsing/view-transition-name-valid.html b/css/css-view-transitions/parsing/view-transition-name-valid.html
@@ -13,10 +13,11 @@
 <body>
 <script>
 test_valid_value("view-transition-name", "none");
+test_valid_value("view-transition-name", "auto");
+test_valid_value("view-transition-name", "match-element");
 test_valid_value("view-transition-name", "foo");
 test_valid_value("view-transition-name", "bar");
 test_valid_value("view-transition-name", "baz");
-test_valid_value("view-transition-name", "auto");
 </script>
 </body>
 </html>