<!DOCTYPE html>
<html>
<head>
  <title>Document::nodesFromRect test - bug 40197</title>
  <style type="text/css"> @import "resources/nodesFromRect.css"; </style>
  <script src="../../../resources/js-test-pre.js"></script>
  <script src="resources/nodesFromRect.js"></script>
  <script type="application/javascript">
    function runTest()
    {
      var e = {};

      // Set up shortcut access to elements
      e['html'] = document.getElementsByTagName("html")[0];
      ['h1', 'd1', 'd2', 'p1', 'p2', 'p3', 'p4', 'p5', 'span', 'body'].forEach(function(a) {
        e[a] = document.getElementById(a);
      });

      window.scrollTo(0, 0);

      check(53, 71, 0, 0, 0, 0, [e.body]);
      check(53, 71, 10, 0,  0,  0, [e.h1, e.body]);
      check(53, 71, 0,  10, 0,  0, [e.p3, e.body]);
      check(53, 71, 0,  0,  10, 0, [e.d1, e.body]);
      check(53, 71, 0,  0,  0, 10, [e.body]);
      check(53, 71, 0, 10, 0, 10, [e.p3, e.body]);
      check(53, 71, 10, 0, 10, 0, [e.d1, e.h1, e.body]);
      check(53, 71, 10, 10, 10, 10, [e.p3, e.d1, e.h1, e.body]);

      check(152, 105, 10, 0, 0, 0, [e.p3, e.body]);
      check(152, 105, 0, 10, 0, 0, [e.p4, e.body]);
      check(152, 105, 0, 0, 10, 0, [e.body]);
      check(152, 105, 0, 0, 0, 10, [e.d1, e.body]);
      check(152, 105, 10, 0, 10, 0, [e.p3, e.body]);
      check(152, 105, 0, 10, 0, 10, [e.p4, e.d1, e.body]);
      check(152, 105, 10, 10, 10, 10, [e.p4, e.p3, e.d1, e.body]);

      // e.p1 is invisible and shouldn't appear:
      check(153, 193, 0, 0, 0, 0, [e.p5]);
      // NOTE: [e.p5, e.d2]) should be returned if we did not stop
      // at e.p5, which fully encloses the target rect.
      check(153,193,0, 20, 0, 20, [e.p5]);
      check(153,193,20, 0, 20, 0, [e.p5, e.body]);

      check(77,  240, 0, 0, 0, 0, [e.p2]);
      check(77,  240, 1, 0, 0, 0, [e.p5, e.p2]);
      check(77,  240, 0, 0, 1, 0, [e.span, e.p2]);
      check(77,  240, 1, 0, 1, 0, [e.p5, e.span, e.p2]);

      // Precise pixel checks:
      check(144, 183, 0, 0, 0, 0, [e.body]);
      check(144, 183, 1, 0, 1, 0, [e.p5, e.body]);
      check(144, 183, 0, 1, 0, 1, [e.d2, e.body]);
      check(144, 183, 0, 0, 1, 0, [e.p5, e.body]);
      check(144, 183, 0, 0, 0, 1, [e.d2, e.body]);
      check(144, 183, 0, 0, 1, 1, [e.p5, e.d2, e.body]);
      check(144, 183, 1, 1, 1, 1, [e.p5, e.d2, e.body]);
      check(77, 240, 0, 0, 0, 0, [e.p2]);
      check(77, 240, 0, 1, 0, 1, [e.p2]);
      check(77, 240, 1, 0, 0, 0, [e.p5, e.p2]);
      check(77, 240, 0, 0, 1, 0, [e.span, e.p2]);
      check(77, 240, 1, 0, 1, 0, [e.p5, e.span, e.p2]);
      check(77, 240, 1, 1, 1, 1, [e.p5, e.span, e.p2]);

      // Expanding area checks:
      check(39, 212, 0,  0, 0, 0, [e.body]);
      check(39, 212, 10, 0,  0,  0, [e.d2, e.body]);
      check(39, 212, 0,  0,  10, 0, [e.p2, e.body]);
      check(39, 212, 10, 1,  30, 0, [e.d2, e.p2, e.body]);
      check(39, 212, 10, 5,  30, 0, [e.span, e.d2, e.p2, e.body]);
      check(39, 212, 10, 15, 30, 0, [e.p5, e.span, e.d2, e.p2, e.body]);
      check(39, 212, 10, 0, 10, 0, [e.d2, e.p2, e.body]);
      check(39, 212, 0, 10, 0, 10, [e.p5, e.body]);
      check(39, 212, 10, 10, 10, 10, [e.p5, e.d2, e.p2, e.body]);
    }
    window.onload = runTest;
  </script>
</head>
<body id="body">
  <h1 id="h1"></h1>
  <div id="d1"></div>

  <!-- floated element -->
  <div id="d2" style="float: left"></div>

  <!-- hidden element -->
  <p id="p1" style="float: left; visibility: hidden"></p>

  <p id="p2" style="clear: left"><span id="span"></span></p>

  <!-- absolute position -->
  <p id="p3" style="position:absolute; top: 10px; left:50px; height:50px;"></p>

  <!-- fixed position -->
  <p id="p4" style="position: fixed; top: 30px; left: 150px; height: 50px; background-color: blue;"></p>

  <!-- relative position -->
  <p id="p5" style="position:relative; top: -100px; left: 30px; margin-bottom: -70px; background-color: green"></p>

  <span id="console"></span>
  <script src="../../../resources/js-test-post.js"></script>
</body>
</html>