Add a performance test for floating elements layout algorithm
[WebKit-https.git] / PerformanceTests / Layout / floats.html
1 <!DOCTYPE html>
2 <html>
3     <head>
4         <title>Floats layout performance tester</title>
5         <style>
6             .float {
7                 float: left;
8                 width: 5px;
9                 height: 5px;
10                 border: 1px solid green;
11             }
12             .big {
13                 width: 10px;
14             }
15             .float-end {
16                 clear:left;
17             }
18
19             #framerate_panel {
20                 display: none;
21             }
22         </style>
23         <script>
24             function createElement(tag, parent, className, id)
25             {
26                 var el = document.createElement(tag);
27                 el.className = className;
28                 el.id = id;
29                 parent.appendChild(el);
30                 return el;
31             }
32
33             function createSet(width, height)
34             {
35                 var container = createElement("div", document.body, "container");
36                 for (var y = 0; y < height; ++y) {
37                     for (var x = 0; x < width; ++x)
38                         createElement("div", container, "float", "float" + x + "_" + y);
39                     createElement("div", container, "float-end", "end" + x)
40                 }
41             }
42
43             function toggle(str, str1, str2)
44             {
45                 if (str == str1)
46                     return str2;
47                 return str1;
48             }
49
50             function test(width, height) 
51             {
52                 document.getElementById("test_panel").style.display = "none";
53                 document.getElementById("framerate_panel").style.display = "block";
54
55                 createSet(width, height);
56                 var updates = 0;
57                 var startTime = new Date();
58
59                 function updateTimer()
60                 {
61                     ++updates;
62
63                     var newTime = new Date();
64                     var deltaTime = newTime - startTime;
65
66                     if ((deltaTime > 0 && updates > 100) || deltaTime > 1000) {
67                         var fps = updates * 100 / deltaTime;
68                         document.getElementById("fps").innerHTML = fps;
69                         updates = 0;
70                         startTime = newTime;
71                     }
72                 }
73
74                 function update()
75                 {
76                     var x = Math.floor(Math.random() * width);
77                     var y = Math.floor(Math.random() * height);
78                     var el = document.getElementById("float" + x + "_" + y);
79                     el.className = toggle(el.className, "float", "float big");
80                     updateTimer();
81                 }
82                 setInterval(update, 0);
83             }
84         </script>
85     </head>
86     <body>
87         <div id="framerate_panel">Framerate: <span id="fps">calculating...</span> fps</div>
88         <div id="test_panel">
89             <p>Choose the size of the test:</p>
90             <button onclick="test(2, 100)">2 by 100</button>
91             <button onclick="test(20, 100)">20 by 100</button>
92             <button onclick="test(50, 100)">50 by 100</button>
93             <button onclick="test(100, 100)">100 by 100</button>
94         </div>
95     </body>
96 </html>