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