There are 11 test cases;
1) webkit-scrollbar-in-at-supports.html:
`@supports selector(::-webkit-scrollbar)` is evaluated as true
2) webkit-scrollbar.html:
a normal scroll container and two scroll containers having
`::-webkit-scrollbar { width: XXpx; height: XXpx; }`,
the scrollbars on the normal scroll container are overlay, but
with ui.scrollbarFadeBeginDelay=0, there's no visible scrollbar
3) webkit-scrollbar-zero-width.html:
`::-webkit-scrollbar { width: 0px; }` case
4) webkit-scrollbar-no-width-height.html:
`::-webkit-scrollbar { background-color: #aaa; }`
5) webkit-scrollbar-percent-width-height.html:
`::-webkit-scrollbar { width: XX%; height: XX%; }`,
6) disable-horizontal-scrollbar-dynamically.html:
no ::-webkit-scrollbar styles, it checks with disabling overlay
scrollbars (i.e. ui.useOverlayScrollbars=0) the scrollbar
properly don't appear once after the contents in the scroll container
is no longer overflowed
7) webkit-scrollbar-focus.html:
`:focus::-webkit-scrollbar { width: 8px; height: 8px; }`
8) webkit-scrollbar-dynamic-add.html:
`::-webkit-scrollbar { width: 8px; }` is dynamically added
9) webkit-scrollbar-dynamic-remove.html:
`::-webkit-scrollbar { width: 8px; }` is dynamically removed
10) webkit-scrollbar-display-none-with-scrollbar-width-none.html:
`::webkit-scrollbar { width: 8px; display: none; }` with
`scrollbar-width: none`
11) webkit-scrollbar-display-none.html:
`::webkit-scrollbar { width: 8px; display: none; }`
As of now 11) doesn't work as expected, will be handled in bug 2014011.
Differential Revision: https://phabricator.services.mozilla.com/D280697
24 lines
379 B
HTML
24 lines
379 B
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<style>
|
|
:root {
|
|
--child-width: 0px;
|
|
}
|
|
.scrollable {
|
|
overflow: scroll;
|
|
height: 100px;
|
|
width: 100px;
|
|
border: 2px solid black;
|
|
}
|
|
.scrollable::before {
|
|
display: block;
|
|
content: "content";
|
|
height: 300px;
|
|
width: var(--child-width);
|
|
}
|
|
</style>
|
|
<div class="scrollable"></div>
|
|
<div class="scrollable"></div>
|
|
<div class="scrollable"></div>
|
|
</html>
|