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 }
  81
  82 .column-line {
  83     width: 100px;
  84     height: 20px;
  85     background: gray;
  86 }
  87
  88 #transformed {
  89     position: absolute;
  90     top: 470px;
  91     height: 120px;
  92     width: 200px;
  93     -webkit-transform: translate(100px, 50px) rotate(20deg);
  94 }
  95
  96 #overflow {
  97     overflow: hidden; /* No scrollbars */
  98     position: absolute;
  99     width: 300px;
 100     height: 200px;
 101     top: 450px;
 102     left: 470px;
 103     border: 1px solid black;
 104     direction: rtl;
 105 }
 106
 107 #overflow-contents {
 108     height: 500px;
 109     width: 120%;
 110 }
 111
 112 #inside-overflow {
 113     height: 550px;
 114     width: 50%;
 115 }
 116
 117 #results {
 118     position: absolute;
 119     left: 30px;
 120     top: 750px;
 121 }
 122
 123 #mouse-position {
 124     position: absolute;
 125     left: 30px;
 126     top: 670px;
 127     color: gray;
 128 }
 129
 130 #subpixel-test {
 131     width: 4.5px;
 132 }
 133 </style>
 134 </head>
 135 <body>
 136
 137 <!--
 138   This test is modeled after <LayoutTests/fast/events/offsetX-offsetY.html>,
 139   but it is designed to not depend on inline text content to position the
 140   targets on which we click.
 141 -->
 142
 143 <!-- Filler, to force scrolling -->
 144 <div id="filler"></div>
 145
 146 <!-- Absolute, Relative, and Fixed position -->
 147 <div id="absolute" class="box target">
 148     <span style="position:absolute;left:0;top:0">Absolute</span>
 149     <div id="relative" class="box target">Relative</div>
 150     <div id="fixed" class="box target">Fixed</div>
 151 </div>
 152
 153 <!-- Table -->
 154 <table id="table" border="2" cellpadding="3" cellpadding="2">
 155     <tr><th>x</th><th>x</th></tr>
 156     <tr>
 157         <td><div id="table-content" class="line target">Table Content</div></td>
 158         <td>
 159             <div class="line"></div><div class="line"></div>
 160             <div class="line"></div><div class="line"></div>
 161             <div class="line"></div><div class="line"></div>
 162         </td>
 163     </tr>
 164 </table>
 165
 166 <!-- Columns -->
 167 <div id="columns">
 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 class="column-line"></div><div class="column-line"></div>
 173     <div class="column-line"></div><div class="column-line"></div>
 174     <div id="in-columns" class="column-line target">In Columns</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 class="column-line"></div><div class="column-line"></div>
 181     <div class="column-line"></div><div class="column-line"></div>
 182 </div>
 183
 184 <!-- Transformed -->
 185 <div id="transformed" class="box target">Transformed</div>
 186
 187 <!-- Overflowed Content -->
 188 <div id="overflow">
 189     <div id="overflow-contents">
 190         <div class="line"></div><div class="line"></div><div class="line"></div>
 191         <div class="line"></div><div class="line"></div><div class="line"></div>
 192         <div class="line"></div><div class="line"></div><div class="line"></div>
 193         <div id="inside-overflow" class="target">In RTL overflow</div>
 194         <div class="line"></div><div class="line"></div><div class="line"></div>
 195     </div>
 196 </div>
 197
 198 <!-- Debugging -->
 199 <div id="results"></div>
 200 <div id="mouse-position"></div>
 201
 202 <!-- Test for subpixel support -->
 203 <div id="subpixel-test"></div>
 204 <script>
 205 // Debug mode.
 206 if (!window.layoutTestController) {
 207     document.body.onmousemove = function(e) {
 208         var resultBox = document.getElementById('mouse-position');
 209         var offsets = 'element id: ' + e.target.id + '<br> clientX: ' + e.clientX + ' clientY: ' + e.clientY + '<br>';
 210         offsets += 'offsetX: ' + e.offsetX + ' offsetY: ' + e.offsetY;
 211         resultBox.innerHTML = offsets;
 212     }
 213 }
 214
 215 function log(s) {
 216     var resultsDiv = document.getElementById('results');
 217     resultsDiv.innerHTML += s + '<br>';
 218 }
 219
 220 function dispatchEvent(clientX, clientY, expectedElementID, expectedOffsetX, expectedOffsetY) {
 221     var e = document.createEvent("MouseEvent");
 222     e.initMouseEvent("click", true, true, window, 1, 1, 1, clientX, clientY, false, false, false, false, 0, document);
 223     e.expectedElementID = expectedElementID;
 224     e.expectedOffsetX = expectedOffsetX;
 225     e.expectedOffsetY = expectedOffsetY;
 226     var target = document.elementFromPoint(e.clientX, e.clientY);
 227     target.dispatchEvent(e);
 228 }
 229
 230 function clicked(event) {
 231     var element = event.target;
 232     var result;
 233     if (element.id === event.expectedElementID && event.offsetX === event.expectedOffsetX && event.offsetY === event.expectedOffsetY) {
 234         result = 'PASS:';
 235         result += ' event at (' + event.clientX + ', ' + event.clientY + ')';
 236         result += ' hit ' + element.id;
 237         result += ' at offset (' + event.offsetX + ', ' + event.offsetY + ')';
 238     } else {
 239         result = 'FAIL:';
 240         result += ' event at (' + event.clientX + ', ' + event.clientY + ')';
 241         result += ' expected to hit ' + event.expectedElementID;
 242         result += ' at (' + event.expectedOffsetX + ', ' + event.expectedOffsetY + ')';
 243         result += ' but hit ' + element.id + ' at (' + event.offsetX + ', ' + event.offsetY + ')';
 244     }
 245     log(result);
 246 }
 247
 248 if (window.layoutTestController) {
 249     window.layoutTestController.dumpAsText();
 250     window.layoutTestController.waitUntilDone();
 251 }
 252
 253 // Start the test.
 254 document.body.addEventListener('click', clicked, false);
 255 window.addEventListener('load', function() {
 256     var r = document.getElementById('subpixel-test').getBoundingClientRect();
 257     var hasSubpixelSupport = r.right - r.left == 4.5;
 258
 259     setTimeout(function() {
 260         // Scroll body and inner overflow box.
 261         window.scrollTo(20, 100);
 262         var overflowContent = document.getElementById('overflow');
 263         overflowContent.scrollLeft = 80;
 264         overflowContent.scrollTop = 60;
 265         setTimeout(function() {
 266             // Dispatch events.
 267             dispatchEvent(109, 57, 'absolute', 29, 32);
 268             dispatchEvent(161, 13, 'relative', 31, 28);
 269             dispatchEvent(40, 297, 'table-content', 15, 18);
 270             dispatchEvent(122, 407, 'transformed', 18, 15);
 271             dispatchEvent(573, 480, 'inside-overflow', 2, 9);
 272             dispatchEvent(707, 174, 'in-columns', hasSubpixelSupport ? 87 : 88, 13);
 273             dispatchEvent(241, 67, 'fixed', 41, 17);
 274             dispatchEvent(244, 102, 'fixed', 44, 52);
 275             dispatchEvent(388, 88, 'fixed', 188, 38);
 276
 277             // End asynchronous test.
 278             if (window.layoutTestController)
 279                 window.layoutTestController.notifyDone();
 280         }, 0);
 281     }, 0);
 282 }, false);
 283 </script>
 284 </body>
 285 </html>