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();
10 function mousemoved(e)
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;
20 var resultsDiv = document.getElementById('results');
21 resultsDiv.innerHTML += s + '<br>';
26 var r = document.getElementById('subpixel-test').getBoundingClientRect();
27 var hasSubpixelSupport = r.right - r.left == 4.5;
29 // Scroll so that frame view offsets are non-zero
30 window.scrollTo(20, 100);
32 document.getElementById('overflow').scrollLeft = 80;
33 document.getElementById('overflow').scrollTop = 60;
35 // In non-test mode, show the mouse coords for testing
36 if (!window.layoutTestController)
37 document.body.addEventListener('mousemove', mousemoved, false);
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);
47 if (window.layoutTestController)
48 layoutTestController.notifyDone();
51 function dispatchEvent(clientX, clientY, expectedElementID, expectedOffsetX, expectedOffsetY)
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);
62 function clicked(event)
64 var element = event.target;
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 + ')';
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 + ')';
77 window.addEventListener('load', function() {
78 window.setTimeout(test, 0);
81 <style type="text/css" media="screen">
94 background-color: gray;
103 border: 15px solid gray;
112 background-color: #CCC;
121 background-color: #AAA;
126 -webkit-column-count: 3;
130 border: 2px solid black;
139 background-color: gray;
145 background-color: #DDD;
146 -webkit-transform: translate(100px, 50px) rotate(20deg);
155 border: 2px solid black;
162 background-color: #BBB;
167 background-color: gray;
185 /* -webkit-transform: rotate(10deg);*/
193 <body onclick="clicked(event)">
195 <div id="filler" style="position: absolute; top: 0; width: 100%; height: 100%"></div>
197 <!-- Test assumes offsetX/offsetY are relative to border box, but see
198 http://www.quirksmode.org/dom/w3c_cssom.html#mousepos -->
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.
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>
219 <div id="transformed">
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>
230 <div id="results"></div>
231 <div id="mousepos"></div>
232 <div id="subpixel-test"></div>