Add some new controllers, and refine tests
[WebKit-https.git] / PerformanceTests / Animometer / developer.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4     <title>Animometer - developer</title>
5     <meta charset="utf-8">
6     <meta name="viewport" content="width=device-width, user-scalable=no">
7     <link rel="stylesheet" href="resources/runner/animometer.css">
8     <link rel="stylesheet" href="resources/debug-runner/animometer.css">
9     <script src="resources/strings.js"></script>
10     <script src="resources/extensions.js"></script>
11     <script src="resources/statistics.js"></script>
12
13     <script src="resources/runner/tests.js"></script>
14     <script src="resources/debug-runner/tests.js" charset="utf-8"></script>
15     <script src="resources/runner/animometer.js"></script>
16     <script src="resources/debug-runner/animometer.js" charset="utf-8"></script>
17
18     <script src="resources/runner/benchmark-runner.js"></script>
19     <script src="resources/debug-runner/d3.min.js"></script>
20     <script src="resources/debug-runner/graph.js" charset="utf-8"></script>
21 </head>
22 <body>
23     <main>
24         <hr>
25         <section id="intro" class="selected">
26             <h1>Animometer</h1>
27             <div>
28                 <div id="suites">
29                     <h2>Suites:</h2>
30                     <ul class="tree"></ul>
31                     <div><span id="drop-target">Drop results here</span></div>
32                 </div>
33                 <div id="options">
34                     <h2>Options:</h2>
35                     <form name="benchmark-options">
36                     <ul>
37                     <li>
38                         <label>Test length: <input type="number" id="test-interval" value="20"> seconds each</label>
39                     </li>
40                     <li>
41                         <h3>Display:</h3>
42                         <ul>
43                             <li><label><input name="display" type="radio" value="minimal" checked> Minimal</label></li>
44                             <li><label><input name="display" type="radio" value="progress-bar" checked> Progress bar</label></li>
45                         </ul>
46                     </li>
47                     <li>
48                         <h3>Adjusting the test complexity:</h3>
49                         <ul>
50                             <li><label><input name="controller" type="radio" value="fixed"> Keep at a fixed complexity</label></li>
51                             <li><label><input name="controller" type="radio" value="step"> Keep at a fixed complexity, then make a big step</label></li>
52                             <li><label><input name="controller" type="radio" value="adaptive"> Maintain target FPS</label></li>
53                             <li><label><input name="controller" type="radio" value="ramp" checked> Ramp</label></li>
54                             <li><label><input name="controller" type="radio" value="ramp30"> Ramp @ 30fps</label></li>
55                         </ul>
56                     </li>
57                     <li>
58                         <label>Target frame rate: <input type="number" id="frame-rate" value="50"> FPS</label>
59                     </li>
60                     <li>
61                         <h3>Kalman filter estimated error:</h3>
62                         <ul>
63                             <li><label>Process error (Q): <input type="number" id="kalman-process-error" value="1"></label></li>
64                             <li><label>Measurement error (R): <input type="number" id="kalman-measurement-error" value="4"></label></li>
65                         </ul>
66                     </li>
67                     <li>
68                         <h3>Time measurement method:</h3>
69                         <ul>
70                             <li><label><input name="time-measurement" type="radio" value="performance" checked> <code>performance.now()</code></label></li>
71                             <li><label><input name="time-measurement" type="radio" value="date"> <code>Date.now()</code></label></li>
72                         </ul>
73                     </li>
74                     </ul>
75                     </form>
76                 </div>
77             </div>
78             <button onclick="benchmarkController.startBenchmark()">Start Test</button>
79         </section>
80         <section id="test-container">
81             <div id="running-test" class="frame-container"></div>
82             <div id="progress">
83                 <div id="progress-completed"></div>
84             </div>
85         </section>
86         <section id="results">
87             <h1>Animometer score</h1>
88             <p class="score"></p>
89             <div id="results-tables">
90                 <div>
91                     <table id="results-score"></table>
92                     <table id="results-data"></table>
93                 </div>
94                 <table id="results-header"></table>
95             </div>
96             <div id="results-json">
97                 <button class="small-button" onclick="benchmarkController.showJSONResults()">JSON results</button>
98                 <div class="hidden">
99                     JSON:
100                     <textarea rows=1 onclick="this.focus();this.select()" readonly></textarea>
101                 </div>
102             </div>
103             <button onclick="benchmarkController.startBenchmark()">Test Again</button>
104             <p>'s': Select different data for copy/paste</p>
105         </section>
106         <section id="test-graph">
107             <header>
108                 <button onclick="benchmarkController.showResults()">&lt; Results</button>
109                 <h1>Graph:</h1>
110             </header>
111             <nav>
112                 <form name="graph-type">
113                     <ul>
114                         <li><label><input type="radio" name="graph-type" value="time"> Time graph</label></li>
115                         <li><label><input type="radio" name="graph-type" value="complexity" checked> Complexity graph</label></li>
116                     </ul>
117                 </form>
118                 <form name="time-graph-options">
119                     <ul>
120                         <li><label><input type="checkbox" name="markers" checked> Markers</label>
121                             <span>time: <span class="time"></span></span></li>
122                         <li><label><input type="checkbox" name="averages" checked> Averages</label></li>
123                         <li><label><input type="checkbox" name="complexity" checked> Complexity</label>
124                             <span class="complexity"></span></li>
125                         <li><label><input type="checkbox" name="rawFPS" checked> Raw FPS</label>
126                             <span class="rawFPS"></span></li>
127                         <li><label><input type="checkbox" name="filteredFPS" checked> Filtered FPS</label>
128                             <span class="filteredFPS"></span></li>
129                         <li><label><input type="checkbox" name="regressions" checked> Regressions</label>
130                     </ul>
131                 </form>
132                 <form name="complexity-graph-options">
133                     <ul class="series">
134                         <li><label><input type="checkbox" name="series-raw" checked> Series raw</label></li>
135                         <li><label><input type="checkbox" name="series-average"> Series average</label></li>
136                     </ul>
137                     <ul>
138                         <li><label><input type="checkbox" name="regression-time-score"> Controller score</label></li>
139                         <li><label><input type="checkbox" name="bootstrap-score" checked> Bootstrap score and histogram</label></li>
140                         <li><label><input type="checkbox" name="complexity-regression-aggregate-raw" checked> Regression, series raw</label><span id="complexity-regression-aggregate-raw"></span></li>
141                         <li><label><input type="checkbox" name="complexity-regression-aggregate-average"> Regression, series average</label><span id="complexity-regression-aggregate-average"></span></li>
142                     </ul>
143                 </form>
144             </nav>
145             <p class="score"></p>
146             <p class="mean"></p>
147             <div id="test-graph-data"></div>
148         </section>
149         <hr>
150     </main>
151 </body>
152 </html>