Added: trunk/LayoutTests/fast/events/document-elementFromPoint-expected.txt (0 => 89363)
--- trunk/LayoutTests/fast/events/document-elementFromPoint-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/events/document-elementFromPoint-expected.txt 2011-06-21 17:47:05 UTC (rev 89363)
@@ -0,0 +1,18 @@
+Absolute
+Relative
+Fixed
+x x
+Table Content
+In Columns
+Transformed
+In RTL overflow
+PASS: event at (109, 57) hit absolute at offset (29, 32)
+PASS: event at (161, 13) hit relative at offset (31, 28)
+PASS: event at (40, 297) hit table-content at offset (15, 18)
+PASS: event at (122, 407) hit transformed at offset (18, 15)
+PASS: event at (573, 480) hit inside-overflow at offset (2, 9)
+PASS: event at (707, 174) hit in-columns at offset (88, 13)
+PASS: event at (241, 67) hit fixed at offset (41, 17)
+PASS: event at (244, 102) hit fixed at offset (44, 52)
+PASS: event at (388, 88) hit fixed at offset (188, 38)
+
Added: trunk/LayoutTests/fast/events/document-elementFromPoint.html (0 => 89363)
--- trunk/LayoutTests/fast/events/document-elementFromPoint.html (rev 0)
+++ trunk/LayoutTests/fast/events/document-elementFromPoint.html 2011-06-21 17:47:05 UTC (rev 89363)
@@ -0,0 +1,276 @@
+<!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-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;
+}
+</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>
+
+<script>
+// Debug mode.
+if (!window.layoutTestController) {
+ 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.layoutTestController) {
+ window.layoutTestController.dumpAsText();
+ window.layoutTestController.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', 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', 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.layoutTestController)
+ window.layoutTestController.notifyDone();
+ }, 0);
+ }, 0);
+}, false);
+</script>
+</body>
+</html>
