Websites/browserbench.org/MotionMark/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>Tiles:</h3>
  52                                     <ul>
  53                                         <li><label><input name="tiles" type="radio" value="big" checked> Big tiles</label></li>
  54                                         <li><label><input name="tiles" type="radio" value="classic"> Classic tiles (512x512)</label></li>
  55                                     </ul>
  56                                 </li>
  57                                 <li>
  58                                     <h3>Adjusting the test complexity:</h3>
  59                                     <ul>
  60                                         <li><label><input name="controller" type="radio" value="fixed"> Keep at a fixed complexity</label></li>
  61                                         <li><label><input name="controller" type="radio" value="step"> Keep at a fixed complexity, then make a big step</label></li>
  62                                         <li><label><input name="controller" type="radio" value="adaptive"> Maintain target FPS</label></li>
  63                                         <li><label><input name="controller" type="radio" value="ramp" checked> Ramp</label></li>
  64                                         <li><label><input name="controller" type="radio" value="ramp30"> Ramp @ 30fps</label></li>
  65                                     </ul>
  66                                 </li>
  67                                 <li>
  68                                     <label>Target frame rate: <input type="number" id="frame-rate" value="50"> FPS</label>
  69                                 </li>
  70                                 <li>
  71                                     <h3>Kalman filter estimated error:</h3>
  72                                     <ul>
  73                                         <li><label>Process error (Q): <input type="number" id="kalman-process-error" value="1"></label></li>
  74                                         <li><label>Measurement error (R): <input type="number" id="kalman-measurement-error" value="4"></label></li>
  75                                     </ul>
  76                                 </li>
  77                                 <li>
  78                                     <h3>Time measurement method:</h3>
  79                                     <ul>
  80                                         <li><label><input name="time-measurement" type="radio" value="performance" checked> <code>performance.now()</code> (if available)</label></li>
  81                                         <li><label><input name="time-measurement" type="radio" value="raf"> <code>requestAnimationFrame()</code> timestamp</label></li>
  82                                         <li><label><input name="time-measurement" type="radio" value="date"> <code>Date.now()</code></label></li>
  83                                     </ul>
  84                                 </li>
  85                             </ul>
  86                         </form>
  87                     </div>
  88                 </div>
  89                 <p>For accurate results, please take the browser window full screen, or rotate the device to landscape orientation.</p>
  90                 <div class="start-benchmark">
  91                     <p class="hidden">Please rotate the device to orientation before starting.</p>
  92                     <button id="run-benchmark" onclick="benchmarkController.startBenchmark()">Run benchmark</button>
  93                 </div>
  94             </div>
  95         </section>
  96
  97         <section id="test-container">
  98             <div id="running-test" class="frame-container"></div>
  99             <div id="progress">
 100                 <div id="progress-completed"></div>
 101             </div>
 102         </section>
 103
 104         <section id="results">
 105             <div class="body">
 106                 <h1>MotionMark score</h1>
 107                 <div class="detail">
 108                     <span class="small">on a small screen (phone)</span>
 109                     <span class="medium">on a medium screen (laptop, tablet)</span>
 110                     <span class="large">on a large screen (desktop)</span>
 111                 </div>
 112                 <p class="score" onclick="benchmarkController.showDebugInfo()"></p>
 113                 <p class="confidence"></p>
 114                 <div id="results-tables" class="table-container">
 115                     <div>
 116                         <table id="results-score"></table>
 117                         <table id="results-data"></table>
 118                     </div>
 119                     <table id="results-header"></table>
 120                 </div>
 121                 <button onclick="benchmarkController.restartBenchmark()">Test Again</button>
 122                 <p>
 123                     'j': Show JSON results<br/>
 124                     's': Select various results for copy/paste (use repeatedly to cycle)
 125                 </p>
 126             </div>
 127         </section>
 128         <section id="test-graph">
 129             <div class="body">
 130                 <header>
 131                     <button onclick="benchmarkController.showResults()">&lt; Results</button>
 132                     <h1>Graph:</h1>
 133                     <p class="score"></p>
 134                     <p class="confidence"></p>
 135                 </header>
 136                 <nav>
 137                     <form name="graph-type">
 138                         <ul>
 139                             <li><label><input type="radio" name="graph-type" value="time"> Time graph</label></li>
 140                             <li><label><input type="radio" name="graph-type" value="complexity" checked> Complexity graph</label></li>
 141                         </ul>
 142                     </form>
 143                     <form name="time-graph-options">
 144                         <ul>
 145                             <li><label><input type="checkbox" name="markers" checked> Markers</label>
 146                                 <span>time: <span class="time"></span></span></li>
 147                             <li><label><input type="checkbox" name="averages" checked> Averages</label></li>
 148                             <li><label><input type="checkbox" name="complexity" checked> Complexity</label>
 149                                 <span class="complexity"></span></li>
 150                             <li><label><input type="checkbox" name="rawFPS" checked> Raw FPS</label>
 151                                 <span class="rawFPS"></span></li>
 152                             <li><label><input type="checkbox" name="filteredFPS" checked> Filtered FPS</label>
 153                                 <span class="filteredFPS"></span></li>
 154                             <li><label><input type="checkbox" name="regressions" checked> Regressions</label></li>
 155                         </ul>
 156                     </form>
 157                     <form name="complexity-graph-options">
 158                         <ul class="series">
 159                             <li><label><input type="checkbox" name="series-raw" checked> Series raw</label></li>
 160                             <li><label><input type="checkbox" name="series-average"> Series average</label></li>
 161                         </ul>
 162                         <ul>
 163                             <li><label><input type="checkbox" name="regression-time-score"> Controller score</label></li>
 164                             <li><label><input type="checkbox" name="bootstrap-score" checked> Bootstrap score and histogram</label></li>
 165                             <li><label><input type="checkbox" name="complexity-regression-aggregate-raw" checked> Regression, series raw</label><span id="complexity-regression-aggregate-raw"></span></li>
 166                             <li><label><input type="checkbox" name="complexity-regression-aggregate-average"> Regression, series average</label><span id="complexity-regression-aggregate-average"></span></li>
 167                         </ul>
 168                     </form>
 169                 </nav>
 170                 <div id="test-graph-data"></div>
 171             </div>
 172         </section>
 173     </main>
 174 </body>
 175 </html>