commit ea0ca9991d3aa449b032de0b2aa64ca34b641c03
parent 740ac135f7816ea7bb23ed21df880dedee5e209d
Author: Kevin Ellis <kevers@google.com>
Date: Fri, 31 Oct 2025 09:05:35 +0000
Bug 1997190 [wpt PR 55753] - Add failing reftest for scoped-vt with rotation, a=testonly
Automatic update from web-platform-tests
Add failing reftest for scoped-vt with rotation
Bug: 456208218
Change-Id: Icff32d5904fa70b3da0ecfa7c4c3dd8634c1264c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7097738
Reviewed-by: Vladimir Levin <vmpstr@chromium.org>
Commit-Queue: Kevin Ellis <kevers@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1537950}
--
wpt-commits: d7580dd51fe4528d4421a19696fb0dd23f03d475
wpt-pr: 55753
Diffstat:
2 files changed, 66 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-view-transitions/scoped/rotation-on-scoped-element-ref.html b/testing/web-platform/tests/css/css-view-transitions/scoped/rotation-on-scoped-element-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+<style>
+ #container {
+ position: relative;
+ width: 200px;
+ height: 200px;
+ margin: 100px;
+ transform: rotate(45deg);
+ }
+ #target {
+ width: 200px;
+ height: 200px;
+ background-color: purple;
+ clip-path: circle(50% at 0% 0%);
+ }
+</style>
+<body>
+ <div id="container">
+ <div id="target"></div>
+ </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-view-transitions/scoped/rotation-on-scoped-element.html b/testing/web-platform/tests/css/css-view-transitions/scoped/rotation-on-scoped-element.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html class="test-wait">
+<head>
+ <meta charset="utf-8">
+ <link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
+ <link rel="match" href="rotation-on-scoped-element-ref.html">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+<style>
+ #target {
+ background-color: purple;
+ transform: rotate(45deg);
+ width: 200px;
+ height: 200px;
+ margin: 100px;
+ }
+ #target.updated {
+ clip-path: circle(50% at 0% 0%);
+ }
+</style>
+<body>
+ <div id="target"></div>
+</body>
+<script>
+ window.onload = async () => {
+ const vt = target.startViewTransition(() => {
+ target.classList.add('updated');
+ });
+ await vt.ready;
+ document.getAnimations().forEach(anim => {
+ anim.finish();
+ anim.pause();
+ });
+ requestAnimationFrame(() => {
+ document.documentElement.classList.remove('test-wait');
+ });
+ };
+</script>
+</html>
