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>