commit 7bda5163f7471f0491625030727606522489ee64 parent 217dc668480e6a71a85856c3d165a4dad8a8422b Author: Steve Kobes <skobes@chromium.org> Date: Tue, 21 Oct 2025 10:23:00 +0000 Bug 1994409 [wpt PR 55449] - ScopedVT: Fix scopes in shadow DOM trees., a=testonly Automatic update from web-platform-tests ScopedVT: Fix scopes in shadow DOM trees. The tag search was prematurely skipped due to null parentElement() if the parent was a shadow root. We were also passing the wrong TreeScope to AddTransitionElementsFromCSSRecursive(). Bug: 445481941 Change-Id: I573373488bc75fd58a9dbedf64c7734ab1eb91ec Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7042222 Auto-Submit: Steve Kobes <skobes@chromium.org> Commit-Queue: Steve Kobes <skobes@chromium.org> Reviewed-by: Noam Rosenthal <nrosenthal@google.com> Cr-Commit-Position: refs/heads/main@{#1530130} -- wpt-commits: 746db552d73776267e528bb20f1e812ef1107548 wpt-pr: 55449 Diffstat:
| A | testing/web-platform/tests/css/css-view-transitions/scoped/shadow-dom-ref.html | | | 11 | +++++++++++ |
| A | testing/web-platform/tests/css/css-view-transitions/scoped/shadow-dom.html | | | 50 | ++++++++++++++++++++++++++++++++++++++++++++++++++ |
2 files changed, 61 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-view-transitions/scoped/shadow-dom-ref.html b/testing/web-platform/tests/css/css-view-transitions/scoped/shadow-dom-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<style> + +#scope { contain: strict; position: relative; + background: lightgrey; width: 100px; height: 100px; } +#part { background: blue; margin: 25px; width: 50px; height: 50px; } + +</style> +<div id=scope> + <div id=part></div> +</div> diff --git a/testing/web-platform/tests/css/css-view-transitions/scoped/shadow-dom.html b/testing/web-platform/tests/css/css-view-transitions/scoped/shadow-dom.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<head> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/"> +<link rel="match" href="shadow-dom-ref.html"> +<script src="/common/reftest-wait.js"></script> +<script src="/web-animations/testcommon.js"></script> +</head> +<body> +<my-el id=c></my-el> +<script> + + const ss = new CSSStyleSheet(); + ss.replaceSync(` + #scope { contain: strict; position: relative; + background: red; width: 100px; height: 100px; + view-transition-name: none; } + #part { view-transition-name: foo; background: blue; + margin: 25px; width: 50px; height: 50px; } + #scope::view-transition { background: lightgrey; } + #scope::view-transition-group(foo) { animation-play-state: paused; } + #scope::view-transition-new(foo) { animation: unset; opacity: 1; } + #scope::view-transition-old(foo) { animation: unset; opacity: 0; } + `); + + customElements.define('my-el', class extends HTMLElement { + #shadow = this.attachShadow({ mode: "open" }); + connectedCallback() { + this.#shadow.adoptedStyleSheets.push(ss); + this.#shadow.innerHTML = ` + <div id=scope> + <div id=part></div> + </div> + `; + } + play() { + const scope = this.#shadow.querySelector("#scope"); + return scope.startViewTransition(() => {}); + } + }); + + onload = async () => { + await waitForCompositorReady(); + await c.play().ready; + requestAnimationFrame(takeScreenshot); + } + +</script> +</body> +</html>