Add Websites/browserbench.org
[WebKit-https.git] / Websites / browserbench.org / index.html
1 <!DOCTYPE html<html>
2 <head>
3     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
4     <title>BrowserBench.org &mdash; Browser Benchmarks</title>
5     <link rel="stylesheet" href="resources/main.css">
6     <script>
7     function chooseAsset(img) {
8         var ratio = window.devicePixelRatio;
9         var srcset = img.getAttribute('srcset');
10         if (!srcset)
11             return null;
12         var tokens = srcset.split(/\s*,\s*/);
13         for (var i = 0; i < tokens.length; i++) {
14             var parsedToken = tokens[i].match(/(.+)\s+(\d)x/);
15             if (parsedToken && parseInt(parsedToken[2]) == ratio)
16                 return parsedToken[1];
17         }
18         return null;
19     }
20
21     if (!HTMLImageElement.prototype.srcset) {
22         window.addEventListener('DOMContentLoaded', function () {
23             var images = document.querySelectorAll('img');
24             for (var i = 0; i < images.length; i++) {
25                 if (!images[i].srcset)
26                     images[i].src = chooseAsset(images[i]);
27             }
28         });
29     }
30     </script>
31 </head>
32 <body>
33 <main>
34
35 <div id="logo">
36 <span class="light">browser</span><span class="normal">bench</span><span class="highlight">.</span><span class="light">org</span>
37 </div>
38
39 <hr>
40
41 <a class="benchmark" href="MotionMark" tabindex="0">
42 <img id="motionmark-logo" srcset="resources/MotionMark-Logo.png 1x, resources/MotionMark-Logo@2x.png 2x" alt="MotionMark">
43 <p>MotionMark is a benchmark designed to put browser graphics systems to the test.</p>
44 </a>
45
46 <a class="benchmark" href="Speedometer" tabindex="0">
47 <img id="speedometer-logo"
48     srcset="resources/Speedometer-Logo.png 1x, resources/Speedometer-Logo@2x.png 2x" alt="Speedometer">
49 <p>Speedometer is a browser benchmark that measures the responsiveness of web applications.</p>
50 </a>
51
52 <a class="benchmark" href="JetStream" tabindex="0">
53 <img id="jetstream-logo"
54     srcset="resources/JetStream-Logo.png 1x, resources/JetStream-Logo@2x.png 2x" alt="JetStream">
55 <p>JetStream is a JavaScript benchmark suite focused on the most advanced web applications.</p>
56 </a>
57
58 </main>
59 </body>
60 </html>