css/cssom-view/scrollIntoView-fixed.html

<!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>