summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/cssom-view/scrollIntoView-fixed.html
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 09:22:09 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 09:22:09 +0000
commit43a97878ce14b72f0981164f87f2e35e14151312 (patch)
tree620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/css/cssom-view/scrollIntoView-fixed.html
parentInitial commit. (diff)
downloadfirefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz
firefox-43a97878ce14b72f0981164f87f2e35e14151312.zip
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/cssom-view/scrollIntoView-fixed.html')
-rw-r--r--testing/web-platform/tests/css/cssom-view/scrollIntoView-fixed.html258
1 files changed, 258 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/cssom-view/scrollIntoView-fixed.html b/testing/web-platform/tests/css/cssom-view/scrollIntoView-fixed.html
new file mode 100644
index 0000000000..bab58dad68
--- /dev/null
+++ b/testing/web-platform/tests/css/cssom-view/scrollIntoView-fixed.html
@@ -0,0 +1,258 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSSOM View - scrollIntoView from position:fixed</title>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width,minimum-scale=1">
+ <link rel="author" title="David Bokan" href="mailto:bokan@chromium.org">
+ <link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-scrollintoview">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <style>
+ body {
+ width: 1000vw;
+ height: 1000vh;
+ /* stripes so we can see scroll offset more easily */
+ background: repeating-linear-gradient(
+ 45deg,
+ #A2CFD9,
+ #A2CFD9 100px,
+ #C3F3FF 100px,
+ #C3F3FF 200px
+ );
+ }
+
+ .fixedContainer {
+ position: fixed;
+ bottom: 10px;
+ left: 10px;
+ width: 150px;
+ height: 150px;
+ background-color: coral;
+ }
+
+ .fixedContainer.scrollable {
+ overflow: auto;
+ left: unset;
+ right: 10px;
+ }
+
+ button {
+ position: absolute;
+ margin: 5px;
+ }
+
+ .target {
+ position: absolute;
+ width: 10px;
+ height: 10px;
+ background-color: blue;
+ left: 50%;
+ top: 50%;
+ }
+
+ .scrollable .target {
+ left: 200%;
+ top: 200%;
+ }
+
+ iframe {
+ width: 96vw;
+ height: 300px;
+ position: absolute;
+ left: 2vw;
+ top: 100px;
+ }
+ </style>
+ <script>
+ </script>
+ </head>
+ <body>
+ <div style="width:90vw">
+ <p>
+ The orange boxes are position: fixed. Clicking ScrollIntoView in each box
+ will attempt to scroll into view the blue target element inside that fixed
+ container to block/inline: start (i.e. aligned with top left corner in RTL).
+ </p>
+ <p>
+ scrollIntoView from a position:fixed element must not scroll its
+ containing frame; however, it must scroll further ancestor scrollers as
+ the element isn't fixed in relation to them.
+ </p>
+ </div>
+ <iframe></iframe>
+ <div class="fixedContainer">
+ Box A
+ <button id="fixedContainerBtn">ScrollIntoView</button>
+ <div class="target"></div>
+ </div>
+ <div class="fixedContainer scrollable">
+ Box C
+ <button id="scrollableFixedContainerBtn">ScrollIntoView</button>
+ <div class="target"></div>
+ </div>
+ <script>
+ if (typeof setup != 'undefined') {
+ setup({ explicit_done: true });
+ window.addEventListener("load", runTests);
+ }
+
+ function scrollIntoView(evt) {
+ const container = evt.target.closest('.fixedContainer');
+ const target = container.querySelector('.target');
+ target.scrollIntoView({block: 'start', inline: 'start'});
+ }
+
+ document.querySelectorAll('button').forEach((btn) => {
+ btn.addEventListener('click', scrollIntoView);
+ });
+
+ const iframe = document.querySelector('iframe');
+ iframe.onload = () => {
+ frames[0].document.querySelectorAll('button').forEach((btn) => {
+ btn.addEventListener('click', scrollIntoView);
+ });
+ }
+ iframe.srcdoc = `
+ <!DOCTYPE html>
+ <style>
+ body {
+ height: 200vh;
+ width: 200vw;
+ /* stripes so we can see scroll offset more easily */
+ background: repeating-linear-gradient(
+ 45deg,
+ #C3A2D9,
+ #C3A2D9 50px,
+ #E5C0FF 50px,
+ #E5C0FF 100px
+ );
+ }
+ .fixedContainer {
+ position: fixed;
+ bottom: 10px;
+ left: 10px;
+ width: 150px;
+ height: 150px;
+ background-color: coral;
+ }
+
+ .fixedContainer.scrollable {
+ overflow: auto;
+ left: unset;
+ right: 10px;
+ }
+
+ button {
+ position: absolute;
+ margin: 5px;
+ }
+
+ .target {
+ position: absolute;
+ width: 10px;
+ height: 10px;
+ background-color: blue;
+ left: 50%;
+ top: 50%;
+ }
+
+ .scrollable .target {
+ left: 200%;
+ top: 200%;
+ }
+ </style>
+ IFRAME
+ <div class="fixedContainer">
+ Box B
+ <button id="fixedContainerBtn">ScrollIntoView</button>
+ <div class="target"></div>
+ </div>
+ <div class="fixedContainer scrollable">
+ Box D
+ <button id="scrollableFixedContainerBtn">ScrollIntoView</button>
+ <div class="target"></div>
+ </div>
+ `;
+
+ function reset() {
+ [document, frames[0].document].forEach((doc) => {
+ doc.scrollingElement.scrollLeft = 0;
+ doc.scrollingElement.scrollTop = 0;
+ doc.querySelectorAll('.fixedContainer').forEach((e) => {
+ e.scrollLeft = 0;
+ e.scrollTop = 0;
+ });
+ });
+ }
+
+ function runTests() {
+ // Test scrollIntoView from a plain, unscrollable position:fixed element.
+ // Nothing should scroll.
+ test(() => {
+ reset()
+ const container = document.querySelector('.fixedContainer:not(.scrollable)');
+ const target = container.querySelector('.target');
+ target.scrollIntoView({block: 'start', inline: 'start'});
+ assert_equals(window.scrollX, 0, 'must not scroll window [scrollX]');
+ assert_equals(window.scrollY, 0, 'must not scroll window [scrollY]');
+ }, `[Box A] scrollIntoView from unscrollable position:fixed`);
+
+ // Same as above but from inside an iframe. Since the container is fixed
+ // only to the iframe, we should scroll the outer window.
+ test(() => {
+ reset()
+ const container = frames[0].document.querySelector('.fixedContainer:not(.scrollable)');
+ const target = container.querySelector('.target');
+ target.scrollIntoView({block: 'start', inline: 'start'});
+
+ // Large approx to account for differences like scrollbars
+ assert_approx_equals(window.scrollX, 100, 20, 'must scroll outer window [scrollX]');
+ assert_approx_equals(window.scrollY, 300, 20, 'must scroll outer window [scrollY]');
+ assert_equals(frames[0].window.scrollX, 0, 'must not scroll iframe [scrollX]');
+ assert_equals(frames[0].window.scrollY, 0, 'must not scroll iframe [scrollY]');
+ }, `[Box B] scrollIntoView from unscrollable position:fixed in iframe`);
+
+ // Test scrollIntoView from a scroller that's position fixed. The
+ // scroller should be scrolled but shouldn't bubble the scroll as the
+ // window scrolling won't change the target's position.
+ test(() => {
+ reset()
+ const container = document.querySelector('.fixedContainer.scrollable');
+ const target = container.querySelector('.target');
+ target.scrollIntoView({block: 'start', inline: 'start'});
+ // Large approx to account for differences like scrollbars
+ assert_equals(window.scrollX, 0, 'must not scroll window [scrollX]');
+ assert_equals(window.scrollY, 0, 'must not scroll window [scrollY]');
+ assert_approx_equals(container.scrollLeft, 145, 20,
+ 'scrollIntoView in container [scrollLeft]');
+ assert_approx_equals(container.scrollTop, 145, 20,
+ 'scrollIntoView in container [scrollTop]');
+ }, `[Box C] scrollIntoView from scrollable position:fixed`);
+
+ // Same as above but from inside an iframe. In this case, the scroller
+ // should bubble the scroll but skip its own frame (as it's fixed with
+ // respect to its own frame's scroll offset) and bubble to the outer
+ // window.
+ test(() => {
+ reset()
+ const container = frames[0].document.querySelector('.fixedContainer.scrollable');
+ const target = container.querySelector('.target');
+ target.scrollIntoView({block: 'start', inline: 'start'});
+ // Large approx to account for differences like scrollbars
+ assert_approx_equals(window.scrollX, 740, 20, 'must scroll outer window [scrollX]');
+ assert_approx_equals(window.scrollY, 360, 20, 'must scroll outer window [scrollY]');
+ assert_approx_equals(container.scrollLeft, 145, 20,
+ 'scrollIntoView in container [scrollLeft]');
+ assert_approx_equals(container.scrollTop, 145, 20,
+ 'scrollIntoView in container [scrollTop]');
+ assert_equals(frames[0].window.scrollX, 0, 'must not scroll iframe [scrollX]');
+ assert_equals(frames[0].window.scrollY, 0, 'must not scroll iframe [scrollY]');
+ }, `[Box D] scrollIntoView from scrollable position:fixed in iframe`);
+
+ done();
+ }
+
+ </script>
+ </body>
+</html>
generated by cgit v1.2.3 (git 2.39.1) at 2025-01-03 03:33:00 +0000