third_party/WebKit/LayoutTests/fast/dom/elementsFromPoint/elementsFromPoint-simple.html

   1 <!DOCTYPE HTML>
   2 <script src="../../../resources/js-test.js"></script>
   3 <script src="resources/elementsFromPoint.js"></script>
   4 <style>
   5 html, body {
   6     margin: 0;
   7     padding: 0;
   8 }
   9 body {
  10     height: 500px;
  11 }
  12 #simpleDiv {
  13     width: 200px;
  14     height: 200px;
  15     background-color: rgba(0,0,255,0.5);
  16 }
  17 #divWithPseudo {
  18     position: absolute;
  19     left: 50px;
  20     top: 50px;
  21     width: 100px;
  22     height: 100px;
  23     background-color: rgba(255,0,0,0.5);
  24 }
  25 #divWithPseudo::before {
  26     position: absolute;
  27     left: 20px;
  28     top: 20px;
  29     width: 100px;
  30     height: 100px;
  31     content: "::before";
  32     background-color: rgba(255,0,0,0.5);
  33     z-index: 9999;
  34 }
  35 #divBetweenPseudo {
  36     position: absolute;
  37     left: 100px;
  38     top: 100px;
  39     width: 100px;
  40     height: 100px;
  41     background-color: rgba(0,255,0,0.5);
  42 }
  43 #withMargins {
  44     margin-top: -15px;
  45     width: 200px;
  46     height: 200px;
  47     background-color: rgba(0,0,0,0.5);
  48 }
  49 #inlineSpan {
  50     float: right;
  51     background-color: yellow;
  52     width: 100px;
  53     height: 1em;
  54 }
  55 #noPointerEvents {
  56     position: absolute;
  57     left: 50px;
  58     top: 50px;
  59     width: 100px;
  60     height: 300px;
  61     background-color: rgba(0,0,0,0.1);
  62     pointer-events: none;
  63 }
  64 #threeD {
  65     position: absolute;
  66     transform: translate3d(-100px, -100px, 10px);
  67     left: 140px;
  68     top: 140px;
  69     width: 200px;
  70     height: 50px;
  71     background-color: rgba(255,255,255,0.5);
  72 }
  73 </style>
  74 <div id="simpleDiv"></div>
  75 <div id="divWithPseudo"></div>
  76 <div id="divBetweenPseudo"></div>
  77 <div id="withMargins"><span id="inlineSpan"></span></div>
  78 <div id="noPointerEvents"></div>
  79 <div id="threeD"></div>
  80 <div id="console"></div>
  81 <script>
  82 window.jsTestIsAsync = true;
  83
  84 if (window.testRunner)
  85     testRunner.dumpAsText();
  86
  87 if (window.internals)
  88     internals.settings.setMockScrollbarsEnabled(true);
  89
  90 onload = function() {
  91     // Iterate through each of the elements and verify that they are present in
  92     // elementsFromPoint(x, y) where (x, y) is any of the four corners.
  93     ['simpleDiv', 'divWithPseudo', 'divBetweenPseudo', 'withMargins', 'inlineSpan', 'noPointerEvents', 'threeD'].forEach(function(id) {
  94         checkElementsFromPointFourCorners('document', 'document.getElementById(\'' + id + '\')');
  95     });
  96
  97     // Check ordering of results.
  98     var divWithPseudoRect = document.getElementById('divWithPseudo').getBoundingClientRect();
  99     assertElementsFromPoint(
 100         'document.elementsFromPoint(' + (divWithPseudoRect.left + 1) + ', ' + (divWithPseudoRect.top + 1) + ')',
 101         [threeD, divWithPseudo, simpleDiv, document.body, document.documentElement]);
 102     assertElementsFromPoint(
 103         'document.elementsFromPoint(' + (divWithPseudoRect.right - 1) + ', ' + (divWithPseudoRect.bottom - 1) + ')',
 104         [divWithPseudo, divBetweenPseudo, divWithPseudo, simpleDiv, document.body, document.documentElement]);
 105
 106     finishJSTest();
 107 }
 108 </script>