tor-browser

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

helper_fission_tap_on_zoomed.html (3418B)

      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>Test to ensure events get delivered properly for an OOP iframe</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    // Copied from helper_fission_touch.html, differences are 1) the iframe is not
     15    // transformed instead it's offseted by margin values, 2) the top level document
     16    // is zoomed by 2.0, 3) using documentElement instead of body to query
     17    // getBoundingClientRect() because margin collapsing happens between the body
     18    // and the offseted div (i.e. getBoundingClientRect() for body returns 100px top
     19    // value).
     20 
     21    SpecialPowers.getDOMWindowUtils(window).setResolutionAndScaleTo(2.0);
     22 
     23    async function test() {
     24      const iframe = document.querySelector("iframe");
     25      await setupCrossOriginIFrame(iframe, "helper_fission_plain.html");
     26 
     27      let readyPromise = new Promise(resolve => {
     28        window.addEventListener("message", event => {
     29          if (event.data === "listenerready") {
     30            resolve();
     31          }
     32        });
     33      });
     34 
     35      let result = await SpecialPowers.spawn(iframe, [], async () => {
     36        content.document.addEventListener("click", (e) => {
     37          let data = JSON.stringify({
     38            type: "clicked",
     39            coords: {
     40              offsetX: e.clientX,
     41              offsetY: e.clientY
     42            }
     43          });
     44          content.window.parent.postMessage(data, "*");
     45        });
     46 
     47        content.window.parent.postMessage("listenerready", "*");
     48 
     49        return true;
     50      });
     51      ok(result, "Successfully installed event listener in OOP iframe");
     52 
     53      await readyPromise;
     54 
     55      let childMessagePromise = new Promise(resolve => {
     56        window.addEventListener("message", event => {
     57 
     58          let data = JSON.parse(event.data);
     59          if ("type" in data && data.type == "clicked") {
     60            let coordinates = {
     61              offsetX: data.coords.offsetX,
     62              offsetY: data.coords.offsetY
     63            };
     64            resolve(coordinates);
     65          }
     66        });
     67      });
     68 
     69      await synthesizeNativeTap(document.documentElement, 200, 200, function () {
     70        dump("Finished synthesizing click, waiting for OOPIF message...\n");
     71      });
     72 
     73      let clickCoordsInChild = await childMessagePromise;
     74 
     75      let expected_coord = 100; // because the iframe is offseted by (100, 100).
     76      ok(Math.abs(clickCoordsInChild.offsetX - expected_coord) < 3,
     77        `x-coord ${clickCoordsInChild.offsetX} landed near expected value ${expected_coord}`);
     78      ok(Math.abs(clickCoordsInChild.offsetY - expected_coord) < 3,
     79        `y-coord ${clickCoordsInChild.offsetY} landed near expected value ${expected_coord}`);
     80    }
     81 
     82    waitUntilApzStable()
     83      .then(test)
     84      .then(subtestDone, subtestFailed);
     85 
     86  </script>
     87  <style>
     88    body,
     89    html {
     90      margin: 0;
     91    }
     92 
     93    div {
     94      margin-left: 100px;
     95      margin-top: 100px;
     96      width: 500px;
     97    }
     98 
     99    iframe {
    100      width: 400px;
    101      height: 300px;
    102      border: solid 1px black;
    103    }
    104  </style>
    105 </head>
    106 <body>
    107  <div><iframe id="testframe"></iframe></div>
    108 </body>
    109 </html>