diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
| commit | 36d22d82aa202bb199967e9512281e9a53db42c9 (patch) | |
| tree | 105e8c98ddea1c1e4784a60a5a6410fa416be2de /testing/web-platform/tests/css/cssom-view/scrollIntoView-smooth.html | |
| parent | Initial commit. (diff) | |
| download | firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.tar.xz firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.zip | |
Adding upstream version 115.7.0esr.upstream/115.7.0esr
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/cssom-view/scrollIntoView-smooth.html')
| -rw-r--r-- | testing/web-platform/tests/css/cssom-view/scrollIntoView-smooth.html | 108 |
1 files changed, 108 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/cssom-view/scrollIntoView-smooth.html b/testing/web-platform/tests/css/cssom-view/scrollIntoView-smooth.html new file mode 100644 index 0000000000..ddfa31076c --- /dev/null +++ b/testing/web-platform/tests/css/cssom-view/scrollIntoView-smooth.html @@ -0,0 +1,108 @@ +<!DOCTYPE HTML> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<title>Check End Position of smooth scrollIntoView</title> +<div id="container" style="height: 2500px; width: 2500px;"> + <div id="content" style="height: 500px; width: 500px;margin-left: 1000px; margin-right: 1000px; margin-top: 1000px;margin-bottom: 1000px;background-color: red"> + </div> + <div id="shadow"></div> +</div> +<script> +var content_height = 500; +var content_width = 500; +var window_height = document.documentElement.clientHeight; +var window_width = document.documentElement.clientWidth; +var content = document.getElementById("content"); +add_completion_callback(() => document.getElementById("container").remove()); + +function waitForScrollEnd() { + var wait_for_scroll_start = performance.now(); + var last_changed_timestamp = wait_for_scroll_start; + var last_changed_frame = 0; + var last_x = window.scrollX; + var last_y = window.scrollY; + return new Promise((resolve, reject) => { + function tick(frames, timestamp) { + // We requestAnimationFrame until at least 200ms have elapsed and at least + // 5 animation frames have run since the last change to the scroll + // offset, timing out after 8 seconds. + if (window.scrollX != last_x || window.scrollY != last_y) { + last_changed_timestamp = timestamp; + last_changed_frame = frames; + last_x = window.scrollX; + last_y = window.scrollY; + } + if (timestamp - last_changed_timestamp > 200 && + frames - last_changed_frame > 4) { + resolve(); + } else if (timestamp - wait_for_scroll_start > 8000) { + reject(); + } else { + requestAnimationFrame(tick.bind(null, frames + 1)); + } + } + tick(last_changed_frame, wait_for_scroll_start); + }); +} + +// When testing manually, we need an additional frame at beginning +// to trigger the effect. +requestAnimationFrame(() => { +promise_test(t => { + window.scrollTo(0, 0); + var expected_x = content.offsetLeft + content_width - window_width; + var expected_y = content.offsetTop + content_height - window_height; + assert_not_equals(window.scrollX, expected_x, "scrollX"); + assert_not_equals(window.scrollY, expected_y, "scrollY"); + content.scrollIntoView({behavior: "smooth", block: "nearest", inline: +"nearest"}); + return waitForScrollEnd().then(() => { + assert_approx_equals(window.scrollX, expected_x, 1, "scrollX"); + assert_approx_equals(window.scrollY, expected_y, 1, "scrollY"); + }); +}, "Smooth scrollIntoView should scroll the element to the 'nearest' position"); + +promise_test(t => { + window.scrollTo(0, 0); + var expected_x = content.offsetLeft; + var expected_y = content.offsetTop; + assert_not_equals(window.scrollX, expected_x, "scrollX"); + assert_not_equals(window.scrollY, expected_y, "scrollY"); + content.scrollIntoView({behavior: "smooth", block: "start", inline: +"start"}); + return waitForScrollEnd().then(() => { + assert_approx_equals(window.scrollX, expected_x, 1, "scrollX"); + assert_approx_equals(window.scrollY, expected_y, 1, "scrollY"); + }); +}, "Smooth scrollIntoView should scroll the element to the 'start' position"); + +promise_test(t => { + window.scrollTo(0, 0); + var expected_x = content.offsetLeft + (content_width - window_width) / 2; + var expected_y = content.offsetTop + (content_height - window_height) / 2; + assert_not_equals(window.scrollX, expected_x, "scrollX"); + assert_not_equals(window.scrollY, expected_y, "scrollY"); + content.scrollIntoView({behavior: "smooth", block: "center", inline: +"center"}); + return waitForScrollEnd().then(() => { + assert_approx_equals(window.scrollX, expected_x, 1, "scrollX"); + assert_approx_equals(window.scrollY, expected_y, 1, "scrollY"); + }); +}, "Smooth scrollIntoView should scroll the element to the 'center' position"); + +promise_test(t => { + window.scrollTo(0, 0); + var expected_x = content.offsetLeft + content_width - window_width; + var expected_y = content.offsetTop + content_height - window_height; + assert_not_equals(window.scrollX, expected_x, "scrollX"); + assert_not_equals(window.scrollY, expected_y, "scrollY"); + content.scrollIntoView({behavior: "smooth", block: "end", inline: +"end"}); + return waitForScrollEnd().then(() => { + assert_approx_equals(window.scrollX, expected_x, 1, "scrollX"); + assert_approx_equals(window.scrollY, expected_y, 1, "scrollY"); + }); +}, "Smooth scrollIntoView should scroll the element to the 'end' position"); + +}); +</script> |