commit 266321f73d207648c7b8168ff724a31749ba7285
parent e65b4368daea2126a7d78424bfb8e9b4688cdee1
Author: Kevin Ellis <kevers@google.com>
Date: Fri, 31 Oct 2025 08:53:54 +0000
Bug 1996659 [wpt PR 55687] - Scoped-VT anchor-positioning, a=testonly
Automatic update from web-platform-tests
Scoped-VT anchor-positioning
The layout object for a ::view-transition pseudo is now a sibling
of the layout object for its originating element, and positioned
using position-anchor.
Bug: 446688001
Change-Id: Ia8f496c262e7f790a4132ed4278ec634fcafc2a6
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7017769
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Reviewed-by: Steve Kobes <skobes@chromium.org>
Commit-Queue: Kevin Ellis <kevers@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1536120}
--
wpt-commits: d415902fd69acb362b3e7a63ab5c410da80a4d80
wpt-pr: 55687
Diffstat:
4 files changed, 72 insertions(+), 52 deletions(-)
diff --git a/testing/web-platform/tests/css/css-view-transitions/scoped/content-ref.html b/testing/web-platform/tests/css/css-view-transitions/scoped/content-ref.html
@@ -6,7 +6,7 @@
body { margin: 20px }
#scope {
position: relative; z-index: 0; background: pink;
- border: 5px dashed purple; padding: 5px;
+ border: 5px solid yellow; padding: 5px;
width: 180px; height: 120px;
}
#part {
diff --git a/testing/web-platform/tests/css/css-view-transitions/scoped/crashtests/container-query-2..html b/testing/web-platform/tests/css/css-view-transitions/scoped/crashtests/container-query-2..html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="test-wait">
+<style>
+ #scope {
+ container-type: inline-size;
+ position: absolute;
+ }
+</style>
+<div id="scope">
+ <span>Crash?</span>
+</div>
+</body>
+<script>
+ window.onload = async () => {
+ const vt = scope.startViewTransition(() => {
+ scope.querySelector('span').style.backgroundColor = "green";
+ });
+ await vt.ready;
+ document.documentElement.classList.remove("test-wait");
+ };
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-view-transitions/scoped/crashtests/to-scale-zero.html b/testing/web-platform/tests/css/css-view-transitions/scoped/crashtests/to-scale-zero.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>Scoped view-transition to scale 0</title>
+ <!-- TODO update link -->
+ <link rel="help" href="https://www.w3.org/TR/css-view-transitions-2/">
+</head>
+<script src="/dom/events/scrolling/scroll_support.js"></script>
+<style>
+ #target {
+ background-color: blue;
+ height: 100px;
+ width: 100px;
+ position: relative;
+ view-transition-name: target;
+ z-index: 1;
+ }
+ .collapsed {
+ transform: scale(0);
+ }
+
+ ::view-transition-old(target) {
+ animation: -ua-view-transition-fade-out 1s -0.5s linear paused;
+ }
+
+ ::view-transition-new(target) {
+ animation: -ua-view-transition-fade-in 1s -0.5s linear paused;
+ }
+</style>
+<body>
+ <div id="target"></div>
+</body>
+<script>
+ failIfNot(Element.prototype.startViewTransition,
+ "Missing element.startViewTransition");
+
+ window.onload = async () => {
+ const target = document.getElementById('target');
+ await waitForCompositorReady();
+ const vt = target.startViewTransition(() => {
+ // Transform becomes singular. Object is no longer rendered.
+ target.classList.toggle('collapsed');
+ });
+ await vt.finished;
+ };
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-view-transitions/scoped/to-scale-zero.html b/testing/web-platform/tests/css/css-view-transitions/scoped/to-scale-zero.html
@@ -1,51 +0,0 @@
-<!DOCTYPE html>
-<html class="reftest-wait">
-<head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="match" href="empty-ref.html">
- <title>Scoped view-transition to scale 0</title>
- <!-- TODO update link -->
- <link rel="help" href="https://www.w3.org/TR/css-view-transitions-2/">
-</head>
-<script src="/common/reftest-wait.js"></script>
-<script src="/dom/events/scrolling/scroll_support.js"></script>
-<style>
- #target {
- background-color: blue;
- height: 100px;
- width: 100px;
- position: relative;
- view-transition-name: target;
- z-index: 1;
- }
- .collapsed {
- transform: scale(0);
- }
-
- ::view-transition-old(target) {
- animation: -ua-view-transition-fade-out 1s -0.5s linear paused;
- }
-
- ::view-transition-new(target) {
- animation: -ua-view-transition-fade-in 1s -0.5s linear paused;
- }
-</style>
-<body>
- <div id="target"></div>
-</body>
-<script>
- failIfNot(Element.prototype.startViewTransition,
- "Missing element.startViewTransition");
-
- window.onload = async () => {
- const target = document.getElementById('target');
- await waitForCompositorReady();
- const vt = target.startViewTransition(() => {
- target.classList.toggle('collapsed');
- });
- await vt.ready;
- requestAnimationFrame(takeScreenshot);
- };
-</script>
-</html>
