Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Ensure irregular areas on top of OOPIFs hit-test properly</title>
  <script src="/tests/SimpleTest/SimpleTest.js"></script>
  <script src="/tests/SimpleTest/paint_listener.js"></script>
  <script src="helper_fission_utils.js"></script>
  <script src="apz_test_utils.js"></script>
  <script src="apz_test_native_event_utils.js"></script>
  <script>
async function test() {
  const iframe = document.getElementById("testframe");
  await setupCrossOriginIFrame(iframe, "helper_fission_plain.html");
  const remoteType = await SpecialPowers.spawn(iframe, [], async () => {
    return await SpecialPowers.spawnChrome([], () => {
      return windowGlobalParent.domProcess.remoteType;
    });
  });
  if (remoteType === "web") {
    is(SpecialPowers.effectiveIsolationStrategy(), SpecialPowers.ISOLATION_STRATEGY.IsolateHighValue);
    ok(true, "Skipping this test since the document on example.com got loaded in the same content process");
    return;
  }
  let oopifScrollerIds = await SpecialPowers.spawn(iframe, [], async () => {
    // ensure the oopif is scrollable, and wait for the paint so that the
    // compositor also knows it's scrollable.
    content.document.body.style.height = "200vh";
    await content.wrappedJSObject.promiseApzFlushedRepaints();
    let utils = SpecialPowers.getDOMWindowUtils(content.window);
    let result = {
      layersId: utils.getLayersId(),
      viewId: utils.getViewId(content.document.scrollingElement)
    };
    dump(`OOPIF computed IDs ${JSON.stringify(result)}\n`);
    return result;
  });
  let utils = SpecialPowers.getDOMWindowUtils(window);
  // The triangle_overlay div overlays a part of the iframe. We do 3 hit-tests:
  // - one that hits the opaque part of the overlay
  // - one that hits the clipped-away part of the overlay div but is still
  //   inside the bounding box
  // - one that is not on the overlay at all, but on the part of the iframe not
  //   covered by the overlay.
  // For the latter two, we expect the hit-test to hit the OOPIF.
  checkHitResult(await hitTestOOPIF({x: 20, y: 100}, iframe),
                 APZHitResultFlags.VISIBLE | APZHitResultFlags.IRREGULAR_AREA,
                 utils.getViewId(document.scrollingElement),
                 utils.getLayersId(),
                 "opaque part of overlay should hit parent doc hosting the OOPIF");
  checkHitResult(await hitTestOOPIF({x: 180, y: 100}, iframe),
                 APZHitResultFlags.VISIBLE,
                 oopifScrollerIds.viewId,
                 oopifScrollerIds.layersId,
                 "clipped-away part of overlay should hit OOPIF");
  checkHitResult(await hitTestOOPIF({x: 250, y: 100}, iframe),
                 APZHitResultFlags.VISIBLE,
                 oopifScrollerIds.viewId,
                 oopifScrollerIds.layersId,
                 "part of OOPIF outside the overlay bounding rect should hit the OOPIF");
}
if (!SpecialPowers.Services.appinfo.fissionAutostart) {
  ok(true, "This test doesn't need to run with disabling Fission");
  subtestDone();
} else {
  waitUntilApzStable()
    .then(test)
    .then(subtestDone, subtestFailed);
}
  </script>
</head>
<body>
<style>
html, body {
    margin: 0;
}
iframe {
    position: absolute;
    width: 300px;
    height: 200px;
}
#triangle_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    background-color: green;
    clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
}
</style>
<iframe id="testframe"></iframe>
<div id="triangle_overlay"></div>
</body>
</html>