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.layoutTestController) {
   6         layoutTestController.dumpAsText();
   7         layoutTestController.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       var r = document.getElementById('subpixel-test').getBoundingClientRect();
  27       var hasSubpixelSupport = r.right - r.left == 4.5;
  28
  29       // Scroll so that frame view offsets are non-zero
  30       window.scrollTo(20, 100);
  31
  32       document.getElementById('overflow').scrollLeft = 80;
  33       document.getElementById('overflow').scrollTop = 60;
  34
  35       // In non-test mode, show the mouse coords for testing
  36       if (!window.layoutTestController)
  37         document.body.addEventListener('mousemove', mousemoved, false);
  38
  39       dispatchEvent(112, 62, 'abs-box', 32, 37);
  40       dispatchEvent(157, 32, 'rel-box', 22, 24);
  41       dispatchEvent(410, 30, 'fixed-box', 10, 10);
  42       dispatchEvent(36, 272, 'with-bordertopextra', 4, 4);
  43       dispatchEvent(639, 207, 'in-columns', hasSubpixelSupport ? 34 : 35, 5);
  44       dispatchEvent(563, 410, 'inside-overflow', 7, 6);
  45       dispatchEvent(112, 369, 'transformed', 11, 16);
  46
  47       if (window.layoutTestController)
  48         layoutTestController.notifyDone();
  49     }
  50
  51     function dispatchEvent(clientX, clientY, expectedElementID, expectedOffsetX, expectedOffsetY)
  52     {
  53       var ev = document.createEvent("MouseEvent");
  54       ev.initMouseEvent("click", true, true, window, 1, 1, 1, clientX, clientY, false, false, false, false, 0, document);
  55       ev.expectedElement = expectedElementID;
  56       ev.expectedOffsetX = expectedOffsetX;
  57       ev.expectedOffsetY = expectedOffsetY;
  58       var target = document.elementFromPoint(ev.clientX, ev.clientY);
  59       target.dispatchEvent(ev);
  60     }
  61
  62     function clicked(event)
  63     {
  64       var element = event.target;
  65
  66       var result;
  67       if (element.id == event.expectedElement &&
  68           event.offsetX == event.expectedOffsetX &&
  69           event.offsetY == event.expectedOffsetY)
  70         result = 'PASS: event at (' + event.clientX + ', ' + event.clientY + ') hit ' + element.id + ' at offset (' + event.offsetX + ', ' + event.offsetY + ')';
  71       else
  72         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 + ')';
  73
  74       log(result);
  75     }
  76
  77     window.addEventListener('load', function() {
  78       window.setTimeout(test, 0);
  79     }, false);
  80   </script>
  81   <style type="text/css" media="screen">
  82
  83     body {
  84       height: 2048px;
  85       width: 2048px;
  86       margin: 0;
  87       cursor: crosshair;
  88     }
  89
  90     .box {
  91       height: 200px;
  92       width: 200px;
  93       margin: 20px;
  94       background-color: gray;
  95     }
  96
  97     #abs-box {
  98       position: absolute;
  99       top: 125px;
 100       left: 100px;
 101       height: 100px;
 102       width: 200px;
 103       border: 15px solid gray;
 104     }
 105
 106     #rel-box {
 107       position: relative;
 108       height: 100px;
 109       width: 200px;
 110       left: 40px;
 111       top: -50px;
 112       background-color: #CCC;
 113     }
 114
 115     #fixed-box {
 116       position: fixed;
 117       top: 20px;
 118       left: 400px;
 119       width: 300px;
 120       height: 50px;
 121       background-color: #AAA;
 122     }
 123
 124     #columns {
 125       position: absolute;
 126       -webkit-column-count: 3;
 127       width: 400px;
 128       top: 200px;
 129       left: 460px;
 130       border: 2px solid black;
 131     }
 132
 133     #in-columns {
 134       display: block;
 135       height: 40px;
 136       width: 60%;
 137       margin: 0 auto;
 138       text-align: center;
 139       background-color: gray;
 140     }
 141
 142     #transformed {
 143       height: 120px;
 144       width: 200px;
 145       background-color: #DDD;
 146       -webkit-transform: translate(100px, 50px) rotate(20deg);
 147     }
 148     #overflow {
 149       overflow: scroll;
 150       position: absolute;
 151       width: 300px;
 152       top: 440px;
 153       left: 460px;
 154       height: 200px;
 155       border: 2px solid black;
 156       direction: rtl;
 157     }
 158
 159     #overflow-contents {
 160       height: 500px;
 161       width: 120%;
 162       background-color: #BBB;
 163     }
 164
 165     #inside-overflow {
 166       width: 50%;
 167       background-color: gray;
 168     }
 169
 170     #results {
 171       position: absolute;
 172       left: 30px;
 173       top: 700px;
 174     }
 175
 176     #mousepos {
 177       position: absolute;
 178       left: 30px;
 179       top: 650px;
 180       color: gray;
 181       font-size: smaller;
 182     }
 183
 184     tr {
 185 /*      -webkit-transform: rotate(10deg);*/
 186     }
 187
 188     #subpixel-test {
 189       width: 4.5px;
 190     }
 191   </style>
 192 </head>
 193 <body onclick="clicked(event)">
 194
 195 <div id="filler" style="position: absolute; top: 0; width: 100%; height: 100%"></div>
 196
 197 <!-- Test assumes offsetX/offsetY are relative to border box, but see
 198      http://www.quirksmode.org/dom/w3c_cssom.html#mousepos -->
 199 <div id="abs-box">
 200   Absolute position
 201   <div id="rel-box">
 202     Relative position
 203   </div>
 204   <div id="fixed-box">
 205     Fixed position
 206   </div>
 207 </div>
 208
 209 <table border="2" cellspacing="3" cellpadding="2" style="width: 400px; margin-top: 280px; margin-left: 40px;">
 210   <tr><th>First</th><th>Second</th></tr>
 211   <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.
 212   </td></tr>
 213 </table>
 214
 215 <div id="columns">
 216   <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>
 217 </div>
 218
 219 <div id="transformed">
 220   Div with transform
 221 </div>
 222
 223 <div id="overflow">
 224   <div id="overflow-contents">
 225     <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>
 226     <div id="inside-overflow">In RTL overflow</div>
 227     <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>
 228   </div>
 229 </div>
 230 <div id="results"></div>
 231 <div id="mousepos"></div>
 232 <div id="subpixel-test"></div>
 233
 234 </body>
 235 </html>