third_party/WebKit/LayoutTests/fast/events/document-elementFromPoint.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1">
   5 <style>
   6 * {
   7     margin: 0;
   8     padding: 0;
   9 }
  10
  11 body {
  12     height: 2048px;
  13     width: 2048px;
  14     cursor: crosshair; /* Debugging */
  15 }
  16
  17 .box {
  18     width: 200px;
  19     height: 100px;
  20     border: 10px solid gray;
  21 }
  22
  23 .line {
  24     width:150px;
  25     height:20px;
  26     background: gray;
  27 }
  28
  29 .target {
  30     background: lightGreen !important; /* Elements we click on are green */
  31 }
  32
  33 #absolute {
  34     position: absolute;
  35     left: 100px;
  36     top: 125px;
  37 }
  38
  39 #relative {
  40     position: relative;
  41     left: 40px;
  42     top: -50px;
  43 }
  44
  45 #fixed {
  46     position: fixed;
  47     top: 50px;
  48     left: 200px;
  49     height: 50px;
  50 }
  51
  52 #filler {
  53     position: absolute;
  54     top: 0;
  55     width: 100%;
  56     height: 100%;
  57 }
  58
  59 table {
  60     margin-top: 300px;
  61     margin-left: 40px;
  62     width: 400px;
  63 }
  64
  65 th { height: 30px; }
  66
  67 #table-content {
  68     position: relative;
  69     border: 10px solid gray;
  70 }
  71
  72 #columns {
  73     position: absolute;
  74     width: 400px;
  75     height: 200px;
  76     top: 220px;
  77     left: 500px;
  78     border: 1px solid black;
  79     -webkit-column-count: 3;
  80     column-count: 3;
  81     column-fill: auto;
  82 }
  83
  84 .column-line {
  85     width: 100px;
  86     height: 20px;
  87     background: gray;
  88 }
  89
  90 #transformed {
  91     position: absolute;
  92     top: 470px;
  93     height: 120px;
  94     width: 200px;
  95     transform: translate(100px, 50px) rotate(20deg);
  96 }
  97
  98 #overflow {
  99     overflow: hidden; /* No scrollbars */
 100     position: absolute;
 101     width: 300px;
 102     height: 200px;
 103     top: 450px;
 104     left: 470px;
 105     border: 1px solid black;
 106     direction: rtl;
 107 }
 108
 109 #overflow-contents {
 110     height: 500px;
 111     width: 120%;
 112 }
 113
 114 #inside-overflow {
 115     height: 550px;
 116     width: 50%;
 117 }
 118
 119 #results {
 120     position: absolute;
 121     left: 30px;
 122     top: 750px;
 123 }
 124
 125 #mouse-position {
 126     position: absolute;
 127     left: 30px;
 128     top: 670px;
 129     color: gray;
 130 }
 131 </style>
 132 </head>
 133 <body>
 134
 135 <!--
 136   This test is modeled after <LayoutTests/fast/events/offsetX-offsetY.html>,
 137   but it is designed to not depend on inline text content to position the
 138   targets on which we click.
 139 -->
 140
 141 <!-- Filler, to force scrolling -->
 142 <div id="filler"></div>
 143
 144 <!-- Absolute, Relative, and Fixed position -->
 145 <div id="absolute" class="box target">
 146     <span style="position:absolute;left:0;top:0">Absolute</span>
 147     <div id="relative" class="box target">Relative</div>
 148     <div id="fixed" class="box target">Fixed</div>
 149 </div>
 150
 151 <!-- Table -->
 152 <table id="table" border="2" cellpadding="3" cellpadding="2">
 153     <tr><th>x</th><th>x</th></tr>
 154     <tr>
 155         <td><div id="table-content" class="line target">Table Content</div></td>
 156         <td>
 157             <div class="line"></div><div class="line"></div>
 158             <div class="line"></div><div class="line"></div>
 159             <div class="line"></div><div class="line"></div>
 160         </td>
 161     </tr>
 162 </table>
 163
 164 <!-- Columns -->
 165 <div id="columns">
 166     <div class="column-line"></div><div class="column-line"></div>
 167     <div class="column-line"></div><div class="column-line"></div>
 168     <div class="column-line"></div><div class="column-line"></div>
 169     <div class="column-line"></div><div class="column-line"></div>
 170     <div class="column-line"></div><div class="column-line"></div>
 171     <div class="column-line"></div><div class="column-line"></div>
 172     <div id="in-columns" class="column-line target">In Columns</div>
 173     <div class="column-line"></div><div class="column-line"></div>
 174     <div class="column-line"></div><div class="column-line"></div>
 175     <div class="column-line"></div><div class="column-line"></div>
 176     <div class="column-line"></div><div class="column-line"></div>
 177     <div class="column-line"></div><div class="column-line"></div>
 178     <div class="column-line"></div><div class="column-line"></div>
 179     <div class="column-line"></div><div class="column-line"></div>
 180 </div>
 181
 182 <!-- Transformed -->
 183 <div id="transformed" class="box target">Transformed</div>
 184
 185 <!-- Overflowed Content -->
 186 <div id="overflow">
 187     <div id="overflow-contents">
 188         <div class="line"></div><div class="line"></div><div class="line"></div>
 189         <div class="line"></div><div class="line"></div><div class="line"></div>
 190         <div class="line"></div><div class="line"></div><div class="line"></div>
 191         <div id="inside-overflow" class="target">In RTL overflow</div>
 192         <div class="line"></div><div class="line"></div><div class="line"></div>
 193     </div>
 194 </div>
 195
 196 <!-- Debugging -->
 197 <div id="results"></div>
 198 <div id="mouse-position"></div>
 199
 200 <script>
 201 // Debug mode.
 202 if (!window.testRunner) {
 203     document.body.onmousemove = function(e) {
 204         var resultBox = document.getElementById('mouse-position');
 205         var offsets = 'element id: ' + e.target.id + '<br> clientX: ' + e.clientX + ' clientY: ' + e.clientY + '<br>';
 206         offsets += 'offsetX: ' + e.offsetX + ' offsetY: ' + e.offsetY;
 207         resultBox.innerHTML = offsets;
 208     }
 209 }
 210
 211 function log(s) {
 212     var resultsDiv = document.getElementById('results');
 213     resultsDiv.innerHTML += s + '<br>';
 214 }
 215
 216 function dispatchEvent(clientX, clientY, expectedElementID, expectedOffsetX, expectedOffsetY) {
 217     var e = document.createEvent("MouseEvent");
 218     e.initMouseEvent("click", true, true, window, 1, 1, 1, clientX, clientY, false, false, false, false, 0, document);
 219     e.expectedElementID = expectedElementID;
 220     e.expectedOffsetX = expectedOffsetX;
 221     e.expectedOffsetY = expectedOffsetY;
 222     var target = document.elementFromPoint(e.clientX, e.clientY);
 223     target.dispatchEvent(e);
 224 }
 225
 226 function clicked(event) {
 227     var element = event.target;
 228     var result;
 229     if (element.id === event.expectedElementID && event.offsetX === event.expectedOffsetX && event.offsetY === event.expectedOffsetY) {
 230         result = 'PASS:';
 231         result += ' event at (' + event.clientX + ', ' + event.clientY + ')';
 232         result += ' hit ' + element.id;
 233         result += ' at offset (' + event.offsetX + ', ' + event.offsetY + ')';
 234     } else {
 235         result = 'FAIL:';
 236         result += ' event at (' + event.clientX + ', ' + event.clientY + ')';
 237         result += ' expected to hit ' + event.expectedElementID;
 238         result += ' at (' + event.expectedOffsetX + ', ' + event.expectedOffsetY + ')';
 239         result += ' but hit ' + element.id + ' at (' + event.offsetX + ', ' + event.offsetY + ')';
 240     }
 241     log(result);
 242 }
 243
 244 if (window.testRunner) {
 245     window.testRunner.dumpAsText();
 246     window.testRunner.waitUntilDone();
 247 }
 248
 249 // Start the test.
 250 document.body.addEventListener('click', clicked, false);
 251 window.addEventListener('load', function() {
 252     setTimeout(function() {
 253         // Scroll body and inner overflow box.
 254         window.scrollTo(20, 100);
 255         var overflowContent = document.getElementById('overflow');
 256         overflowContent.scrollLeft = 80;
 257         overflowContent.scrollTop = 60;
 258         setTimeout(function() {
 259             // Dispatch events.
 260             dispatchEvent(109, 57, 'absolute', 29, 32);
 261             dispatchEvent(161, 13, 'relative', 31, 28);
 262             dispatchEvent(40, 297, 'table-content', 15, 18);
 263             dispatchEvent(122, 407, 'transformed', 18, 15);
 264             dispatchEvent(573, 480, 'inside-overflow', 2, 9);
 265             dispatchEvent(707, 174, 'in-columns', 87, 13);
 266             dispatchEvent(241, 67, 'fixed', 41, 17);
 267             dispatchEvent(244, 102, 'fixed', 44, 52);
 268             dispatchEvent(388, 88, 'fixed', 188, 38);
 269
 270             // End asynchronous test.
 271             if (window.testRunner)
 272                 window.testRunner.notifyDone();
 273         }, 0);
 274     }, 0);
 275 }, false);
 276 </script>
 277 </body>
 278 </html>