4 <meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1">
14 cursor: crosshair; /* Debugging */
20 border: 10px solid gray;
30 background: lightGreen !important; /* Elements we click on are green */
69 border: 10px solid gray;
78 border: 1px solid black;
79 -webkit-column-count: 3;
93 -webkit-transform: translate(100px, 50px) rotate(20deg);
97 overflow: hidden; /* No scrollbars */
103 border: 1px solid black;
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.
143 <!-- Filler, to force scrolling -->
144 <div id="filler"></div>
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>
154 <table id="table" border="2" cellpadding="3" cellpadding="2">
155 <tr><th>x</th><th>x</th></tr>
157 <td><div id="table-content" class="line target">Table Content</div></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>
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>
185 <div id="transformed" class="box target">Transformed</div>
187 <!-- Overflowed Content -->
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>
199 <div id="results"></div>
200 <div id="mouse-position"></div>
202 <!-- Test for subpixel support -->
203 <div id="subpixel-test"></div>
206 if (!window.testRunner) {
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;
216 var resultsDiv = document.getElementById('results');
217 resultsDiv.innerHTML += s + '<br>';
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);
230 function clicked(event) {
231 var element = event.target;
233 if (element.id === event.expectedElementID && event.offsetX === event.expectedOffsetX && event.offsetY === event.expectedOffsetY) {
235 result += ' event at (' + event.clientX + ', ' + event.clientY + ')';
236 result += ' hit ' + element.id;
237 result += ' at offset (' + event.offsetX + ', ' + event.offsetY + ')';
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 + ')';
248 if (window.testRunner) {
249 window.testRunner.dumpAsText();
250 window.testRunner.waitUntilDone();
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;
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() {
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);
277 // End asynchronous test.
278 if (window.testRunner)
279 window.testRunner.notifyDone();