LayoutTests/fast/dom/elementFromPoint-relative-to-viewport.html

<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) {
        debug('');
        debug('Test ' + label);
        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);

    if (window.eventSender)
        eventSender.zoomPageOut();
    debug('Zoomed out');
    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>