Skip to content


Browse files Browse the repository at this point in the history
Correct which element scrollbar-width is resolved from for the viewport

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:
  • Loading branch information
lukewarlow authored and nt1m committed May 27, 2023
1 parent 65902a8 commit 2f9b546
Show file tree
Hide file tree
Showing 4 changed files with 65 additions and 1 deletion.
@@ -0,0 +1,3 @@

PASS viewport displays a scrollbar

@@ -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="" />
<link rel="help" href="" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
: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;

body {
margin: 0;
padding: 0;

#content {
height: 10vh;
width: 100%;
background: lightsalmon;

#expander {
/* force vertical scroll */
height: 200vh;
width: 300px;
background: gray;


<div id="content"></div>

<div id="expander"></div>

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");
1 change: 1 addition & 0 deletions LayoutTests/platform/ios-wk2/TestExpectations
Expand Up @@ -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 imported/w3c/web-platform-tests/css/css-text/white-space/trailing-space-and-text-alignment-001.html [ ImageOnlyFailure ]
Expand Down
2 changes: 1 addition & 1 deletion Source/WebCore/page/LocalFrameView.cpp
Expand Up @@ -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;
Expand Down

0 comments on commit 2f9b546

Please sign in to comment.