WebKit export: [view-transitions] Misplaced arrows after scrolling th…

…en transitioning on https://codepen.io/bramus/full/xxmozvN (#46780) https://bugs.webkit.org/show_bug.cgi?id=275506
web-platform-tests · Jun 17, 2024 · 3ef69f8 · 3ef69f8
1 parent 956e937
commit 3ef69f8
Show file tree

Hide file tree

Showing 2 changed files with 92 additions and 0 deletions.
diff --git a/css/css-view-transitions/transformed-element-scroll-transform-ref.html b/css/css-view-transitions/transformed-element-scroll-transform-ref.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html style="reftest-wait">
+<head>
+    <style>
+        #target {
+            width: 100px;
+            height: 100px;
+            background: green;
+            margin: 300px;
+        }
+    </style>
+</head>
+<body>
+    <div id="target"></div>
+    <div style="height: 1000px"></div>
+    <script>
+        function scrollBy(y) {
+            return new Promise(resolve => {
+                addEventListener("scroll", () => {
+                    requestAnimationFrame(() => {
+                        requestAnimationFrame(resolve);
+                    });
+                }, { once: true, capture: true });
+                document.documentElement.scrollBy({
+                    top: y,
+                    behavior: "instant"
+                });
+            });
+        }
+        addEventListener("load", async () => {
+            await scrollBy(200);
+            document.documentElement.classList.remove("reftest-wait");
+        });
+    </script>
+</body>
+</html>
diff --git a/css/css-view-transitions/transformed-element-scroll-transform.html b/css/css-view-transitions/transformed-element-scroll-transform.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html style="reftest-wait">
+<head>
+    <title>Scroll position transform should be the last one to be applied</title>
+    <link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+    <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+    <link rel="match" href="transformed-element-scroll-transform-ref.html">
+    <style>
+        :root {
+            view-transition-name: none;
+        }
+
+        ::view-transition-group(*) {
+            animation-duration: 10s;
+        }
+
+        #target {
+            width: 100px;
+            height: 100px;
+            background: green;
+            margin: 300px;
+            view-transition-name: target;
+            rotate: 90deg;
+        }
+    </style>
+</head>
+<body>
+    <div id="target"></div>
+    <div style="height: 1000px"></div>
+    <script>
+        function scrollBy(y) {
+            return new Promise(resolve => {
+                addEventListener("scroll", () => {
+                    requestAnimationFrame(() => {
+                        requestAnimationFrame(resolve);
+                    });
+                }, { once: true, capture: true });
+                document.documentElement.scrollBy({
+                    top: y,
+                    behavior: "instant"
+                });
+            });
+        }
+        addEventListener("load", async () => {
+            await scrollBy(200);
+            const transition = document.startViewTransition();
+            await transition.ready;
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    document.documentElement.classList.remove("reftest-wait");
+                });
+            });
+        });
+    </script>
+</body>
+</html>