Nested view transitions: support view-transition-group: nearest/normal

Parse nearest/normal as keywords, and use a StyleViewTransitionGroup struct to store the result. Rely on a stack while capturing elements hierarchically, to correctly resolve "view-transition-group: nearest". Also use that stack instead of element ancestry for computing explicit names. Bug: 347947051 Change-Id: If06d2a6ff266013f4a46a492191c31e4a66111c8 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5752182 Reviewed-by: Khushal Sagar <[email protected]> Commit-Queue: Noam Rosenthal <[email protected]> Cr-Commit-Position: refs/heads/main@{#1338320}
mrego · Jan 27, 2025 · 1079031 · 1079031
1 parent 74c0aa3
commit 1079031
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 0 deletions.
diff --git a/css/css-view-transitions/nested/nearest-direct.html b/css/css-view-transitions/nested/nearest-direct.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>Nearest should match direct parent</title>
+<meta name=fuzzy content="maxDifference=0-255; totalPixels=0-515">
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
+<link rel="match" href="nested-ref.html">
+<link rel=stylesheet href="resources/compute-common.css"></link>
+<script src="/common/reftest-wait.js"></script>
+<script src="resources/compute-test.js"></script>
+<body>
+    <div class="green">
+        <div>
+            <div class="test nearest-ref"></article>
+        </div>
+    </div>
+</body>
diff --git a/css/css-view-transitions/nested/nearest-ignores-nearest-name.html b/css/css-view-transitions/nested/nearest-ignores-nearest-name.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>Nearest should not match a group called "nearest"</title>
+<meta name=fuzzy content="maxDifference=0-255; totalPixels=0-515">
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
+<link rel="match" href="nested-ref.html">
+<link rel=stylesheet href="resources/compute-common.css"></link>
+<script src="/common/reftest-wait.js"></script>
+<script src="resources/compute-test.js"></script>
+<body>
+    <div style="view-transition-name: nearest">
+        <div class="green">
+            <div>
+                <div class="test nearest-ref"></article>
+            </div>
+        </div>
+    </div>
+</body>
diff --git a/css/css-view-transitions/nested/nearest-nested.html b/css/css-view-transitions/nested/nearest-nested.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>Nearest should match non-direct ancestor</title>
+<meta name=fuzzy content="maxDifference=0-255; totalPixels=0-515">
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
+<link rel="match" href="nested-ref.html">
+<link rel=stylesheet href="resources/compute-common.css"></link>
+<script src="/common/reftest-wait.js"></script>
+<script src="resources/compute-test.js"></script>
+<body>
+    <div class="red">
+        <div class="green">
+            <div>
+                <div class="test nearest-ref"></article>
+            </div>
+        </div>
+    </div>
+</body>
diff --git a/css/css-view-transitions/nested/normal-goes-up.html b/css/css-view-transitions/nested/normal-goes-up.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html class="reftest-wait no-match">
+<title>view-transition: normal should behave like having no group</title>
+<meta name=fuzzy content="maxDifference=0-255; totalPixels=0-515">
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
+<link rel="match" href="nested-ref.html">
+<link rel=stylesheet href="resources/compute-common.css"></link>
+<script src="/common/reftest-wait.js"></script>
+<script src="resources/compute-test.js"></script>
+<body>
+    <div class="normal">
+        <div>
+            <div class="test normal-ref"></article>
+        </div>
+    </div>
+</body>
diff --git a/css/css-view-transitions/nested/resources/compute-common.css b/css/css-view-transitions/nested/resources/compute-common.css
@@ -35,6 +35,17 @@ html.no-match::view-transition {
     view-transition-group: red;
 }
 
+.nearest-ref {
+    view-transition-group: nearest;
+}
+
+.normal {
+    view-transition-name: normal;
+}
+
+.normal-ref {
+    view-transition-group: normal;
+}
 ::view-transition-group(green) {
     background: green;
 }