nodesFromRect-basic.html | Explore in Territory

<!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.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, 1, 1, [e.body]);
      check(53, 61, 1, 11, [e.h1, e.body]);
      check(53, 71, 11, 1, [e.p3, e.body]);
      check(53, 71, 1, 11, [e.d1, e.body]);
      check(43, 71, 11, 1, [e.body]);
      check(43, 71, 21, 1, [e.p3, e.body]);
      check(53, 61, 1, 21, [e.d1, e.h1, e.body]);
      check(43, 61, 21, 21, [e.p3, e.d1, e.h1, e.body]);

      check(152, 95, 1, 11, [e.p3, e.body]);
      check(152, 105, 11, 1, [e.p4, e.body]);
      check(152, 105, 1, 11, [e.body]);
      check(142, 105, 11, 1, [e.d1, e.body]);
      check(152, 95, 1, 21, [e.p3, e.body]);
      check(142, 105, 21, 1, [e.p4, e.d1, e.body]);
      check(142, 95, 21, 21, [e.p4, e.p3, e.d1, e.body]);

      // e.p1 is invisible and shouldn't appear:
      check(153, 193, 1, 1, [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(133, 193, 41, 1, [e.p5]);
      check(153, 173, 1, 41, [e.p5, e.body]);

      check(77, 240, 1, 1, [e.p2]);
      check(77, 239, 1, 2, [e.p5, e.p2]);
      check(77, 240, 1, 2, [e.span, e.p2]);
      check(77, 239, 1, 3, [e.p5, e.span, e.p2]);

      // Precise pixel checks:
      check(144, 183, 1, 1, [e.body]);
      check(144, 182, 1, 3, [e.p5, e.body]);
      check(143, 183, 3, 1, [e.d2, e.body]);
      check(144, 183, 1, 2, [e.p5, e.body]);
      check(143, 183, 2, 1, [e.d2, e.body]);
      check(143, 183, 2, 2, [e.p5, e.d2, e.body]);
      check(143, 182, 3, 3, [e.p5, e.d2, e.body]);
      check(77, 240, 1, 1, [e.p2]);
      check(76, 240, 3, 1, [e.p2]);
      check(77, 239, 1, 2, [e.p5, e.p2]);
      check(77, 240, 1, 2, [e.span, e.p2]);
      check(77, 239, 1, 3, [e.p5, e.span, e.p2]);
      check(76, 239, 3, 3, [e.p5, e.span, e.p2]);

      // Expanding area checks:
      check(39, 212, 1, 1, [e.body]);
      check(39, 202, 1, 11, [e.d2, e.body]);
      check(39, 212, 1, 11, [e.p2, e.body]);
      check(39, 202, 2, 41, [e.p2, e.d2, e.body]);
      check(39, 202, 6, 41, [e.span, e.p2, e.d2, e.body]);
      check(39, 202, 16, 41, [e.p5, e.span, e.p2, e.d2, e.body]);
      check(39, 202, 1, 21, [e.d2, e.p2, e.body]);
      check(29, 212, 21, 1, [e.p5, e.body]);
      check(29, 202, 21, 21, [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>
</body>
</html>
chromium/third_party/blink/web_tests/fast/dom/nodesFromRect/nodesFromRect-basic.html
