<!DOCTYPE html>
<style>
body { margin: 0px; }
#sandbox {
width: 400px;
height: 200px;
}
#sandbox iframe {
display: block;
box-sizing: border-box;
width: 200px;
height: 200px;
border: none;
}
#sandbox {
box-sizing: border-box;
height: 100px;
width: 200px;
border: 1px solid black;
}
</style>
<script src="../../../resources/js-test.js"></script>
<script src="resources/nodesFromRect.js"></script>
<body id="body">
<input id="text-input" type="text"> <br>
<iframe id="iframe" src="resources/child-frame-scrolled.html"></iframe>
<div id="console"></div>
</body>
<script>
description("nodesFromRect returns correct rects when the rect is overlapping" +
" an iframe with scrolled contents");
if (window.testRunner) {
testRunner.dumpAsText();
testRunner.waitUntilDone();
}
window.addEventListener("message", function(evt) {
if (evt.data == "subframe-loaded") {
var inputElement = document.getElementById('text-input');
var inputBoundingRect = inputElement.getBoundingClientRect();
var inputCenterX = inputBoundingRect.left + inputBoundingRect.width / 2;
var inputCenterY = inputBoundingRect.top + inputBoundingRect.height / 2;
var inputHeight = inputBoundingRect.height;
var iframeElement = document.getElementById('iframe');
var iframeBoundingRect = iframeElement.getBoundingClientRect();
var iframeCenterX = iframeBoundingRect.left + iframeBoundingRect.width / 2;
var iframeCenterY = iframeBoundingRect.top + iframeBoundingRect.height / 2;
// Rect is totally within input box. Inner editor div is found.
checkRect(inputCenterX, inputCenterY, 1, 1, "DIV");
// Rect covers both input box and iframe.
checkRect(inputCenterX, inputCenterY, inputHeight, inputHeight,
"DIV#content, IFRAME#iframe, DIV, INPUT#text-input, BODY#body");
// Rect is totally within iframe.
checkRect(iframeCenterX, iframeCenterY, 1, 1, "DIV#content");
if (window.testRunner)
testRunner.notifyDone();
}
}, true);
</script>