css/cssom-view/elementsFromPoint-iframes.html

<!DOCTYPE HTML>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/elementsFromPoint.js"></script>
<script>
var loadedFrameCount = 0;
var t1 = async_test('elementsFromPoint on the root document for points in iframe elements');
var t2 = async_test('elementsFromPoint on inner documents');

function onFrameLoaded() {
    loadedFrameCount++;
    if (loadedFrameCount < 2)
        return;

    var body = document.body;
    var html = document.documentElement;
    var iframe = document.getElementById('iframe');
    var scrollableIframe = document.getElementById('scrollableIframe');
    t1.step(function() {
        checkElementsFromPointFourCorners('document', 'iframe',
            [iframe, body,  html],
            [iframe, body, html],
            [iframe, body, html],
            [scrollableIframe, iframe, body, html]);

        checkElementsFromPointFourCorners('document', 'scrollableIframe',
            [scrollableIframe, iframe, body, html],
            [scrollableIframe, iframe, body, html],
            [scrollableIframe, iframe, body, html],
            [scrollableIframe, iframe, body, html]);
    });
    t1.done();

    t2.step(function() {
        var iframeDocument = document.getElementById('iframe').contentDocument;
        var iframeRoot = iframeDocument.documentElement;
        var iframeBody = iframeDocument.body;
        var iframeDiv = iframeDocument.getElementById('div');
        checkElementsFromPointFourCorners('document.getElementById(\'iframe\').contentDocument', 'div',
            [iframeDiv, iframeBody, iframeRoot],
            [iframeDiv, iframeBody, iframeRoot],
            [iframeDiv, iframeBody, iframeRoot],
            [iframeDiv, iframeBody, iframeRoot]);

        var iframeDocument2 = document.getElementById('scrollableIframe').contentDocument;
        var iframeRoot2 = iframeDocument2.documentElement;
        var iframeBody2 = iframeDocument2.body;
        var iframeSmallDiv = iframeDocument2.getElementById('small');
        var iframeBigDiv = iframeDocument2.getElementById('big');
        checkElementsFromPointFourCorners('document.getElementById(\'scrollableIframe\').contentDocument', 'big',
            [iframeSmallDiv, iframeBigDiv, iframeBody2, iframeRoot2],
            [iframeBigDiv, iframeBody2, iframeRoot2],
            [],
            []);
    });
    t2.done();
}
</script>
<style>
html, body {
    margin: 0;
    padding: 0;
}
body {
    height: 500px;
}
#iframe {
    width: 200px;
    height: 200px;
}
#scrollableIframe {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(50px, 50px);
    width: 150px;
    height: 150px;
    overflow-y: scroll;
    overflow-x: scroll;
}
</style>
<iframe id="iframe" src="resources/iframe1.html"></iframe>
<iframe id="scrollableIframe" src="resources/iframe2.html"></iframe>