Add StyleBench
[WebKit-https.git] / PerformanceTests / StyleBench / index.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5     <title>StyleBench 0.1</title>
6     <link rel="stylesheet" href="../Speedometer/resources/main.css">
7     <script src="../Speedometer/resources/main.js" defer></script>
8     <script src="../Speedometer/resources/benchmark-runner.js" defer></script>
9     <script src="../Speedometer/resources/benchmark-report.js" defer></script>
10     <script src="../resources/statistics.js" defer></script>
11     <script src="resources/style-bench.js" defer></script>
12     <script src="resources/tests.js" defer></script>
13     <script>
14         addEventListener('load', () => {
15             if (!window.location.protocol.startsWith('http'))
16                 showSection('local-message', false);
17         });
18     </script>
19 </head>
20 <body>
21 <main>
22     <a id="logo-link" href="javascript:showHome()"></a>
23
24     <section id="home" class="selected">
25         <p>
26             StyleBench is a browser benchmark that measures the performance of the style resolution mechanism.
27         </p>
28         <p id="screen-size-warning"><strong>
29             Your browser window is too small. For most accurate results, please make the view port size at least 850px by 650px.<br>
30             It's currently <span id="screen-size"></span>.
31         </strong>
32         <div class="buttons">
33             <button onclick="startTest()">Start Test</button>
34         </div>
35         <p class="show-about"><a href="javascript:showAbout()">About StyleBench</a></p>
36     </section>
37
38     <section id="running">
39         <div id="testContainer"></div>
40         <div id="progress"><div id="progress-completed"></div></div>
41         <div id="info"></div>
42     </section>
43
44     <section id="summarized-results">
45         <h1>Runs / Minute</h1>
46         <div class="gauge"><div class="window"><div class="needle"></div></div></div>
47         <hr>
48         <div id="result-number"></div>
49         <div id="confidence-number"></div>
50         <div class="buttons">
51             <button onclick="startTest()">Test Again</button>
52             <button class="show-details" onclick="showResultDetails()">Details</button>
53         </div>
54     </section>
55
56     <section id="detailed-results">
57         <h1>Detailed Results</h1>
58         <table class="results-table"></table>
59         <table class="results-table"></table>
60         <div class="arithmetic-mean"><label>Arithmetic Mean:</label><span id="results-with-statistics"></span></div>
61         <div class="buttons">
62             <button onclick="startTest()">Test Again</button>
63             <button id="show-summary" onclick="showResultsSummary()">Summary</button>
64         </div>
65         <p class="show-about"><a href="javascript:showAbout()">About StyleBench</a></p>
66     </section>
67
68     <section id="about">
69         <h1>About StyleBench</h1>
70
71         <p>StyleBench tests performance of CSS style resolution and style invalidation. Each test run creates a large document and a large stylesheet using varying settings. It then applies a series of mutations to the document and measures the time to update the rendering. The resulting layout is simple, most of the pressure is on selector matching.</p>
72
73         <p>StyleBench uses Speedometer framework for UI and measurements.</p>
74     </section>
75     <section id="local-message">
76         <h2>Access via 'file:' protocol</h1>
77         <p>To run locally, launch a web server under PerformanceTests directory with 'python -m SimpleHTTPServer 8001' and access via <a href="http://localhost:8001/StyleBench">http://localhost:8001/StyleBench</a>.
78         </p>
79         <p>
80             Individual tests (without measurement) can also be run locally by opening <a href="resources/style-bench.html">PerformanceTests/StyleBench/resources/style-bench.html</a>
81         </p>
82     </section>
83 </main>
84 </body>
85 </html>