[inert][iOS] Can't scroll element after inert attribute has been removed

https://bugs.webkit.org/show_bug.cgi?id=259684 rdar://113239461 Reviewed by Wenson Hsieh. inert use the same invalidation as pointer-events / user-select as effectivePointerEvents / effectiveUserSelect both read effectiveInert. * LayoutTests/fast/scrolling/ios/overflow-scroll-after-inert-change-expected.txt: Added. * LayoutTests/fast/scrolling/ios/overflow-scroll-after-inert-change.html: Added. * Source/WebCore/rendering/style/RenderStyle.cpp: (WebCore::rareInheritedDataChangeRequiresRepaint): (WebCore::RenderStyle::changeRequiresRecompositeLayer const): Canonical link: https://commits.webkit.org/267030@main
WebKit · Aug 18, 2023 · cd37141 · cd37141
1 parent f92900f
commit cd37141
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 1 deletion.
diff --git a/LayoutTests/fast/scrolling/ios/overflow-scroll-after-inert-change-expected.txt b/LayoutTests/fast/scrolling/ios/overflow-scroll-after-inert-change-expected.txt
@@ -0,0 +1,20 @@
+Tests that toggling `inert` doesn't prevent scrolling.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS window.scrollY is 0
+PASS outerScrollElement.scrollTop is 0
+PASS innerScrollElement.scrollTop is 0
+Setting pointer-events: none through inert.
+PASS window.scrollY is non-zero.
+PASS outerScrollElement.scrollTop is 0
+PASS innerScrollElement.scrollTop is 0
+Removing pointer-events: none by removing inert.
+PASS window.scrollY is 0
+PASS outerScrollElement.scrollTop is 0
+PASS innerScrollElement.scrollTop is non-zero.
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/fast/scrolling/ios/overflow-scroll-after-inert-change.html b/LayoutTests/fast/scrolling/ios/overflow-scroll-after-inert-change.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html> <!-- webkit-test-runner [ AsyncOverflowScrollingEnabled=true ] -->
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<script src="../../../resources/ui-helper.js"></script>
+<script src="../../../resources/basic-gestures.js"></script>
+<script src="../../../resources/js-test.js"></script>
+<style>
+.outer-scroll { height: 100vh; }
+.inner-scroll { height: 100vh; overflow-y: auto; }
+.box { height: 100vh; }
+</style>
+<script>
+window.jsTestIsAsync = true;
+
+async function runTest() {
+    if (!window.testRunner) {
+        finishJSTest();
+        return;
+    }
+
+    description("Tests that toggling `inert` doesn't prevent scrolling.");
+
+    globalThis.outerScrollElement = document.querySelector(".outer-scroll");
+    globalThis.innerScrollElement = document.querySelector(".inner-scroll");
+
+    let scrollStartX = outerScrollElement.offsetLeft + (outerScrollElement.offsetWidth / 2);
+    let scrollStartY = outerScrollElement.offsetTop + (outerScrollElement.offsetHeight / 2) + 50;
+    let scrollEndX = scrollStartX;
+    let scrollEndY = scrollStartY - 100;
+
+    shouldBeZero("window.scrollY");
+    shouldBeZero("outerScrollElement.scrollTop");
+    shouldBeZero("innerScrollElement.scrollTop");
+
+    debug("Setting pointer-events: none through inert.");
+    outerScrollElement.inert = true;
+    await UIHelper.renderingUpdate();
+    await touchAndDragFromPointToPoint(scrollStartX, scrollStartY, scrollEndX, scrollEndY);
+    await liftUpAtPoint(scrollEndX, scrollEndY);
+    shouldBeNonZero("window.scrollY");
+    shouldBeZero("outerScrollElement.scrollTop");
+    shouldBeZero("innerScrollElement.scrollTop");
+
+    await UIHelper.immediateScrollTo(0, 0);
+
+    debug("Removing pointer-events: none by removing inert.");
+    outerScrollElement.inert = false;
+    await UIHelper.renderingUpdate();
+    await touchAndDragFromPointToPoint(scrollStartX, scrollStartY, scrollEndX, scrollEndY);
+    await liftUpAtPoint(scrollEndX, scrollEndY);
+    shouldBeZero("window.scrollY");
+    shouldBeZero("outerScrollElement.scrollTop");
+    shouldBeNonZero("innerScrollElement.scrollTop");
+
+    finishJSTest();
+}
+</script>
+<body onload="runTest()">
+    <div class="outer-scroll">
+        <div class="inner-scroll">
+            <div class="box" style="background-color: red;"></div>
+            <div class="box" style="background-color: green;"></div>
+            <div class="box" style="background-color: blue;"></div>
+        </div>
+    </div>
+    <p id="description"></p>
+    <div id="console"></div>
+</body>
+</html>
diff --git a/Source/WebCore/rendering/style/RenderStyle.cpp b/Source/WebCore/rendering/style/RenderStyle.cpp
@@ -1216,7 +1216,8 @@ static bool rareDataChangeRequiresRepaint(const StyleRareNonInheritedData& first
 
 static bool rareInheritedDataChangeRequiresRepaint(const StyleRareInheritedData& first, const StyleRareInheritedData& second)
 {
-    return first.userModify != second.userModify
+    return first.effectiveInert != second.effectiveInert
+        || first.userModify != second.userModify
         || first.userSelect != second.userSelect
         || first.appleColorFilter != second.appleColorFilter
         || first.imageRendering != second.imageRendering
@@ -1361,6 +1362,9 @@ bool RenderStyle::changeRequiresRecompositeLayer(const RenderStyle& other, Optio
             return true;
     }
 
+    if (m_rareInheritedData.ptr() != other.m_rareInheritedData.ptr() && m_rareInheritedData->effectiveInert != other.m_rareInheritedData->effectiveInert)
+        return true;
+
     return false;
 }