| <!doctype html> |
| <meta charset="utf-8"> |
| <title>CSS Overflow: test scrollbar-gutter: always both (classic scrollbars, vertical text)</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 with a known thickness */ |
| .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 mode */ |
| .vertical { |
| writing-mode: vertical-rl; |
| direction: ltr; |
| overflow-y: auto; |
| } |
| |
| /* overflow on the block direction */ |
| .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}); |
| |
| // 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: vertical-rl; |
| |
| <div class="container classic vertical auto" id="container_auto_v"> |
| <div class="content" id="content_auto_v">ｏｖｅｒｆｌｏｗ：ａｕｔｏ</div> |
| </div> |
| |
| <div class="container classic vertical scroll" id="container_scroll_v"> |
| <div class="content" id="content_scroll_v">ｏｖｅｒｆｌｏｗ－ｘ：ｓｃｒｏｌｌ</div> |
| </div> |
| |
| <div class="container classic vertical visible" id="container_visible_v"> |
| <div class="content" id="content_visible_v">ｏｖｅｒｆｌｏｗ：ｖｉｓｉｂｌｅ</div> |
| </div> |
| |
| <div class="container classic vertical hidden" id="container_hidden_v"> |
| <div class="content" id="content_hidden_v">ｏｖｅｒｆｌｏｗ－ｘ：ｈｉｄｄｅｎ</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">ｏｖｅｒｆｌｏｗ：ｖｉｓｉｂｌｅ</div> |
| </div> |
| |
| <div class="container classic vertical hidden force" id="container_hidden_force_v"> |
| <div class="content" id="content_hidden_force_v">ｏｖｅｒｆｌｏｗ－ｘ：ｈｉｄｄｅｎ</div> |
| </div> |
| |
| </body> |
