blob: 9598a2b061536026cb65334f03afd36e402f0fca [file] [log] [blame]
<script src="../../resources/js-test-pre.js"></script>
<style>
.test {
width: 100px;
height: 100px;
outline: 1px solid black;
}
.testItem {
z-index: 100;
display: inline-block;
width: 20px;
height: 20px;
outline: 1px solid red;
}
.pusher {
width: 1000px;
height: 1000px;
outline: 1px solid black;
}
#subpixel-test {
width: 4.5px;
}
</style>
<div id="testArea">
<br>
<div id="test-initial" class="test"></div>
<div class="pusher">This box is here to create scrollbars.</div>
<div id="test-offscreen" class="test"></div>
<div class="pusher">This box is here to create even more scrollbars!</div>
</div>
<p id="description"></p>
<div id="console"></div>
<script>
window.onclick = function(e)
{
alert(e.clientX + " " + e.clientY + " " + document.elementFromPoint(e.clientX, e.clientY).textContent);
}
if (window.testRunner)
testRunner.dumpAsText();
description('This test document.elementFromPoint is evaluated in with respect to the viewport, not the document.');
function testElement(element, label, offsetX, offsetY, hasZoom) {
for (var i = 0; i < 25; ++i) {
var item = document.createElement("div");
item.className = "testItem";
item.textContent = String(i);
element.appendChild(item);
}
var testX = 10;
var testY = 10;
var unscrolledBox = "unscrolledBox" + label,
scrolledDownBox = "scrolledDownBox" + label,
scrolledRightBox = "scrolledRightBox" + label,
scrolledDownAndRightBox = "scrolledDownAndRightBox" + label;
function relativeScroll(x, y) {
window.scrollTo(offsetX + x, offsetY + y);
}
function getFromPoint(x, y) {
relativeScroll(x, y);
var hitElement = document.elementFromPoint(testX, testY);
// shouldn't return null range on any of these tests
if (hitElement === null)
return null;
else
return hitElement.textContent;
}
// Get initial box.
window[unscrolledBox] = getFromPoint(0, 0);
// Test scrolling down
window[scrolledDownBox] = getFromPoint(0, 20);
// Test scrolling right
window[scrolledRightBox] = getFromPoint(50, 0);
// Test scrolling down and right
window[scrolledDownAndRightBox] = getFromPoint(50, 20);
shouldBe(unscrolledBox, "'0'");
shouldBe(scrolledDownBox, "'5'");
shouldBe(scrolledRightBox, "'3'");
shouldBe(scrolledDownAndRightBox, "'8'");
}
var elementInitial = document.getElementById('test-initial');
var elementOffscreen = document.getElementById('test-offscreen');
var offset = elementInitial.getBoundingClientRect();
testElement(elementInitial, "Initial", offset.left, offset.top);
testElement(elementOffscreen, "Offscreen", offset.left, offset.top + 1100);
eventSender.zoomPageOut();
testElement(elementInitial, "Initial", offset.left, offset.top, /* hasZoom */ true);
if (window.testRunner) {
var area = document.getElementById('testArea');
area.parentNode.removeChild(area);
}
</script>
<script src="../../resources/js-test-post.js"></script>