gfx/layers/apz/test/mochitest/helper_fission_irregular_areas.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4   <meta charset="utf-8">
   5   <title>Ensure irregular areas on top of OOPIFs hit-test properly</title>
   6   <script src="/tests/SimpleTest/SimpleTest.js"></script>
   7   <script src="/tests/SimpleTest/paint_listener.js"></script>
   8   <script src="helper_fission_utils.js"></script>
   9   <script src="apz_test_utils.js"></script>
  10   <script src="apz_test_native_event_utils.js"></script>
  11   <script>
  12
  13 fission_subtest_init();
  14
  15 FissionTestHelper.startTestPromise
  16   .then(waitUntilApzStable)
  17   .then(loadOOPIFrame("testframe", "helper_fission_empty.html"))
  18   .then(waitUntilApzStable)
  19   .then(test)
  20   .then(FissionTestHelper.subtestDone, FissionTestHelper.subtestFailed);
  21
  22 let make_oopif_scrollable = function() {
  23   // ensure the oopif is scrollable, and wait for the paint so that the
  24   // compositor also knows it's scrollable.
  25   document.body.style.height = "200vh";
  26   promiseApzFlushedRepaints().then(() => {
  27     let utils = SpecialPowers.getDOMWindowUtils(window);
  28     let result = {
  29       layersId: utils.getLayersId(),
  30       viewId: utils.getViewId(document.scrollingElement)
  31     };
  32     dump(`OOPIF computed IDs ${JSON.stringify(result)}\n`);
  33     FissionTestHelper.fireEventInEmbedder("OOPIF:Scrollable", result);
  34   });
  35   return true;
  36 };
  37
  38 async function test() {
  39   let iframe = document.getElementById("testframe");
  40
  41   let oopifScrollerIds = promiseOneEvent(window, "OOPIF:Scrollable", null);
  42   ok(await FissionTestHelper.sendToOopif(iframe, `(${make_oopif_scrollable})()`),
  43      "Ran code to make OOPIF scrollable");
  44   oopifScrollerIds = (await oopifScrollerIds).data;
  45
  46   let utils = SpecialPowers.getDOMWindowUtils(window);
  47
  48   // The triangle_overlay div overlays a part of the iframe. We do 3 hit-tests:
  49   // - one that hits the opaque part of the overlay
  50   // - one that hits the clipped-away part of the overlay div but is still
  51   //   inside the bounding box
  52   // - one that is not on the overlay at all, but on the part of the iframe not
  53   //   covered by the overlay.
  54   // For the latter two, we expect the hit-test to hit the OOPIF.
  55
  56   checkHitResult(await fissionHitTest({x: 20, y: 100}, iframe),
  57                  APZHitResultFlags.VISIBLE,
  58                  utils.getViewId(document.scrollingElement),
  59                  utils.getLayersId(),
  60                  "opaque part of overlay should hit parent doc hosting the OOPIF");
  61
  62   checkHitResult(await fissionHitTest({x: 180, y: 100}, iframe),
  63                  APZHitResultFlags.VISIBLE,
  64                  oopifScrollerIds.viewId,
  65                  oopifScrollerIds.layersId,
  66                  "clipped-away part of overlay should hit OOPIF");
  67
  68   checkHitResult(await fissionHitTest({x: 250, y: 100}, iframe),
  69                  APZHitResultFlags.VISIBLE,
  70                  oopifScrollerIds.viewId,
  71                  oopifScrollerIds.layersId,
  72                  "part of OOPIF outside the overlay bounding rect should hit the OOPIF");
  73 }
  74
  75   </script>
  76 </head>
  77 <body>
  78 <style>
  79 html, body {
  80     margin: 0;
  81 }
  82 iframe {
  83     position: absolute;
  84     width: 300px;
  85     height: 200px;
  86 }
  87
  88 #triangle_overlay {
  89     position: absolute;
  90     top: 0;
  91     left: 0;
  92     width: 200px;
  93     height: 200px;
  94     background-color: green;
  95     clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
  96 }
  97 </style>
  98 <iframe id="testframe"></iframe>
  99 <div id="triangle_overlay"></div>
 100 </body>
 101 </html>