tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

vertical-scroll-scrollintoview.tentative.html (4368B)

      1 <!DOCTYPE html>
      2 <script src="/resources/testharness.js"></script>
      3 <script src="/resources/testharnessreport.js"></script>
      4 <script src="/feature-policy/experimental-features/resources/common.js"></script>
      5 <script src="/feature-policy/experimental-features/resources/vertical-scroll.js"></script>
      6 <style>
      7 html, body {
      8  height: 100%;
      9  width: 100%;
     10 }
     11 
     12 iframe {
     13  width: 95%;
     14  height: 95%;
     15  overflow: scroll;
     16  margin-top: 200%;
     17 }
     18 
     19 .spacer {
     20  width: 100%;
     21  height: 100%;
     22  margin-top: 100%;
     23  margin-bottom: 100%;
     24 }
     25 
     26 </style>
     27 <p> An &lt;iframe&gt; further below which is not allowed to block scroll.</p>
     28 <div class="spacer"></div>
     29 <iframe></iframe>
     30 <p> Making sure there is room for vertical scroll </p>
     31 <script>
     32  "use strict";
     33 
     34  let url = url_base + "vertical-scroll-scrollintoview.html";
     35  let iframeElement = document.querySelector("iframe");
     36 
     37  function iframeBounds() {
     38    return iframeElement.getBoundingClientRect();
     39  }
     40 
     41  // Enabled 'vertical-scroll': scrollIntoView should work in all frames.
     42  promise_test(async() => {
     43    window.scrollTo(0, 0);
     44    await loadUrlInIframe(iframeElement, url);
     45 
     46    await sendMessageAndGetResponse(
     47      iframeElement.contentWindow,
     48      {type: "scrolling-element-bounds"}).then((response) => {
     49        let iframeBoundsAtOrigin = {
     50          x: 0,
     51          y: 0,
     52          width: iframeBounds().width,
     53          height: iframeBounds().height};
     54          let scrollingElementBounds = response.bounds;
     55          assert_false(
     56            rects_intersect(iframeBoundsAtOrigin, scrollingElementBounds),
     57            "Scrolling element should not be visible in <iframe>." +
     58            `Scrolling element's bounds is: ${rectToString(response.bounds)}  ` +
     59            "but <iframe>'s size is:" +
     60            `${iframeBounds().width}x${iframeBounds().height}.`);
     61      });
     62 
     63    // Scroll the scrolling element inside the <iframe>.
     64    await sendMessageAndGetResponse(iframeElement.contentWindow,
     65                                   {type: "scroll"});
     66    // The page should have scrolled vertically.
     67      assert_greater_than(window.scrollY,
     68                          0,
     69                          "Main frame must scroll vertically.");
     70    }, "Calling 'scrollIntoView()' inside a <iframe> will propagate up by" +
     71       " default('vertical-scroll' enabled).");
     72 
     73  // Disabled 'vertical-scroll': The scope of scrollIntoView is within the set
     74  // of disabled frames (does not propagate to main frame).
     75  promise_test(async() => {
     76    window.scrollTo(0, 0);
     77    setFeatureState(iframeElement, "vertical-scroll", "'none'");
     78    await loadUrlInIframe(iframeElement, url);
     79 
     80    await sendMessageAndGetResponse(
     81      iframeElement.contentWindow,
     82      {type: "scrolling-element-bounds"}).then((response) => {
     83      let iframeBoundsAtOrigin = {
     84        x: 0,
     85        y: 0,
     86        width: iframeBounds().width,
     87        height: iframeBounds().height};
     88      let scrollingElementBounds = response.bounds;
     89      assert_false(rects_intersect(iframeBoundsAtOrigin, scrollingElementBounds),
     90            "Scrolling element should not be visible in <iframe>." +
     91            `Scrolling element's bounds is: ${rectToString(response.bounds)}` +
     92            "but <iframe>'s size is:" +
     93            `${iframeBounds().width}x${iframeBounds().height}.`);
     94      });
     95 
     96    // Scroll scrolling element inside the <iframe>.
     97    await sendMessageAndGetResponse(iframeElement.contentWindow,
     98      {type: "scroll"}).then((response) => {
     99      // Make sure the nested <iframe> is visible.
    100      let scrollingElementBounds = response.bounds;
    101      let iframeBoundsAtOrigin = {
    102          x: 0,
    103          y: 0,
    104          width: iframeBounds().width,
    105          height: iframeBounds().height};
    106      // The scrolling element should be visible inside <iframe>.
    107      assert_true(rects_intersect(iframeBoundsAtOrigin, scrollingElementBounds),
    108          "Scrolling element should be visible in <iframe>." +
    109          `Scrolling element's bounds is: ${rectToString(response.bounds)}` +
    110          "but <iframe>'s size is:" +
    111          `${iframeBounds().width}, ${iframeBounds().height}.`);
    112      // The page however should not have scrolled.
    113      assert_equals(window.scrollY, 0, "Main frame must not scroll vertically.");
    114    });
    115    }, "Calling 'scrollIntoView()' inside a <iframe> with" +
    116       " 'vertical-scroll none;'will not propagate upwards.");
    117 </script>