tor-browser

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

elementsFromPoint-simple.html (3932B)

      1 <!DOCTYPE HTML>
      2 <script src="/resources/testharness.js"></script>
      3 <script src="/resources/testharnessreport.js"></script>
      4 <script src="resources/elementsFromPoint.js"></script>
      5 <style>
      6 html, body {
      7    margin: 0;
      8    padding: 0;
      9 }
     10 body {
     11    height: 500px;
     12 }
     13 #simpleDiv {
     14    width: 200px;
     15    height: 200px;
     16    background-color: rgba(0,0,255,0.5);
     17 }
     18 #divWithPseudo {
     19    position: absolute;
     20    left: 50px;
     21    top: 50px;
     22    width: 100px;
     23    height: 100px;
     24    background-color: rgba(255,0,0,0.5);
     25 }
     26 #divWithPseudo::before {
     27    position: absolute;
     28    left: 20px;
     29    top: 20px;
     30    width: 100px;
     31    height: 100px;
     32    content: "::before";
     33    background-color: rgba(255,0,0,0.5);
     34    z-index: 9999;
     35 }
     36 #divBetweenPseudo {
     37    position: absolute;
     38    left: 100px;
     39    top: 100px;
     40    width: 100px;
     41    height: 100px;
     42    background-color: rgba(0,255,0,0.5);
     43 }
     44 #withMargin {
     45    margin-top: -15px;
     46    width: 200px;
     47    height: 200px;
     48    background-color: rgba(0,0,0,0.5);
     49 }
     50 #inlineSpan {
     51    float: right;
     52    background-color: yellow;
     53    width: 100px;
     54    height: 1em;
     55 }
     56 #noPointerEvents {
     57    position: absolute;
     58    left: 50px;
     59    top: 50px;
     60    width: 100px;
     61    height: 300px;
     62    background-color: rgba(0,0,0,0.1);
     63    pointer-events: none;
     64 }
     65 #threeD {
     66    position: absolute;
     67    transform: translate3d(-100px, -100px, 10px);
     68    left: 140px;
     69    top: 140px;
     70    width: 200px;
     71    height: 50px;
     72    background-color: rgba(255,255,255,0.5);
     73 }
     74 </style>
     75 <div id="simpleDiv"></div>
     76 <div id="divWithPseudo"></div>
     77 <div id="divBetweenPseudo"></div>
     78 <div id="withMargin"><span id="inlineSpan"></span></div>
     79 <div id="noPointerEvents"></div>
     80 <div id="threeD"></div>
     81 <script>
     82 var body = document.body;
     83 var html = document.documentElement;
     84 test(function() {
     85    checkElementsFromPointFourCorners('document', 'simpleDiv',
     86        [simpleDiv, body, html],
     87        [simpleDiv, body, html],
     88        [withMargin, simpleDiv, body, html],
     89        [divBetweenPseudo, inlineSpan, withMargin, simpleDiv, body, html]);
     90 }, "elementsFromPoint for each corner of a simple div");
     91 
     92 test(function() {
     93    checkElementsFromPointFourCorners('document', 'divWithPseudo',
     94        [threeD, divWithPseudo, simpleDiv, body, html],
     95        [threeD, divWithPseudo, simpleDiv, body, html],
     96        [divWithPseudo, simpleDiv, body, html],
     97        [divWithPseudo, divBetweenPseudo, divWithPseudo, simpleDiv, body, html]);
     98 }, "elementsFromPoint for each corner of a div that has a pseudo-element");
     99 
    100 test(function() {
    101    checkElementsFromPointFourCorners('document', 'divBetweenPseudo',
    102        [divWithPseudo, divBetweenPseudo, divWithPseudo, simpleDiv, body, html],
    103        [divBetweenPseudo, simpleDiv, body, html],
    104        [divBetweenPseudo, inlineSpan, withMargin, simpleDiv, body, html],
    105        [divBetweenPseudo, inlineSpan, withMargin, simpleDiv, body, html]);
    106 }, "elementsFromPoint for each corner of a div that is between another div and its pseudo-element");
    107 
    108 test(function() {
    109    checkElementsFromPointFourCorners('document', 'withMargin',
    110        [withMargin, simpleDiv, body, html],
    111        [divBetweenPseudo, inlineSpan, withMargin, simpleDiv, body, html],
    112        [withMargin, body, html],
    113        [withMargin, body, html]);
    114 }, "elementsFromPoint for each corner of a div that has a margin");
    115 
    116 test(function() {
    117    checkElementsFromPointFourCorners('document', 'noPointerEvents',
    118        [threeD, divWithPseudo, simpleDiv, body, html],
    119        [threeD, divWithPseudo, simpleDiv, body, html],
    120        [withMargin, body, html],
    121        [withMargin, body, html]);
    122 }, "elementsFromPoint for each corner of a div with pointer-events:none");
    123 
    124 test(function() {
    125    checkElementsFromPointFourCorners('document', 'threeD',
    126        [threeD, simpleDiv, body, html],
    127        [threeD, body, html],
    128        [threeD, simpleDiv, body, html],
    129        [threeD, body, html]);
    130 }, "elementsFromPoint for each corner of a div with a 3d transform");
    131 </script>