289 lines
7.7 KiB
HTML
289 lines
7.7 KiB
HTML
<!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>
|