More tests for scrollbar-gutter
Break up the scrollbar-gutter tests into separate files
for horizontal and vertical writing modes, and add
additional tests.
Move the tests to wpt_internal/css/css-overflow since
they require the non-standard feature ::-webkit-scrollbar
Bug: 710214
Change-Id: I988f2acd8cd17a6623765aedfb8938e71942a683
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2417471
Commit-Queue: Felipe Erias Morandeira <felipeerias@gmail.com>
Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org>
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Cr-Commit-Position: refs/heads/master@{#810451}
diff --git a/css/css-overflow/scrollbar-gutter-001.html b/css/css-overflow/scrollbar-gutter-001.html
deleted file mode 100644
index c6cdb55..0000000
--- a/css/css-overflow/scrollbar-gutter-001.html
+++ /dev/null
@@ -1,197 +0,0 @@
-<!doctype html>
-<meta charset="utf-8">
-<title>CSS Overflow: test scrollbar-gutter: auto (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: auto 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: auto;
- height: 200px;
- width: 200px;
- margin: 1px;
- padding: 0px;
- border: none;
- background: deepskyblue;
- }
-
- .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});
-
- test(function() {
- let container = document.getElementById('container_auto_h');
- let content = document.getElementById('content_auto_h');
- assert_equals(container.scrollWidth, 200, "auto/auto scrollWidth");
- assert_equals(container.clientWidth, 200, "auto/auto clientWidth");
- assert_equals(container.offsetLeft, content.offsetLeft, "auto/auto offsetLeft");
- assert_equals(container.clientWidth, content.clientWidth, "auto/auto clientWidth");
- assert_equals(container.offsetWidth, content.offsetWidth, "auto/auto offsetWidth");
- }, "Unexpected layout: overflow auto, scrollbar-gutter auto, horizontal-tb");
-
- test(function() {
- let container = document.getElementById('container_scroll_h');
- let content = document.getElementById('content_scroll_h');
- assert_equals(container.scrollWidth, 180, "scroll/auto scrollWidth");
- assert_equals(container.clientWidth, 180, "scroll/auto clientWidth");
- assert_equals(container.offsetLeft, content.offsetLeft, "scroll/auto offsetLeft");
- assert_equals(container.clientWidth, content.clientWidth, "scroll/auto clientWidth");
- assert_not_equals(container.offsetWidth, content.offsetWidth, "scroll/auto offsetWidth");
- }, "Unexpected layout: overflow scroll, scrollbar-gutter auto, horizontal-tb");
-
- test(function() {
- let container = document.getElementById('container_visible_h');
- let content = document.getElementById('content_visible_h');
- assert_equals(container.scrollWidth, 200, "visible/auto scrollWidth");
- assert_equals(container.clientWidth, 200, "visible/auto clientWidth");
- assert_equals(container.offsetLeft, content.offsetLeft, "visible/auto offsetLeft");
- assert_equals(container.clientWidth, content.clientWidth, "visible/auto clientWidth");
- assert_equals(container.offsetWidth, content.offsetWidth, "visible/auto offsetWidth");
- }, "Unexpected layout: overflow visible, scrollbar-gutter auto, horizontal-tb");
-
- test(function() {
- let container = document.getElementById('container_hidden_h');
- let content = document.getElementById('content_hidden_h');
- assert_equals(container.scrollWidth, 200, "hidden/auto scrollWidth");
- assert_equals(container.clientWidth, 200, "hidden/auto clientWidth");
- assert_equals(container.offsetLeft, content.offsetLeft, "hidden/auto offsetLeft");
- assert_equals(container.clientWidth, content.clientWidth, "hidden/auto clientWidth");
- assert_equals(container.offsetWidth, content.offsetWidth, "hidden/auto offsetWidth");
- }, "Unexpected layout: overflow hidden, scrollbar-gutter auto, horizontal-tb");
-
- // vertical
-
- test(function() {
- let container = document.getElementById('container_auto_v');
- let content = document.getElementById('content_auto_v');
- assert_equals(container.scrollHeight, 200, "auto/auto scrollHeight");
- assert_equals(container.clientHeight, 200, "auto/auto clientHeight");
- assert_equals(container.offsetTop, content.offsetTop, "auto/auto offsetTop");
- assert_equals(container.clientHeight, content.clientHeight, "auto/auto clientHeight");
- assert_equals(container.offsetHeight, content.offsetHeight, "auto/auto offsetHeight");
- }, "Unexpected layout: overflow auto, scrollbar-gutter auto, vertical-rl");
-
- test(function() {
- let container = document.getElementById('container_scroll_v');
- let content = document.getElementById('content_scroll_v');
- assert_equals(container.scrollHeight, 180, "scroll/auto scrollHeight");
- assert_equals(container.clientHeight, 180, "scroll/auto clientHeight");
- assert_equals(container.offsetTop, content.offsetTop, "scroll/auto offsetTop");
- assert_equals(container.clientHeight, content.clientHeight, "scroll/auto clientHeight");
- assert_not_equals(container.offsetHeight, content.offsetHeight, "scroll/auto offsetHeight");
- }, "Unexpected layout: overflow scroll, scrollbar-gutter auto, vertical-rl");
-
- test(function() {
- let container = document.getElementById('container_visible_v');
- let content = document.getElementById('content_visible_v');
- assert_equals(container.scrollHeight, 200, "visible/auto scrollHeight");
- assert_equals(container.clientHeight, 200, "visible/auto clientHeight");
- assert_equals(container.offsetTop, content.offsetTop, "visible/auto offsetTop");
- assert_equals(container.clientHeight, content.clientHeight, "visible/auto clientHeight");
- assert_equals(container.offsetHeight, content.offsetHeight, "visible/auto offsetHeight");
- }, "Unexpected layout: overflow visible, scrollbar-gutter auto, vertical-rl");
-
- test(function() {
- let container = document.getElementById('container_hidden_v');
- let content = document.getElementById('content_hidden_v');
- assert_equals(container.scrollHeight, 200, "hidden/auto scrollHeight");
- assert_equals(container.clientHeight, 200, "hidden/auto clientHeight");
- assert_equals(container.offsetTop, content.offsetTop, "hidden/auto offsetTop");
- assert_equals(container.clientHeight, content.clientHeight, "hidden/auto clientHeight");
- assert_equals(container.offsetHeight, content.offsetHeight, "hidden/auto offsetHeight");
- }, "Unexpected layout: overflow hidden, scrollbar-gutter auto, vertical-rl");
-
- done();
- }
-
-</script>
-<body onload="performTest()">
-
- Test scrollbar-gutter: auto, 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>
-
- 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>
-
-</body>
diff --git a/css/css-overflow/scrollbar-gutter-002.html b/css/css-overflow/scrollbar-gutter-002.html
deleted file mode 100644
index 8756ab7..0000000
--- a/css/css-overflow/scrollbar-gutter-002.html
+++ /dev/null
@@ -1,263 +0,0 @@
-<!doctype html>
-<meta charset="utf-8">
-<title>CSS Overflow: test scrollbar-gutter: stable (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: stable 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: stable;
- height: 200px;
- width: 200px;
- margin: 1px;
- padding: 0px;
- border: none;
- background: deepskyblue;
- }
-
- .container.force {
- scrollbar-gutter: stable 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/stable scrollWidth");
- assert_equals(container.clientWidth, 180, "auto/stable clientWidth");
- assert_equals(container.offsetLeft, content.offsetLeft, "auto/stable offsetLeft");
- assert_equals(container.clientWidth, content.clientWidth, "auto/stable clientWidth");
- assert_not_equals(container.offsetWidth, content.offsetWidth, "auto/stable offsetWidth");
- }, "Unexpected layout: overflow auto, scrollbar-gutter stable, horizontal-tb");
-
- test(function() {
- let container = document.getElementById('container_scroll_h');
- let content = document.getElementById('content_scroll_h');
- assert_equals(container.scrollWidth, 180, "scroll/stable scrollWidth");
- assert_equals(container.clientWidth, 180, "scroll/stable clientWidth");
- assert_equals(container.offsetLeft, content.offsetLeft, "scroll/stable offsetLeft");
- assert_equals(container.clientWidth, content.clientWidth, "scroll/stable clientWidth");
- assert_not_equals(container.offsetWidth, content.offsetWidth, "scroll/stable offsetWidth");
- }, "Unexpected layout: overflow scroll, scrollbar-gutter stable, horizontal-tb");
-
- test(function() {
- let container = document.getElementById('container_visible_h');
- let content = document.getElementById('content_visible_h');
- assert_equals(container.scrollWidth, 200, "visible/stable scrollWidth");
- assert_equals(container.clientWidth, 200, "visible/stable clientWidth");
- assert_equals(container.offsetLeft, content.offsetLeft, "visible/stable offsetLeft");
- assert_equals(container.clientWidth, content.clientWidth, "visible/stable clientWidth");
- assert_equals(container.offsetWidth, content.offsetWidth, "visible/stable offsetWidth");
- }, "Unexpected layout: overflow visible, scrollbar-gutter stable, horizontal-tb");
-
- test(function() {
- let container = document.getElementById('container_hidden_h');
- let content = document.getElementById('content_hidden_h');
- assert_equals(container.scrollWidth, 200, "hidden/stable scrollWidth");
- assert_equals(container.clientWidth, 200, "hidden/stable clientWidth");
- assert_equals(container.offsetLeft, content.offsetLeft, "hidden/stable offsetLeft");
- assert_equals(container.clientWidth, content.clientWidth, "hidden/stable clientWidth");
- assert_equals(container.offsetWidth, content.offsetWidth, "hidden/stable offsetWidth");
- }, "Unexpected layout: overflow hidden, scrollbar-gutter stable, 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/stable force scrollWidth");
- assert_equals(container.clientWidth, 180, "visible/stable force clientWidth");
- assert_equals(container.offsetLeft, content.offsetLeft, "visible/stable force offsetLeft");
- assert_equals(container.clientWidth, content.clientWidth, "visible/stable force clientWidth");
- assert_not_equals(container.offsetWidth, content.offsetWidth, "visible/stable force offsetWidth");
- }, "Unexpected layout: overflow visible, scrollbar-gutter stable 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/stable force scrollWidth");
- assert_equals(container.clientWidth, 180, "hidden/stable force clientWidth");
- assert_equals(container.offsetLeft, content.offsetLeft, "hidden/stable force offsetLeft");
- assert_equals(container.clientWidth, content.clientWidth, "hidden/stable force clientWidth");
- assert_not_equals(container.offsetWidth, content.offsetWidth, "hidden/stable force offsetWidth");
- }, "Unexpected layout: overflow hidden, scrollbar-gutter stable 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/stable scrollHeight");
- assert_equals(container.clientHeight, 180, "auto/stable clientHeight");
- assert_equals(container.offsetTop, content.offsetTop, "auto/stable offsetTop");
- assert_equals(container.clientHeight, content.clientHeight, "auto/stable clientHeight");
- assert_not_equals(container.offsetHeight, content.offsetHeight, "auto/stable offsetHeight");
- }, "Unexpected layout: overflow auto, scrollbar-gutter stable, vertical-rl");
-
- test(function() {
- let container = document.getElementById('container_scroll_v');
- let content = document.getElementById('content_scroll_v');
- assert_equals(container.scrollHeight, 180, "scroll/stable scrollHeight");
- assert_equals(container.clientHeight, 180, "scroll/stable clientHeight");
- assert_equals(container.offsetTop, content.offsetTop, "scroll/stable offsetTop");
- assert_equals(container.clientHeight, content.clientHeight, "scroll/stable clientHeight");
- assert_not_equals(container.offsetHeight, content.offsetHeight, "scroll/stable offsetHeight");
- }, "Unexpected layout: overflow scroll, scrollbar-gutter stable, vertical-rl");
-
- test(function() {
- let container = document.getElementById('container_visible_v');
- let content = document.getElementById('content_visible_v');
- assert_equals(container.scrollHeight, 200, "visible/stable scrollHeight");
- assert_equals(container.clientHeight, 200, "visible/stable clientHeight");
- assert_equals(container.offsetTop, content.offsetTop, "visible/stable offsetTop");
- assert_equals(container.clientHeight, content.clientHeight, "visible/stable clientHeight");
- assert_equals(container.offsetHeight, content.offsetHeight, "visible/stable offsetHeight");
- }, "Unexpected layout: overflow visible, scrollbar-gutter stable, vertical-rl");
-
- test(function() {
- let container = document.getElementById('container_hidden_v');
- let content = document.getElementById('content_hidden_v');
- assert_equals(container.scrollHeight, 200, "hidden/stable scrollHeight");
- assert_equals(container.clientHeight, 200, "hidden/stable clientHeight");
- assert_equals(container.offsetTop, content.offsetTop, "hidden/stable offsetTop");
- assert_equals(container.clientHeight, content.clientHeight, "hidden/stable clientHeight");
- assert_equals(container.offsetHeight, content.offsetHeight, "hidden/stable offsetHeight");
- }, "Unexpected layout: overflow hidden, scrollbar-gutter stable, 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/stable force scrollHeight");
- assert_equals(container.clientHeight, 180, "visible/stable force clientHeight");
- assert_equals(container.offsetTop, content.offsetTop, "visible/stable force offsetTop");
- assert_equals(container.clientHeight, content.clientHeight, "visible/stable force clientHeight");
- assert_not_equals(container.offsetHeight, content.offsetHeight, "visible/stable force offsetHeight");
- }, "Unexpected layout: overflow visible, scrollbar-gutter stable 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/stable force scrollHeight");
- assert_equals(container.clientHeight, 180, "hidden/stable force clientHeight");
- assert_equals(container.offsetTop, content.offsetTop, "hidden/stable force offsetTop");
- assert_equals(container.clientHeight, content.clientHeight, "hidden/stable force clientHeight");
- assert_not_equals(container.offsetHeight, content.offsetHeight, "hidden/stable force offsetHeight");
- }, "Unexpected layout: overflow hidden, scrollbar-gutter stable force, vertical-rl");
-
- done();
- }
-
-</script>
-<body onload="performTest()">
-
- Test scrollbar-gutter: stable, 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: stable 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: stable 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>
diff --git a/css/css-overflow/scrollbar-gutter-003.html b/css/css-overflow/scrollbar-gutter-003.html
deleted file mode 100644
index 1002b46..0000000
--- a/css/css-overflow/scrollbar-gutter-003.html
+++ /dev/null
@@ -1,263 +0,0 @@
-<!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>
diff --git a/css/css-overflow/scrollbar-gutter-004.html b/css/css-overflow/scrollbar-gutter-004.html
deleted file mode 100644
index b41e349..0000000
--- a/css/css-overflow/scrollbar-gutter-004.html
+++ /dev/null
@@ -1,263 +0,0 @@
-<!doctype html>
-<meta charset="utf-8">
-<title>CSS Overflow: test scrollbar-gutter: stable both (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: stable 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: stable both;
- height: 200px;
- width: 200px;
- margin: 1px;
- padding: 0px;
- border: none;
- background: deepskyblue;
- }
-
- .container.force {
- scrollbar-gutter: stable both 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, 160, "auto/stable both scrollWidth");
- assert_equals(container.clientWidth, 160, "auto/stable both clientWidth");
- assert_equals(container.offsetLeft, content.offsetLeft - 20, "auto/stable both offsetLeft");
- assert_equals(container.clientWidth, content.clientWidth, "auto/stable both clientWidth");
- assert_not_equals(container.offsetWidth, content.offsetWidth, "auto/stable both offsetWidth");
- }, "Unexpected layout: overflow auto, scrollbar-gutter stable both, horizontal-tb");
-
- test(function() {
- let container = document.getElementById('container_scroll_h');
- let content = document.getElementById('content_scroll_h');
- assert_equals(container.scrollWidth, 160, "scroll/stable both scrollWidth");
- assert_equals(container.clientWidth, 160, "scroll/stable both clientWidth");
- assert_equals(container.offsetLeft, content.offsetLeft - 20, "scroll/stable both offsetLeft");
- assert_equals(container.clientWidth, content.clientWidth, "scroll/stable both clientWidth");
- assert_not_equals(container.offsetWidth, content.offsetWidth, "scroll/stable both offsetWidth");
- }, "Unexpected layout: overflow scroll, scrollbar-gutter stable both, horizontal-tb");
-
- test(function() {
- let container = document.getElementById('container_visible_h');
- let content = document.getElementById('content_visible_h');
- assert_equals(container.scrollWidth, 200, "visible/stable both scrollWidth");
- assert_equals(container.clientWidth, 200, "visible/stable both clientWidth");
- assert_equals(container.offsetLeft, content.offsetLeft, "visible/stable both offsetLeft");
- assert_equals(container.clientWidth, content.clientWidth, "visible/stable both clientWidth");
- assert_equals(container.offsetWidth, content.offsetWidth, "visible/stable both offsetWidth");
- }, "Unexpected layout: overflow visible, scrollbar-gutter stable both, horizontal-tb");
-
- test(function() {
- let container = document.getElementById('container_hidden_h');
- let content = document.getElementById('content_hidden_h');
- assert_equals(container.scrollWidth, 200, "hidden/stable both scrollWidth");
- assert_equals(container.clientWidth, 200, "hidden/stable both clientWidth");
- assert_equals(container.offsetLeft, content.offsetLeft, "hidden/stable both offsetLeft");
- assert_equals(container.clientWidth, content.clientWidth, "hidden/stable both clientWidth");
- assert_equals(container.offsetWidth, content.offsetWidth, "hidden/stable both offsetWidth");
- }, "Unexpected layout: overflow hidden, scrollbar-gutter stable both, horizontal-tb");
-
- test(function() {
- let container = document.getElementById('container_visible_force_h');
- let content = document.getElementById('content_visible_force_h');
- assert_equals(container.scrollWidth, 160, "visible/stable both force scrollWidth");
- assert_equals(container.clientWidth, 160, "visible/stable both force clientWidth");
- assert_equals(container.offsetLeft, content.offsetLeft - 20, "visible/stable both force offsetLeft");
- assert_equals(container.clientWidth, content.clientWidth, "visible/stable both force clientWidth");
- assert_not_equals(container.offsetWidth, content.offsetWidth, "visible/stable both force offsetWidth");
- }, "Unexpected layout: overflow visible, scrollbar-gutter stable both 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, 160, "hidden/stable both force scrollWidth");
- assert_equals(container.clientWidth, 160, "hidden/stable both force clientWidth");
- assert_equals(container.offsetLeft, content.offsetLeft - 20, "hidden/stable both force offsetLeft");
- assert_equals(container.clientWidth, content.clientWidth, "hidden/stable both force clientWidth");
- assert_not_equals(container.offsetWidth, content.offsetWidth, "hidden/stable both force offsetWidth");
- }, "Unexpected layout: overflow hidden, scrollbar-gutter stable both force, horizontal-tb");
-
- // vertical
-
- test(function() {
- let container = document.getElementById('container_auto_v');
- let content = document.getElementById('content_auto_v');
- assert_equals(container.scrollHeight, 160, "auto/stable both scrollHeight");
- assert_equals(container.clientHeight, 160, "auto/stable both clientHeight");
- assert_equals(container.offsetTop, content.offsetTop - 20, "auto/stable both offsetTop");
- assert_equals(container.clientHeight, content.clientHeight, "auto/stable both clientHeight");
- assert_not_equals(container.offsetHeight, content.offsetHeight, "auto/stable both offsetHeight");
- }, "Unexpected layout: overflow auto, scrollbar-gutter stable both, vertical-rl");
-
- test(function() {
- let container = document.getElementById('container_scroll_v');
- let content = document.getElementById('content_scroll_v');
- assert_equals(container.scrollHeight, 160, "scroll/stable both scrollHeight");
- assert_equals(container.clientHeight, 160, "scroll/stable both clientHeight");
- assert_equals(container.offsetTop, content.offsetTop - 20, "scroll/stable both offsetTop");
- assert_equals(container.clientHeight, content.clientHeight, "scroll/stable both clientHeight");
- assert_not_equals(container.offsetHeight, content.offsetHeight, "scroll/stable both offsetHeight");
- }, "Unexpected layout: overflow scroll, scrollbar-gutter stable both, vertical-rl");
-
- test(function() {
- let container = document.getElementById('container_visible_v');
- let content = document.getElementById('content_visible_v');
- assert_equals(container.scrollHeight, 200, "visible/stable both scrollHeight");
- assert_equals(container.clientHeight, 200, "visible/stable both clientHeight");
- assert_equals(container.offsetTop, content.offsetTop, "visible/stable both offsetTop");
- assert_equals(container.clientHeight, content.clientHeight, "visible/stable both clientHeight");
- assert_equals(container.offsetHeight, content.offsetHeight, "visible/stable both offsetHeight");
- }, "Unexpected layout: overflow visible, scrollbar-gutter stable both, vertical-rl");
-
- test(function() {
- let container = document.getElementById('container_hidden_v');
- let content = document.getElementById('content_hidden_v');
- assert_equals(container.scrollHeight, 200, "hidden/stable both scrollHeight");
- assert_equals(container.clientHeight, 200, "hidden/stable both clientHeight");
- assert_equals(container.offsetTop, content.offsetTop, "hidden/stable both offsetTop");
- assert_equals(container.clientHeight, content.clientHeight, "hidden/stable both clientHeight");
- assert_equals(container.offsetHeight, content.offsetHeight, "hidden/stable both offsetHeight");
- }, "Unexpected layout: overflow hidden, scrollbar-gutter stable both, vertical-rl");
-
- test(function() {
- let container = document.getElementById('container_visible_force_v');
- let content = document.getElementById('content_visible_force_v');
- assert_equals(container.scrollHeight, 160, "visible/stable both scrollHeight");
- assert_equals(container.clientHeight, 160, "visible/stable both clientHeight");
- assert_equals(container.offsetTop, content.offsetTop - 20, "visible/stable both offsetTop");
- assert_equals(container.clientHeight, content.clientHeight, "visible/stable both clientHeight");
- assert_not_equals(container.offsetHeight, content.offsetHeight, "visible/stable both offsetHeight");
- }, "Unexpected layout: overflow visible, scrollbar-gutter stable both 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, 160, "hidden/stable both scrollHeight");
- assert_equals(container.clientHeight, 160, "hidden/stable both clientHeight");
- assert_equals(container.offsetTop, content.offsetTop - 20, "hidden/stable both offsetTop");
- assert_equals(container.clientHeight, content.clientHeight, "hidden/stable both clientHeight");
- assert_not_equals(container.offsetHeight, content.offsetHeight, "hidden/stable both offsetHeight");
- }, "Unexpected layout: overflow hidden, scrollbar-gutter stable both force, vertical-rl");
-
- done();
- }
-
-</script>
-<body onload="performTest()">
-
- Test scrollbar-gutter: stable both, 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: stable both 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: stable both 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>
diff --git a/css/css-overflow/scrollbar-gutter-005.html b/css/css-overflow/scrollbar-gutter-005.html
deleted file mode 100644
index dca4657..0000000
--- a/css/css-overflow/scrollbar-gutter-005.html
+++ /dev/null
@@ -1,263 +0,0 @@
-<!doctype html>
-<meta charset="utf-8">
-<title>CSS Overflow: test scrollbar-gutter: always both (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 both;
- height: 200px;
- width: 200px;
- margin: 1px;
- padding: 0px;
- border: none;
- background: deepskyblue;
- }
-
- .container.force {
- scrollbar-gutter: always both 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, 160, "auto/always both scrollWidth");
- assert_equals(container.clientWidth, 160, "auto/always both clientWidth");
- assert_equals(container.offsetLeft, content.offsetLeft - 20, "auto/always both offsetLeft");
- assert_equals(container.clientWidth, content.clientWidth, "auto/always both clientWidth");
- assert_not_equals(container.offsetWidth, content.offsetWidth, "auto/always both offsetWidth");
- }, "Unexpected layout: overflow auto, scrollbar-gutter always both, horizontal-tb");
-
- test(function() {
- let container = document.getElementById('container_scroll_h');
- let content = document.getElementById('content_scroll_h');
- assert_equals(container.scrollWidth, 160, "scroll/always both scrollWidth");
- assert_equals(container.clientWidth, 160, "scroll/always both clientWidth");
- assert_equals(container.offsetLeft, content.offsetLeft - 20, "scroll/always both offsetLeft");
- assert_equals(container.clientWidth, content.clientWidth, "scroll/always both clientWidth");
- assert_not_equals(container.offsetWidth, content.offsetWidth, "scroll/always both offsetWidth");
- }, "Unexpected layout: overflow scroll, scrollbar-gutter always both, 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 both scrollWidth");
- assert_equals(container.clientWidth, 200, "visible/always both clientWidth");
- assert_equals(container.offsetLeft, content.offsetLeft, "visible/always both offsetLeft");
- assert_equals(container.clientWidth, content.clientWidth, "visible/always both clientWidth");
- assert_equals(container.offsetWidth, content.offsetWidth, "visible/always both offsetWidth");
- }, "Unexpected layout: overflow visible, scrollbar-gutter always both, 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 both scrollWidth");
- assert_equals(container.clientWidth, 200, "hidden/always both clientWidth");
- assert_equals(container.offsetLeft, content.offsetLeft, "hidden/always both offsetLeft");
- assert_equals(container.clientWidth, content.clientWidth, "hidden/always both clientWidth");
- assert_equals(container.offsetWidth, content.offsetWidth, "hidden/always both offsetWidth");
- }, "Unexpected layout: overflow hidden, scrollbar-gutter always both, horizontal-tb");
-
- test(function() {
- let container = document.getElementById('container_visible_force_h');
- let content = document.getElementById('content_visible_force_h');
- assert_equals(container.scrollWidth, 160, "visible/always both force scrollWidth");
- assert_equals(container.clientWidth, 160, "visible/always both force clientWidth");
- assert_equals(container.offsetLeft, content.offsetLeft - 20, "visible/always both force offsetLeft");
- assert_equals(container.clientWidth, content.clientWidth, "visible/always both force clientWidth");
- assert_not_equals(container.offsetWidth, content.offsetWidth, "visible/always both force offsetWidth");
- }, "Unexpected layout: overflow visible, scrollbar-gutter always both 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, 160, "hidden/always both force scrollWidth");
- assert_equals(container.clientWidth, 160, "hidden/always both force clientWidth");
- assert_equals(container.offsetLeft, content.offsetLeft - 20, "hidden/always both force offsetLeft");
- assert_equals(container.clientWidth, content.clientWidth, "hidden/always both force clientWidth");
- assert_not_equals(container.offsetWidth, content.offsetWidth, "hidden/always both force offsetWidth");
- }, "Unexpected layout: overflow hidden, scrollbar-gutter always both force, horizontal-tb");
-
- // vertical
-
- test(function() {
- let container = document.getElementById('container_auto_v');
- let content = document.getElementById('content_auto_v');
- assert_equals(container.scrollHeight, 160, "auto/always both scrollHeight");
- assert_equals(container.clientHeight, 160, "auto/always both clientHeight");
- assert_equals(container.offsetTop, content.offsetTop - 20, "auto/always both offsetTop");
- assert_equals(container.clientHeight, content.clientHeight, "auto/always both clientHeight");
- assert_not_equals(container.offsetHeight, content.offsetHeight, "auto/always both offsetHeight");
- }, "Unexpected layout: overflow auto, scrollbar-gutter always both, vertical-rl");
-
- test(function() {
- let container = document.getElementById('container_scroll_v');
- let content = document.getElementById('content_scroll_v');
- assert_equals(container.scrollHeight, 160, "scroll/always both scrollHeight");
- assert_equals(container.clientHeight, 160, "scroll/always both clientHeight");
- assert_equals(container.offsetTop, content.offsetTop - 20, "scroll/always both offsetTop");
- assert_equals(container.clientHeight, content.clientHeight, "scroll/always both clientHeight");
- assert_not_equals(container.offsetHeight, content.offsetHeight, "scroll/always both offsetHeight");
- }, "Unexpected layout: overflow scroll, scrollbar-gutter always both, 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 both scrollHeight");
- assert_equals(container.clientHeight, 200, "visible/always both clientHeight");
- assert_equals(container.offsetTop, content.offsetTop, "visible/always both offsetTop");
- assert_equals(container.clientHeight, content.clientHeight, "visible/always both clientHeight");
- assert_equals(container.offsetHeight, content.offsetHeight, "visible/always both offsetHeight");
- }, "Unexpected layout: overflow visible, scrollbar-gutter always both, 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 both scrollHeight");
- assert_equals(container.clientHeight, 200, "hidden/always both clientHeight");
- assert_equals(container.offsetTop, content.offsetTop, "hidden/always both offsetTop");
- assert_equals(container.clientHeight, content.clientHeight, "hidden/always both clientHeight");
- assert_equals(container.offsetHeight, content.offsetHeight, "hidden/always both offsetHeight");
- }, "Unexpected layout: overflow hidden, scrollbar-gutter always both, vertical-rl");
-
- test(function() {
- let container = document.getElementById('container_visible_force_v');
- let content = document.getElementById('content_visible_force_v');
- assert_equals(container.scrollHeight, 160, "visible/always both scrollHeight");
- assert_equals(container.clientHeight, 160, "visible/always both clientHeight");
- assert_equals(container.offsetTop, content.offsetTop - 20, "visible/always both offsetTop");
- assert_equals(container.clientHeight, content.clientHeight, "visible/always both clientHeight");
- assert_not_equals(container.offsetHeight, content.offsetHeight, "visible/always both offsetHeight");
- }, "Unexpected layout: overflow visible, scrollbar-gutter always both 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, 160, "hidden/always both scrollHeight");
- assert_equals(container.clientHeight, 160, "hidden/always both clientHeight");
- assert_equals(container.offsetTop, content.offsetTop - 20, "hidden/always both offsetTop");
- assert_equals(container.clientHeight, content.clientHeight, "hidden/always both clientHeight");
- assert_not_equals(container.offsetHeight, content.offsetHeight, "hidden/always both offsetHeight");
- }, "Unexpected layout: overflow hidden, scrollbar-gutter always both force, vertical-rl");
-
- done();
- }
-
-</script>
-<body onload="performTest()">
-
- Test scrollbar-gutter: always both, 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 both 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 both 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>
