Add an option to output the results of the graphics benchmark in JSON format
[WebKit-https.git] / PerformanceTests / Animometer / runner / animometer.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4     <link rel="stylesheet" href="resources/animometer.css">
5     <script src="../resources/strings.js" defer></script>
6     <script src="../resources/sampler.js" defer></script>
7     <script src="../resources/extensions.js" defer></script>
8     <script src="resources/tests.js" defer=""></script>
9     <script src="resources/benchmark-runner.js" defer></script>
10     <script src="resources/animometer.js" defer></script>
11     <script src="resources/d3.min.js" defer></script>
12     <script src="resources/graph.js" defer></script>
13 </head>
14 <body>
15     <main>
16         <section id="home" class="selected">
17             <p>
18                 Animometer is a browser benchmark that measures the complexity of an animation for
19                 which a browser can achieve 50 FPS (frame per second). It uses adaptive animations
20                 to tune their complexities to stay close to 50 FPS.
21             </p>
22             <div class="options">
23                 <div id="suites" class="column">
24                 </div>
25                 <div>
26                     <label>Test interval: <input id="test-interval" type="number" value="30"> seconds</label><br>
27                     <label>Frame rate: <input id="frame-rate" type="number" value="50"> fps</label><br>
28                     <label><input id="estimated-frame-rate" type="checkbox" checked> Estimated Frame Rate</label><br>
29                     <label><input id="fix-test-complexity" type="checkbox"> Fix test complexity after warmup</label>
30                     <label><input id="show-running-results" type="checkbox"> Show running results</label>
31                 </div>
32             </div>
33             <div class="buttons">
34                 <button onclick="startTest()">Start Test</button>
35             </div>
36         </section>
37         <section id="running">
38             <div id="testContainer"></div>
39             <div id="progress">
40                 <div id="progress-completed"></div>
41             </div>
42             <div id="record">
43                 <table class="record-table"></table>
44             </div>
45         </section>
46         <section id="results">
47             <h1>Results:</h1>
48             <table class="results-table"></table>
49             <div class="buttons">
50                 <button onclick="showJson()">JSON</button>
51                 <button onclick="startTest()">Test Again</button>
52             </div>
53         </section>  
54         <section id="json">
55             <h1>JSON:</h1>
56             <textarea class="results-json"></textarea>
57             <div class="buttons">
58                 <button onclick="showResults()">Results</button>
59                 <button onclick="startTest()">Test Again</button>
60             </div>
61         </section>  
62         <section id="test-graph">
63             <h1>Graph:</h1>
64             <div id="graphContainer"></div>
65             <div class="buttons">
66                 <button onclick="showResults()">Results</button>
67                 <button onclick="startTest()">Test Again</button>        
68             </div>
69         </section>  
70         <section id="test-json">
71             <h1>JSON:</h1>
72             <textarea class="results-json"></textarea>
73             <div class="buttons">
74                 <button onclick="showResults()">Results</button>
75                 <button onclick="startTest()">Test Again</button>        
76             </div>
77         </section>  
78     </main>
79 </body>
80 </html>