fe4fc6b8c7d767e41d53f7b773cc0b5f89ce01a2
[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"></script>
6     <script src="../resources/sampler.js"></script>
7     <script src="../resources/extensions.js"></script>
8     <script src="resources/tests.js"></script>
9     <script src="resources/benchmark-runner.js"></script>
10     <script src="resources/animometer.js" defer></script>
11     <script src="resources/d3.min.js"></script>
12     <script src="resources/graph.js"></script>
13 </head>
14 <body>
15     <main>
16         <section id="home" class="selected">
17             <header>
18                 <h2>
19                     Animometer is a browser benchmark that measures the complexity of an animation for
20                     which a browser can achieve 50 FPS (frame per second). It uses adaptive animations
21                     to tune their complexities to stay close to 50 FPS.
22                 </h2>
23             </header>
24             <suites>
25                 <h2>Suites:</h2>
26                 <ul class="tree"></ul>
27             </suites>
28             <options>
29                 <h2>Options:</h2>
30                 <label>Test interval: <input id="test-interval" type="number" value="10"> seconds</label><br>
31                 <label>Frame rate: <input id="frame-rate" type="number" value="50"> fps</label><br>
32                 <label><input id="estimated-frame-rate" type="checkbox" checked> Estimated Frame Rate</label><br>
33                 <label><input id="fix-test-complexity" type="checkbox"> Fix test complexity after warmup</label><br>
34                 <label><input id="show-running-results" type="checkbox"> Show running results</label><br>
35                 <label><input id="normalize-for-device-scale-factor" type="checkbox"> Normalize for device scale factor</label><br>
36                 <label><input id="adaptive-test" type="checkbox" checked onchange="benchmarkController.onChangeAdaptiveTestCheckbox()"> Adaptive test</label>
37             </options>
38             <footer>
39                 <button class="large-button" onclick="benchmarkController.startTest()">Start Test</button>
40             </footer>
41         </section>
42         <section id="running">
43             <div id="running-test"></div>
44             <div id="progress">
45                 <div id="progress-completed"></div>
46             </div>
47             <div id="record">
48                 <table class="results-table"></table>
49             </div>
50         </section>
51         <section id="results">
52             <header>
53                 <h1>Results:</h1>
54             </header>
55             <data>
56                 <table class="results-table"></table>
57             </data>
58             <footer>
59                 <button class="large-button" onclick="benchmarkController.showJson()">JSON</button>
60                 <button class="large-button" onclick="benchmarkController.startTest()">Test Again</button>
61             </footer>
62         </section>  
63         <section id="json">
64             <header>
65                 <h1>JSON:</h1>
66             </header>
67             <data>
68                 <div class="results-json" contentEditable="true"></div>
69             </data>
70             <footer>
71                 <button class="large-button" onclick="benchmarkController.showResults()">Results</button>
72                 <button class="large-button" onclick="benchmarkController.startTest()">Test Again</button>
73             </footer>
74         </section>  
75         <section id="test-json">
76             <header>
77                 <h1>JSON:</h1>
78             </header>
79             <data>
80                 <div class="results-json" contentEditable="true"></div>
81             </data>
82             <footer>
83                 <button class="large-button" onclick="benchmarkController.showResults()">Results</button>
84                 <button class="large-button" onclick="benchmarkController.startTest()">Test Again</button>        
85             </footer>
86         </section>
87         <section id="test-graph">
88             <header>
89                 <h1>Graph:</h1>
90             </header>
91             <data></data>
92             <footer>
93                 <button class="large-button" onclick="benchmarkController.showResults()">Results</button>
94                 <button class="large-button" onclick="benchmarkController.startTest()">Test Again</button>        
95             </footer>
96         </section>  
97     </main>
98 </body>
99 </html>