Skip to content

Commit 10800d2

Browse files
camillobrunicamillobruni
authored
Auto-add tags to in-depth.html (backmerge #288) (#290)
Use the benchmark definitions from JetStreamDriver.js to add tags to each workload title. - Add tags - Add links to run workload matching a tag - Add links to run a single workload - Improve in-depth.html css a bit to use less spacing around headers and the first definition - Use relative link from index.html => in-depth.html Backmerge of #288
1 parent ee6bdf2 commit 10800d2

4 files changed

Lines changed: 113 additions & 36 deletions

File tree

‎in-depth.html‎

Lines changed: 66 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -27,14 +27,11 @@
2727

2828
<head>
2929
<meta charset="utf-8" />
30-
3130
<title>JetStream 3 In-Depth Analysis</title>
32-
3331
<link rel="stylesheet" href="resources/JetStream.css">
34-
3532
</head>
3633

37-
<body class="overflow-scroll">
34+
<body class="in-depth overflow-scroll">
3835
<h1 class="logo">
3936
<div id="jetstreams">
4037
<a href="index.html" class="logo-image">JetStream 3</a>
@@ -143,7 +140,8 @@ <h3>
143140

144141
<p>
145142
The <span style="color: var(--text-color-very-subtle);">greyed-out workloads</span> are not run by default but can be manually enabled on the command-line or via
146-
the <i>testList</i> URL parameter.
143+
the <code>?test=</code> URL parameter.
144+
You can also click on the workload name to run that one individually, or on tags to run all workloads with a certain tag.
147145
</p>
148146

149147
<dl id="workload-details">
@@ -223,9 +221,9 @@ <h3>
223221
A similar version of this benchmark was previously published in the Web Tooling Benchmark.
224222
Source code: <a href="web-tooling-benchmark/browser.js">babylon.js</a>
225223
</dd>
226-
<dt id="babylonjs-scene-es5" class="non-default">babylonjs-scene-es5</dt>
224+
<dt id="babylonjs-scene-es5">babylonjs-scene-es5</dt>
227225
<dt id="babylonjs-scene-es6">babylonjs-scene-es6</dt>
228-
<dt id="babylonjs-startup-es5" class="non-default">babylonjs-startup-es5</dt>
226+
<dt id="babylonjs-startup-es5">babylonjs-startup-es5</dt>
229227
<dt id="babylonjs-startup-es6">babylonjs-startup-es6</dt>
230228
<dd>TODO</dd>
231229
<dt id="Basic">Basic</dt>
@@ -238,14 +236,14 @@ <h3>
238236
This benchmark was previously published in ARES-6.
239237
Source code: <a href="ARES-6/Basic">Basic</a>
240238
</dd>
241-
<dt id="bigint-bigdenary" class="non-default">bigint-bigdenary</dt>
239+
<dt id="bigint-bigdenary">bigint-bigdenary</dt>
242240
<dd>
243241
<a href="https://github.com/uzyn/bigdenary">BigDenary</a>, an arbitrary-precision
244242
decimal arithmetic, implemented in JavaScript by U-Zyn Chua.
245243
Tests arithmetic operations on BigInt.
246244
Source code: <a href="bigint/bigdenary-bundle.js">bigdenary-bundle.js</a>
247245
</dd>
248-
<dt id="bigint-noble-bls12-381" class="non-default">bigint-noble-bls12-381</dt>
246+
<dt id="bigint-noble-bls12-381">bigint-noble-bls12-381</dt>
249247
<dd>
250248
<a href="https://hackmd.io/@benjaminion/bls12-381">BLS12-381</a>, pairing-friendly
251249
Barreto-Lynn-Scott elliptic curve construction,
@@ -261,15 +259,15 @@ <h3>
261259
by Paul Miller. Tests typed arrays and arithmetic operations on BigInt.
262260
Source code: <a href="bigint/noble-ed25519-bundle.js">noble-ed25519-bundle.js</a>
263261
</dd>
264-
<dt id="bigint-noble-secp256k1" class="non-default">bigint-noble-secp256k1</dt>
262+
<dt id="bigint-noble-secp256k1">bigint-noble-secp256k1</dt>
265263
<dd>
266264
<a href="https://www.secg.org/sec2-v2.pdf">secp256k1</a>, an elliptic curve that could
267265
be used for asymmetric encryption, ECDH key agreement protocol and signature schemes,
268266
<a href="https://github.com/paulmillr/noble-secp256k1">implemented in JavaScript</a>
269267
by Paul Miller. Tests typed arrays and arithmetic operations on BigInt.
270268
Source code: <a href="bigint/noble-secp256k1-bundle.js">noble-secp256k1-bundle.js</a>
271269
</dd>
272-
<dt id="bigint-paillier" class="non-default">bigint-paillier</dt>
270+
<dt id="bigint-paillier">bigint-paillier</dt>
273271
<dd>
274272
<a href="https://en.wikipedia.org/wiki/Paillier_cryptosystem">Paillier cryptosystem</a>,
275273
a probabilistic asymmetric algorithm for public key cryptography,
@@ -313,7 +311,7 @@ <h3>
313311
A similar version of this benchmark was previously published in Octane version 2.
314312
Source code: <a href="Octane/crypto.js">crypto.js</a>
315313
</dd>
316-
<dt id="Dart-flute-complex-wasm" class="non-default">Dart-flute-complex-wasm</dt>
314+
<dt id="Dart-flute-complex-wasm">Dart-flute-complex-wasm</dt>
317315
<dt id="Dart-flute-todomvc-wasm">Dart-flute-todomvc-wasm</dt>
318316
<dd>
319317
Two Dart benchmark programs compiled to WasmGC that are using a simplified version of the Flutter UI
@@ -420,7 +418,7 @@ <h3>
420418
Source code: <a href="Octane/gbemu-part1.js">gbemu-part1.js</a>, <a
421419
href="Octane/gbemu-part2.js">gbemu-part2.js</a>
422420
</dd>
423-
<dt id="gcc-loops-wasm" class="non-default">gcc-loops-wasm</dt>
421+
<dt id="gcc-loops-wasm">gcc-loops-wasm</dt>
424422
<dd>
425423
Example loops used to tune the GCC and LLVM vectorizers, compiled to WebAssembly with
426424
<a href="https://emscripten.org">Emscripten</a>. The original C++ version of this benchmark was
@@ -436,15 +434,22 @@ <h3>
436434
of this benchmark was originally published as part of the WebKit test suite.
437435
Source code: <a href="simple/hash-map.js">hash-map.js</a>
438436
</dd>
439-
<dt id="HashSet-wasm" class="non-default">HashSet-wasm</dt>
437+
<dt id="HashSet-wasm">HashSet-wasm</dt>
440438
<dd>
441439
A WebAssembly benchmark replaying a set of hash table operations performed in WebKit when loading
442440
a web page. This benchmark was compiled from C++ to WebAssembly using <a
443441
href="https://emscripten.org">Emscripten</a>.
444442
Source code: <a href="wasm/HashSet.cpp">HashSet.cpp</a>, <a href="wasm/HashSet.js">HashSet.js</a>
445443
</dd>
446-
<dt id="intl" class="non-default">intl</dt>
447-
<dd>TODO</dd>
444+
<dt id="intl">intl</dt>
445+
<dd>
446+
This benchmark tests the performance of the <a
447+
href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl">Intl
448+
API</a>.
449+
Since the Intl spec is not precisely defining all output formats, this workload cannot be used to
450+
compare different platforms.
451+
Source code: in the <a href="intl/">intl/</a> directory.
452+
</dd>
448453
<dt id="j2cl-box2d-wasm">j2cl-box2d-wasm</dt>
449454
<dd>
450455
A Java Box2D benchmark that is compiled to WasmGC with the <a
@@ -494,7 +499,7 @@ <h3>
494499
generators.
495500
Source code: <a href="generators/lazy-collections.js">lazy-collections.js</a>
496501
</dd>
497-
<dt id="lebab-wtb" class="non-default">lebab-wtb</dt>
502+
<dt id="lebab-wtb">lebab-wtb</dt>
498503
<dd>
499504
<a href="https://github.com/lebab/lebab">Lebab</a> transpiles ES5 code into ES6/ES7.
500505
This benchmark runs Lebab on test JavaScript programs.
@@ -581,7 +586,7 @@ <h3>
581586
Tests get / set Proxy traps, as well as various Array methods.
582587
Source code: <a href="proxy/vue-benchmark.js">vue-benchmark.js</a>
583588
</dd>
584-
<dt id="quicksort-wasm" class="non-default">quicksort-wasm</dt>
589+
<dt id="quicksort-wasm">quicksort-wasm</dt>
585590
<dd>
586591
Quicksort benchmark, compiled to WebAssembly with <a href="https://emscripten.org">Emscripten</a>.
587592
The original C version of this benchmark was previously published in the LLVM test suite.
@@ -802,8 +807,8 @@ <h3>
802807
order of existing files.
803808
Source code: <a href="generators/sync-file-system.js">sync-file-system.js</a>
804809
</dd>
805-
<dt id="tfjs-wasm" class="non-default">tfjs-wasm</dt>
806-
<dt id="tfjs-wasm-simd" class="non-default">tfjs-wasm-simd</dt>
810+
<dt id="tfjs-wasm">tfjs-wasm</dt>
811+
<dt id="tfjs-wasm-simd">tfjs-wasm-simd</dt>
807812
<dd>
808813
Tests <a href="https://github.com/tensorflow/tfjs">Tensorflow.js</a> pre-trained machine learning
809814
models supported by <a
@@ -819,7 +824,7 @@ <h3>
819824
<dt id="threejs">threejs</dt>
820825
<dd></dd>
821826
<dt id="transformersjs-bert-wasm">transformersjs-bert-wasm</dt>
822-
<dt id="transformersjs-whisper-wasm" class="non-default">transformersjs-whisper-wasm</dt>
827+
<dt id="transformersjs-whisper-wasm">transformersjs-whisper-wasm</dt>
823828
<dd>
824829
Two machine learning tasks using the <a
825830
href="https://huggingface.co/docs/transformers.js/en/index">Transformers.js</a> library, which
@@ -885,8 +890,45 @@ <h3>
885890

886891
<p><a href="index.html" class="button">&larr; Return to Tests</a></p>
887892
</article>
888-
889893
</main>
890-
</body>
891894

892-
</html>
895+
<script>
896+
const isInBrowser = true;
897+
</script>
898+
<script src="utils/params.js"></script>
899+
<script src="JetStreamDriver.js"></script>
900+
<script>
901+
(function () {
902+
for (const benchmark of BENCHMARKS) {
903+
let dt = document.getElementById(benchmark.name);
904+
if (!dt) {
905+
continue;
906+
}
907+
908+
if (benchmark.tags.has("disabled")) {
909+
dt.classList.add("non-default");
910+
}
911+
912+
const nameLink = document.createElement("a");
913+
nameLink.href = `index.html?test=${benchmark.name}`;
914+
nameLink.className = "workload-link";
915+
nameLink.textContent = dt.textContent;
916+
dt.textContent = "";
917+
dt.appendChild(nameLink);
918+
919+
const tags = Array.from(benchmark.tags).sort();
920+
for (const tag of tags) {
921+
if (tag === "all" || tag === "default") {
922+
continue;
923+
}
924+
const link = document.createElement("a");
925+
link.href = `index.html?tags=${tag}`;
926+
link.textContent = tag;
927+
link.className = "tag-link";
928+
dt.appendChild(link);
929+
}
930+
}
931+
})();
932+
</script>
933+
</body>
934+
</html>

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ <h1 class="logo">
9797
</h1>
9898

9999
<main>
100-
<p class="summary">JetStream 3 is a JavaScript and WebAssembly benchmark suite focused on the most advanced web applications. It rewards browsers that start up quickly, execute code quickly, and run smoothly. For more information, read the <a href="/in-depth.html">in-depth analysis</a>. Bigger scores are better.</p>
100+
<p class="summary">JetStream 3 is a JavaScript and WebAssembly benchmark suite focused on the most advanced web applications. It rewards browsers that start up quickly, execute code quickly, and run smoothly. For more information, read the <a href="in-depth.html">in-depth analysis</a>. Bigger scores are better.</p>
101101
<div id="non-default-params">
102102
<h2>Non-standard Parameters</h2>
103103
<p>

‎resources/JetStream.css‎

Lines changed: 46 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -265,24 +265,67 @@ h6 {
265265
color: var(--text-color-tertiary);
266266
}
267267

268+
.in-depth h2,
269+
.in-depth h3,
270+
.in-depth dl {
271+
margin: 0;
272+
}
273+
274+
dl > dt:first-child {
275+
margin-top: 0;
276+
}
277+
268278
dt {
269-
margin-top: 10px;
279+
margin-top: 0.5rem;
270280
font-weight: bold;
271281
text-align: left;
272282
color: var(--text-color-secondary);
283+
line-height: 2rem;
284+
display: flex;
285+
align-items: center;
286+
flex-wrap: wrap;
287+
}
288+
289+
dt > a.workload-link {
290+
color: inherit;
291+
text-decoration: none;
292+
}
293+
294+
dt > a.workload-link:hover {
295+
color: var(--color-primary);
296+
}
297+
298+
.tag-link {
299+
display: inline-block;
300+
background-color: var(--color-secondary);
301+
color: var(--text-color-secondary) !important;
302+
padding: 0px 4px;
303+
margin-left: 6px;
304+
border-radius: 3px;
305+
font-size: 1.2rem;
306+
line-height: 1.8rem;
307+
font-weight: normal;
308+
text-decoration: none;
309+
}
310+
.tag-link::before {
311+
content: "#";
312+
}
313+
314+
.tag-link:hover {
315+
background-color: var(--color-primary);
273316
}
274317

275318
dt.non-default {
276319
color: var(--text-color-very-subtle);
277320
}
278321

279-
dt.non-default:after {
322+
dt.non-default > *:first-child:after {
280323
content: " (not run by default)";
281324
}
282325

283326
dd {
284327
text-align: left;
285-
padding: 10px 20px;
328+
padding: 0.5rem 0rem 1.5rem 2rem;
286329
margin: 0;
287330
color: var(--text-color-secondary);
288331
}

‎tests/run-browser.mjs‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -291,14 +291,6 @@ async function inDepthPageTest(driver) {
291291
return a.toLowerCase().localeCompare(b.toLowerCase());
292292
});
293293

294-
const nonDefaultIds = benchmarkNames.filter(name => !benchmarkData.get(name).includes("default"));
295-
for (const id of nonDefaultIds) {
296-
const description = descriptions.get(id);
297-
if (description && description.cssClass !== "non-default") {
298-
sectionErrors.push(`Expected non-default benchmark '${id}' to have CSS class 'non-default' but got '${description.cssClass}'`);
299-
}
300-
}
301-
302294
const missingIds = benchmarkNames.filter(name => !descriptions.has(name));
303295
if (missingIds.length > 0) {
304296
sectionErrors.push(`Missing in-depth.html info section: ${JSON.stringify(missingIds, undefined, 2)}`);

0 commit comments

Comments
 (0)