mirror of
https://github.com/servo/servo.git
synced 2025-07-14 19:03:40 +01:00
263 lines
13 KiB
HTML
263 lines
13 KiB
HTML
<!doctype html>
|
|
<meta charset="utf-8">
|
|
<title>CSS Overflow: test scrollbar-gutter: always (classic scrollbars)</title>
|
|
<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@gmail.com"/>
|
|
<link rel="help" href="https://www.w3.org/TR/css-overflow-4/#scollbar-gutter-property"/>
|
|
<meta name="assert" content="Test scrollbar-gutter: always with custom classic scrollbars">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="/css/support/parsing-testcommon.js"></script>
|
|
<style>
|
|
|
|
.container {
|
|
scrollbar-gutter: always;
|
|
height: 200px;
|
|
width: 200px;
|
|
margin: 1px;
|
|
padding: 0px;
|
|
border: none;
|
|
background: deepskyblue;
|
|
}
|
|
|
|
.container.force {
|
|
scrollbar-gutter: always force;
|
|
}
|
|
|
|
.content {
|
|
height: 100%;
|
|
width: 100%;
|
|
background: lightsalmon;
|
|
}
|
|
|
|
/* ensure that we are using classic scrollbars */
|
|
.classic {
|
|
scrollbar-width: 20px;
|
|
scrollbar-color: hsla(0, 0%, 20%, 0.6) hsla(0, 0%, 40%, 0.3);
|
|
}
|
|
.classic::-webkit-scrollbar {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
.classic::-webkit-scrollbar-track {
|
|
background-color: hsla(0, 0%, 40%, 0.4);
|
|
}
|
|
.classic::-webkit-scrollbar-thumb {
|
|
background-color: hsla(0, 0%, 20%, 0.8);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
/* writing modes */
|
|
.horizontal {
|
|
writing-mode: horizontal-tb;
|
|
overflow-x: auto;
|
|
}
|
|
.vertical {
|
|
writing-mode: vertical-rl;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* overflow on the block direction */
|
|
.horizontal.auto { overflow-y: auto; }
|
|
.horizontal.scroll { overflow-y: scroll; }
|
|
.horizontal.visible { overflow: visible; }
|
|
.horizontal.hidden { overflow-y: hidden; }
|
|
.vertical.auto { overflow-x: auto; }
|
|
.vertical.scroll { overflow-x: scroll; }
|
|
.vertical.visible { overflow: visible; }
|
|
.vertical.hidden { overflow-x: hidden; }
|
|
|
|
/* Note: not testing with overflow: clip; */
|
|
|
|
</style>
|
|
<script type="text/javascript">
|
|
|
|
function performTest() {
|
|
setup({explicit_done: true});
|
|
|
|
// horizontal
|
|
|
|
test(function() {
|
|
let container = document.getElementById('container_auto_h');
|
|
let content = document.getElementById('content_auto_h');
|
|
assert_equals(container.scrollWidth, 180, "auto/always scrollWidth");
|
|
assert_equals(container.clientWidth, 180, "auto/always clientWidth");
|
|
assert_equals(container.offsetLeft, content.offsetLeft, "auto/always offsetLeft");
|
|
assert_equals(container.clientWidth, content.clientWidth, "auto/always clientWidth");
|
|
assert_not_equals(container.offsetWidth, content.offsetWidth, "auto/always offsetWidth");
|
|
}, "Unexpected layout: overflow auto, scrollbar-gutter always, horizontal-tb");
|
|
|
|
test(function() {
|
|
let container = document.getElementById('container_scroll_h');
|
|
let content = document.getElementById('content_scroll_h');
|
|
assert_equals(container.scrollWidth, 180, "scroll/always scrollWidth");
|
|
assert_equals(container.clientWidth, 180, "scroll/always clientWidth");
|
|
assert_equals(container.offsetLeft, content.offsetLeft, "scroll/always offsetLeft");
|
|
assert_equals(container.clientWidth, content.clientWidth, "scroll/always clientWidth");
|
|
assert_not_equals(container.offsetWidth, content.offsetWidth, "scroll/always offsetWidth");
|
|
}, "Unexpected layout: overflow scroll, scrollbar-gutter always, horizontal-tb");
|
|
|
|
test(function() {
|
|
let container = document.getElementById('container_visible_h');
|
|
let content = document.getElementById('content_visible_h');
|
|
assert_equals(container.scrollWidth, 200, "visible/always scrollWidth");
|
|
assert_equals(container.clientWidth, 200, "visible/always clientWidth");
|
|
assert_equals(container.offsetLeft, content.offsetLeft, "visible/always offsetLeft");
|
|
assert_equals(container.clientWidth, content.clientWidth, "visible/always clientWidth");
|
|
assert_equals(container.offsetWidth, content.offsetWidth, "visible/always offsetWidth");
|
|
}, "Unexpected layout: overflow visible, scrollbar-gutter always, horizontal-tb");
|
|
|
|
test(function() {
|
|
let container = document.getElementById('container_hidden_h');
|
|
let content = document.getElementById('content_hidden_h');
|
|
assert_equals(container.scrollWidth, 200, "hidden/always scrollWidth");
|
|
assert_equals(container.clientWidth, 200, "hidden/always clientWidth");
|
|
assert_equals(container.offsetLeft, content.offsetLeft, "hidden/always offsetLeft");
|
|
assert_equals(container.clientWidth, content.clientWidth, "hidden/always clientWidth");
|
|
assert_equals(container.offsetWidth, content.offsetWidth, "hidden/always offsetWidth");
|
|
}, "Unexpected layout: overflow hidden, scrollbar-gutter always, horizontal-tb");
|
|
|
|
test(function() {
|
|
let container = document.getElementById('container_visible_force_h');
|
|
let content = document.getElementById('content_visible_force_h');
|
|
assert_equals(container.scrollWidth, 180, "visible/always force scrollWidth");
|
|
assert_equals(container.clientWidth, 180, "visible/always force clientWidth");
|
|
assert_equals(container.offsetLeft, content.offsetLeft, "visible/always force offsetLeft");
|
|
assert_equals(container.clientWidth, content.clientWidth, "visible/always force clientWidth");
|
|
assert_not_equals(container.offsetWidth, content.offsetWidth, "visible/always force offsetWidth");
|
|
}, "Unexpected layout: overflow visible, scrollbar-gutter always force, horizontal-tb");
|
|
|
|
test(function() {
|
|
let container = document.getElementById('container_hidden_force_h');
|
|
let content = document.getElementById('content_hidden_force_h');
|
|
assert_equals(container.scrollWidth, 180, "hidden/always force scrollWidth");
|
|
assert_equals(container.clientWidth, 180, "hidden/always force clientWidth");
|
|
assert_equals(container.offsetLeft, content.offsetLeft, "hidden/always force offsetLeft");
|
|
assert_equals(container.clientWidth, content.clientWidth, "hidden/always force clientWidth");
|
|
assert_not_equals(container.offsetWidth, content.offsetWidth, "hidden/always force offsetWidth");
|
|
}, "Unexpected layout: overflow hidden, scrollbar-gutter always force, horizontal-tb");
|
|
|
|
// vertical
|
|
|
|
test(function() {
|
|
let container = document.getElementById('container_auto_v');
|
|
let content = document.getElementById('content_auto_v');
|
|
assert_equals(container.scrollHeight, 180, "auto/always scrollHeight");
|
|
assert_equals(container.clientHeight, 180, "auto/always clientHeight");
|
|
assert_equals(container.offsetTop, content.offsetTop, "auto/always offsetTop");
|
|
assert_equals(container.clientHeight, content.clientHeight, "auto/always clientHeight");
|
|
assert_not_equals(container.offsetHeight, content.offsetHeight, "auto/always offsetHeight");
|
|
}, "Unexpected layout: overflow auto, scrollbar-gutter always, vertical-rl");
|
|
|
|
test(function() {
|
|
let container = document.getElementById('container_scroll_v');
|
|
let content = document.getElementById('content_scroll_v');
|
|
assert_equals(container.scrollHeight, 180, "scroll/always scrollHeight");
|
|
assert_equals(container.clientHeight, 180, "scroll/always clientHeight");
|
|
assert_equals(container.offsetTop, content.offsetTop, "scroll/always offsetTop");
|
|
assert_equals(container.clientHeight, content.clientHeight, "scroll/always clientHeight");
|
|
assert_not_equals(container.offsetHeight, content.offsetHeight, "scroll/always offsetHeight");
|
|
}, "Unexpected layout: overflow scroll, scrollbar-gutter always, vertical-rl");
|
|
|
|
test(function() {
|
|
let container = document.getElementById('container_visible_v');
|
|
let content = document.getElementById('content_visible_v');
|
|
assert_equals(container.scrollHeight, 200, "visible/always scrollHeight");
|
|
assert_equals(container.clientHeight, 200, "visible/always clientHeight");
|
|
assert_equals(container.offsetTop, content.offsetTop, "visible/always offsetTop");
|
|
assert_equals(container.clientHeight, content.clientHeight, "visible/always clientHeight");
|
|
assert_equals(container.offsetHeight, content.offsetHeight, "visible/always offsetHeight");
|
|
}, "Unexpected layout: overflow visible, scrollbar-gutter always, vertical-rl");
|
|
|
|
test(function() {
|
|
let container = document.getElementById('container_hidden_v');
|
|
let content = document.getElementById('content_hidden_v');
|
|
assert_equals(container.scrollHeight, 200, "hidden/always scrollHeight");
|
|
assert_equals(container.clientHeight, 200, "hidden/always clientHeight");
|
|
assert_equals(container.offsetTop, content.offsetTop, "hidden/always offsetTop");
|
|
assert_equals(container.clientHeight, content.clientHeight, "hidden/always clientHeight");
|
|
assert_equals(container.offsetHeight, content.offsetHeight, "hidden/always offsetHeight");
|
|
}, "Unexpected layout: overflow hidden, scrollbar-gutter always, vertical-rl");
|
|
|
|
test(function() {
|
|
let container = document.getElementById('container_visible_force_v');
|
|
let content = document.getElementById('content_visible_force_v');
|
|
assert_equals(container.scrollHeight, 180, "visible/always force scrollHeight");
|
|
assert_equals(container.clientHeight, 180, "visible/always force clientHeight");
|
|
assert_equals(container.offsetTop, content.offsetTop, "visible/always force offsetTop");
|
|
assert_equals(container.clientHeight, content.clientHeight, "visible/always force clientHeight");
|
|
assert_not_equals(container.offsetHeight, content.offsetHeight, "visible/always force offsetHeight");
|
|
}, "Unexpected layout: overflow visible, scrollbar-gutter always force, vertical-rl");
|
|
|
|
test(function() {
|
|
let container = document.getElementById('container_hidden_force_v');
|
|
let content = document.getElementById('content_hidden_force_v');
|
|
assert_equals(container.scrollHeight, 180, "hidden/always force scrollHeight");
|
|
assert_equals(container.clientHeight, 180, "hidden/always force clientHeight");
|
|
assert_equals(container.offsetTop, content.offsetTop, "hidden/always force offsetTop");
|
|
assert_equals(container.clientHeight, content.clientHeight, "hidden/always force clientHeight");
|
|
assert_not_equals(container.offsetHeight, content.offsetHeight, "hidden/always force offsetHeight");
|
|
}, "Unexpected layout: overflow hidden, scrollbar-gutter always force, vertical-rl");
|
|
|
|
done();
|
|
}
|
|
|
|
</script>
|
|
<body onload="performTest()">
|
|
|
|
Test scrollbar-gutter: always, writing-mode: horizontal-tb
|
|
|
|
<div class="container classic horizontal auto" id="container_auto_h">
|
|
<div class="content" id="content_auto_h">overflow-y: auto</div>
|
|
</div>
|
|
|
|
<div class="container classic horizontal scroll" id="container_scroll_h">
|
|
<div class="content" id="content_scroll_h">overflow-y: scroll</div>
|
|
</div>
|
|
|
|
<div class="container classic horizontal visible" id="container_visible_h">
|
|
<div class="content" id="content_visible_h">overflow: visible</div>
|
|
</div>
|
|
|
|
<div class="container classic horizontal hidden" id="container_hidden_h">
|
|
<div class="content" id="content_hidden_h">overflow-y: hidden</div>
|
|
</div>
|
|
|
|
scrollbar-gutter: always force
|
|
|
|
<div class="container classic horizontal visible force" id="container_visible_force_h">
|
|
<div class="content" id="content_visible_force_h">overflow: visible (force)</div>
|
|
</div>
|
|
|
|
<div class="container classic horizontal hidden force" id="container_hidden_force_h">
|
|
<div class="content" id="content_hidden_force_h">overflow-y: hidden (force)</div>
|
|
</div>
|
|
|
|
writing-mode: vertical-rl;
|
|
|
|
<div class="container classic vertical auto" id="container_auto_v">
|
|
<div class="content" id="content_auto_v">overflow-x: auto</div>
|
|
</div>
|
|
|
|
<div class="container classic vertical scroll" id="container_scroll_v">
|
|
<div class="content" id="content_scroll_v">overflow-x: scroll</div>
|
|
</div>
|
|
|
|
<div class="container classic vertical visible" id="container_visible_v">
|
|
<div class="content" id="content_visible_v">overflow: visible</div>
|
|
</div>
|
|
|
|
<div class="container classic vertical hidden" id="container_hidden_v">
|
|
<div class="content" id="content_hidden_v">overflow-x: hidden</div>
|
|
</div>
|
|
|
|
scrollbar-gutter: always force
|
|
|
|
<div class="container classic vertical visible force" id="container_visible_force_v">
|
|
<div class="content" id="content_visible_force_v">overflow: visible</div>
|
|
</div>
|
|
|
|
<div class="container classic vertical hidden force" id="container_hidden_force_v">
|
|
<div class="content" id="content_hidden_force_v">overflow-x: hidden</div>
|
|
</div>
|
|
|
|
</body>
|