Bug 1956352 [wpt PR 51586] - VT: Change view-transition-name: auto to use random string on id match., a=testonly

Automatic update from web-platform-tests
VT: Change view-transition-name: auto to use random string on id match.

This patch updates the auto implementation to use a random string to
match auto names, which ensures namespacing between view-transition-name
ident matches and auto id matches.

[email protected]

Bug: 402754383
Change-Id: I870b0ca5da6a1a10c2a45be80d5694ba10579813
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6378343
Reviewed-by: Nasko Oskov <[email protected]>
Reviewed-by: Jeremy Roman <[email protected]>
Reviewed-by: Noam Rosenthal <[email protected]>
Commit-Queue: Vladimir Levin <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1438221}

--

wpt-commits: 82a86955317eb250e973fc91ba8683f3b14c1324
wpt-pr: 51586

Author: vmpstr

testing/web-platform/tests/css/css-view-transitions/auto-name-from-id.html

@@ -17,6 +17,7 @@
 
 .item {
   view-transition-name: auto;
+  view-transition-class: item;
 }
 
 main.switch #item1 {
@@ -38,8 +39,7 @@
 }
 
 :root { view-transition-name: none; }
-html::view-transition-group(item1),
-html::view-transition-group(item2) {
+html::view-transition-group(*.item) {
   animation-timing-function: steps(2, start);
   animation-play-state: paused;
 }
@@ -51,7 +51,7 @@
 
 </style>
 
-<main>
+<main id=main>
   <div class="item" id="item1"></div>
   <div class="item" id="item2"></div>
 </main>
@@ -61,10 +61,19 @@
 
 function runTest() {
   document.startViewTransition(() => {
-    document.querySelector("main").classList.toggle("switch");
+    main.classList.toggle("switch");
+    let div1 = document.createElement("div");
+    div1.classList.add("item");
+    div1.id = "item1";
+
+    let div2 = document.createElement("div");
+    div2.classList.add("item");
+    div2.id = "item2";
+
+    main.replaceChildren(div1, div2);
   }).ready.then(takeScreenshot);
 }
 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
 </script>
 
-</body>
+</body>

testing/web-platform/tests/css/css-view-transitions/navigation/resources/auto-name-from-id.html

@@ -23,7 +23,7 @@
   display: none;
 }
 
-html::view-transition-group(green) {
+html::view-transition-group(*) {
   animation-play-state: paused;
   animation-duration: 3s;
   animation-timing-function: steps(2, start);