Enable HAVE_AVFOUNDATION_VIDEO_OUTPUT on PLATFORM(IOSMAC)
[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.3</title>
6     <link rel="stylesheet" href="resources/main.css">
7     <script src="resources/main.js" defer></script>
8     <script src="resources/benchmark-runner.js" defer></script>
9     <script src="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 </head>
14 <body>
15 <main>
16     <a id="logo-link" href="javascript:showHome()"></a>
17
18     <section id="home" class="selected">
19         <p>
20             StyleBench is a browser benchmark that measures the performance of the style resolution mechanism.
21         </p>
22         <p id="screen-size-warning"><strong>
23             Your browser window is too small. For most accurate results, please make the view port size at least 850px by 650px.<br>
24             It's currently <span id="screen-size"></span>.
25         </strong>
26         <div class="buttons">
27             <button onclick="startTest()">Start Test</button>
28         </div>
29         <p class="show-about"><a href="javascript:showAbout()">About StyleBench</a></p>
30     </section>
31
32     <section id="running">
33         <div id="testContainer"></div>
34         <div id="progress"><div id="progress-completed"></div></div>
35         <div id="info"></div>
36     </section>
37
38     <section id="summarized-results">
39         <h1>Runs / Minute</h1>
40         <div class="gauge"><div class="window"><div class="needle"></div></div></div>
41         <hr>
42         <div id="result-number"></div>
43         <div id="confidence-number"></div>
44         <div class="buttons">
45             <button onclick="startTest()">Test Again</button>
46             <button class="show-details" onclick="showResultDetails()">Details</button>
47         </div>
48     </section>
49
50     <section id="detailed-results">
51         <h1>Detailed Results</h1>
52         <table class="results-table"></table>
53         <table class="results-table"></table>
54         <div class="arithmetic-mean"><label>Arithmetic Mean:</label><span id="results-with-statistics"></span></div>
55         <div class="buttons">
56             <button onclick="startTest()">Test Again</button>
57             <button id="show-summary" onclick="showResultsSummary()">Summary</button>
58         </div>
59         <p class="show-about"><a href="javascript:showAbout()">About StyleBench</a></p>
60     </section>
61
62     <section id="about">
63         <h1>About StyleBench</h1>
64
65         <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>
66
67         <p>StyleBench uses Speedometer framework for UI and measurements.</p>
68     </section>
69     <section id="local-message">
70         <h2>Access via 'file:' protocol</h1>
71         <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>.
72         </p>
73         <p>
74             Individual tests (without measurement) can also be run locally by opening <a href="resources/style-bench.html">PerformanceTests/StyleBench/resources/style-bench.html</a>
75         </p>
76     </section>
77 </main>
78 </body>
79 </html>