<!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>