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>