diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
tree | f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/css/css-overflow/scrollbar-gutter-vertical-lr-001.html | |
parent | Initial commit. (diff) | |
download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-overflow/scrollbar-gutter-vertical-lr-001.html')
-rw-r--r-- | testing/web-platform/tests/css/css-overflow/scrollbar-gutter-vertical-lr-001.html | 259 |
1 files changed, 259 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-vertical-lr-001.html b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-vertical-lr-001.html new file mode 100644 index 0000000000..226004635e --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-vertical-lr-001.html @@ -0,0 +1,259 @@ +<!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> |