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/cssom-view/scrollLeftTop.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/cssom-view/scrollLeftTop.html')
| -rw-r--r-- | testing/web-platform/tests/css/cssom-view/scrollLeftTop.html | 136 |
1 files changed, 136 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/cssom-view/scrollLeftTop.html b/testing/web-platform/tests/css/cssom-view/scrollLeftTop.html new file mode 100644 index 0000000000..55b4013600 --- /dev/null +++ b/testing/web-platform/tests/css/cssom-view/scrollLeftTop.html @@ -0,0 +1,136 @@ +<!DOCTYPE html> +<title>CSSOM View - scrollLeft/scrollTop considers writing-mode and css direction</title> +<meta charset="utf-8"> +<link rel="author" title="Cathie Chen" href="mailto:cathiechen@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/cssom-view/#scrolling-area-origin"> +<link rel="help" href="https://drafts.csswg.org/cssom-view/#scroll-an-element"> +<meta name="assert" content="This test verifies the assigned and extreme values of the scroll positions of an element."> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<head> + <style> + .scroller { + overflow: scroll; + width: 150px; + height: 100px; + } + .content { + width: 300px; + height: 400px; + } + .horizontal-tb { + writing-mode: horizontal-tb; + } + .vertical-lr { + writing-mode: vertical-lr; + } + .vertical-rl { + writing-mode: vertical-rl; + } + .rtl { + direction: rtl; + } + </style> +</head> + +<body> + <h1>scrollLeft/scrollTop</h1> + <h2>writing-mode: horizontal-tb;</h2> + <div id="target_scroller" class="scroller horizontal-tb ltr"> + <div id="target_content" class="content"></div> + </div> + <div class="scroller horizontal-tb rtl"> + <div class="content"></div> + </div> + <h2>writing-mode: vertical-lr;</h2> + <div class="scroller vertical-lr ltr"> + <div class="content"></div> + </div> + <div class="scroller vertical-lr rtl"> + <div class="content"></div> + </div> + <h2>writing-mode: vertical-rl;</h2> + <div class="scroller vertical-rl ltr"> + <div class="content"></div> + </div> + <div class="scroller vertical-rl rtl"> + <div class="content"></div> + </div> + + <script> + var scroller = document.querySelector("#target_scroller"); + var content = document.querySelector("#target_content"); + var scrollbar_width = scroller.offsetWidth - scroller.clientWidth; + var scroller_width = scroller.offsetWidth; + var scroller_height = scroller.offsetHeight; + var content_width = content.offsetWidth; + var content_height = content.offsetHeight; + + expectedScrollTop = content_height - scroller_height + scrollbar_width; + expectedScrollLeft = content_width - scroller_width + scrollbar_width; + + const epsilon = 0.5; + test(() => { + var scroller = document.querySelector(".horizontal-tb.ltr"); + assert_approx_equals(scroller.scrollLeft, 0, epsilon, "initial scrollLeft"); + assert_approx_equals(scroller.scrollTop, 0, epsilon, "initial scrollTop"); + scroller.scrollLeft = 2*content_width; + scroller.scrollTop = 2*content_height; + assert_approx_equals(scroller.scrollLeft, expectedScrollLeft, epsilon, "ending scrollLeft"); + assert_approx_equals(scroller.scrollTop, expectedScrollTop, epsilon, "ending scrollTop"); + }, `writing-mode:horizontal-tb; direction:ltr`); + + test(() => { + var scroller = document.querySelector(".horizontal-tb.rtl"); + assert_approx_equals(scroller.scrollLeft, 0, epsilon, "initial scrollLeft"); + assert_approx_equals(scroller.scrollTop, 0, epsilon, "initial scrollTop"); + scroller.scrollLeft = -2*content_width; + scroller.scrollTop = 2*content_height; + assert_approx_equals(scroller.scrollLeft, -expectedScrollLeft, epsilon, "ending scrollLeft"); + assert_approx_equals(scroller.scrollTop, expectedScrollTop, epsilon, "ending scrollTop"); + }, `writing-mode:horizontal-tb; direction:rtl`); + + test(() => { + var scroller = document.querySelector(".vertical-lr.ltr"); + assert_approx_equals(scroller.scrollLeft, 0, epsilon, "initial scrollLeft"); + assert_approx_equals(scroller.scrollTop, 0, epsilon, "initial scrollTop"); + scroller.scrollLeft = 2*content_width; + scroller.scrollTop = 2*content_height; + assert_approx_equals(scroller.scrollLeft, expectedScrollLeft, epsilon, "ending scrollLeft"); + assert_approx_equals(scroller.scrollTop, expectedScrollTop, epsilon, "ending scrollTop"); + }, `writing-mode:vertical-lr; direction:ltr`); + + test(() => { + var scroller = document.querySelector(".vertical-lr.rtl"); + assert_approx_equals(scroller.scrollLeft, 0, epsilon, "initial scrollLeft"); + assert_approx_equals(scroller.scrollTop, 0, epsilon, "initial scrollTop"); + scroller.scrollLeft = 2*content_width; + scroller.scrollTop = -2*content_height; + assert_approx_equals(scroller.scrollLeft, expectedScrollLeft, epsilon, "ending scrollLeft"); + assert_approx_equals(scroller.scrollTop, -expectedScrollTop, epsilon, "ending scrollTop"); + }, `writing-mode:vertical-lr; direction:rtl`); + + test(() => { + var scroller = document.querySelector(".vertical-rl.ltr"); + assert_approx_equals(scroller.scrollLeft, 0, epsilon, "initial scrollLeft"); + assert_approx_equals(scroller.scrollTop, 0, epsilon, "initial scrollTop"); + scroller.scrollLeft = -2*content_width; + scroller.scrollTop = 2*content_height; + assert_approx_equals(scroller.scrollLeft, -expectedScrollLeft, epsilon, "ending scrollLeft"); + assert_approx_equals(scroller.scrollTop, expectedScrollTop, epsilon, "ending scrollTop"); + }, `writing-mode:vertical-rl; direction:ltr`); + + test(() => { + var scroller = document.querySelector(".vertical-rl.rtl"); + assert_approx_equals(scroller.scrollLeft, 0, epsilon, "initial scrollLeft"); + assert_approx_equals(scroller.scrollTop, 0, epsilon, "initial scrollTop"); + scroller.scrollLeft = -2*content_width; + scroller.scrollTop = -2*content_height; + assert_approx_equals(scroller.scrollLeft, -expectedScrollLeft, epsilon, "ending scrollLeft"); + assert_approx_equals(scroller.scrollTop, -expectedScrollTop, epsilon, "ending scrollTop"); + }, `writing-mode:vertical-rl; direction:rtl`); + </script> +</body> +</html> |