tor-browser

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

3d-point-mapping-overlapping.html (2426B)

      1 <!DOCTYPE html>
      2 <title>Hit test overlapping elements</title>
      3 <link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-document-elementfrompoint">
      4 <script src="/resources/testharness.js"></script>
      5 <script src="/resources/testharnessreport.js"></script>
      6 
      7 <style type="text/css" media="screen">
      8  body {
      9    margin: 0;
     10  }
     11 
     12  #box1 {
     13    position: absolute;
     14    height: 300px;
     15    width: 300px;
     16    background-color: #DDD;
     17  }
     18 
     19  #box2 {
     20    position: absolute;
     21    top: 50px;
     22    left: 50px;
     23    height: 200px;
     24    width: 200px;
     25    background-color: #AAA;
     26    transform: translateZ(50px);
     27  }
     28 
     29  #box3 {
     30    position: relative;
     31    background-color: blue;
     32    height: 100px;
     33    width: 100px;
     34    margin: 50px;
     35  }
     36 
     37  #overlay {
     38    position: absolute;
     39    height: 310px;
     40    width: 150px;
     41    background-color: rgba(0, 128, 0, 0.3);
     42    transform: translateZ(100px);
     43  }
     44 </style>
     45 
     46 <body>
     47  <div id="box1">
     48    <div id="box2">
     49      <div id="box3"></div>
     50    </div>
     51    <div id="overlay"></div>
     52  </div>
     53 </body>
     54 
     55 <script>
     56  class Point {
     57    constructor(x, y) {
     58      this.x = x;
     59      this.y = y;
     60    }
     61  };
     62  const tests = [{
     63      expectedElemId: 'box1',
     64      points: [
     65        new Point(151, 254),
     66        new Point(152, 47),
     67        new Point(288, 13),
     68        new Point(289, 283),
     69      ]
     70    },
     71    {
     72      expectedElemId: 'box2',
     73      points: [
     74        new Point(158, 229),
     75        new Point(206, 220),
     76        new Point(223, 158),
     77        new Point(157, 57),
     78      ]
     79    },
     80    {
     81      expectedElemId: 'box3',
     82      points: [
     83        new Point(157, 191),
     84        new Point(193, 190),
     85        new Point(196, 103),
     86        new Point(152, 108),
     87      ]
     88    },
     89    {
     90      // Two points over every box.
     91      expectedElemId: 'overlay',
     92      points: [
     93        new Point(132, 178),
     94        new Point(125, 113),
     95        new Point(81, 67),
     96        new Point(92, 223),
     97        new Point(32, 270),
     98        new Point(28, 21),
     99      ]
    100    }
    101  ];
    102 
    103  tests.forEach(testcase => {
    104    test(t => {
    105      const expectedElem = document.getElementById(testcase.expectedElemId);
    106      for (const point of testcase.points) {
    107        const hitElem = document.elementFromPoint(point.x, point.y);
    108        assert_equals(hitElem, expectedElem,
    109          `point (${point.x}, ${point.y}) is inside element ${testcase.expectedElemId}`);
    110      }
    111    }, `${document.title}, hittesting ${testcase.expectedElemId})`);
    112  });
    113 </script>
    114 
    115 </html>