зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1701666 [wpt PR 28280] - Initial implementation of scrollbar-width, a=testonly
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
This commit is contained in:
Felipe Erias
moz-wptsync-bot
Родитель
19f93876c0
Коммит
834b6de5d5
|
|
@ -0,0 +1,175 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Scrollbars: scrollbar-width with horizontal text and vertical scrollbar</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>
|
||||
/* Use scrollbar-gutter so there is always space reserved
|
||||
for the scrollbar, even when it is of the overlay kind. */
|
||||
.container {
|
||||
scrollbar-gutter: always;
|
||||
writing-mode: horizontal-tb;
|
||||
overflow: auto;
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
margin: 1px;
|
||||
padding: 0px;
|
||||
border: none;
|
||||
background: deepskyblue;
|
||||
}
|
||||
|
||||
.content {
|
||||
height: 300px;
|
||||
width: 100%;
|
||||
background: lightsalmon;
|
||||
}
|
||||
|
||||
/* writing directions */
|
||||
.ltr {
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
.rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
.container.auto {
|
||||
scrollbar-width: auto;
|
||||
}
|
||||
|
||||
.container.thin {
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.container.none {
|
||||
scrollbar-width: none;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
|
||||
function performTest() {
|
||||
setup({ explicit_done: true });
|
||||
|
||||
// ltr
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_ltr_auto');
|
||||
let content = document.getElementById('content_ltr_auto');
|
||||
assert_less_than(container.scrollWidth, container.offsetWidth, "ltr auto scrollWidth");
|
||||
assert_less_than(container.clientWidth, container.offsetWidth, "ltr auto clientWidth");
|
||||
assert_equals(container.offsetLeft, content.offsetLeft, "ltr auto offsetLeft");
|
||||
assert_equals(container.clientWidth, content.clientWidth, "ltr auto clientWidth");
|
||||
assert_not_equals(container.offsetWidth, content.offsetWidth, "ltr auto offsetWidth");
|
||||
}, "horizontal-tb, ltr, scrollbar-width auto");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_ltr_thin');
|
||||
let content = document.getElementById('content_ltr_thin');
|
||||
assert_less_than(container.scrollWidth, container.offsetWidth, "ltr thin scrollWidth");
|
||||
assert_less_than(container.clientWidth, container.offsetWidth, "ltr thin clientWidth");
|
||||
assert_equals(container.offsetLeft, content.offsetLeft, "ltr thin offsetLeft");
|
||||
assert_equals(container.clientWidth, content.clientWidth, "ltr thin clientWidth");
|
||||
assert_not_equals(container.offsetWidth, content.offsetWidth, "ltr thin offsetWidth");
|
||||
}, "horizontal-tb, ltr, scrollbar-width thin");
|
||||
|
||||
test(function () {
|
||||
let auto_scrollbar_width =
|
||||
document.getElementById('container_ltr_auto').offsetWidth -
|
||||
document.getElementById('container_ltr_auto').clientWidth;
|
||||
let thin_scrollbar_width =
|
||||
document.getElementById('container_ltr_thin').offsetWidth -
|
||||
document.getElementById('container_ltr_thin').clientWidth;
|
||||
assert_less_than_equal(thin_scrollbar_width, auto_scrollbar_width, "ltr, thin <= auto");
|
||||
}, 'horizontal-tb, ltr, scrollbar-width "thin" is same or thinner than "auto"');
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_ltr_none');
|
||||
let content = document.getElementById('content_ltr_none');
|
||||
assert_equals(container.scrollWidth, 200, "ltr none scrollWidth");
|
||||
assert_equals(container.clientWidth, 200, "ltr none clientWidth");
|
||||
assert_equals(container.offsetLeft, content.offsetLeft, "ltr none offsetLeft");
|
||||
assert_equals(container.clientWidth, content.clientWidth, "ltr none clientWidth");
|
||||
assert_equals(container.offsetWidth, content.offsetWidth, "ltr none offsetWidth");
|
||||
}, "horizontal-tb, ltr, scrollbar-width none");
|
||||
|
||||
// rtl
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_rtl_auto');
|
||||
let content = document.getElementById('content_rtl_auto');
|
||||
assert_less_than(container.scrollWidth, container.offsetWidth, "rtl auto scrollWidth");
|
||||
assert_less_than(container.clientWidth, container.offsetWidth, "rtl auto clientWidth");
|
||||
assert_less_than(container.offsetLeft, content.offsetLeft, "rtl auto offsetLeft");
|
||||
assert_equals(container.clientWidth, content.clientWidth, "rtl auto clientWidth");
|
||||
assert_not_equals(container.offsetWidth, content.offsetWidth, "rtl auto offsetWidth");
|
||||
}, "horizontal-tb, rtl, scrollbar-width auto");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_rtl_thin');
|
||||
let content = document.getElementById('content_rtl_thin');
|
||||
assert_less_than(container.scrollWidth, container.offsetWidth, "rtl thin scrollWidth");
|
||||
assert_less_than(container.clientWidth, container.offsetWidth, "rtl thin clientWidth");
|
||||
assert_less_than(container.offsetLeft, content.offsetLeft, "rtl thin offsetLeft");
|
||||
assert_equals(container.clientWidth, content.clientWidth, "rtl thin clientWidth");
|
||||
assert_not_equals(container.offsetWidth, content.offsetWidth, "rtl thin offsetWidth");
|
||||
}, "horizontal-tb, rtl, scrollbar-width thin");
|
||||
|
||||
test(function () {
|
||||
let auto_scrollbar_width =
|
||||
document.getElementById('container_rtl_auto').offsetWidth -
|
||||
document.getElementById('container_rtl_auto').clientWidth;
|
||||
let thin_scrollbar_width =
|
||||
document.getElementById('container_rtl_thin').offsetWidth -
|
||||
document.getElementById('container_rtl_thin').clientWidth;
|
||||
assert_less_than_equal(thin_scrollbar_width, auto_scrollbar_width, "rtl, thin < auto");
|
||||
}, 'horizontal-tb, rtl, scrollbar-width "thin" is same or thinner than "auto"');
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_rtl_none');
|
||||
let content = document.getElementById('content_rtl_none');
|
||||
assert_equals(container.scrollWidth, 200, "rtl none scrollWidth");
|
||||
assert_equals(container.clientWidth, 200, "rtl none clientWidth");
|
||||
assert_equals(container.offsetLeft, content.offsetLeft, "rtl none offsetLeft");
|
||||
assert_equals(container.clientWidth, content.clientWidth, "rtl none clientWidth");
|
||||
assert_equals(container.offsetWidth, content.offsetWidth, "rtl none offsetWidth");
|
||||
}, "horizontal-tb, rtl, scrollbar-width none");
|
||||
|
||||
done();
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<body onload="performTest()">
|
||||
|
||||
Test scrollbar-width: vertical scrollbar, ltr direction
|
||||
|
||||
<div class="container ltr auto" id="container_ltr_auto">
|
||||
<div class="content" id="content_ltr_auto">auto</div>
|
||||
</div>
|
||||
|
||||
<div class="container ltr thin" id="container_ltr_thin">
|
||||
<div class="content" id="content_ltr_thin">thin</div>
|
||||
</div>
|
||||
|
||||
<div class="container ltr none" id="container_ltr_none">
|
||||
<div class="content" id="content_ltr_none">none</div>
|
||||
</div>
|
||||
|
||||
Test scrollbar-width: vertical scrollbar, rtl direction
|
||||
|
||||
<div class="container rtl auto" id="container_rtl_auto">
|
||||
<div class="content" id="content_rtl_auto">auto</div>
|
||||
</div>
|
||||
|
||||
<div class="container rtl thin" id="container_rtl_thin">
|
||||
<div class="content" id="content_rtl_thin">thin</div>
|
||||
</div>
|
||||
|
||||
<div class="container rtl none" id="container_rtl_none">
|
||||
<div class="content" id="content_rtl_none">none</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
@ -0,0 +1,168 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Scrollbars: scrollbar-width with vertical text and horizontal scrollbar</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>
|
||||
/* Use scrollbar-gutter so there is always space reserved
|
||||
for the scrollbar, even when it is of the overlay kind. */
|
||||
.container {
|
||||
scrollbar-gutter: always;
|
||||
overflow: auto;
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
margin: 1px;
|
||||
padding: 0px;
|
||||
border: none;
|
||||
background: deepskyblue;
|
||||
}
|
||||
|
||||
.content {
|
||||
height: 100%;
|
||||
width: 300px;
|
||||
background: lightsalmon;
|
||||
}
|
||||
|
||||
/* writing directions */
|
||||
.vertical-lr {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
.vertical-rl {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
.container.auto {
|
||||
scrollbar-width: auto;
|
||||
}
|
||||
|
||||
.container.thin {
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.container.none {
|
||||
scrollbar-width: none;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
|
||||
function performTest() {
|
||||
setup({ explicit_done: true });
|
||||
|
||||
// vertical-lr
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_vlr_auto');
|
||||
let content = document.getElementById('content_vlr_auto');
|
||||
assert_less_than(container.scrollHeight, container.offsetHeight, "vertical-lr auto scrollHeight");
|
||||
assert_less_than(container.clientHeight, container.offsetHeight, "vertical-lr auto clientHeight");
|
||||
assert_equals(container.clientHeight, content.clientHeight, "vertical-lr auto clientHeight");
|
||||
assert_not_equals(container.offsetHeight, content.offsetHeight, "vertical-lr auto offsetHeight");
|
||||
}, "vertical-lr, scrollbar-width auto");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_vlr_thin');
|
||||
let content = document.getElementById('content_vlr_thin');
|
||||
assert_less_than(container.scrollHeight, container.offsetHeight, "vertical-lr thin scrollHeight");
|
||||
assert_less_than(container.clientHeight, container.offsetHeight, "vertical-lr thin clientHeight");
|
||||
assert_equals(container.clientHeight, content.clientHeight, "vertical-lr thin clientHeight");
|
||||
assert_not_equals(container.offsetHeight, content.offsetHeight, "vertical-lr thin offsetHeight");
|
||||
}, "vertical-lr, scrollbar-width thin");
|
||||
|
||||
test(function () {
|
||||
let auto_scrollbar_height =
|
||||
document.getElementById('container_vlr_auto').offsetHeight -
|
||||
document.getElementById('container_vlr_auto').clientHeight;
|
||||
let thin_scrollbar_height =
|
||||
document.getElementById('container_vlr_thin').offsetHeight -
|
||||
document.getElementById('container_vlr_thin').clientHeight;
|
||||
assert_less_than_equal(thin_scrollbar_height, auto_scrollbar_height, "vertical-lr, thin <= auto");
|
||||
}, 'vertical-lr, scrollbar-width "thin" is same or thinner than "auto"');
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_vlr_none');
|
||||
let content = document.getElementById('content_vlr_none');
|
||||
assert_equals(container.scrollHeight, 200, "vertical-lr none scrollHeight");
|
||||
assert_equals(container.clientHeight, 200, "vertical-lr none clientHeight");
|
||||
assert_equals(container.clientHeight, content.clientHeight, "vertical-lr none clientHeight");
|
||||
assert_equals(container.offsetHeight, content.offsetHeight, "vertical-lr none offsetHeight");
|
||||
}, "vertical-lr, scrollbar-width none");
|
||||
|
||||
// vertical-rl
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_vrl_auto');
|
||||
let content = document.getElementById('content_vrl_auto');
|
||||
assert_less_than(container.scrollHeight, container.offsetHeight, "vertical-rl auto scrollHeight");
|
||||
assert_less_than(container.clientHeight, container.offsetHeight, "vertical-rl auto clientHeight");
|
||||
assert_equals(container.clientHeight, content.clientHeight, "vertical-rl auto clientHeight");
|
||||
assert_not_equals(container.offsetHeight, content.offsetHeight, "vertical-rl auto offsetHeight");
|
||||
}, "vertical-rl, scrollbar-width auto");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_vrl_thin');
|
||||
let content = document.getElementById('content_vrl_thin');
|
||||
assert_less_than(container.scrollHeight, container.offsetHeight, "vertical-rl thin scrollHeight");
|
||||
assert_less_than(container.clientHeight, container.offsetHeight, "vertical-rl thin clientHeight");
|
||||
assert_equals(container.clientHeight, content.clientHeight, "vertical-rl thin clientHeight");
|
||||
assert_not_equals(container.offsetHeight, content.offsetHeight, "vertical-rl thin offsetHeight");
|
||||
}, "vertical-rl, scrollbar-width thin");
|
||||
|
||||
test(function () {
|
||||
let auto_scrollbar_height =
|
||||
document.getElementById('container_vrl_auto').offsetHeight -
|
||||
document.getElementById('container_vrl_auto').clientHeight;
|
||||
let thin_scrollbar_height =
|
||||
document.getElementById('container_vrl_thin').offsetHeight -
|
||||
document.getElementById('container_vrl_thin').clientHeight;
|
||||
assert_less_than_equal(thin_scrollbar_height, auto_scrollbar_height, "vertical-rl, thin <= auto");
|
||||
}, 'vertical-rl, scrollbar-width "thin" is same or thinner than "auto"');
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_vrl_none');
|
||||
let content = document.getElementById('content_vrl_none');
|
||||
assert_equals(container.scrollHeight, 200, "vertical-rl none scrollHeight");
|
||||
assert_equals(container.clientHeight, 200, "vertical-rl none clientHeight");
|
||||
assert_equals(container.clientHeight, content.clientHeight, "vertical-rl none clientHeight");
|
||||
assert_equals(container.offsetHeight, content.offsetHeight, "vertical-rl none offsetHeight");
|
||||
}, "vertical-rl, scrollbar-width none");
|
||||
|
||||
done();
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<body onload="performTest()">
|
||||
|
||||
Test scrollbar-width: horizontal scrollbar, vertical-lr direction
|
||||
|
||||
<div class="container vertical-lr auto" id="container_vlr_auto">
|
||||
<div class="content" id="content_vlr_auto">auto</div>
|
||||
</div>
|
||||
|
||||
<div class="container vertical-lr thin" id="container_vlr_thin">
|
||||
<div class="content" id="content_vlr_thin">thin</div>
|
||||
</div>
|
||||
|
||||
<div class="container vertical-lr none" id="container_vlr_none">
|
||||
<div class="content" id="content_vlr_none">none</div>
|
||||
</div>
|
||||
|
||||
Test scrollbar-width: horizontal scrollbar, vertical-rl direction
|
||||
|
||||
<div class="container vertical-rl auto" id="container_vrl_auto">
|
||||
<div class="content" id="content_vrl_auto">auto</div>
|
||||
</div>
|
||||
|
||||
<div class="container vertical-rl thin" id="container_vrl_thin">
|
||||
<div class="content" id="content_vrl_thin">thin</div>
|
||||
</div>
|
||||
|
||||
<div class="container vertical-rl none" id="container_vrl_none">
|
||||
<div class="content" id="content_vrl_none">none</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
@ -0,0 +1,155 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Scrollbars: scrollbar-width with horizontal text, and vertical and horizontal scrollbars</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>
|
||||
/* Use scrollbar-gutter so there is always space reserved
|
||||
for the scrollbar, even when it is of the overlay kind. */
|
||||
.container {
|
||||
scrollbar-gutter: always;
|
||||
writing-mode: horizontal-tb;
|
||||
overflow: auto;
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
margin: 1px;
|
||||
padding: 0px;
|
||||
border: none;
|
||||
background: deepskyblue;
|
||||
}
|
||||
|
||||
.content {
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
background: lightsalmon;
|
||||
}
|
||||
|
||||
/* writing directions */
|
||||
.ltr {
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
.rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
.container.auto {
|
||||
scrollbar-width: auto;
|
||||
}
|
||||
|
||||
.container.thin {
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.container.none {
|
||||
scrollbar-width: none;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
|
||||
function performTest() {
|
||||
setup({ explicit_done: true });
|
||||
|
||||
// ltr
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_ltr_auto');
|
||||
let content = document.getElementById('content_ltr_auto');
|
||||
assert_less_than(container.offsetWidth, container.scrollWidth, "ltr auto scrollWidth");
|
||||
assert_less_than(container.offsetHeight, container.scrollHeight, "ltr auto scrollHeight");
|
||||
assert_less_than(container.clientWidth, container.offsetWidth, "ltr auto clientWidth");
|
||||
assert_less_than(container.clientHeight, container.offsetHeight, "ltr auto clientHeight");
|
||||
assert_equals(content.offsetLeft, container.offsetLeft, "ltr auto offsetLeft");
|
||||
}, "horizontal-tb, ltr, scrollbar-width auto");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_ltr_thin');
|
||||
let content = document.getElementById('content_ltr_thin');
|
||||
assert_less_than(container.offsetWidth, container.scrollWidth, "ltr auto scrollWidth");
|
||||
assert_less_than(container.offsetHeight, container.scrollHeight, "ltr auto scrollHeight");
|
||||
assert_less_than(container.clientWidth, container.offsetWidth, "ltr auto clientWidth");
|
||||
assert_less_than(container.clientHeight, container.offsetHeight, "ltr auto clientHeight");
|
||||
assert_equals(content.offsetLeft, container.offsetLeft, "ltr auto offsetLeft");
|
||||
}, "horizontal-tb, ltr, scrollbar-width thin");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_ltr_none');
|
||||
let content = document.getElementById('content_ltr_none');
|
||||
assert_less_than(container.offsetWidth, container.scrollWidth, "ltr auto scrollWidth");
|
||||
assert_less_than(container.offsetHeight, container.scrollHeight, "ltr auto scrollHeight");
|
||||
assert_equals(container.clientWidth, container.offsetWidth, "ltr auto clientWidth");
|
||||
assert_equals(container.clientHeight, container.offsetHeight, "ltr auto clientHeight");
|
||||
assert_equals(content.offsetLeft, container.offsetLeft, "ltr auto offsetLeft");
|
||||
}, "horizontal-tb, ltr, scrollbar-width none");
|
||||
|
||||
// rtl
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_rtl_auto');
|
||||
let content = document.getElementById('content_rtl_auto');
|
||||
assert_less_than(container.offsetWidth, container.scrollWidth, "rtl auto scrollWidth");
|
||||
assert_less_than(container.offsetHeight, container.scrollHeight, "rtl auto scrollHeight");
|
||||
assert_less_than(container.clientWidth, container.offsetWidth, "rtl auto clientWidth");
|
||||
assert_less_than(container.clientHeight, container.offsetHeight, "rtl auto clientHeight");
|
||||
assert_less_than(content.offsetLeft, container.offsetLeft, "rtl auto offsetLeft");
|
||||
}, "horizontal-tb, rtl, scrollbar-width auto");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_rtl_thin');
|
||||
let content = document.getElementById('content_rtl_thin');
|
||||
assert_less_than(container.offsetWidth, container.scrollWidth, "rtl auto scrollWidth");
|
||||
assert_less_than(container.offsetHeight, container.scrollHeight, "rtl auto scrollHeight");
|
||||
assert_less_than(container.clientWidth, container.offsetWidth, "rtl auto clientWidth");
|
||||
assert_less_than(container.clientHeight, container.offsetHeight, "rtl auto clientHeight");
|
||||
assert_less_than(content.offsetLeft, container.offsetLeft, "rtl auto offsetLeft");
|
||||
}, "horizontal-tb, rtl, scrollbar-width thin");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_rtl_none');
|
||||
let content = document.getElementById('content_rtl_none');
|
||||
assert_less_than(container.offsetWidth, container.scrollWidth, "rtl auto scrollWidth");
|
||||
assert_less_than(container.offsetHeight, container.scrollHeight, "rtl auto scrollHeight");
|
||||
assert_equals(container.clientWidth, container.offsetWidth, "rtl auto clientWidth");
|
||||
assert_equals(container.clientHeight, container.offsetHeight, "rtl auto clientHeight");
|
||||
assert_less_than(content.offsetLeft, container.offsetLeft, "rtl auto offsetLeft");
|
||||
}, "horizontal-tb, rtl, scrollbar-width none");
|
||||
|
||||
done();
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<body onload="performTest()">
|
||||
|
||||
Test scrollbar-width: both scrollbars, horizontal ltr
|
||||
|
||||
<div class="container ltr auto" id="container_ltr_auto">
|
||||
<div class="content" id="content_ltr_auto">auto</div>
|
||||
</div>
|
||||
|
||||
<div class="container ltr thin" id="container_ltr_thin">
|
||||
<div class="content" id="content_ltr_thin">thin</div>
|
||||
</div>
|
||||
|
||||
<div class="container ltr none" id="container_ltr_none">
|
||||
<div class="content" id="content_ltr_none">none</div>
|
||||
</div>
|
||||
|
||||
Test scrollbar-width: both scrollbars, horizontal rtl
|
||||
|
||||
<div class="container rtl auto" id="container_rtl_auto">
|
||||
<div class="content" id="content_rtl_auto">auto</div>
|
||||
</div>
|
||||
|
||||
<div class="container rtl thin" id="container_rtl_thin">
|
||||
<div class="content" id="content_rtl_thin">thin</div>
|
||||
</div>
|
||||
|
||||
<div class="container rtl none" id="container_rtl_none">
|
||||
<div class="content" id="content_rtl_none">none</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
@ -0,0 +1,155 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Scrollbars: scrollbar-width with vertical text, and vertical and horizontal scrollbars</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>
|
||||
/* Use scrollbar-gutter so there is always space reserved
|
||||
for the scrollbar, even when it is of the overlay kind. */
|
||||
.container {
|
||||
scrollbar-gutter: always;
|
||||
writing-mode: horizontal-tb;
|
||||
overflow: auto;
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
margin: 1px;
|
||||
padding: 0px;
|
||||
border: none;
|
||||
background: deepskyblue;
|
||||
}
|
||||
|
||||
.content {
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
background: lightsalmon;
|
||||
}
|
||||
|
||||
/* writing directions */
|
||||
.vertical-lr {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
.vertical-rl {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
.container.auto {
|
||||
scrollbar-width: auto;
|
||||
}
|
||||
|
||||
.container.thin {
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.container.none {
|
||||
scrollbar-width: none;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
|
||||
function performTest() {
|
||||
setup({ explicit_done: true });
|
||||
|
||||
// vertical-lr
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_vlr_auto');
|
||||
let content = document.getElementById('content_vlr_auto');
|
||||
assert_less_than(container.offsetWidth, container.scrollWidth, "ltr auto scrollWidth");
|
||||
assert_less_than(container.offsetHeight, container.scrollHeight, "ltr auto scrollHeight");
|
||||
assert_less_than(container.clientWidth, container.offsetWidth, "ltr auto clientWidth");
|
||||
assert_less_than(container.clientHeight, container.offsetHeight, "ltr auto clientHeight");
|
||||
assert_equals(content.offsetLeft, container.offsetLeft, "ltr auto offsetLeft");
|
||||
}, "vertical-lr, scrollbar-width auto");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_vlr_thin');
|
||||
let content = document.getElementById('content_vlr_thin');
|
||||
assert_less_than(container.offsetWidth, container.scrollWidth, "ltr auto scrollWidth");
|
||||
assert_less_than(container.offsetHeight, container.scrollHeight, "ltr auto scrollHeight");
|
||||
assert_less_than(container.clientWidth, container.offsetWidth, "ltr auto clientWidth");
|
||||
assert_less_than(container.clientHeight, container.offsetHeight, "ltr auto clientHeight");
|
||||
assert_equals(content.offsetLeft, container.offsetLeft, "ltr auto offsetLeft");
|
||||
}, "vertical-lr, scrollbar-width thin");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_vlr_none');
|
||||
let content = document.getElementById('content_vlr_none');
|
||||
assert_less_than(container.offsetWidth, container.scrollWidth, "ltr auto scrollWidth");
|
||||
assert_less_than(container.offsetHeight, container.scrollHeight, "ltr auto scrollHeight");
|
||||
assert_equals(container.clientWidth, container.offsetWidth, "ltr auto clientWidth");
|
||||
assert_equals(container.clientHeight, container.offsetHeight, "ltr auto clientHeight");
|
||||
assert_equals(content.offsetLeft, container.offsetLeft, "ltr auto offsetLeft");
|
||||
}, "vertical-lr, scrollbar-width none");
|
||||
|
||||
// vertical-rl
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_vrl_auto');
|
||||
let content = document.getElementById('content_vrl_auto');
|
||||
assert_less_than(container.offsetWidth, container.scrollWidth, "rtl auto scrollWidth");
|
||||
assert_less_than(container.offsetHeight, container.scrollHeight, "rtl auto scrollHeight");
|
||||
assert_less_than(container.clientWidth, container.offsetWidth, "rtl auto clientWidth");
|
||||
assert_less_than(container.clientHeight, container.offsetHeight, "rtl auto clientHeight");
|
||||
assert_less_than(content.offsetLeft, container.offsetLeft, "rtl auto offsetLeft");
|
||||
}, "vertical-rl, scrollbar-width auto");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_vrl_thin');
|
||||
let content = document.getElementById('content_vrl_thin');
|
||||
assert_less_than(container.offsetWidth, container.scrollWidth, "rtl auto scrollWidth");
|
||||
assert_less_than(container.offsetHeight, container.scrollHeight, "rtl auto scrollHeight");
|
||||
assert_less_than(container.clientWidth, container.offsetWidth, "rtl auto clientWidth");
|
||||
assert_less_than(container.clientHeight, container.offsetHeight, "rtl auto clientHeight");
|
||||
assert_less_than(content.offsetLeft, container.offsetLeft, "rtl auto offsetLeft");
|
||||
}, "vertical-rl, scrollbar-width thin");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_vrl_none');
|
||||
let content = document.getElementById('content_vrl_none');
|
||||
assert_less_than(container.offsetWidth, container.scrollWidth, "rtl auto scrollWidth");
|
||||
assert_less_than(container.offsetHeight, container.scrollHeight, "rtl auto scrollHeight");
|
||||
assert_equals(container.clientWidth, container.offsetWidth, "rtl auto clientWidth");
|
||||
assert_equals(container.clientHeight, container.offsetHeight, "rtl auto clientHeight");
|
||||
assert_less_than(content.offsetLeft, container.offsetLeft, "rtl auto offsetLeft");
|
||||
}, "vertical-rl, scrollbar-width none");
|
||||
|
||||
done();
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<body onload="performTest()">
|
||||
|
||||
Test scrollbar-width: both scrollbars, vertical-lr
|
||||
|
||||
<div class="container vertical-lr auto" id="container_vlr_auto">
|
||||
<div class="content" id="content_vlr_auto">auto</div>
|
||||
</div>
|
||||
|
||||
<div class="container vertical-lr thin" id="container_vlr_thin">
|
||||
<div class="content" id="content_vlr_thin">thin</div>
|
||||
</div>
|
||||
|
||||
<div class="container vertical-lr none" id="container_vlr_none">
|
||||
<div class="content" id="content_vlr_none">none</div>
|
||||
</div>
|
||||
|
||||
Test scrollbar-width: both scrollbars, vertical-rl
|
||||
|
||||
<div class="container vertical-rl auto" id="container_vrl_auto">
|
||||
<div class="content" id="content_vrl_auto">auto</div>
|
||||
</div>
|
||||
|
||||
<div class="container vertical-rl thin" id="container_vrl_thin">
|
||||
<div class="content" id="content_vrl_thin">thin</div>
|
||||
</div>
|
||||
|
||||
<div class="container vertical-rl none" id="container_vrl_none">
|
||||
<div class="content" id="content_vrl_none">none</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Scrollbars: scrollbar-width:auto on the root element</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: auto;
|
||||
/* Use scrollbar-gutter so there is always space reserved
|
||||
for the scrollbar, even when it is of the overlay kind. */
|
||||
scrollbar-gutter: always;
|
||||
}
|
||||
|
||||
: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>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Scrollbars: scrollbar-width:thin on the root element</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;
|
||||
/* Use scrollbar-gutter so there is always space reserved
|
||||
for the scrollbar, even when it is of the overlay kind. */
|
||||
scrollbar-gutter: always;
|
||||
}
|
||||
|
||||
: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>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Scrollbars: scrollbar-width:none on the root element</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: none;
|
||||
/* Use scrollbar-gutter so there is always space reserved
|
||||
for the scrollbar, even when it is of the overlay kind. */
|
||||
scrollbar-gutter: always;
|
||||
}
|
||||
|
||||
: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_equals(root.offsetWidth, window.innerWidth, "viewport does not show a scrollbar");
|
||||
assert_equals(body.offsetWidth, root.offsetWidth, "body matches root");
|
||||
assert_equals(content.offsetWidth, body.offsetWidth, "content matches body");
|
||||
}, "viewport does not display a scrollbar");
|
||||
|
||||
done();
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<!doctype html>
|
||||
<style>
|
||||
body {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.container {
|
||||
scrollbar-gutter: always;
|
||||
flex: 0 0;
|
||||
overflow: auto;
|
||||
height: 200px;
|
||||
min-width: 200px;
|
||||
margin: 1px;
|
||||
padding: 0px;
|
||||
border: none;
|
||||
background: deepskyblue;
|
||||
}
|
||||
|
||||
.content {
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.container.auto {
|
||||
scrollbar-width: auto;
|
||||
}
|
||||
|
||||
.container.thin {
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.container.none {
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.content.plain {
|
||||
background: red;
|
||||
}
|
||||
|
||||
.content.gradient {
|
||||
background: linear-gradient(135deg, red, blue);
|
||||
}
|
||||
</style>
|
||||
<div id="one" class="container thin">
|
||||
<div class="content plain"></div>
|
||||
</div>
|
||||
<div id="two" class="container auto">
|
||||
<div class="content plain"></div>
|
||||
</div>
|
||||
<div id="three" class="container auto">
|
||||
<div class="content plain"></div>
|
||||
</div>
|
||||
<div id="four" class="container none">
|
||||
<div class="content gradient"></div>
|
||||
</div>
|
||||
<div id="five" class="container none">
|
||||
<div class="content gradient"></div>
|
||||
</div>
|
||||
<div id="six" class="container thin">
|
||||
<div class="content gradient"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
<!doctype html>
|
||||
<html class="reftest-wait">
|
||||
<title>CSS Scrollbars: paint test when updating scrollbar-width, with scrolling content</title>
|
||||
<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@gmail.com" />
|
||||
<link rel="match" href="scrollbar-width-paint-001-ref.html" />
|
||||
<link rel="help" href="https://www.w3.org/TR/css-scrollbars-1/" />
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
body {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.container {
|
||||
scrollbar-gutter: always;
|
||||
overflow: auto;
|
||||
flex: 0 0;
|
||||
height: 200px;
|
||||
min-width: 200px;
|
||||
margin: 1px;
|
||||
padding: 0px;
|
||||
border: none;
|
||||
background: deepskyblue;
|
||||
}
|
||||
|
||||
.content {
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.container.auto {
|
||||
scrollbar-width: auto;
|
||||
}
|
||||
|
||||
.container.thin {
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.container.none {
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.content.plain {
|
||||
background: red;
|
||||
}
|
||||
|
||||
.content.gradient {
|
||||
background: linear-gradient(135deg, red, blue);
|
||||
}
|
||||
</style>
|
||||
<div id="one" class="container auto">
|
||||
<div class="content plain"></div>
|
||||
</div>
|
||||
<div id="two" class="container thin">
|
||||
<div class="content plain"></div>
|
||||
</div>
|
||||
<div id="three" class="container none">
|
||||
<div class="content plain"></div>
|
||||
</div>
|
||||
<div id="four" class="container auto">
|
||||
<div class="content gradient"></div>
|
||||
</div>
|
||||
<div id="five" class="container thin">
|
||||
<div class="content gradient"></div>
|
||||
</div>
|
||||
<div id="six" class="container none">
|
||||
<div class="content gradient"></div>
|
||||
</div>
|
||||
<script>
|
||||
requestAnimationFrame(() => requestAnimationFrame(() => {
|
||||
document.getElementById('one').style.scrollbarWidth = 'thin';
|
||||
document.getElementById('two').style.scrollbarWidth = 'auto';
|
||||
document.getElementById('three').style.scrollbarWidth = 'auto';
|
||||
document.getElementById('four').style.scrollbarWidth = 'none';
|
||||
document.getElementById('five').style.scrollbarWidth = 'none';
|
||||
document.getElementById('six').style.scrollbarWidth = 'thin';
|
||||
|
||||
takeScreenshot();
|
||||
}));
|
||||
</script>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<!doctype html>
|
||||
<style>
|
||||
body {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.container {
|
||||
scrollbar-gutter: always;
|
||||
overflow: scroll;
|
||||
flex: 0 0;
|
||||
height: 200px;
|
||||
min-width: 200px;
|
||||
margin: 1px;
|
||||
padding: 0px;
|
||||
border: none;
|
||||
background: deepskyblue;
|
||||
}
|
||||
|
||||
.content {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.container.auto {
|
||||
scrollbar-width: auto;
|
||||
}
|
||||
|
||||
.container.thin {
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.container.none {
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.content.plain {
|
||||
background: red;
|
||||
}
|
||||
|
||||
.content.gradient {
|
||||
background: linear-gradient(135deg, red, blue);
|
||||
}
|
||||
</style>
|
||||
<div id="one" class="container thin">
|
||||
<div class="content plain"></div>
|
||||
</div>
|
||||
<div id="two" class="container auto">
|
||||
<div class="content plain"></div>
|
||||
</div>
|
||||
<div id="three" class="container auto">
|
||||
<div class="content plain"></div>
|
||||
</div>
|
||||
<div id="four" class="container none">
|
||||
<div class="content gradient"></div>
|
||||
</div>
|
||||
<div id="five" class="container none">
|
||||
<div class="content gradient"></div>
|
||||
</div>
|
||||
<div id="six" class="container thin">
|
||||
<div class="content gradient"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
<!doctype html>
|
||||
<html class="reftest-wait">
|
||||
<title>CSS Scrollbars: paint test when updating scrollbar-width, with overflow:auto</title>
|
||||
<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@gmail.com" />
|
||||
<link rel="match" href="scrollbar-width-paint-002-ref.html" />
|
||||
<link rel="help" href="https://www.w3.org/TR/css-scrollbars-1/" />
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
body {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.container {
|
||||
scrollbar-gutter: always;
|
||||
overflow: scroll;
|
||||
flex: 0 0;
|
||||
height: 200px;
|
||||
min-width: 200px;
|
||||
margin: 1px;
|
||||
padding: 0px;
|
||||
border: none;
|
||||
background: deepskyblue;
|
||||
}
|
||||
|
||||
.content {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.container.auto {
|
||||
scrollbar-width: auto;
|
||||
}
|
||||
|
||||
.container.thin {
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.container.none {
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.content.plain {
|
||||
background: red;
|
||||
}
|
||||
|
||||
.content.gradient {
|
||||
background: linear-gradient(135deg, red, blue);
|
||||
}
|
||||
</style>
|
||||
<div id="one" class="container auto">
|
||||
<div class="content plain"></div>
|
||||
</div>
|
||||
<div id="two" class="container thin">
|
||||
<div class="content plain"></div>
|
||||
</div>
|
||||
<div id="three" class="container none">
|
||||
<div class="content plain"></div>
|
||||
</div>
|
||||
<div id="four" class="container auto">
|
||||
<div class="content gradient"></div>
|
||||
</div>
|
||||
<div id="five" class="container thin">
|
||||
<div class="content gradient"></div>
|
||||
</div>
|
||||
<div id="six" class="container none">
|
||||
<div class="content gradient"></div>
|
||||
</div>
|
||||
<script>
|
||||
requestAnimationFrame(() => requestAnimationFrame(() => {
|
||||
document.getElementById('one').style.scrollbarWidth = 'thin';
|
||||
document.getElementById('two').style.scrollbarWidth = 'auto';
|
||||
document.getElementById('three').style.scrollbarWidth = 'auto';
|
||||
document.getElementById('four').style.scrollbarWidth = 'none';
|
||||
document.getElementById('five').style.scrollbarWidth = 'none';
|
||||
document.getElementById('six').style.scrollbarWidth = 'thin';
|
||||
|
||||
takeScreenshot();
|
||||
}));
|
||||
</script>
|
||||
Загрузка…
Ссылка в новой задаче