Skip to content

Commit de88e36

Browse files
camillobrunicamillobruni
authored
Auto-add tags to in-depth.html (#288)
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 Reland of #279
1 parent 8947d65 commit de88e36

File tree

4 files changed

+106
-37
lines changed

4 files changed

+106
-37
lines changed

‎in-depth.html‎

Lines changed: 59 additions & 25 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>
@@ -142,9 +139,9 @@ <h3>
142139
</h3>
143140

144141
<p>
145-
The <span style="color: var(--text-color-very-subtle);">greyed-out workloads</span> are not run by
146-
default but can be manually enabled on the command-line or via
147-
the <i>testList</i> URL parameter.
142+
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
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.
148145
</p>
149146

150147
<dl id="workload-details">
@@ -243,9 +240,9 @@ <h3>
243240
href="https://v8.github.io/web-tooling-benchmark/">Web Tooling Benchmark</a>,.
244241
Source code: <a href="web-tooling-benchmark/src/babylon.mjs">babylon.mjs</a>
245242
</dd>
246-
<dt id="babylonjs-scene-es5" class="non-default">babylonjs-scene-es5</dt>
243+
<dt id="babylonjs-scene-es5">babylonjs-scene-es5</dt>
247244
<dt id="babylonjs-scene-es6">babylonjs-scene-es6</dt>
248-
<dt id="babylonjs-startup-es5" class="non-default">babylonjs-startup-es5</dt>
245+
<dt id="babylonjs-startup-es5">babylonjs-startup-es5</dt>
249246
<dt id="babylonjs-startup-es6">babylonjs-startup-es6</dt>
250247
<dd>
251248
These benchmarks test the <a href="https://www.babylonjs.com/">Babylon.js</a> 3D engine.
@@ -265,14 +262,14 @@ <h3>
265262
This benchmark was previously published in <a href="https://browserbench.org/ARES-6/">ARES-6</a>.
266263
Source code: <a href="ARES-6/Basic">Basic</a>
267264
</dd>
268-
<dt id="bigint-bigdenary" class="non-default">bigint-bigdenary</dt>
265+
<dt id="bigint-bigdenary">bigint-bigdenary</dt>
269266
<dd>
270267
<a href="https://github.com/uzyn/bigdenary">BigDenary</a>, an arbitrary-precision
271268
decimal arithmetic, implemented in JavaScript by U-Zyn Chua.
272269
Tests arithmetic operations on BigInt.
273270
Source code: <a href="bigint/bigdenary-bundle.js">bigdenary-bundle.js</a>
274271
</dd>
275-
<dt id="bigint-noble-bls12-381" class="non-default">bigint-noble-bls12-381</dt>
272+
<dt id="bigint-noble-bls12-381">bigint-noble-bls12-381</dt>
276273
<dd>
277274
<a href="https://hackmd.io/@benjaminion/bls12-381">BLS12-381</a>, pairing-friendly
278275
Barreto-Lynn-Scott elliptic curve construction,
@@ -288,15 +285,15 @@ <h3>
288285
by Paul Miller. Tests typed arrays and arithmetic operations on BigInt.
289286
Source code: <a href="bigint/noble-ed25519-bundle.js">noble-ed25519-bundle.js</a>
290287
</dd>
291-
<dt id="bigint-noble-secp256k1" class="non-default">bigint-noble-secp256k1</dt>
288+
<dt id="bigint-noble-secp256k1">bigint-noble-secp256k1</dt>
292289
<dd>
293290
<a href="https://www.secg.org/sec2-v2.pdf">secp256k1</a>, an elliptic curve that could
294291
be used for asymmetric encryption, ECDH key agreement protocol and signature schemes,
295292
<a href="https://github.com/paulmillr/noble-secp256k1">implemented in JavaScript</a>
296293
by Paul Miller. Tests typed arrays and arithmetic operations on BigInt.
297294
Source code: <a href="bigint/noble-secp256k1-bundle.js">noble-secp256k1-bundle.js</a>
298295
</dd>
299-
<dt id="bigint-paillier" class="non-default">bigint-paillier</dt>
296+
<dt id="bigint-paillier">bigint-paillier</dt>
300297
<dd>
301298
<a href="https://en.wikipedia.org/wiki/Paillier_cryptosystem">Paillier cryptosystem</a>,
302299
a probabilistic asymmetric algorithm for public key cryptography,
@@ -341,7 +338,7 @@ <h3>
341338
A similar version of this benchmark was previously published in Octane version 2.
342339
Source code: <a href="Octane/crypto.js">crypto.js</a>
343340
</dd>
344-
<dt id="Dart-flute-complex-wasm" class="non-default">Dart-flute-complex-wasm</dt>
341+
<dt id="Dart-flute-complex-wasm">Dart-flute-complex-wasm</dt>
345342
<dt id="Dart-flute-todomvc-wasm">Dart-flute-todomvc-wasm</dt>
346343
<dd>
347344
Two Dart benchmark programs compiled to WasmGC that are using a simplified version of the Flutter UI
@@ -457,7 +454,7 @@ <h3>
457454
Source code: <a href="Octane/gbemu-part1.js">gbemu-part1.js</a>, <a
458455
href="Octane/gbemu-part2.js">gbemu-part2.js</a>
459456
</dd>
460-
<dt id="gcc-loops-wasm" class="non-default">gcc-loops-wasm</dt>
457+
<dt id="gcc-loops-wasm">gcc-loops-wasm</dt>
461458
<dd>
462459
Example loops used to tune the GCC and LLVM vectorizers, compiled to WebAssembly with
463460
<a href="https://emscripten.org">Emscripten</a>. The original C++ version of this benchmark was
@@ -473,15 +470,15 @@ <h3>
473470
of this benchmark was originally published as part of the WebKit test suite.
474471
Source code: <a href="simple/hash-map.js">hash-map.js</a>
475472
</dd>
476-
<dt id="HashSet-wasm" class="non-default">HashSet-wasm</dt>
473+
<dt id="HashSet-wasm">HashSet-wasm</dt>
477474
<dd>
478475
A WebAssembly benchmark replaying a set of hash table operations performed in WebKit when loading
479476
a web page. This benchmark was compiled from C++ to WebAssembly using <a
480477
href="https://emscripten.org">Emscripten</a>.
481478
Source code: <a href="wasm/HashSet/HashSet.cpp">HashSet.cpp</a>, <a
482479
href="wasm/HashSet/benchmark.js">HashSet.js</a>
483480
</dd>
484-
<dt id="intl" class="non-default">intl</dt>
481+
<dt id="intl">intl</dt>
485482
<dd>
486483
This benchmark tests the performance of the <a
487484
href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl">Intl
@@ -545,7 +542,7 @@ <h3>
545542
generators.
546543
Source code: <a href="generators/lazy-collections.js">lazy-collections.js</a>
547544
</dd>
548-
<dt id="lebab-wtb" class="non-default">lebab-wtb</dt>
545+
<dt id="lebab-wtb">lebab-wtb</dt>
549546
<dd>
550547
<a href="https://github.com/lebab/lebab">Lebab</a> transpiles ES5 code into ES6/ES7.
551548
This benchmark runs Lebab on test JavaScript programs.
@@ -657,7 +654,7 @@ <h3>
657654
Tests get / set Proxy traps, as well as various Array methods.
658655
Source code: <a href="proxy/vue-benchmark.js">vue-benchmark.js</a>
659656
</dd>
660-
<dt id="quicksort-wasm" class="non-default">quicksort-wasm</dt>
657+
<dt id="quicksort-wasm">quicksort-wasm</dt>
661658
<dd>
662659
Quicksort benchmark, compiled to WebAssembly with <a href="https://emscripten.org">Emscripten</a>.
663660
The original C version of this benchmark was previously published in the LLVM test suite.
@@ -884,8 +881,8 @@ <h3>
884881
order of existing files.
885882
Source code: <a href="generators/sync-file-system.js">sync-file-system.js</a>
886883
</dd>
887-
<dt id="tfjs-wasm" class="non-default">tfjs-wasm</dt>
888-
<dt id="tfjs-wasm-simd" class="non-default">tfjs-wasm-simd</dt>
884+
<dt id="tfjs-wasm">tfjs-wasm</dt>
885+
<dt id="tfjs-wasm-simd">tfjs-wasm-simd</dt>
889886
<dd>
890887
Tests <a href="https://github.com/tensorflow/tfjs">Tensorflow.js</a> pre-trained machine learning
891888
models supported by <a
@@ -907,7 +904,7 @@ <h3>
907904
Source code: in the <a href="threejs/">threejs/</a> directory.
908905
</dd>
909906
<dt id="transformersjs-bert-wasm">transformersjs-bert-wasm</dt>
910-
<dt id="transformersjs-whisper-wasm" class="non-default">transformersjs-whisper-wasm</dt>
907+
<dt id="transformersjs-whisper-wasm">transformersjs-whisper-wasm</dt>
911908
<dd>
912909
Two machine learning tasks using the <a
913910
href="https://huggingface.co/docs/transformers.js/en/index">Transformers.js</a> library, which
@@ -987,8 +984,45 @@ <h3>
987984

988985
<p><a href="index.html" class="button">&larr; Return to Tests</a></p>
989986
</article>
990-
991987
</main>
992-
</body>
993988

994-
</html>
989+
<script>
990+
const isInBrowser = true;
991+
</script>
992+
<script src="utils/params.js"></script>
993+
<script src="JetStreamDriver.js"></script>
994+
<script>
995+
(function () {
996+
for (const benchmark of BENCHMARKS) {
997+
let dt = document.getElementById(benchmark.name);
998+
if (!dt) {
999+
continue;
1000+
}
1001+
1002+
if (benchmark.tags.has("disabled")) {
1003+
dt.classList.add("non-default");
1004+
}
1005+
1006+
const nameLink = document.createElement("a");
1007+
nameLink.href = `index.html?test=${benchmark.name}`;
1008+
nameLink.className = "workload-link";
1009+
nameLink.textContent = dt.textContent;
1010+
dt.textContent = "";
1011+
dt.appendChild(nameLink);
1012+
1013+
const tags = Array.from(benchmark.tags).sort();
1014+
for (const tag of tags) {
1015+
if (tag === "all" || tag === "default") {
1016+
continue;
1017+
}
1018+
const link = document.createElement("a");
1019+
link.href = `index.html?tags=${tag}`;
1020+
link.textContent = tag;
1021+
link.className = "tag-link";
1022+
dt.appendChild(link);
1023+
}
1024+
}
1025+
})();
1026+
</script>
1027+
</body>
1028+
</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
@@ -294,14 +294,6 @@ async function inDepthPageTest(driver) {
294294
return a.toLowerCase().localeCompare(b.toLowerCase());
295295
});
296296

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

0 commit comments

Comments
 (0)