Cherry-pick 2f97007. rdar://problem/113366817

[UI-side compositing] Webpage going blank when navigating diffs in https://whatpr.org/html/9537/238086f...f400a41/canvas.html#drawing-state https://bugs.webkit.org/show_bug.cgi?id=259813 rdar://113366817 Reviewed by Simon Fraser and Cameron McCormack. When getting multiple non-animated scroll requests, the current merging code loses the previous scroll request if a new delta update comes in. To resolve this, add the two scroll requests together if either or both are a delta update. Added a couple new tests for this since the tests in imported/w3c/web-platform-tests/css/cssom-view/scroll-behavior-* do not cover this since they are testing the web process position. * Source/WebCore/page/scrolling/ScrollingCoordinatorTypes.cpp: (WebCore::RequestedScrollData::merge): Canonical link: https://commits.webkit.org/266646@main Identifier: 265870.307@safari-7616.1.27.10-branch
WebKit · Aug 7, 2023 · 6707a43 · 6707a43
1 parent f97a94e
commit 6707a43
Show file tree

Hide file tree

Showing 7 changed files with 238 additions and 0 deletions.
diff --git a/LayoutTests/fast/scrolling/programmatic-scroll-merge-delta-and-position-expected.html b/LayoutTests/fast/scrolling/programmatic-scroll-merge-delta-and-position-expected.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Only the green part of the div should be visible</title>
+    <style>
+        body {
+            height: 2000px;
+            background-image: repeating-linear-gradient(white, silver 200px);
+            margin: 0px;
+        }
+
+        .box {
+            width: 200px;
+            height: 200px;
+            background-image: linear-gradient(0deg, green 50%, red 50%);
+        }
+    </style>
+    <script src="../../resources/ui-helper.js"></script>
+    <script>
+        if (window.testRunner)
+            testRunner.waitUntilDone();
+
+        async function doTest()
+        {
+            window.scrollBy(0, 100);
+
+            await UIHelper.ensurePresentationUpdate();
+            testRunner.notifyDone();
+        }
+
+        window.addEventListener('load', doTest, false);
+    </script>
+</head>
+<body>
+    <div class="box"></div>
+</body>
+</html>
diff --git a/LayoutTests/fast/scrolling/programmatic-scroll-merge-delta-and-position.html b/LayoutTests/fast/scrolling/programmatic-scroll-merge-delta-and-position.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Only the green part of the div should be visible</title>
+    <style>
+        body {
+            height: 2000px;
+            background-image: repeating-linear-gradient(white, silver 200px);
+            margin: 0px;
+        }
+
+        .box {
+            width: 200px;
+            height: 200px;
+            background-image: linear-gradient(0deg, green 50%, red 50%);
+        }
+    </style>
+    <script src="../../resources/ui-helper.js"></script>
+    <script>
+        if (window.testRunner)
+            testRunner.waitUntilDone();
+
+        async function doTest()
+        {
+            window.scrollBy(0, 50);
+            window.scrollTo(0, 100);
+
+            await UIHelper.ensurePresentationUpdate();
+            testRunner.notifyDone();
+        }
+
+        window.addEventListener('load', doTest, false);
+    </script>
+</head>
+<body>
+    <div class="box"></div>
+</body>
+</html>
diff --git a/LayoutTests/fast/scrolling/programmatic-scroll-merge-delta-expected.html b/LayoutTests/fast/scrolling/programmatic-scroll-merge-delta-expected.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Only the green part of the div should be visible</title>
+    <style>
+        body {
+            height: 2000px;
+            background-image: repeating-linear-gradient(white, silver 200px);
+            margin: 0px;
+        }
+
+        .box {
+            width: 200px;
+            height: 200px;
+            background-image: linear-gradient(0deg, green 50%, red 50%);
+        }
+    </style>
+    <script src="../../resources/ui-helper.js"></script>
+    <script>
+        if (window.testRunner)
+            testRunner.waitUntilDone();
+
+        async function doTest()
+        {
+            window.scrollBy(0, 100);
+
+            await UIHelper.ensurePresentationUpdate();
+            testRunner.notifyDone();
+        }
+
+        window.addEventListener('load', doTest, false);
+    </script>
+</head>
+<body>
+    <div class="box"></div>
+</body>
+</html>
diff --git a/LayoutTests/fast/scrolling/programmatic-scroll-merge-delta.html b/LayoutTests/fast/scrolling/programmatic-scroll-merge-delta.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Only the green part of the div should be visible</title>
+    <style>
+        body {
+            height: 2000px;
+            background-image: repeating-linear-gradient(white, silver 200px);
+            margin: 0px;
+        }
+
+        .box {
+            width: 200px;
+            height: 200px;
+            background-image: linear-gradient(0deg, green 50%, red 50%);
+        }
+    </style>
+    <script src="../../resources/ui-helper.js"></script>
+    <script>
+        if (window.testRunner)
+            testRunner.waitUntilDone();
+
+        async function doTest()
+        {
+            window.scrollBy(0, 50);
+            window.scrollBy(0, 50);
+
+            await UIHelper.ensurePresentationUpdate();
+            testRunner.notifyDone();
+        }
+
+        window.addEventListener('load', doTest, false);
+    </script>
+</head>
+<body>
+    <div class="box"></div>
+</body>
+</html>
diff --git a/LayoutTests/fast/scrolling/programmatic-scroll-merge-position-and-delta-expected.html b/LayoutTests/fast/scrolling/programmatic-scroll-merge-position-and-delta-expected.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Only the green part of the div should be visible</title>
+    <style>
+        body {
+            height: 2000px;
+            background-image: repeating-linear-gradient(white, silver 200px);
+            margin: 0px;
+        }
+
+        .box {
+            width: 200px;
+            height: 200px;
+            background-image: linear-gradient(0deg, green 50%, red 50%);
+        }
+    </style>
+    <script src="../../resources/ui-helper.js"></script>
+    <script>
+        if (window.testRunner)
+            testRunner.waitUntilDone();
+
+        async function doTest()
+        {
+            window.scrollBy(0, 100);
+
+            await UIHelper.ensurePresentationUpdate();
+            testRunner.notifyDone();
+        }
+
+        window.addEventListener('load', doTest, false);
+    </script>
+</head>
+<body>
+    <div class="box"></div>
+</body>
+</html>
diff --git a/LayoutTests/fast/scrolling/programmatic-scroll-merge-position-and-delta.html b/LayoutTests/fast/scrolling/programmatic-scroll-merge-position-and-delta.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Only the green part of the div should be visible</title>
+    <style>
+        body {
+            height: 2000px;
+            background-image: repeating-linear-gradient(white, silver 200px);
+            margin: 0px;
+        }
+
+        .box {
+            width: 200px;
+            height: 200px;
+            background-image: linear-gradient(0deg, green 50%, red 50%);
+        }
+    </style>
+    <script src="../../resources/ui-helper.js"></script>
+    <script>
+        if (window.testRunner)
+            testRunner.waitUntilDone();
+
+        async function doTest()
+        {
+            window.scrollTo(0, 50);
+            window.scrollBy(0, 50);
+
+            await UIHelper.ensurePresentationUpdate();
+            testRunner.notifyDone();
+        }
+
+        window.addEventListener('load', doTest, false);
+    </script>
+</head>
+<body>
+    <div class="box"></div>
+</body>
+</html>
diff --git a/Source/WebCore/page/scrolling/ScrollingCoordinatorTypes.cpp b/Source/WebCore/page/scrolling/ScrollingCoordinatorTypes.cpp
@@ -43,6 +43,19 @@ void RequestedScrollData::merge(RequestedScrollData&& other)
             other.requestedDataBeforeAnimatedScroll = requestedDataBeforeAnimatedScroll;
             break;
         }
+    } else if (other.requestType == ScrollRequestType::DeltaUpdate && animated == ScrollIsAnimated::No) {
+        switch (requestType) {
+        case ScrollRequestType::PositionUpdate: {
+            other.requestType = ScrollRequestType::PositionUpdate;
+            other.scrollPositionOrDelta = std::get<FloatPoint>(scrollPositionOrDelta) + std::get<FloatSize>(other.scrollPositionOrDelta);
+            break;
+        }
+        case ScrollRequestType::DeltaUpdate:
+            std::get<FloatSize>(other.scrollPositionOrDelta) += std::get<FloatSize>(scrollPositionOrDelta);
+            break;
+        default:
+            break;
+        }
     }
     *this = WTFMove(other);
 }