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

   1 <!DOCTYPE HTML>
   2 <script src="../../../resources/js-test.js"></script>
   3 <script src="resources/elementsFromPoint.js"></script>
   4 <style>
   5 html, body {
   6     margin: 0;
   7     padding: 0;
   8 }
   9 #svg {
  10     margin: 100px;
  11     background-color: rgba(0,180,0,0.2);
  12 }
  13 rect {
  14     fill: rgba(180,0,0,0.2);
  15 }
  16 #topRightSvg, #middleG1, #middleG2, #bottomLeftG, #bottomRightG1, #bottomRightG2 {
  17     pointer-events: bounding-box;
  18 }
  19 #topLeftRect2NoHitTest {
  20     pointer-events: none;
  21 }
  22 </style>
  23 <div id='sandbox'>
  24     <svg id='svg' width='300' height='300'>
  25         <rect id='topLeftRect1' x='5' y='5' width='90' height='90'/>
  26         <rect id='topLeftRect2NoHitTest' x='10' y='10' width='80' height='80'/>
  27         <rect id='topLeftRect3' x='15' y='15' width='70' height='70'/>
  28
  29         <svg id='topRightSvg' x='205' y='5' width='90' height='90'>
  30             <rect id='topRightRect1' x='5' y='5' width='80' height='80'/>
  31             <rect id='topRightRect2' x='10' y='10' width='70' height='70'/>
  32         </svg>
  33
  34         <g id='middleG1'>
  35             <g id='middleG2'>
  36                 <rect id='middleRect1' x='105' y='105' width='90' height='90'/>
  37                 <rect id='middleRect2' x='110' y='110' width='80' height='80'/>
  38             </g>
  39         </g>
  40
  41         <g id='bottomLeftG'>
  42             <image id='bottomLeftImage1' x='5' y='205' width='90' height='90' xlink:href='data:image/svg+xml;utf8,<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" fill="rgba(180,0,0,0.2)"/></svg>'/>
  43             <image id='bottomLeftImage2' x='10' y='210' width='80' height='80' xlink:href='data:image/svg+xml;utf8,<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" fill="rgba(180,0,0,0.2)"/></svg>'/>
  44         </g>
  45
  46         <g id='bottomRightG1' transform='translate(300, 300)'>
  47             <g id='bottomRightG2' transform='translate(-100, -100)'>
  48                 <rect id='bottomRightRect1' x='5' y='5' width='90' height='90'/>
  49                 <rect id='bottomRightRect2' x='110' y='110' width='80' height='80' transform='translate(-100, -100)'/>
  50             </g>
  51         </g>
  52     </svg>
  53 </div>
  54 <div id="console"></div>
  55 <script>
  56 window.jsTestIsAsync = true;
  57
  58 if (window.testRunner)
  59     testRunner.dumpAsText();
  60
  61 if (window.internals)
  62     internals.settings.setMockScrollbarsEnabled(true);
  63
  64 onload = function() {
  65     // Verify two overlapping rects can be hit.
  66     assertElementsFromPoint('document.elementsFromPoint(125, 125)', [topLeftRect3, topLeftRect1, svg, sandbox, document.body, document.documentElement]);
  67
  68     // Verify two rects inside an svg element with pointer-events: bounding-box can be hit.
  69     assertElementsFromPoint('document.elementsFromPoint(325, 125)', [topRightRect2, topRightRect1, topRightSvg, svg, sandbox, document.body, document.documentElement]);
  70
  71     // Verify two rects can be hit when inside a <g>.
  72     assertElementsFromPoint('document.elementsFromPoint(225, 225)', [middleRect2, middleRect1, middleG2, middleG1, svg, sandbox, document.body, document.documentElement]);
  73
  74     // Verify two overlapping images can be hit.
  75     assertElementsFromPoint('document.elementsFromPoint(125, 325)', [bottomLeftImage2, bottomLeftImage1, bottomLeftG, svg, sandbox, document.body, document.documentElement]);
  76
  77     // Verify transformed <g>s and <rect>s can be hit.
  78     assertElementsFromPoint('document.elementsFromPoint(325, 325)', [bottomRightRect2, bottomRightRect1, bottomRightG2, bottomRightG1, svg, sandbox, document.body, document.documentElement]);
  79
  80     finishJSTest();
  81 }
  82 </script>