Update Animometer design
[WebKit-https.git] / PerformanceTests / Animometer / index.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>Motion Mark 1.0</title>
8
9     <link rel="stylesheet" href="resources/runner/animometer.css">
10
11     <script src="resources/strings.js" defer></script>
12     <script src="resources/extensions.js" defer></script>
13     <script src="resources/statistics.js" defer></script>
14
15     <script src="resources/runner/tests.js" defer></script>
16     <script src="resources/runner/animometer.js" defer></script>
17
18     <script src="resources/runner/benchmark-runner.js" defer></script>
19
20     <script>
21         window.addEventListener("load", function() {
22             // Start the fade in animation.
23             document.body.classList.add("images-loaded");
24         });
25     </script>
26 </head>
27 <body class="showing-intro">
28     <main>
29         <section id="intro" class="selected">
30             <svg class="logo"><use xlink:href="resources/runner/logo.svg#root"></svg>
31             <div class="body">
32                 <p>Motion Mark is a graphics benchmark that measures a browser’s capability to animate complex scenes at a target frame rate.</p>
33                 <p>For accurate results, please take your browser window full screen, or rotate your device to landscape orientation.</p>
34                 <p class="portrait-orientation-check"><b>Please rotate your device.</b></p>
35                 <button class="landscape-orientation-check" onclick="benchmarkController.startBenchmark()">Run Benchmark</button>
36             </div>
37         </section>
38
39         <section id="test-container" class="frame-container"></section>
40
41         <section id="results">
42             <svg class="logo"><use xlink:href="resources/runner/logo.svg#root"></svg>
43             <div class="body">
44                 <p class="score" onclick="benchmarkController.showDebugInfo()"></p>
45                 <table id="results-header"></table><table id="results-score"></table><br>
46                 <button onclick="benchmarkController.startBenchmark()">Test Again</button>
47             </div>
48         </section>
49     </main>
50 </body>
51 </html>