| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1"> |
| <style> |
| * { |
| margin: 0; |
| padding: 0; |
| } |
| |
| body { |
| height: 2048px; |
| width: 2048px; |
| cursor: crosshair; /* Debugging */ |
| } |
| |
| .box { |
| width: 200px; |
| height: 100px; |
| border: 10px solid gray; |
| } |
| |
| .line { |
| width:150px; |
| height:20px; |
| background: gray; |
| } |
| |
| .target { |
| background: lightGreen !important; /* Elements we click on are green */ |
| } |
| |
| #absolute { |
| position: absolute; |
| left: 100px; |
| top: 125px; |
| } |
| |
| #relative { |
| position: relative; |
| left: 40px; |
| top: -50px; |
| } |
| |
| #fixed { |
| position: fixed; |
| top: 50px; |
| left: 200px; |
| height: 50px; |
| } |
| |
| #filler { |
| position: absolute; |
| top: 0; |
| width: 100%; |
| height: 100%; |
| } |
| |
| table { |
| margin-top: 300px; |
| margin-left: 40px; |
| width: 400px; |
| } |
| |
| th { height: 30px; } |
| |
| #table-content { |
| position: relative; |
| border: 10px solid gray; |
| } |
| |
| #columns { |
| position: absolute; |
| width: 400px; |
| height: 200px; |
| top: 220px; |
| left: 500px; |
| border: 1px solid black; |
| -webkit-column-count: 3; |
| column-count: 3; |
| column-fill: auto; |
| } |
| |
| .column-line { |
| width: 100px; |
| height: 20px; |
| background: gray; |
| } |
| |
| #transformed { |
| position: absolute; |
| top: 470px; |
| height: 120px; |
| width: 200px; |
| transform: translate(100px, 50px) rotate(20deg); |
| } |
| |
| #overflow { |
| overflow: hidden; /* No scrollbars */ |
| position: absolute; |
| width: 300px; |
| height: 200px; |
| top: 450px; |
| left: 470px; |
| border: 1px solid black; |
| direction: rtl; |
| } |
| |
| #overflow-contents { |
| height: 500px; |
| width: 120%; |
| } |
| |
| #inside-overflow { |
| height: 550px; |
| width: 50%; |
| } |
| |
| #results { |
| position: absolute; |
| left: 30px; |
| top: 750px; |
| } |
| |
| #mouse-position { |
| position: absolute; |
| left: 30px; |
| top: 670px; |
| color: gray; |
| } |
| </style> |
| </head> |
| <body> |
| |
| <!-- |
| This test is modelled after <LayoutTests/fast/events/offsetX-offsetY.html>, |
| but it is designed to not depend on inline text content to position the |
| targets on which we click. |
| --> |
| |
| <!-- Filler, to force scrolling --> |
| <div id="filler"></div> |
| |
| <!-- Absolute, Relative, and Fixed position --> |
| <div id="absolute" class="box target"> |
| <span style="position:absolute;left:0;top:0">Absolute</span> |
| <div id="relative" class="box target">Relative</div> |
| <div id="fixed" class="box target">Fixed</div> |
| </div> |
| |
| <!-- Table --> |
| <table id="table" border="2" cellpadding="3" cellpadding="2"> |
| <tr><th>x</th><th>x</th></tr> |
| <tr> |
| <td><div id="table-content" class="line target">Table Content</div></td> |
| <td> |
| <div class="line"></div><div class="line"></div> |
| <div class="line"></div><div class="line"></div> |
| <div class="line"></div><div class="line"></div> |
| </td> |
| </tr> |
| </table> |
| |
| <!-- Columns --> |
| <div id="columns"> |
| <div class="column-line"></div><div class="column-line"></div> |
| <div class="column-line"></div><div class="column-line"></div> |
| <div class="column-line"></div><div class="column-line"></div> |
| <div class="column-line"></div><div class="column-line"></div> |
| <div class="column-line"></div><div class="column-line"></div> |
| <div class="column-line"></div><div class="column-line"></div> |
| <div id="in-columns" class="column-line target">In Columns</div> |
| <div class="column-line"></div><div class="column-line"></div> |
| <div class="column-line"></div><div class="column-line"></div> |
| <div class="column-line"></div><div class="column-line"></div> |
| <div class="column-line"></div><div class="column-line"></div> |
| <div class="column-line"></div><div class="column-line"></div> |
| <div class="column-line"></div><div class="column-line"></div> |
| <div class="column-line"></div><div class="column-line"></div> |
| </div> |
| |
| <!-- Transformed --> |
| <div id="transformed" class="box target">Transformed</div> |
| |
| <!-- Overflowed Content --> |
| <div id="overflow"> |
| <div id="overflow-contents"> |
| <div class="line"></div><div class="line"></div><div class="line"></div> |
| <div class="line"></div><div class="line"></div><div class="line"></div> |
| <div class="line"></div><div class="line"></div><div class="line"></div> |
| <div id="inside-overflow" class="target">In RTL overflow</div> |
| <div class="line"></div><div class="line"></div><div class="line"></div> |
| </div> |
| </div> |
| |
| <!-- Debugging --> |
| <div id="results"></div> |
| <div id="mouse-position"></div> |
| |
| <script> |
| // Debug mode. |
| if (!window.testRunner) { |
| document.body.onmousemove = function(e) { |
| var resultBox = document.getElementById('mouse-position'); |
| var offsets = 'element id: ' + e.target.id + '<br> clientX: ' + e.clientX + ' clientY: ' + e.clientY + '<br>'; |
| offsets += 'offsetX: ' + e.offsetX + ' offsetY: ' + e.offsetY; |
| resultBox.innerHTML = offsets; |
| } |
| } |
| |
| function log(s) { |
| var resultsDiv = document.getElementById('results'); |
| resultsDiv.innerHTML += s + '<br>'; |
| } |
| |
| function dispatchEvent(clientX, clientY, expectedElementID, expectedOffsetX, expectedOffsetY) { |
| var e = document.createEvent("MouseEvent"); |
| e.initMouseEvent("click", true, true, window, 1, 1, 1, clientX, clientY, false, false, false, false, 0, document); |
| e.expectedElementID = expectedElementID; |
| e.expectedOffsetX = expectedOffsetX; |
| e.expectedOffsetY = expectedOffsetY; |
| var target = document.elementFromPoint(e.clientX, e.clientY); |
| target.dispatchEvent(e); |
| } |
| |
| function clicked(event) { |
| var element = event.target; |
| var result; |
| if (element.id === event.expectedElementID && event.offsetX === event.expectedOffsetX && event.offsetY === event.expectedOffsetY) { |
| result = 'PASS:'; |
| result += ' event at (' + event.clientX + ', ' + event.clientY + ')'; |
| result += ' hit ' + element.id; |
| result += ' at offset (' + event.offsetX + ', ' + event.offsetY + ')'; |
| } else { |
| result = 'FAIL:'; |
| result += ' event at (' + event.clientX + ', ' + event.clientY + ')'; |
| result += ' expected to hit ' + event.expectedElementID; |
| result += ' at (' + event.expectedOffsetX + ', ' + event.expectedOffsetY + ')'; |
| result += ' but hit ' + element.id + ' at (' + event.offsetX + ', ' + event.offsetY + ')'; |
| } |
| log(result); |
| } |
| |
| if (window.testRunner) { |
| testRunner.dumpAsText(); |
| testRunner.waitUntilDone(); |
| } |
| |
| // Start the test. |
| document.body.addEventListener('click', clicked, false); |
| window.addEventListener('load', function() { |
| setTimeout(function() { |
| // Scroll body and inner overflow box. |
| window.scrollTo(20, 100); |
| var overflowContent = document.getElementById('overflow'); |
| overflowContent.scrollLeft = 80; |
| overflowContent.scrollTop = 60; |
| setTimeout(function() { |
| // Dispatch events. |
| dispatchEvent(109, 57, 'absolute', 19, 22); |
| dispatchEvent(161, 13, 'relative', 21, 18); |
| dispatchEvent(40, 297, 'table-content', 5, 8); |
| dispatchEvent(122, 407, 'transformed', 8, 5); |
| dispatchEvent(573, 480, 'inside-overflow', 2, 9); |
| dispatchEvent(707, 174, 'in-columns', 87, 13); |
| dispatchEvent(241, 67, 'fixed', 31, 7); |
| dispatchEvent(244, 102, 'fixed', 34, 42); |
| dispatchEvent(388, 88, 'fixed', 178, 28); |
| |
| // End asynchronous test. |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| }, 0); |
| }, 0); |
| }, false); |
| </script> |
| </body> |
| </html> |
