| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Document::nodesFromRect : Rect-based hit-testing on SVG elements - bug 89990</title> |
| <style type="text/css"> |
| #sandbox { |
| position: absolute; |
| left: 0px; |
| top: 0px; |
| width: 600px; |
| height: 800px; |
| } |
| .svg { |
| width: 40px; |
| height: 20px; |
| margin: 10px; |
| padding: 2px; |
| box-sizing: border-box; |
| } |
| </style> |
| <script src="../../../resources/js-test-pre.js"></script> |
| <script src="resources/nodesFromRect.js"></script> |
| </head> |
| |
| <body> |
| <div id=sandbox> |
| <div class=svg id=div1> |
| <svg id=svg1 height=16 xmlns="http://www.w3.org/2000/svg"> |
| <circle id="red" cx="8" cy="8" r="5" fill="red" /> |
| </svg> |
| </div> |
| <div class=svg id=div2> |
| <svg id=svg2 height=16 xmlns="http://www.w3.org/2000/svg"> |
| <circle id="yellow" cx="8" cy="8" r="5" fill="yellow" /> |
| </svg> |
| </div> |
| <div class=svg id=div3> |
| <svg id=svg3 height=16 xmlns="http://www.w3.org/2000/svg"> |
| <circle id="green" cx="8" cy="8" r="5" fill="green" /> |
| </svg> |
| </div> |
| </div> |
| |
| <script> |
| function runTest() |
| { |
| description(document.title); |
| var e = {}; |
| |
| // Set up shortcut access to elements |
| ['sandbox', 'div1', 'div2', 'div3', 'div4', |
| 'svg1', 'svg2', 'svg3', 'svg4', |
| 'red', 'yellow', 'green'].forEach(function(a) { |
| e[a] = document.getElementById(a); |
| }); |
| |
| window.scrollTo(0, 0); |
| |
| debug('\nSome of following tests will likely FAIL and will need to be updated once rect-based') |
| debug('hit tests are supported inside SVG elements:\n'); |
| |
| debug('Check area hits fully inside SVG element'); |
| check(20, 20, 4, 4, 4, 4, [e.red, e.svg1]); |
| check(20, 52, 4, 4, 4, 4, [e.yellow, e.svg2]); |
| check(18, 80, 4, 4, 4, 4, [e.green, e.svg3]); |
| check(14, 14, 2, 2, 2, 2, [e.svg1]); |
| check(20, 20, 9, 9, 9, 9, [e.red, e.svg1, e.div1]); |
| |
| debug('Check area hits overlapping SVG element'); |
| check(12, 12, 2, 2, 2, 2, [e.svg1, e.div1]); |
| check(6, 50, 5, 20, 5, 5, [e.svg2, e.div2, e.sandbox]); |
| |
| debug('Check area hits across SVG elements'); |
| check(20, 30, 20, 10, 30, 10, [e.svg2, e.div2, e.svg1, e.div1, e.sandbox]); |
| |
| debug(''); |
| } |
| |
| runTest(); |
| </script> |
| |
| <p id='description'></p> |
| <span id="console"></span> |
| <script src="../../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
| |
