tor-browser

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

helper_fission_inactivescroller_under_oopif.html (3603B)

      1 <!DOCTYPE HTML>
      2 <html>
      3 <head>
      4  <meta charset="utf-8">
      5  <meta name="viewport" content="width=device-width,initial-scale=1">
      6  <title>Ensure inactive scollframes under OOPIFs hit-test properly</title>
      7  <script src="/tests/SimpleTest/SimpleTest.js"></script>
      8  <script src="/tests/SimpleTest/paint_listener.js"></script>
      9  <script src="helper_fission_utils.js"></script>
     10  <script src="apz_test_utils.js"></script>
     11  <script src="apz_test_native_event_utils.js"></script>
     12  <script>
     13 
     14    async function test() {
     15      const iframe = document.querySelector("iframe");
     16      await setupCrossOriginIFrame(iframe, "helper_fission_plain.html");
     17 
     18      const remoteType = await SpecialPowers.spawn(iframe, [], async () => {
     19        return await SpecialPowers.spawnChrome([], () => {
     20          return windowGlobalParent.domProcess.remoteType;
     21        });
     22      });
     23      if (remoteType === "web") {
     24        is(SpecialPowers.effectiveIsolationStrategy(), SpecialPowers.ISOLATION_STRATEGY.IsolateHighValue);
     25        ok(true, "Skipping this test since the document on example.com got loaded in the same content process");
     26        return;
     27      }
     28 
     29      let readyPromise = new Promise(resolve => {
     30        window.addEventListener("message", event => {
     31          let data = JSON.parse(event.data);
     32          if ("type" in data && data.type == "scrollableready") {
     33            let ids = {
     34              layersId: data.layersId,
     35              viewId: data.viewId
     36            };
     37            resolve(ids);
     38          }
     39        });
     40      });
     41 
     42      let result = await SpecialPowers.spawn(iframe, [], async () => {
     43        // Ensure the oopif is scrollable, and wait for the paint so that the
     44        // compositor also knows it's scrollable.
     45        content.document.body.style.height = "200vh";
     46        await content.wrappedJSObject.promiseApzFlushedRepaints();
     47        let utils = SpecialPowers.getDOMWindowUtils(content.window);
     48        let data = JSON.stringify({
     49          type: "scrollableready",
     50          layersId: utils.getLayersId(),
     51          viewId: utils.getViewId(content.document.scrollingElement)
     52        });
     53        dump(`OOPIF computed IDs ${data}\n`);
     54        content.window.parent.postMessage(data, "*");
     55 
     56        return true;
     57      });
     58      ok(result, "Successfully made OOP iframe scrollable");
     59 
     60      let oopifScrollerIds = await readyPromise;
     61 
     62      // The #scroller div is (a) inactive, and (b) under the OOPIF. Hit-testing
     63      // against it should hit the OOPIF.
     64      checkHitResult(await hitTestOOPIF(centerOf("scroller"), iframe),
     65        APZHitResultFlags.VISIBLE,
     66        oopifScrollerIds.viewId,
     67        oopifScrollerIds.layersId,
     68        "Part of OOPIF sitting on top of the inactive scrollframe should hit OOPIF");
     69    }
     70 
     71    if (!SpecialPowers.Services.appinfo.fissionAutostart) {
     72      ok(true, "This test doesn't need to run with disabling Fission");
     73      subtestDone();
     74    } else {
     75      waitUntilApzStable()
     76        .then(test)
     77        .then(subtestDone, subtestFailed);
     78    }
     79 
     80  </script>
     81 </head>
     82 <body>
     83  <style>
     84    html,
     85    body {
     86      margin: 0;
     87    }
     88 
     89    body {
     90      /* Ensure root document is scrollable so that #scroller is inactive by
     91      default */
     92      height: 200vh;
     93    }
     94 
     95    iframe {
     96      position: fixed;
     97      top: 0;
     98      left: 0;
     99      width: 300px;
    100      height: 200px;
    101    }
    102 
    103    #scroller {
    104      width: 200px;
    105      height: 200px;
    106      background-color: transparent;
    107      overflow-y: scroll;
    108    }
    109  </style>
    110  <div id="scroller">
    111    <div style="height:500px">inside scroller</div>
    112  </div>
    113  <iframe id="testframe"></iframe>
    114 </body>
    115 </html>