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

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <title>Document::nodesFromRect : Rect-based hit-testing on SVG elements - bug 89990</title>
   5 <style type="text/css">
   6     #sandbox {
   7         position: absolute;
   8         left: 0px;
   9         top: 0px;
  10         width: 600px;
  11         height: 800px;
  12     }
  13     .svg {
  14         width: 40px;
  15         height: 20px;
  16         margin: 10px;
  17         padding: 2px;
  18         box-sizing: border-box;
  19     }
  20 </style>
  21 <script src="../../../resources/js-test.js"></script>
  22 <script src="resources/nodesFromRect.js"></script>
  23 </head>
  24
  25 <body>
  26     <div id=sandbox>
  27         <div class=svg id=div1>
  28             <svg id=svg1 height=16 xmlns="http://www.w3.org/2000/svg">
  29                 <circle id="red" cx="8" cy="8" r="5" fill="red" />
  30             </svg>
  31         </div>
  32         <div class=svg id=div2>
  33             <svg id=svg2 height=16 xmlns="http://www.w3.org/2000/svg">
  34                 <circle id="yellow" cx="8" cy="8" r="5" fill="yellow" />
  35             </svg>
  36         </div>
  37         <div class=svg id=div3>
  38             <svg id=svg3 height=16 xmlns="http://www.w3.org/2000/svg">
  39                 <circle id="green" cx="8" cy="8" r="5" fill="green" />
  40             </svg>
  41         </div>
  42     </div>
  43
  44     <script>
  45         function runTest()
  46         {
  47             description(document.title);
  48             var e = {};
  49
  50             // Set up shortcut access to elements
  51             ['sandbox', 'div1', 'div2', 'div3', 'div4',
  52              'svg1', 'svg2', 'svg3', 'svg4',
  53              'red', 'yellow', 'green'].forEach(function(a) {
  54                 e[a] = document.getElementById(a);
  55             });
  56
  57             window.scrollTo(0, 0);
  58
  59             debug('\nSome of following tests will likely FAIL and will need to be updated once rect-based')
  60             debug('hit tests are supported inside SVG elements:\n');
  61
  62             debug('Check area hits fully inside SVG element');
  63             check(20, 20, 4, 4, 4, 4, [e.red, e.svg1]);
  64             check(20, 52, 4, 4, 4, 4, [e.yellow, e.svg2]);
  65             check(18, 80, 4, 4, 4, 4, [e.green, e.svg3]);
  66             check(14, 14, 2, 2, 2, 2, [e.svg1]);
  67             check(20, 20, 9, 9, 9, 9, [e.red, e.svg1, e.div1]);
  68
  69             debug('Check area hits overlapping SVG element');
  70             check(12, 12, 2, 2, 2, 2, [e.svg1, e.div1]);
  71             check(6, 50, 5, 20, 5, 5, [e.svg2, e.div2, e.sandbox]);
  72
  73             debug('Check area hits across SVG elements');
  74             check(20, 30, 20, 10, 30, 10, [e.svg2, e.div2, e.svg1, e.div1, e.sandbox]);
  75
  76             debug('');
  77         }
  78
  79         runTest();
  80     </script>
  81
  82     <p id='description'></p>
  83     <span id="console"></span>
  84 </body>
  85 </html>
  86