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             <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="30"> 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>
  36             </options>
  37             <footer>
  38                 <button class="large-button" onclick="benchmarkController.startTest()">Start Test</button>
  39             </footer>
  40         </section>
  41         <section id="running">
  42             <div id="running-test"></div>
  43             <div id="progress">
  44                 <div id="progress-completed"></div>
  45             </div>
  46             <div id="record">
  47                 <table class="results-table"></table>
  48             </div>
  49         </section>
  50         <section id="results">
  51             <header>
  52                 <h1>Results:</h1>
  53             </header>
  54             <data>
  55                 <table class="results-table"></table>
  56             </data>
  57             <footer>
  58                 <button class="large-button" onclick="benchmarkController.showJson()">JSON</button>
  59                 <button class="large-button" onclick="benchmarkController.startTest()">Test Again</button>
  60             </footer>
  61         </section>
  62         <section id="json">
  63             <header>
  64                 <h1>JSON:</h1>
  65             </header>
  66             <data>
  67                 <div class="results-json" contentEditable="true"></div>
  68             </data>
  69             <footer>
  70                 <button class="large-button" onclick="benchmarkController.showResults()">Results</button>
  71                 <button class="large-button" onclick="benchmarkController.startTest()">Test Again</button>
  72             </footer>
  73         </section>
  74         <section id="test-json">
  75             <header>
  76                 <h1>JSON:</h1>
  77             </header>
  78             <data>
  79                 <div class="results-json" contentEditable="true"></div>
  80             </data>
  81             <footer>
  82                 <button class="large-button" onclick="benchmarkController.showResults()">Results</button>
  83                 <button class="large-button" onclick="benchmarkController.startTest()">Test Again</button>
  84             </footer>
  85         </section>
  86         <section id="test-graph">
  87             <header>
  88                 <h1>Graph:</h1>
  89             </header>
  90             <data></data>
  91             <footer>
  92                 <button class="large-button" onclick="benchmarkController.showResults()">Results</button>
  93                 <button class="large-button" onclick="benchmarkController.startTest()">Test Again</button>
  94             </footer>
  95         </section>
  96     </main>
  97 </body>
  98 </html>