blob: d011b21832923319584ee1dad2a027e798b31480 [file] [log] [blame]
<!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;
-webkit-column-fill: auto;
column-count: 3;
column-fill: auto;
}
.column-line {
width: 100px;
height: 20px;
background: gray;
}
#transformed {
position: absolute;
top: 470px;
height: 120px;
width: 200px;
-webkit-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;
}
#subpixel-test {
width: 4.5px;
}
</style>
</head>
<body>
<!--
This test is modeled 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>
<!-- Test for subpixel support -->
<div id="subpixel-test"></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) {
window.testRunner.dumpAsText();
window.testRunner.waitUntilDone();
}
// Start the test.
document.body.addEventListener('click', clicked, false);
window.addEventListener('load', function() {
var r = document.getElementById('subpixel-test').getBoundingClientRect();
var hasSubpixelSupport = r.right - r.left == 4.5;
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', 29, 32);
dispatchEvent(161, 13, 'relative', 31, 28);
dispatchEvent(40, 297, 'table-content', 15, 18);
dispatchEvent(122, 407, 'transformed', 18, 15);
dispatchEvent(573, 480, 'inside-overflow', 2, 9);
dispatchEvent(707, 174, 'in-columns', hasSubpixelSupport ? 87 : 88, 13);
dispatchEvent(241, 67, 'fixed', 41, 17);
dispatchEvent(244, 102, 'fixed', 44, 52);
dispatchEvent(388, 88, 'fixed', 188, 38);
// End asynchronous test.
if (window.testRunner)
window.testRunner.notifyDone();
}, 0);
}, 0);
}, false);
</script>
</body>
</html>