Initialize the graphics benchmark's Kalman filter with estimated 60 FPS
[WebKit-https.git] / PerformanceTests / Animometer / runner / animometer.html
index e728e9a2287be7bd0c400777510166c954bfbdbc..fe4fc6b8c7d767e41d53f7b773cc0b5f89ce01a2 100644 (file)
@@ -2,64 +2,97 @@
 <html>
 <head>
     <link rel="stylesheet" href="resources/animometer.css">
-    <script src="../resources/statistics.js" defer></script>
-    <script src="../resources/sampler.js" defer></script>
-    <script src="../resources/extensions.js" defer></script>
-    <script src="resources/tests.js" defer=""></script>
-    <script src="resources/benchmark-runner.js" defer></script>
+    <script src="../resources/strings.js"></script>
+    <script src="../resources/sampler.js"></script>
+    <script src="../resources/extensions.js"></script>
+    <script src="resources/tests.js"></script>
+    <script src="resources/benchmark-runner.js"></script>
     <script src="resources/animometer.js" defer></script>
-    <script src="resources/d3.min.js" defer></script>
-    <script src="resources/graph.js" defer></script>
+    <script src="resources/d3.min.js"></script>
+    <script src="resources/graph.js"></script>
 </head>
 <body>
     <main>
         <section id="home" class="selected">
-            <p>
-                Animometer is a browser benchmark that measures the complexity of an animation for
-                which a browser can achieve 50 FPS (frame per second). It uses adaptive animations
-                to tune their complexities to stay close to 50 FPS.
-            </p>
-            <div class="options">
-                <div class="column">
-                    <label><input id="html-suite" type="checkbox" checked> HTML elements suite</label><br>
-                    <label><input id="canvas-suite" type="checkbox" checked> Canvas drawings suite</label><br>
-                    <label><input id="svg-suite" type="checkbox" checked> SVG elements suite</label><br>
-                    <label><input id="template-suite" type="checkbox"> Template suite</label>
-                </div>
-                <div>
-                    <label>Test interval: <input id="test-interval" type="number" value="30"> seconds</label><br>
-                    <label>Frame rate: <input id="frame-rate" type="number" value="50"> fps</label><br>
-                    <label><input id="estimated-frame-rate" type="checkbox" checked> Estimated Frame Rate</label><br>
-                    <label><input id="fix-test-complexity" type="checkbox"> Fix test complexity after warmup</label>
-                </div>
-            </div>
-            <div class="buttons">
-                <button onclick="startTest()">Start Test</button>
-            </div>
+            <header>
+                <h2>
+                    Animometer is a browser benchmark that measures the complexity of an animation for
+                    which a browser can achieve 50 FPS (frame per second). It uses adaptive animations
+                    to tune their complexities to stay close to 50 FPS.
+                </h2>
+            </header>
+            <suites>
+                <h2>Suites:</h2>
+                <ul class="tree"></ul>
+            </suites>
+            <options>
+                <h2>Options:</h2>
+                <label>Test interval: <input id="test-interval" type="number" value="10"> seconds</label><br>
+                <label>Frame rate: <input id="frame-rate" type="number" value="50"> fps</label><br>
+                <label><input id="estimated-frame-rate" type="checkbox" checked> Estimated Frame Rate</label><br>
+                <label><input id="fix-test-complexity" type="checkbox"> Fix test complexity after warmup</label><br>
+                <label><input id="show-running-results" type="checkbox"> Show running results</label><br>
+                <label><input id="normalize-for-device-scale-factor" type="checkbox"> Normalize for device scale factor</label><br>
+                <label><input id="adaptive-test" type="checkbox" checked onchange="benchmarkController.onChangeAdaptiveTestCheckbox()"> Adaptive test</label>
+            </options>
+            <footer>
+                <button class="large-button" onclick="benchmarkController.startTest()">Start Test</button>
+            </footer>
         </section>
         <section id="running">
-            <div id="testContainer"></div>
+            <div id="running-test"></div>
             <div id="progress">
                 <div id="progress-completed"></div>
             </div>
             <div id="record">
-                <table class="record-table"></table>
+                <table class="results-table"></table>
             </div>
         </section>
         <section id="results">
-            <h1>Results</h1>
-            <table class="results-table"></table>
-            <div class="buttons">
-                <button onclick="startTest()">Test Again</button>
-            </div>
+            <header>
+                <h1>Results:</h1>
+            </header>
+            <data>
+                <table class="results-table"></table>
+            </data>
+            <footer>
+                <button class="large-button" onclick="benchmarkController.showJson()">JSON</button>
+                <button class="large-button" onclick="benchmarkController.startTest()">Test Again</button>
+            </footer>
         </section>  
-        <section id="graph">
-            <h1>Graph</h1>
-            <div id="graphContainer"></div>
-            <div class="buttons">
-                <button onclick="showResults()">Results</button>
-                <button onclick="startTest()">Test Again</button>        
-            </div>
+        <section id="json">
+            <header>
+                <h1>JSON:</h1>
+            </header>
+            <data>
+                <div class="results-json" contentEditable="true"></div>
+            </data>
+            <footer>
+                <button class="large-button" onclick="benchmarkController.showResults()">Results</button>
+                <button class="large-button" onclick="benchmarkController.startTest()">Test Again</button>
+            </footer>
+        </section>  
+        <section id="test-json">
+            <header>
+                <h1>JSON:</h1>
+            </header>
+            <data>
+                <div class="results-json" contentEditable="true"></div>
+            </data>
+            <footer>
+                <button class="large-button" onclick="benchmarkController.showResults()">Results</button>
+                <button class="large-button" onclick="benchmarkController.startTest()">Test Again</button>        
+            </footer>
+        </section>
+        <section id="test-graph">
+            <header>
+                <h1>Graph:</h1>
+            </header>
+            <data></data>
+            <footer>
+                <button class="large-button" onclick="benchmarkController.showResults()">Results</button>
+                <button class="large-button" onclick="benchmarkController.startTest()">Test Again</button>        
+            </footer>
         </section>  
     </main>
 </body>