Enable HAVE_AVFOUNDATION_VIDEO_OUTPUT on PLATFORM(IOSMAC)
[WebKit-https.git] / 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.measureTime({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       }, done:function() {
111         var wrapper = document.getElementById('wrapper');
112         if (wrapper)
113           wrapper.parentNode.removeChild(wrapper);
114       }});
115     </script>
116   </body>
117 </html>