tor-browser

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

helper_hittest_clippath.html (4614B)

      1 <!DOCTYPE HTML>
      2 <html>
      3 <head>
      4  <title>Hit-testing an iframe covered by an element with a clip-path</title>
      5  <script type="application/javascript" src="apz_test_utils.js"></script>
      6  <script type="application/javascript" src="apz_test_native_event_utils.js"></script>
      7  <script type="application/javascript" src="/tests/SimpleTest/paint_listener.js"></script>
      8  <meta name="viewport" content="width=device-width"/>
      9  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     10 <style>
     11    html, body { margin: 0; }
     12    #clipped {
     13        width: 400px;
     14        height: 400px;
     15        background-color: green;
     16        position: absolute;
     17        top: 100px;
     18        left: 100px;
     19        clip-path: circle(150px);
     20    }
     21    iframe {
     22        width: 400px;
     23        height: 300px;
     24        border: 0px solid black;
     25    }
     26 </style>
     27 </head>
     28 <body style="height: 5000px">
     29 <iframe id="sub" srcdoc="<!DOCTYPE html><body style='height: 5000px'><div style='position: absolute; top: 150px; left: 150px; width: 300px; height: 300px; background-color: blue;'></div>
     30 when this page loads, the blue rect should be behind the green circle. mousing over the area with the blue rect and scrolling with the wheel or trackpad should cause the iframe to scroll."></iframe>
     31 <div id="clipped"></div>
     32 <script>
     33 
     34 async function test() {
     35  var config = getHitTestConfig();
     36  var utils = config.utils;
     37 
     38  // layerize the iframe
     39  var subwindow = document.getElementById("sub").contentWindow;
     40  var subscroller = subwindow.document.scrollingElement;
     41  var subutils = SpecialPowers.getDOMWindowUtils(subwindow);
     42  subutils.setDisplayPortForElement(0, 0, 400, 1000, subscroller, 1);
     43  await promiseApzFlushedRepaints();
     44 
     45  var rootViewId = utils.getViewId(document.scrollingElement);
     46  var iframeViewId = subutils.getViewId(subscroller);
     47  var layersId = utils.getLayersId();
     48  is(subutils.getLayersId(), layersId, "iframe is not OOP");
     49 
     50  checkHitResult(hitTest({ x: 10, y: 10 }),
     51      APZHitResultFlags.VISIBLE,
     52      iframeViewId,
     53      layersId,
     54      `(simple) uninteresting point inside the iframe`);
     55  checkHitResult(hitTest({ x: 500, y: 10 }),
     56      APZHitResultFlags.VISIBLE,
     57      rootViewId,
     58      layersId,
     59      `(simple) uninteresting point in the root scroller`);
     60  checkHitResult(hitTest({ x: 110, y: 110 }),
     61      APZHitResultFlags.VISIBLE,
     62      iframeViewId,
     63      layersId,
     64      `(simple) point in the iframe behind overlaying div, but outside the bounding box of the clip path`);
     65  checkHitResult(hitTest({ x: 160, y: 160 }),
     66      APZHitResultFlags.VISIBLE,
     67      iframeViewId,
     68      layersId,
     69      `(simple) point in the iframe behind overlaying div, inside the bounding box of the clip path, but outside the actual clip shape`);
     70  checkHitResult(hitTest({ x: 300, y: 200 }),
     71      APZHitResultFlags.VISIBLE,
     72      rootViewId,
     73      layersId,
     74      `(simple) point inside the clip shape of the overlaying div`);
     75 
     76  // Now we turn the "simple" clip-path that WR can handle into a more complex
     77  // one that needs a mask. Then run the checks again; the expected results for
     78  // WR are slightly different
     79  document.getElementById("clipped").style.clipPath = "polygon(" +
     80    "50px 200px, 75px 75px, 200px 50px, 205px 55px, 210px 50px, " +
     81    "215px 55px, 220px 50px, 225px 55px, 230px 50px, 235px 55px, " +
     82    "240px 50px, 245px 55px, 250px 50px, 255px 55px, 260px 50px, " +
     83    "265px 55px, 270px 50px, 275px 55px, 280px 50px, 350px 200px, " +
     84    "200px 350px)";
     85  await promiseApzFlushedRepaints();
     86 
     87  checkHitResult(hitTest({ x: 10, y: 10 }),
     88      APZHitResultFlags.VISIBLE,
     89      iframeViewId,
     90      layersId,
     91      `(complex) uninteresting point inside the iframe`);
     92  checkHitResult(hitTest({ x: 500, y: 10 }),
     93      APZHitResultFlags.VISIBLE,
     94      rootViewId,
     95      layersId,
     96      `(complex) uninteresting point in the root scroller`);
     97  checkHitResult(hitTest({ x: 110, y: 110 }),
     98      APZHitResultFlags.VISIBLE,
     99      iframeViewId,
    100      layersId,
    101      `(complex) point in the iframe behind overlaying div, but outside the bounding box of the clip path`);
    102  checkHitResult(hitTest({ x: 160, y: 160 }),
    103      APZHitResultFlags.VISIBLE,
    104      iframeViewId,
    105      layersId,
    106      `(complex) point in the iframe behind overlaying div, inside the bounding box of the clip path, but outside the actual clip shape`);
    107  checkHitResult(hitTest({ x: 300, y: 200 }),
    108      APZHitResultFlags.VISIBLE,
    109      iframeViewId,
    110      layersId,
    111      `(complex) point inside the clip shape of the overlaying div`);
    112 }
    113 
    114 waitUntilApzStable()
    115    .then(test)
    116    .then(subtestDone, subtestFailed);
    117 </script>
    118 </body></html>