Implement view-transition-name: auto

This allows generating view-transition-names automatically, reducing the burden of inventing unique names from the user, in cases where the element is the same (or has the same ID) between the two states. See spec PR: w3c/csswg-drafts#10922 Change-Id: I1b6c6752acc7106929b08ac6fcdda9578d6402d3 Bug: 365997248 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5878355 Commit-Queue: Noam Rosenthal <[email protected]> Reviewed-by: Khushal Sagar <[email protected]> Cr-Commit-Position: refs/heads/main@{#1364180}
web-platform-tests · Oct 4, 2024 · 94268c2 · 94268c2
1 parent 4c768ef
commit 94268c2
Show file tree

Hide file tree

Showing 9 changed files with 357 additions and 1 deletion.
diff --git a/css/css-view-transitions/auto-name-from-id-shadow.html b/css/css-view-transitions/auto-name-from-id-shadow.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: auto name should not expose shadow-scoped ID</title>
+<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: auto;
+}
+
+::part(p2) {
+  view-transition-name: auto;
+  background: yellow;
+  position: relative;
+  left: 100px;
+  width: 100px;
+  height: 100px;
+}
+
+main.switch #item1 {
+  order: 2;
+}
+
+#item1 {
+  background: green;
+}
+
+html::view-transition {
+  background: rebeccapurple;
+}
+
+:root { view-transition-name: none; }
+html::view-transition-group(*) {
+  animation-timing-function: steps(2, start);
+  animation-play-state: paused;
+}
+html::view-transition-group(item2) {
+  outline: 10px solid red;
+}
+
+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 }
+
+</style>
+
+<main>
+  <div class="item" id="item1"></div>
+  <div>
+    <template shadowrootmode="open">
+      <div class="item" id="item2" part="p2"></div>
+    </template>
+  </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>
diff --git a/css/css-view-transitions/auto-name-from-id.html b/css/css-view-transitions/auto-name-from-id.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: auto name generated from ID</title>
+<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: auto;
+}
+
+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(item1),
+html::view-transition-group(item2) {
+  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 }
+
+</style>
+
+<main>
+  <div class="item" id="item1"></div>
+  <div class="item" id="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>
diff --git a/css/css-view-transitions/auto-name-ref.html b/css/css-view-transitions/auto-name-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: using auto names</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
+<style>
+body {
+  background: rebeccapurple;
+}
+
+div {
+  width: 100px;
+  height: 100px;
+}
+
+main {
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  top: 50px;
+}
+
+.item1 {
+  background: green;
+}
+
+.item2 {
+  background: yellow;
+}
+</style>
+<main>
+  <div class="item1"></div>
+  <div class="item2"></div>
+</main>
+
+</body>
diff --git a/css/css-view-transitions/auto-name.html b/css/css-view-transitions/auto-name.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: using auto names</title>
+<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: auto;
+  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 }
+
+</style>
+
+<main>
+  <div class="item item1"></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>
diff --git a/css/css-view-transitions/navigation/auto-name-from-id-ref.html b/css/css-view-transitions/navigation/auto-name-from-id-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: cross-document navigation with auto name</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
+<style>
+@view-transition { navigation: auto; }
+body {
+  background: rebeccapurple;
+  margin: 0;
+}
+#green {
+  width: 100px;
+  height: 100px;
+  position: absolute;
+  left: 100px;
+  view-transition-name: auto;
+  background: green;
+  contain: layout;
+}
+</style>
+<div id="green"></div>
+</html>
diff --git a/css/css-view-transitions/navigation/auto-name-from-id.html b/css/css-view-transitions/navigation/auto-name-from-id.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>View transitions: cross-document navigation with auto name</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
+<link rel="match" href="auto-name-from-id-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+@view-transition { navigation: auto; }
+body {
+  background: blue;
+  margin: 0;
+}
+#green {
+  width: 100px;
+  height: 100px;
+  view-transition-name: auto;
+  background: green;
+  contain: layout;
+}
+</style>
+<div id="green"></div>
+<script>
+onload = async() => {
+  await new Promise(resolve => requestAnimationFrame(() => resolve()));
+  location.href = "resources/auto-name-from-id.html";
+};
+</script>
+</html>
diff --git a/css/css-view-transitions/navigation/resources/auto-name-from-id.html b/css/css-view-transitions/navigation/resources/auto-name-from-id.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>View transitions: cross-document navigation with auto name (new page)</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
+<link rel="match" href="auto-name-from-id-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+@view-transition { navigation: auto; }
+
+body {
+  margin: 0;
+  padding: 0;
+  background: grey;
+}
+
+html::view-transition {
+  background: rebeccapurple;
+  position: absolute;
+  inset: 0;
+}
+
+html::view-transition-group(root) {
+  display: none;
+}
+
+html::view-transition-group(green) {
+  animation-play-state: paused;
+  animation-duration: 3s;
+  animation-timing-function: steps(2, start);
+}
+
+#green {
+  background: green;
+  width: 100px;
+  height: 100px;
+  left: 200px;
+  position: absolute;
+  view-transition-name: auto;
+}
+
+</style>
+<body>
+  <div id="green"></div>
+</body>
+<script>
+  onpagereveal = event => {
+    event.viewTransition.ready.then(takeScreenshot);
+  }
+</script>
+
+</html>
diff --git a/css/css-view-transitions/parsing/view-transition-name-invalid.html b/css/css-view-transitions/parsing/view-transition-name-invalid.html
@@ -12,7 +12,6 @@
 </head>
 <body>
 <script>
-test_invalid_value("view-transition-name", "auto"); // `auto` is excluded.
 test_invalid_value("view-transition-name", "default"); // `default` isn't allowed by the `<custom-ident>` syntax.
 test_invalid_value("view-transition-name", "none none");
 test_invalid_value("view-transition-name", `"none"`);

diff --git a/css/css-view-transitions/parsing/view-transition-name-valid.html b/css/css-view-transitions/parsing/view-transition-name-valid.html
@@ -16,6 +16,7 @@
 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>