<!doctype html> <meta charset="utf-8"> <title>CSS Overflow: test scrollbar-gutter with vertical left to right content</title> <link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@igalia.com" /> <link rel="help" href="https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property" /> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script src="/css/support/parsing-testcommon.js"></script> <style> .line { display: flex; } .container { writing-mode: vertical-lr; height: 200px; width: 200px; margin: 10px; padding: 0px; border: none; overflow-y: auto; background: deepskyblue; } .content { width: 100%; height: 100%; padding: 0px; border: none; background: lightsalmon; } /* scrollbar-gutter */ .sg_auto { scrollbar-gutter: auto; } .sg_stable { scrollbar-gutter: stable; } .sg_stable_mirror { scrollbar-gutter: stable both-edges; } /* overflow */ .container.ov_auto { overflow-x: auto; } .container.ov_scroll { overflow-x: scroll; } .container.ov_visible { overflow: visible; } .container.ov_hidden { overflow-x: hidden; } .container.ov_clip { overflow: clip; } </style> <body> <div class="line"> <div class="container ov_auto sg_auto" id="container_auto_auto"> <div class="content" id="content_auto_auto">auto/auto</div> </div> <div class="container ov_scroll sg_auto" id="container_scroll_auto"> <div class="content" id="content_scroll_auto">scroll/auto</div> </div> <div class="container ov_visible sg_auto" id="container_visible_auto"> <div class="content" id="content_visible_auto">visible/auto</div> </div> <div class="container ov_hidden sg_auto" id="container_hidden_auto"> <div class="content" id="content_hidden_auto">hidden/auto</div> </div> <div class="container ov_clip sg_auto" id="container_clip_auto"> <div class="content" id="content_clip_auto">clip/auto</div> </div> </div> <div class="line"> <div class="container ov_auto sg_stable" id="container_auto_stable"> <div class="content" id="content_auto_stable">auto/stable</div> </div> <div class="container ov_scroll sg_stable" id="container_scroll_stable"> <div class="content" id="content_scroll_stable">scroll/stable</div> </div> <div class="container ov_visible sg_stable" id="container_visible_stable"> <div class="content" id="content_visible_stable">visible/stable</div> </div> <div class="container ov_hidden sg_stable" id="container_hidden_stable"> <div class="content" id="content_hidden_stable">hidden/stable</div> </div> <div class="container ov_clip sg_stable" id="container_clip_stable"> <div class="content" id="content_clip_stable">clip/stable</div> </div> </div> <div class="line"> <div class="container ov_auto sg_stable_mirror" id="container_auto_stable_mirror"> <div class="content" id="content_auto_stable_mirror">auto/stable both-edges</div> </div> <div class="container ov_scroll sg_stable_mirror" id="container_scroll_stable_mirror"> <div class="content" id="content_scroll_stable_mirror">scroll/stable both-edges</div> </div> <div class="container ov_visible sg_stable_mirror" id="container_visible_stable_mirror"> <div class="content" id="content_visible_stable_mirror">visible/stable both-edges</div> </div> <div class="container ov_hidden sg_stable_mirror" id="container_hidden_stable_mirror"> <div class="content" id="content_hidden_stable_mirror">hidden/stable both-edges</div> </div> <div class="container ov_clip sg_stable_mirror" id="container_clip_stable_mirror"> <div class="content" id="content_clip_stable_mirror">clip/stable both-edges</div> </div> </div> <script type="text/javascript"> setup({ explicit_done: true }); // scrollbar-gutter: auto test(function () { let container = document.getElementById('container_auto_auto'); let content = document.getElementById('content_auto_auto'); assert_equals(container.offsetHeight, content.offsetHeight, "content height"); assert_equals(container.offsetTop, content.offsetTop, "content position"); }, "overflow auto, scrollbar-gutter auto"); test(function () { let container = document.getElementById('container_scroll_auto'); let content = document.getElementById('content_scroll_auto'); assert_greater_than(container.offsetHeight, content.offsetHeight, "content height"); assert_equals(container.offsetTop, content.offsetTop, "content position"); }, "overflow scroll, scrollbar-gutter auto"); test(function () { let container = document.getElementById('container_visible_auto'); let content = document.getElementById('content_visible_auto'); assert_equals(container.offsetHeight, content.offsetHeight, "content height"); assert_equals(container.offsetTop, content.offsetTop, "content position"); }, "overflow visible, scrollbar-gutter auto"); test(function () { let container = document.getElementById('container_hidden_auto'); let content = document.getElementById('content_hidden_auto'); assert_equals(container.offsetHeight, content.offsetHeight, "content height"); assert_equals(container.offsetTop, content.offsetTop, "content position"); }, "overflow hidden, scrollbar-gutter auto"); test(function () { let container = document.getElementById('container_clip_auto'); let content = document.getElementById('content_clip_auto'); assert_equals(container.offsetHeight, content.offsetHeight, "content height"); assert_equals(container.offsetTop, content.offsetTop, "content position"); }, "overflow clip, scrollbar-gutter auto"); // scrollbar-gutter: stable test(function () { let container = document.getElementById('container_auto_stable'); let content = document.getElementById('content_auto_stable'); assert_greater_than(container.offsetHeight, content.offsetHeight, "content height"); assert_equals(container.offsetTop, content.offsetTop, "content position"); }, "overflow auto, scrollbar-gutter stable"); test(function () { let container = document.getElementById('container_scroll_stable'); let content = document.getElementById('content_scroll_stable'); assert_greater_than(container.offsetHeight, content.offsetHeight, "content height"); assert_equals(container.offsetTop, content.offsetTop, "content position"); }, "overflow scroll, scrollbar-gutter stable"); test(function () { let container = document.getElementById('container_visible_stable'); let content = document.getElementById('content_visible_stable'); assert_equals(container.offsetHeight, content.offsetHeight, "content height"); assert_equals(container.offsetTop, content.offsetTop, "content position"); }, "overflow visible, scrollbar-gutter stable"); test(function () { let container = document.getElementById('container_hidden_stable'); let content = document.getElementById('content_hidden_stable'); assert_greater_than(container.offsetHeight, content.offsetHeight, "content height"); assert_equals(container.offsetTop, content.offsetTop, "content position"); }, "overflow hidden, scrollbar-gutter stable"); test(function () { let container = document.getElementById('container_clip_stable'); let content = document.getElementById('content_clip_stable'); assert_equals(container.offsetHeight, content.offsetHeight, "content height"); assert_equals(container.offsetTop, content.offsetTop, "content position"); }, "overflow clip, scrollbar-gutter stable"); // scrollbar-gutter: stable both-edges test(function () { let container = document.getElementById('container_auto_stable_mirror'); let content = document.getElementById('content_auto_stable_mirror'); assert_greater_than(container.offsetHeight, content.offsetHeight, "content height"); assert_less_than(container.offsetTop, content.offsetTop, "content position"); let reference = document.getElementById('content_auto_stable'); assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"stable\""); }, "overflow auto, scrollbar-gutter stable both-edges"); test(function () { let container = document.getElementById('container_scroll_stable_mirror'); let content = document.getElementById('content_scroll_stable_mirror'); assert_greater_than(container.offsetHeight, content.offsetHeight, "content height"); assert_less_than(container.offsetTop, content.offsetTop, "content position"); let reference = document.getElementById('content_auto_stable'); assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"stable\""); }, "overflow scroll, scrollbar-gutter stable both-edges"); test(function () { let container = document.getElementById('container_visible_stable_mirror'); let content = document.getElementById('content_visible_stable_mirror'); assert_equals(container.offsetHeight, content.offsetHeight, "content height"); assert_equals(container.offsetTop, content.offsetTop, "content position"); }, "overflow visible, scrollbar-gutter stable both-edges"); test(function () { let container = document.getElementById('container_hidden_stable_mirror'); let content = document.getElementById('content_hidden_stable_mirror'); assert_greater_than(container.offsetHeight, content.offsetHeight, "content height"); assert_less_than(container.offsetTop, content.offsetTop, "content position"); let reference = document.getElementById('content_auto_stable'); assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"stable\""); }, "overflow hidden, scrollbar-gutter stable both-edges"); test(function () { let container = document.getElementById('container_clip_stable_mirror'); let content = document.getElementById('content_clip_stable_mirror'); assert_equals(container.offsetHeight, content.offsetHeight, "content height"); assert_equals(container.offsetTop, content.offsetTop, "content position"); }, "overflow clip, scrollbar-gutter stable both-edges"); done(); </script> </body>