Correct which element scrollbar-width is resolved from for the viewport

https://bugs.webkit.org/show_bug.cgi?id=257424 Reviewed by Tim Nguyen. A new WPT test has been added which tests to make sure the body style doesn't propagate (like scrollbar-width-008.html) but runs in quirks mode. That passes inside of Chrome (with appropriate flags), and Firefox but not WebKit (before this change). When in quirks mode scrollingElement resolves to body, whereas in standards mode it resolves to documentElement. I originally had this using documentElement but it was changed during the review process for WebKit 2 implementation. Based on the interop issue caught by the new test I've made I believe I was originally correct and this should be documentElement. This change addresses that changing scrollingElement back to documentElement. * LayoutTests/imported/w3c/web-platform-tests/css/css-scrollbars/scrollbar-width-009-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-scrollbars/scrollbar-width-009.html: Added. * LayoutTests/platform/ios-wk2/TestExpectations: * Source/WebCore/page/LocalFrameView.cpp: (WebCore::LocalFrameView::scrollbarWidthStyle const): Canonical link: https://commits.webkit.org/264632@main
WebKit · May 27, 2023 · 2f9b546 · 2f9b546
1 parent 65902a8
commit 2f9b546
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 1 deletion.
diff --git a/...Tests/imported/w3c/web-platform-tests/css/css-scrollbars/scrollbar-width-009-expected.txt b/...Tests/imported/w3c/web-platform-tests/css/css-scrollbars/scrollbar-width-009-expected.txt
@@ -0,0 +1,3 @@
+
+PASS viewport displays a scrollbar
+
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-scrollbars/scrollbar-width-009.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-scrollbars/scrollbar-width-009.html
@@ -0,0 +1,60 @@
+<meta charset="utf-8">
+<title>CSS Scrollbars: scrollbar-width on the body is not propagated quirks mode</title>
+<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" />
+<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<style>
+  :root {
+    /* CSS scrollbar properties applied to the root element
+       will be propagated to the viewport. */
+    scrollbar-width: thin;
+    overflow: visible;
+  }
+
+  body {
+    /* overflow is propagated as well */
+    overflow: scroll;
+    /* but CSS scrollbar properties applied to the body are not propagated */
+    scrollbar-width: none;
+  }
+
+  :root,
+  body {
+    margin: 0;
+    padding: 0;
+  }
+
+  #content {
+    height: 10vh;
+    width: 100%;
+    background: lightsalmon;
+  }
+
+  #expander {
+    /* force vertical scroll */
+    height: 200vh;
+    width: 300px;
+    background: gray;
+  }
+</style>
+
+<body>
+
+  <div id="content"></div>
+
+  <div id="expander"></div>
+
+  <script>
+    test(function () {
+      let root = document.documentElement;
+      let body = document.body;
+      let content = document.getElementById('content');
+
+      assert_less_than(root.offsetWidth, window.innerWidth, "viewport has a scrollbar");
+      assert_equals(body.offsetWidth, root.offsetWidth, "body matches root");
+      assert_equals(content.offsetWidth, body.offsetWidth, "content matches body");
+    }, "viewport displays a scrollbar");
+  </script>
+</body>
diff --git a/LayoutTests/platform/ios-wk2/TestExpectations b/LayoutTests/platform/ios-wk2/TestExpectations
@@ -2414,6 +2414,7 @@ imported/w3c/web-platform-tests/css/css-scrollbars/scrollbar-width-005.html [ Sk
 imported/w3c/web-platform-tests/css/css-scrollbars/scrollbar-width-006.html [ Skip ]
 imported/w3c/web-platform-tests/css/css-scrollbars/scrollbar-width-007.html [ Skip ]
 imported/w3c/web-platform-tests/css/css-scrollbars/scrollbar-width-008.html [ Skip ]
+imported/w3c/web-platform-tests/css/css-scrollbars/scrollbar-width-009.html [ Skip ]
 
 # Trailing space/text alignment iOS-specific WPT failures
 webkit.org/b/257182 imported/w3c/web-platform-tests/css/css-text/white-space/trailing-space-and-text-alignment-001.html [ ImageOnlyFailure ]

diff --git a/Source/WebCore/page/LocalFrameView.cpp b/Source/WebCore/page/LocalFrameView.cpp
@@ -6288,7 +6288,7 @@ OverscrollBehavior LocalFrameView::verticalOverscrollBehavior()  const
 ScrollbarWidth LocalFrameView::scrollbarWidthStyle()  const
 {
     auto* document = m_frame->document();
-    auto scrollingObject = document && document->scrollingElement() ? document->scrollingElement()->renderer() : nullptr;
+    auto scrollingObject = document && document->documentElement() ? document->documentElement()->renderer() : nullptr;
     if (scrollingObject && renderView())
         return scrollingObject->style().scrollbarWidth();
     return ScrollbarWidth::Auto;