tor-browser

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

3d-point-mapping-coplanar.html (2396B)

      1 <!DOCTYPE html>
      2 <title>Hit test coplanar 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  .test {
     13    display: inline-block;
     14    height: 300px;
     15    width: 300px;
     16    margin: 20px;
     17  }
     18 
     19  .container {
     20    position: relative;
     21    height: 260px;
     22    width: 260px;
     23    margin: 20px;
     24  }
     25 
     26  .box {
     27    position: absolute;
     28    top: 20px;
     29    left: 30px;
     30    height: 100px;
     31    width: 200px;
     32    transform: translateZ(20px);
     33  }
     34 
     35  #box1 {
     36    background-color: #DDD;
     37  }
     38 
     39  #box2 {
     40    background-color: #CCC;
     41  }
     42 
     43  #box3 {
     44    background-color: #BBB;
     45    top: 60px;
     46  }
     47 
     48  #box4 {
     49    background-color: #AAA;
     50    top: 100px;
     51  }
     52 </style>
     53 
     54 <body>
     55  <div class="test">
     56    <div class="container" id="box1">
     57      <div class="box" id="box2"></div>
     58      <div class="box" id="box3"></div>
     59      <div class="box" id="box4"></div>
     60    </div>
     61  </div>
     62 </body>
     63 
     64 <script>
     65  class Point {
     66    constructor(x, y) {
     67      this.x = x;
     68      this.y = y;
     69    }
     70  };
     71  const tests = [{
     72      expectedElemId: 'box1',
     73      points: [
     74        new Point(59, 52),
     75        new Point(278, 59),
     76        new Point(58, 260),
     77        new Point(281, 269),
     78      ],
     79    },
     80    {
     81      expectedElemId: 'box2',
     82      points: [
     83        new Point(82, 68),
     84        new Point(109, 80),
     85        new Point(189, 71),
     86        new Point(268, 98)
     87      ],
     88    },
     89    {
     90      expectedElemId: 'box3',
     91      points: [
     92        new Point(73, 101),
     93        new Point(128, 136),
     94        new Point(206, 102),
     95        new Point(268, 138),
     96      ]
     97    },
     98    {
     99      expectedElemId: 'box4',
    100      points: [
    101        new Point(73, 144),
    102        new Point(72, 232),
    103        new Point(265, 146),
    104        new Point(264, 232),
    105      ]
    106    },
    107  ];
    108 
    109  tests.forEach(testcase => {
    110    test(t => {
    111      const expectedElem = document.getElementById(testcase.expectedElemId);
    112      for (const point of testcase.points) {
    113        const hitElem = document.elementFromPoint(point.x, point.y);
    114        assert_equals(hitElem, expectedElem,
    115          `point (${point.x}, ${point.y}) is inside element ${testcase.expectedElemId}`);
    116      }
    117    }, `${document.title}, hittesting ${testcase.expectedElemId})`);
    118  });
    119 </script>
    120 
    121 </html>