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