PerformanceTests/SVG/SvgHitTesting.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <style>
   5       body {
   6         margin: 0px;
   7       }
   8       #container {
   9         background-color: #eee;
  10         width: 600px;
  11         height: 400px;
  12       }
  13       #title {
  14         position: absolute;
  15         top: 400px;
  16         left: 0px;
  17         font-family: sans-serif;
  18         font-size: 30px;
  19         text-align: right;
  20         width: 600px;
  21       }
  22     </style>
  23   </head>
  24   <body>
  25     <div id="wrapper">
  26       <div id="title">SVG Hit Testing</div>
  27       <div id="container">
  28         <svg id="svg" width="600" height="400" xmlns="http://www.w3.org/2000/svg" version="1.0">
  29           <g id="shapes1" transform="translate(-60, -20)">
  30             <circle cx="100" cy="75" r="40" fill="#feae00" stroke="#f31900" stroke-width="15" pointer-events="all"/>
  31             <circle cx="300" cy="75" r="40" fill="#feae00" stroke="#f31900" stroke-width="15" pointer-events="visibleFill" />
  32             <circle cx="500" cy="75" r="40" fill="#feae00" stroke="#f31900" stroke-width="15" pointer-events="visibleStroke" />
  33             <ellipse cx="100" cy="150" rx="50" ry="40" fill="#d4ecfb" stroke="#3364c2" stroke-width="15" pointer-events="all" />
  34             <ellipse cx="300" cy="150" rx="50" ry="40" fill="#d4ecfb" stroke="#3364c2" stroke-width="15" pointer-events="visibleFill" />
  35             <ellipse cx="500" cy="150" rx="50" ry="40" fill="#d4ecfb" stroke="#3364c2" stroke-width="15" pointer-events="visibleStroke" />
  36             <rect x="50" y="175" width="100" height="100" fill="#f7d72b" stroke="#db8409" stroke-width="15" pointer-events="all" />
  37             <rect x="250" y="175" width="100" height="100" fill="#f7d72b" stroke="#db8409" stroke-width="15" pointer-events="visibleFill" />
  38             <rect x="450" y="175" width="100" height="100" fill="#f7d72b" stroke="#db8409" stroke-width="15" pointer-events="visibleStroke" />
  39             <path d="M50,300 C75,200 75,200 100,300 S125,400 150,300" fill="#e0fb00" stroke="#44c400" stroke-width="15" pointer-events="all" />
  40             <path d="M250,300 C275,200 275,200 300,300 S325,400 350,300" fill="#e0fb00" stroke="#44c400" stroke-width="15" pointer-events="visibleFill" />
  41             <path d="M450,300 C475,200 475,200 500,300 S525,400 550,300" fill="#e0fb00" stroke="#44c400" stroke-width="15" pointer-events="visibleStroke" />
  42           </g>
  43           <g id="shapes2" transform="translate(-30, -10)">
  44             <circle cx="100" cy="75" r="40" fill="#feae00" stroke="#f31900" stroke-width="15" pointer-events="all"/>
  45             <circle cx="300" cy="75" r="40" fill="#feae00" stroke="#f31900" stroke-width="15" pointer-events="visibleFill" />
  46             <circle cx="500" cy="75" r="40" fill="#feae00" stroke="#f31900" stroke-width="15" pointer-events="visibleStroke" />
  47             <ellipse cx="100" cy="150" rx="50" ry="40" fill="#d4ecfb" stroke="#3364c2" stroke-width="15" pointer-events="all" />
  48             <ellipse cx="300" cy="150" rx="50" ry="40" fill="#d4ecfb" stroke="#3364c2" stroke-width="15" pointer-events="visibleFill" />
  49             <ellipse cx="500" cy="150" rx="50" ry="40" fill="#d4ecfb" stroke="#3364c2" stroke-width="15" pointer-events="visibleStroke" />
  50             <rect x="50" y="175" width="100" height="100" fill="#f7d72b" stroke="#db8409" stroke-width="15" pointer-events="all" />
  51             <rect x="250" y="175" width="100" height="100" fill="#f7d72b" stroke="#db8409" stroke-width="15" pointer-events="visibleFill" />
  52             <rect x="450" y="175" width="100" height="100" fill="#f7d72b" stroke="#db8409" stroke-width="15" pointer-events="visibleStroke" />
  53             <path d="M50,300 C75,200 75,200 100,300 S125,400 150,300" fill="#e0fb00" stroke="#44c400" stroke-width="15" pointer-events="all" />
  54             <path d="M250,300 C275,200 275,200 300,300 S325,400 350,300" fill="#e0fb00" stroke="#44c400" stroke-width="15" pointer-events="visibleFill" />
  55             <path d="M450,300 C475,200 475,200 500,300 S525,400 550,300" fill="#e0fb00" stroke="#44c400" stroke-width="15" pointer-events="visibleStroke" />
  56           </g>
  57           <g id="shapes3" transform="translate(0, 0)">
  58             <circle cx="100" cy="75" r="40" fill="#feae00" stroke="#f31900" stroke-width="15" pointer-events="all"/>
  59             <circle cx="300" cy="75" r="40" fill="#feae00" stroke="#f31900" stroke-width="15" pointer-events="visibleFill" />
  60             <circle cx="500" cy="75" r="40" fill="#feae00" stroke="#f31900" stroke-width="15" pointer-events="visibleStroke" />
  61             <ellipse cx="100" cy="150" rx="50" ry="40" fill="#d4ecfb" stroke="#3364c2" stroke-width="15" pointer-events="all" />
  62             <ellipse cx="300" cy="150" rx="50" ry="40" fill="#d4ecfb" stroke="#3364c2" stroke-width="15" pointer-events="visibleFill" />
  63             <ellipse cx="500" cy="150" rx="50" ry="40" fill="#d4ecfb" stroke="#3364c2" stroke-width="15" pointer-events="visibleStroke" />
  64             <rect x="50" y="175" width="100" height="100" fill="#f7d72b" stroke="#db8409" stroke-width="15" pointer-events="all" />
  65             <rect x="250" y="175" width="100" height="100" fill="#f7d72b" stroke="#db8409" stroke-width="15" pointer-events="visibleFill" />
  66             <rect x="450" y="175" width="100" height="100" fill="#f7d72b" stroke="#db8409" stroke-width="15" pointer-events="visibleStroke" />
  67             <path d="M50,300 C75,200 75,200 100,300 S125,400 150,300" fill="#e0fb00" stroke="#44c400" stroke-width="15" pointer-events="all" />
  68             <path d="M250,300 C275,200 275,200 300,300 S325,400 350,300" fill="#e0fb00" stroke="#44c400" stroke-width="15" pointer-events="visibleFill" />
  69             <path d="M450,300 C475,200 475,200 500,300 S525,400 550,300" fill="#e0fb00" stroke="#44c400" stroke-width="15" pointer-events="visibleStroke" />
  70           </g>
  71           <g id="shapes4" transform="translate(30, 10)">
  72             <circle cx="100" cy="75" r="40" fill="#feae00" stroke="#f31900" stroke-width="15" pointer-events="all"/>
  73             <circle cx="300" cy="75" r="40" fill="#feae00" stroke="#f31900" stroke-width="15" pointer-events="visibleFill" />
  74             <circle cx="500" cy="75" r="40" fill="#feae00" stroke="#f31900" stroke-width="15" pointer-events="visibleStroke" />
  75             <ellipse cx="100" cy="150" rx="50" ry="40" fill="#d4ecfb" stroke="#3364c2" stroke-width="15" pointer-events="all" />
  76             <ellipse cx="300" cy="150" rx="50" ry="40" fill="#d4ecfb" stroke="#3364c2" stroke-width="15" pointer-events="visibleFill" />
  77             <ellipse cx="500" cy="150" rx="50" ry="40" fill="#d4ecfb" stroke="#3364c2" stroke-width="15" pointer-events="visibleStroke" />
  78             <rect x="50" y="175" width="100" height="100" fill="#f7d72b" stroke="#db8409" stroke-width="15" pointer-events="all" />
  79             <rect x="250" y="175" width="100" height="100" fill="#f7d72b" stroke="#db8409" stroke-width="15" pointer-events="visibleFill" />
  80             <rect x="450" y="175" width="100" height="100" fill="#f7d72b" stroke="#db8409" stroke-width="15" pointer-events="visibleStroke" />
  81             <path d="M50,300 C75,200 75,200 100,300 S125,400 150,300" fill="#e0fb00" stroke="#44c400" stroke-width="15" pointer-events="all" />
  82             <path d="M250,300 C275,200 275,200 300,300 S325,400 350,300" fill="#e0fb00" stroke="#44c400" stroke-width="15" pointer-events="visibleFill" />
  83             <path d="M450,300 C475,200 475,200 500,300 S525,400 550,300" fill="#e0fb00" stroke="#44c400" stroke-width="15" pointer-events="visibleStroke" />
  84           </g>
  85           <g id="shapes5" transform="translate(60, 20)">
  86             <circle cx="100" cy="75" r="40" fill="#feae00" stroke="#f31900" stroke-width="15" pointer-events="all"/>
  87             <circle cx="300" cy="75" r="40" fill="#feae00" stroke="#f31900" stroke-width="15" pointer-events="visibleFill" />
  88             <circle cx="500" cy="75" r="40" fill="#feae00" stroke="#f31900" stroke-width="15" pointer-events="visibleStroke" />
  89             <ellipse cx="100" cy="150" rx="50" ry="40" fill="#d4ecfb" stroke="#3364c2" stroke-width="15" pointer-events="all" />
  90             <ellipse cx="300" cy="150" rx="50" ry="40" fill="#d4ecfb" stroke="#3364c2" stroke-width="15" pointer-events="visibleFill" />
  91             <ellipse cx="500" cy="150" rx="50" ry="40" fill="#d4ecfb" stroke="#3364c2" stroke-width="15" pointer-events="visibleStroke" />
  92             <rect x="50" y="175" width="100" height="100" fill="#f7d72b" stroke="#db8409" stroke-width="15" pointer-events="all" />
  93             <rect x="250" y="175" width="100" height="100" fill="#f7d72b" stroke="#db8409" stroke-width="15" pointer-events="visibleFill" />
  94             <rect x="450" y="175" width="100" height="100" fill="#f7d72b" stroke="#db8409" stroke-width="15" pointer-events="visibleStroke" />
  95             <path d="M50,300 C75,200 75,200 100,300 S125,400 150,300" fill="#e0fb00" stroke="#44c400" stroke-width="15" pointer-events="all" />
  96             <path d="M250,300 C275,200 275,200 300,300 S325,400 350,300" fill="#e0fb00" stroke="#44c400" stroke-width="15" pointer-events="visibleFill" />
  97             <path d="M450,300 C475,200 475,200 500,300 S525,400 550,300" fill="#e0fb00" stroke="#44c400" stroke-width="15" pointer-events="visibleStroke" />
  98           </g>
  99         </svg>
 100       </div>
 101     </div>
 102     <script src="../resources/runner.js"></script>
 103     <script>
 104       PerfTestRunner.run(function() {
 105         for (var i = 0; i < 6000; i++) {
 106           var x = 600 * Math.random();
 107           var y = 400 * Math.random();
 108           var el = document.elementFromPoint(x, y);
 109         }
 110       }, 1, 10, function() {
 111         var wrapper = document.getElementById('wrapper');
 112         if (wrapper)
 113           wrapper.parentNode.removeChild(wrapper);
 114       });
 115     </script>
 116   </body>
 117 </html>