forked from mirrors/gecko-dev
834b6de5d5
Automatic update from web-platform-tests Initial implementation of scrollbar-width ComputedStyle::HasCustomScrollbarStyle() returns true if a custom style for the scrollbar has been set via ::-webkit-scrollbar and the value of scrollbar-width has not been changed from the default. This replaces HasPseudoElementStyle(kPseudoIdScrollbar) so the standard properties for styling scrollbars take precedence over the non-standard method. For convenience, the method Scrollbar::CSSScrollbarWidth() returns the value of the scrollbar-width property in that scrollbar's style. Scrollbar themes take scrollbar-width into account when calculating a scrollbar's thickness, margin, etc. When scrollbar-width is "none", scrollbar themes simply return a thickness of 0 to hide the scrollbar. WebThemeEngine::ScrollbarStyle includes the thickness and margin values for the thin variant. ScrollbarThemeMac uses NSRegularControlSize and NSSmallControlSize to size and display the appropriate type of scrollbar for the default and thin variants. ScrollbarThemeOverlay stores the thickness and margin for the thin variant, although at the moment these values are the same as the default (pending changes to WebThemeEngine). The same applies to the ScrollbarThemeOverlayMobile subclass. ScrollbarThemeAura simply scales the default scrollbar by a 2/3 ratio to paint the thin variant. In the future, the theme should include specific width values for this variant. Perhaps it would also be desirable to use a different set of graphic elements. WPT tests are included. Bug: 891944 Change-Id: I2d451f07de5a16e6cada8a68ae01da7358e8652a Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2681340 Reviewed-by: Xianzhu Wang <wangxianzhu@chromium.org> Reviewed-by: Philip Rogers <pdr@chromium.org> Reviewed-by: Rune Lillesveen <futhark@chromium.org> Reviewed-by: Kentaro Hara <haraken@chromium.org> Commit-Queue: Felipe Erias <felipeerias@igalia.com> Cr-Commit-Position: refs/heads/master@{#872500} -- wpt-commits: f68f2e6bbe1c50a30e690243b64906f2a490e515 wpt-pr: 28280
66 lines
1.6 KiB
HTML
66 lines
1.6 KiB
HTML
<!doctype html>
|
|
<meta charset="utf-8">
|
|
<title>CSS Scrollbars: scrollbar-width on the body is not propagated</title>
|
|
<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@gmail.com" />
|
|
<link rel="help" href="https://www.w3.org/TR/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 type="text/javascript">
|
|
setup({ explicit_done: true });
|
|
|
|
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");
|
|
|
|
done();
|
|
|
|
</script>
|
|
</body>
|