LayoutTests/fast/events/offsetX-offsetY.html

   1 <html>
   2 <head>
   3   <title>Test offsetX/offsetY on various types of elements</title>
   4   <script type="text/javascript" charset="utf-8">
   5     if (window.testRunner) {
   6         testRunner.dumpAsText();
   7         testRunner.waitUntilDone();
   8     }
   9
  10     function mousemoved(e)
  11     {
  12       var resultBox = document.getElementById('mousepos');
  13       var offsets = 'element id: ' + e.target.id + '<br> clientX: ' + e.clientX + ' clientY: ' + e.clientY + '<br>';
  14       offsets += 'offsetX: ' + e.offsetX + ' offsetY: ' + e.offsetY;
  15       resultBox.innerHTML = offsets;
  16     }
  17
  18     function log(s)
  19     {
  20       var resultsDiv = document.getElementById('results');
  21       resultsDiv.innerHTML += s + '<br>';
  22     }
  23
  24     function test()
  25     {
  26       // Scroll so that frame view offsets are non-zero
  27       window.scrollTo(20, 100);
  28
  29       document.getElementById('overflow').scrollLeft = 80;
  30       document.getElementById('overflow').scrollTop = 60;
  31
  32       // In non-test mode, show the mouse coords for testing
  33       if (!window.testRunner)
  34         document.body.addEventListener('mousemove', mousemoved, false);
  35
  36       var offsetX = 32;
  37       var offsetY = 37;
  38       var positions = sumPositions(document.getElementById('abs-box'));
  39       var clientX = positions.offsetLeft - positions.scrollLeft + offsetX;
  40       var clientY = positions.offsetTop - positions.scrollTop + offsetY;
  41       dispatchEvent(clientX, clientY, 'abs-box', offsetX, offsetY);
  42
  43       offsetX = 22;
  44       offsetY = 24;
  45       positions = sumPositions(document.getElementById('rel-box'));
  46       clientX = positions.offsetLeft + positions.clientLeft - positions.scrollLeft + offsetX;
  47       clientY = positions.offsetTop + positions.clientLeft - positions.scrollTop + offsetY;
  48       dispatchEvent(clientX, clientY, 'rel-box', offsetX, offsetY);
  49
  50       offsetX = 10;
  51       offsetY = 10;
  52       positions = sumPositions(document.getElementById('fixed-box'));
  53       clientX = positions.offsetLeft + offsetX;
  54       clientY = positions.offsetTop + offsetY;
  55       dispatchEvent(clientX, clientY, 'fixed-box', offsetX, offsetY);
  56
  57       offsetX = 4;
  58       offsetY = 4;
  59       positions = sumPositions(document.getElementById('with-bordertopextra'));
  60       clientX = positions.offsetLeft - positions.scrollLeft + offsetX;
  61       clientY = positions.offsetTop - positions.scrollTop + offsetY;
  62       dispatchEvent(clientX, clientY, 'with-bordertopextra', offsetX, offsetY);
  63
  64       offsetX = 35;
  65       offsetY = 5;
  66       positions = sumPositions(document.getElementById('in-columns'));
  67       clientX = positions.offsetLeft + positions.clientLeft - positions.scrollLeft + offsetX;
  68       clientY = positions.offsetTop + positions.clientTop - positions.scrollTop + offsetY;
  69       dispatchEvent(clientX, clientY, 'in-columns', offsetX, offsetY);
  70
  71       offsetX = 7;
  72       offsetY = 6;
  73       positions = sumPositions(document.getElementById('inside-overflow'));
  74       clientY = positions.offsetTop + positions.clientTop - positions.scrollTop + offsetY;
  75
  76       var content = document.getElementById('overflow-contents');
  77       positions = sumPositions(content);
  78       var inside = document.getElementById('inside-overflow');
  79       var overflow = document.getElementById('overflow');
  80       clientX = positions.offsetLeft + overflow.clientLeft + content.clientWidth - inside.clientWidth - window.scrollX + offsetX;
  81       dispatchEvent(clientX, clientY, 'inside-overflow', offsetX, offsetY);
  82
  83       offsetX = 11;
  84       offsetY = 16;
  85       positions = sumPositions(document.getElementById('transformed'));
  86       var sin20 = Math.sin(-20 * Math.PI / 180);
  87       var cos20 = Math.cos(-20 * Math.PI / 180);
  88       clientX = positions.offsetLeft + positions.clientLeft - positions.scrollLeft + 100 + Math.round(100 - (100 - offsetX) * cos20 - (60 - offsetY) * sin20);
  89       clientY = positions.offsetTop + positions.clientTop - positions.scrollTop + 50 + Math.round(60 + (100 - offsetX) * sin20 - (60 - offsetY) * cos20);
  90       dispatchEvent(clientX, clientY, 'transformed', offsetX, offsetY);
  91
  92       if (window.testRunner)
  93         testRunner.notifyDone();
  94     }
  95
  96     function sumPositions(element)
  97     {
  98         var offsetLeft = 0;
  99         var offsetTop = 0;
 100         var clientLeft = 0;
 101         var clientTop = 0;
 102         var scrollLeft = 0;
 103         var scrollTop = 0;
 104         while (element) {
 105             offsetLeft += element.offsetLeft;
 106             offsetTop += element.offsetTop;
 107             clientLeft += element.clientLeft;
 108             clientTop += element.clientTop;
 109             scrollLeft += element.scrollLeft;
 110             scrollTop += element.scrollTop;
 111             element = element.offsetParent;
 112         }
 113         return { 'offsetLeft': offsetLeft, 'offsetTop': offsetTop, 'clientLeft': clientLeft, 'clientTop': clientTop, 'scrollLeft': scrollLeft, 'scrollTop': scrollTop };
 114     }
 115
 116     function dispatchEvent(clientX, clientY, expectedElementID, expectedOffsetX, expectedOffsetY)
 117     {
 118       var ev = document.createEvent("MouseEvent");
 119       ev.initMouseEvent("click", true, true, window, 1, 1, 1, clientX, clientY, false, false, false, false, 0, document);
 120       ev.expectedElement = expectedElementID;
 121       ev.expectedOffsetX = expectedOffsetX;
 122       ev.expectedOffsetY = expectedOffsetY;
 123       var target = document.elementFromPoint(ev.clientX, ev.clientY);
 124       target.dispatchEvent(ev);
 125     }
 126
 127     function clicked(event)
 128     {
 129       var element = event.target;
 130
 131       var result;
 132       if (element.id == event.expectedElement &&
 133           event.offsetX == event.expectedOffsetX &&
 134           event.offsetY == event.expectedOffsetY)
 135         result = 'PASS: event hit ' + element.id + ' at offset (' + event.offsetX + ', ' + event.offsetY + ')';
 136       else
 137         result = 'FAIL: event at (' + event.clientX + ', ' + event.clientY + ') expected to hit ' + event.expectedElement + ' at (' + event.expectedOffsetX + ', ' + event.expectedOffsetY + ') but hit ' + element.id + ' at (' + event.offsetX + ', ' + event.offsetY + ')';
 138
 139       log(result);
 140     }
 141
 142     window.addEventListener('load', function() {
 143       window.setTimeout(test, 0);
 144     }, false);
 145   </script>
 146   <style type="text/css" media="screen">
 147
 148     body {
 149       height: 2048px;
 150       width: 2048px;
 151       margin: 0;
 152       cursor: crosshair;
 153     }
 154
 155     .box {
 156       height: 200px;
 157       width: 200px;
 158       margin: 20px;
 159       background-color: gray;
 160     }
 161
 162     #abs-box {
 163       position: absolute;
 164       top: 125px;
 165       left: 100px;
 166       height: 100px;
 167       width: 200px;
 168       border: 15px solid gray;
 169     }
 170
 171     #rel-box {
 172       position: relative;
 173       height: 100px;
 174       width: 200px;
 175       left: 40px;
 176       top: -50px;
 177       background-color: #CCC;
 178     }
 179
 180     #fixed-box {
 181       position: fixed;
 182       top: 20px;
 183       left: 400px;
 184       width: 300px;
 185       height: 50px;
 186       background-color: #AAA;
 187     }
 188
 189     #columns {
 190       position: absolute;
 191       -webkit-column-count: 3;
 192       width: 400px;
 193       top: 200px;
 194       left: 460px;
 195       border: 2px solid black;
 196     }
 197
 198     #in-columns {
 199       display: block;
 200       height: 40px;
 201       width: 60%;
 202       margin: 0 auto;
 203       text-align: center;
 204       background-color: gray;
 205     }
 206
 207     #transformed {
 208       height: 120px;
 209       width: 200px;
 210       background-color: #DDD;
 211       -webkit-transform: translate(100px, 50px) rotate(20deg);
 212     }
 213     #overflow {
 214       overflow: scroll;
 215       position: absolute;
 216       width: 300px;
 217       top: 440px;
 218       left: 460px;
 219       height: 200px;
 220       border: 2px solid black;
 221       direction: rtl;
 222     }
 223
 224     #overflow-contents {
 225       height: 500px;
 226       width: 120%;
 227       background-color: #BBB;
 228     }
 229
 230     #inside-overflow {
 231       width: 50%;
 232       background-color: gray;
 233     }
 234
 235     #results {
 236       position: absolute;
 237       left: 30px;
 238       top: 700px;
 239     }
 240
 241     #mousepos {
 242       position: absolute;
 243       left: 30px;
 244       top: 650px;
 245       color: gray;
 246       font-size: smaller;
 247     }
 248
 249     tr {
 250 /*      -webkit-transform: rotate(10deg);*/
 251     }
 252   </style>
 253 </head>
 254 <body onclick="clicked(event)">
 255
 256 <div id="filler" style="position: absolute; top: 0; width: 100%; height: 100%"></div>
 257
 258 <!-- Test assumes offsetX/offsetY are relative to border box, but see
 259      http://www.quirksmode.org/dom/w3c_cssom.html#mousepos -->
 260 <div id="abs-box">
 261   Absolute position
 262   <div id="rel-box">
 263     Relative position
 264   </div>
 265   <div id="fixed-box">
 266     Fixed position
 267   </div>
 268 </div>
 269
 270 <table border="2" cellspacing="3" cellpadding="2" style="width: 400px; margin-top: 280px; margin-left: 40px;">
 271   <tr><th>First</th><th>Second</th></tr>
 272   <tr style="vertical-align: center;"><td>This cell has borderTopExtra<div class="box" id="with-bordertopextra" style="position: relative; height: 20px; margin: 4px;"></div></td><td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 273   </td></tr>
 274 </table>
 275
 276 <div id="columns">
 277   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <span id="in-columns">In columns</span> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 278 </div>
 279
 280 <div id="transformed">
 281   Div with transform
 282 </div>
 283
 284 <div id="overflow">
 285   <div id="overflow-contents">
 286     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
 287     <div id="inside-overflow">In RTL overflow</div>
 288     <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 289   </div>
 290 </div>
 291 <div id="results"></div>
 292 <div id="mousepos"></div>
 293
 294 </body>
 295 </html>