third_party/WebKit/LayoutTests/fast/dom/nodesFromRect/nodesFromRect-basic.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <title>Document::nodesFromRect test - bug 40197</title>
   5   <style type="text/css"> @import "resources/nodesFromRect.css"; </style>
   6   <script src="../../../resources/js-test.js"></script>
   7   <script src="resources/nodesFromRect.js"></script>
   8   <script type="application/javascript">
   9     function runTest()
  10     {
  11       var e = {};
  12
  13       // Set up shortcut access to elements
  14       e['html'] = document.getElementsByTagName("html")[0];
  15       ['h1', 'd1', 'd2', 'p1', 'p2', 'p3', 'p4', 'p5', 'span', 'body'].forEach(function(a) {
  16         e[a] = document.getElementById(a);
  17       });
  18
  19       window.scrollTo(0, 0);
  20
  21       check(53, 71, 0, 0, 0, 0, [e.body]);
  22       check(53, 71, 10, 0,  0,  0, [e.h1, e.body]);
  23       check(53, 71, 0,  10, 0,  0, [e.p3, e.body]);
  24       check(53, 71, 0,  0,  10, 0, [e.d1, e.body]);
  25       check(53, 71, 0,  0,  0, 10, [e.body]);
  26       check(53, 71, 0, 10, 0, 10, [e.p3, e.body]);
  27       check(53, 71, 10, 0, 10, 0, [e.d1, e.h1, e.body]);
  28       check(53, 71, 10, 10, 10, 10, [e.p3, e.d1, e.h1, e.body]);
  29
  30       check(152, 105, 10, 0, 0, 0, [e.p3, e.body]);
  31       check(152, 105, 0, 10, 0, 0, [e.p4, e.body]);
  32       check(152, 105, 0, 0, 10, 0, [e.body]);
  33       check(152, 105, 0, 0, 0, 10, [e.d1, e.body]);
  34       check(152, 105, 10, 0, 10, 0, [e.p3, e.body]);
  35       check(152, 105, 0, 10, 0, 10, [e.p4, e.d1, e.body]);
  36       check(152, 105, 10, 10, 10, 10, [e.p4, e.p3, e.d1, e.body]);
  37
  38       // e.p1 is invisible and shouldn't appear:
  39       check(153, 193, 0, 0, 0, 0, [e.p5]);
  40       // NOTE: [e.p5, e.d2]) should be returned if we did not stop
  41       // at e.p5, which fully encloses the target rect.
  42       check(153,193,0, 20, 0, 20, [e.p5]);
  43       check(153,193,20, 0, 20, 0, [e.p5, e.body]);
  44
  45       check(77,  240, 0, 0, 0, 0, [e.p2]);
  46       check(77,  240, 1, 0, 0, 0, [e.p5, e.p2]);
  47       check(77,  240, 0, 0, 1, 0, [e.span, e.p2]);
  48       check(77,  240, 1, 0, 1, 0, [e.p5, e.span, e.p2]);
  49
  50       // Precise pixel checks:
  51       check(144, 183, 0, 0, 0, 0, [e.body]);
  52       check(144, 183, 1, 0, 1, 0, [e.p5, e.body]);
  53       check(144, 183, 0, 1, 0, 1, [e.d2, e.body]);
  54       check(144, 183, 0, 0, 1, 0, [e.p5, e.body]);
  55       check(144, 183, 0, 0, 0, 1, [e.d2, e.body]);
  56       check(144, 183, 0, 0, 1, 1, [e.p5, e.d2, e.body]);
  57       check(144, 183, 1, 1, 1, 1, [e.p5, e.d2, e.body]);
  58       check(77, 240, 0, 0, 0, 0, [e.p2]);
  59       check(77, 240, 0, 1, 0, 1, [e.p2]);
  60       check(77, 240, 1, 0, 0, 0, [e.p5, e.p2]);
  61       check(77, 240, 0, 0, 1, 0, [e.span, e.p2]);
  62       check(77, 240, 1, 0, 1, 0, [e.p5, e.span, e.p2]);
  63       check(77, 240, 1, 1, 1, 1, [e.p5, e.span, e.p2]);
  64
  65       // Expanding area checks:
  66       check(39, 212, 0,  0, 0, 0, [e.body]);
  67       check(39, 212, 10, 0,  0,  0, [e.d2, e.body]);
  68       check(39, 212, 0,  0,  10, 0, [e.p2, e.body]);
  69       check(39, 212, 10, 1,  30, 0, [e.d2, e.p2, e.body]);
  70       check(39, 212, 10, 5,  30, 0, [e.span, e.d2, e.p2, e.body]);
  71       check(39, 212, 10, 15, 30, 0, [e.p5, e.span, e.d2, e.p2, e.body]);
  72       check(39, 212, 10, 0, 10, 0, [e.d2, e.p2, e.body]);
  73       check(39, 212, 0, 10, 0, 10, [e.p5, e.body]);
  74       check(39, 212, 10, 10, 10, 10, [e.p5, e.d2, e.p2, e.body]);
  75     }
  76     window.onload = runTest;
  77   </script>
  78 </head>
  79 <body id="body">
  80   <h1 id="h1"></h1>
  81   <div id="d1"></div>
  82
  83   <!-- floated element -->
  84   <div id="d2" style="float: left"></div>
  85
  86   <!-- hidden element -->
  87   <p id="p1" style="float: left; visibility: hidden"></p>
  88
  89   <p id="p2" style="clear: left"><span id="span"></span></p>
  90
  91   <!-- absolute position -->
  92   <p id="p3" style="position:absolute; top: 10px; left:50px; height:50px;"></p>
  93
  94   <!-- fixed position -->
  95   <p id="p4" style="position: fixed; top: 30px; left: 150px; height: 50px; background-color: blue;"></p>
  96
  97   <!-- relative position -->
  98   <p id="p5" style="position:relative; top: -100px; left: 30px; margin-bottom: -70px; background-color: green"></p>
  99
 100   <span id="console"></span>
 101 </body>
 102 </html>
 103