Add a performance test for floating elements layout algorithm
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 5 Aug 2011 04:51:00 +0000 (04:51 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 5 Aug 2011 04:51:00 +0000 (04:51 +0000)
https://bugs.webkit.org/show_bug.cgi?id=65741

The test creating lots of small floats and randomly changes
the width of one element at a time. It measures how often it can do that.

Patch by Alexandru Chiculita <achicu@adobe.com> on 2011-08-04
Reviewed by Adam Barth.

* Layout/floats.html: Added.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@92444 268f45cc-cd09-0410-ab3c-d52691b4dbfc

PerformanceTests/ChangeLog
PerformanceTests/Layout/floats.html [new file with mode: 0644]

index ff8b0a0..1acf4e1 100644 (file)
@@ -1,3 +1,15 @@
+2011-08-04  Alexandru Chiculita  <achicu@adobe.com>
+
+        Add a performance test for floating elements layout algorithm
+        https://bugs.webkit.org/show_bug.cgi?id=65741
+
+        The test creating lots of small floats and randomly changes
+        the width of one element at a time. It measures how often it can do that.
+
+        Reviewed by Adam Barth.
+
+        * Layout/floats.html: Added.
+
 2011-05-30  Daniel Bates  <dbates@webkit.org>
 
         Reviewed by Adam Barth.
diff --git a/PerformanceTests/Layout/floats.html b/PerformanceTests/Layout/floats.html
new file mode 100644 (file)
index 0000000..67805d8
--- /dev/null
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Floats layout performance tester</title>
+        <style>
+            .float {
+                float: left;
+                width: 5px;
+                height: 5px;
+                border: 1px solid green;
+            }
+            .big {
+                width: 10px;
+            }
+            .float-end {
+                clear:left;
+            }
+
+            #framerate_panel {
+                display: none;
+            }
+        </style>
+        <script>
+            function createElement(tag, parent, className, id)
+            {
+                var el = document.createElement(tag);
+                el.className = className;
+                el.id = id;
+                parent.appendChild(el);
+                return el;
+            }
+
+            function createSet(width, height)
+            {
+                var container = createElement("div", document.body, "container");
+                for (var y = 0; y < height; ++y) {
+                    for (var x = 0; x < width; ++x)
+                        createElement("div", container, "float", "float" + x + "_" + y);
+                    createElement("div", container, "float-end", "end" + x)
+                }
+            }
+
+            function toggle(str, str1, str2)
+            {
+                if (str == str1)
+                    return str2;
+                return str1;
+            }
+
+            function test(width, height) 
+            {
+                document.getElementById("test_panel").style.display = "none";
+                document.getElementById("framerate_panel").style.display = "block";
+
+                createSet(width, height);
+                var updates = 0;
+                var startTime = new Date();
+
+                function updateTimer()
+                {
+                    ++updates;
+
+                    var newTime = new Date();
+                    var deltaTime = newTime - startTime;
+
+                    if ((deltaTime > 0 && updates > 100) || deltaTime > 1000) {
+                        var fps = updates * 100 / deltaTime;
+                        document.getElementById("fps").innerHTML = fps;
+                        updates = 0;
+                        startTime = newTime;
+                    }
+                }
+
+                function update()
+                {
+                    var x = Math.floor(Math.random() * width);
+                    var y = Math.floor(Math.random() * height);
+                    var el = document.getElementById("float" + x + "_" + y);
+                    el.className = toggle(el.className, "float", "float big");
+                    updateTimer();
+                }
+                setInterval(update, 0);
+            }
+        </script>
+    </head>
+    <body>
+        <div id="framerate_panel">Framerate: <span id="fps">calculating...</span> fps</div>
+        <div id="test_panel">
+            <p>Choose the size of the test:</p>
+            <button onclick="test(2, 100)">2 by 100</button>
+            <button onclick="test(20, 100)">20 by 100</button>
+            <button onclick="test(50, 100)">50 by 100</button>
+            <button onclick="test(100, 100)">100 by 100</button>
+        </div>
+    </body>
+</html>
\ No newline at end of file