diff --git a/index.html b/index.html
index bbc92f4..167629e 100644
--- a/index.html
+++ b/index.html
@@ -35,7 +35,8 @@
--text-color: #006;
--error-text-color: red;
- --adapter-background-color: #CCC;
+ --section-header-background-color: #CCC;
+ --section-background-color: #DDD;
--table-background-color: #EEE;
--even-row-color: rgba(0, 0, 0, 0.05);
--hover-color: rgba(0, 0, 0, 0.2);
@@ -52,7 +53,8 @@
--text-color: #0F0;
--error-text-color: #F66;
- --adapter-background-color: #444;
+ --section-header-background-color: #444;
+ --section-background-color: #333;
--table-background-color: #222;
--even-row-color: rgba(255, 255, 255, 0.05);
--hover-color: rgba(255, 255, 255, 0.2);
@@ -90,7 +92,7 @@
justify-content: flex-start;
}
h2 {
- margin: 0.5em 0 0.5em 0;
+ margin: 0;
}
h2, td {
padding: 0 10px 0 10px;
@@ -98,6 +100,9 @@
.logo {
height: 1.5em;
}
+table.misc {
+ min-width: 100%;
+}
.misc td:nth-child(2) {
white-space: pre;
}
@@ -108,15 +113,22 @@
#content {
margin: 0 auto;
}
-.adapters {
+.adapters,
+.others {
display: inline-flex;
flex-wrap: wrap;
}
-.adapter {
- background: var(--adapter-background-color);
+.adapter,
+.other {
+ background: var(--section-background-color);
margin-right: 10px;
margin-bottom: 10px;
}
+.adapter h2,
+.other h2 {
+ padding: 0.5em 10px 0.5em 10px;
+ background: var(--section-header-background-color);
+}
.name>td,
.section>td {
font-size: larger;
@@ -178,11 +190,14 @@
text-align: right;
}
.adapters,
+ .others,
.adapter,
+ .other,
table {
width: 100%;
}
- .adapter {
+ .adapter,
+ .other {
margin-right: 0;
}
tr {
diff --git a/index.js b/index.js
index 2d3e10b..a10f93e 100644
--- a/index.js
+++ b/index.js
@@ -416,17 +416,18 @@ class WorkerHelper {
}
}
-async function checkMisc({haveFallback}) {
- addElemToDocument(createHeading('h2', '-', 'WGSL language features:'));
-
- addElemToDocument(el('table', { className: 'misc' }, [
- el('tbody', {}, [
- ...setLikeToTableRows(navigator.gpu.wgslLanguageFeatures || []),
+function checkWGSLLanguageFeatures(parent) {
+ parent.appendChild(el('div', {className: 'other'}, [
+ (createHeading('h2', '-', 'WGSL language features:')),
+ el('table', { className: 'misc' }, [
+ el('tbody', {}, [
+ ...setLikeToTableRows(navigator.gpu.wgslLanguageFeatures || []),
+ ]),
]),
]));
+}
- addElemToDocument(createHeading('h2', '-', 'misc:'));
-
+function checkMisc(parent, {haveFallback}) {
const obj = {};
const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
obj.getPreferredCanvasFormat = presentationFormat;
@@ -434,14 +435,15 @@ async function checkMisc({haveFallback}) {
obj['fallback adapter'] = 'not supported';
}
- addElemToDocument(el('table', { className: 'misc' }, [
- el('tbody', {}, mapLikeToTableRows(obj)),
+ parent.appendChild(el('div', {className: 'other'}, [
+ (createHeading('h2', '-', 'misc:')),
+ el('table', { className: 'misc' }, [
+ el('tbody', {}, mapLikeToTableRows(obj)),
+ ]),
]));
}
-async function checkWorkers(workerType) {
- addElemToDocument(createHeading('h2', '=', `${workerType} workers:`));
-
+async function getWorkerInfo(workerType) {
const canvas = document.createElement('canvas');
const offscreen = !!canvas.transferControlToOffscreen
let offscreenCanvas = offscreen && canvas.transferControlToOffscreen();
@@ -456,10 +458,9 @@ async function checkWorkers(workerType) {
worker = new WorkerHelper('worker.js', workerType);
await worker.ready();
} catch(error) {
- addElemToDocument(el('table', { className: 'worker' }, [
+ return el('table', { className: 'worker' }, [
el('tbody', {}, setLikeToTableRows(undefined)),
- ]));
- return;
+ ]);
}
const {rAF, gpu, adapter, device, compat, context, offscreen: offscreenSupported, twoD } = await worker.getMessage('checkWebGPU', {canvas: offscreenCanvas}, [offscreenCanvas]);
addSupportsRow('webgpu API', gpu, 'exists', 'n/a');
@@ -480,8 +481,15 @@ async function checkWorkers(workerType) {
addSupportsRow('OffscreenCanvas', offscreenSupported);
addSupportsRow('CanvasRenderingContext2D', twoD);
- addElemToDocument(el('table', { className: 'worker' }, [
+ return el('table', { className: 'worker' }, [
el('tbody', {}, mapLikeToTableRows(obj, false)),
+ ]);
+}
+
+async function checkWorker(parent, workerType) {
+ parent.appendChild(el('div', {className: 'other'}, [
+ createHeading('h2', '=', `${workerType} workers:`),
+ await getWorkerInfo(workerType),
]));
}
@@ -616,10 +624,14 @@ async function main() {
createHeading('h2', '=', `${adapterIds.size > 1 ? `#${ndx + 1} ` : ''}${(adapterIds.size > 1) ? `${desc}` : ''}`),
elem,
]))));
- await checkMisc({haveFallback});
- await checkWorkers('dedicated');
- await checkWorkers('shared');
- await checkWorkers('service');
+
+ const others = el('div', {className: 'others'})
+ addElemToDocument(others);
+ checkWGSLLanguageFeatures(others);
+ checkMisc(others, {haveFallback});
+ await checkWorker(others, 'dedicated');
+ await checkWorker(others, 'shared');
+ await checkWorker(others, 'service');
// Add a copy handler to massage the text for plain text.
document.addEventListener('copy', (event) => {