add screenshots to build

.github/workflows/test.yml

@@ -6,7 +6,7 @@ on:
   pull_request:
 jobs:
   test:
-    runs-on: ubuntu-latest
+    runs-on: macos-latest
     steps:
       - name: Checkout 🍔🍟🥤
         uses: actions/checkout@v4
@@ -22,3 +22,9 @@ jobs:
         run: |
           npm ci
           npm run check-ci
+
+      - name: Upload Artifact ⬆️
+        uses: actions/upload-artifact@v4
+        with:
+          path: ./screenshots/*.png
+          overwrite: true

.gitignore

@@ -2,6 +2,7 @@
 .DS_Store
 .esm-cache
 .tscache
+screenshots
 node_modules
 package-lock.json
 test/src/ts/dist/*

build/jsdoc-template/static/styles/jsdoc-default.css

@@ -224,6 +224,7 @@ nav {
   height: 100%;
   padding: 10px;
   border-right: 1px solid #eee;
+  background-color: white;
   /* box-shadow: 0 0 3px rgba(0,0,0,0.1); */
 }
 
@@ -737,6 +738,7 @@ dl.param-type {
 
   nav {
     border-right-color: #666;
+    background-color: #333;
   }
 
   .nav-heading a {

docs/styles/jsdoc-default.css

@@ -224,6 +224,7 @@ nav {
   height: 100%;
   padding: 10px;
   border-right: 1px solid #eee;
+  background-color: white;
   /* box-shadow: 0 0 3px rgba(0,0,0,0.1); */
 }
 
@@ -737,6 +738,7 @@ dl.param-type {
 
   nav {
     border-right-color: #666;
+    background-color: #333;
   }
 
   .nav-heading a {

test/index.js

@@ -1,5 +1,6 @@
 /* global mocha */
 
+import './tests/gpu-info.js';
 import './tests/attribute-buffer-tests.js';
 import './tests/framebuffer-tests.js';
 import './tests/helper-tests.js';

test/puppeteer.js

@@ -11,12 +11,15 @@ const port = 3000;
 
 const exampleInjectJS = fs.readFileSync('test/src/js/example-inject.js', {encoding: 'utf-8'});
 
+const skipRE = /dynamic-buffers|webgl2-textures/;
+
 function getExamples(port) {
   return fs.readdirSync('examples')
-      .filter(f => f.endsWith('.html'))
+      .filter(f => f.endsWith('.html') && !skipRE.test(f))
       .map(f => ({
         url: `http://localhost:${port}/examples/${f}`,
         js: exampleInjectJS,
+        screenshot: true,
       }));
 }
 
@@ -36,7 +39,11 @@ function makePromiseInfo() {
 }
 
 async function test(port) {
-  const browser = await puppeteer.launch();
+  const browser = await puppeteer.launch({
+    args: [
+      '--use-angle=metal',
+    ],
+  });
   const page = await browser.newPage();
 
   page.on('console', async e => {
@@ -65,14 +72,14 @@ async function test(port) {
     ...getExamples(port),
   ];
 
-  for (const {url, js} of testPages) {
+  for (const {url, js, screenshot} of testPages) {
     waitingPromiseInfo = makePromiseInfo();
     console.log(`===== [ ${url} ] =====`);
-    if (js) {
-      await page.evaluateOnNewDocument(js);
-    }
+    const id = js
+      ? await page.evaluateOnNewDocument(js)
+      : undefined;
     await page.goto(url);
-    await page.waitForNetworkIdle();
+    await page.waitForNetworkIdle({timeout: 5000});
     if (js) {
       await page.evaluate(() => {
         setTimeout(() => {
@@ -81,6 +88,16 @@ async function test(port) {
       });
     }
     await waitingPromiseInfo.promise;
+    if (screenshot) {
+      const dir = 'screenshots';
+      fs.mkdirSync(dir, { recursive: true });
+      const name = /\/([a-z0-9_-]+).html/.exec(url)[1];
+      const path = `${dir}/${name}.png`;
+      await page.screenshot({path});
+    }
+    if (id) {
+      await page.removeScriptToEvaluateOnNewDocument(id.identifier);
+    }
   }
 
   await browser.close();

test/tests/gpu-info.js

@@ -0,0 +1,18 @@
+import {describe, it} from '../mocha-support.js';
+
+function getGPUInfo(gl, ext) {
+  return JSON.stringify({
+    ...(ext
+          ? Object.fromEntries(['UNMASKED_VENDOR_WEBGL', 'UNMASKED_RENDERER_WEBGL'].map(pname => [pname, gl.getParameter(ext[pname])]))
+          : { WEBGL_debug_renderer_info: 'unavailable' }
+    ),
+    ...JSON.parse(JSON.stringify(navigator.userAgentData || {})),
+  }, null, 2);
+}
+
+describe('gpu info', () => {
+  const gl = new OffscreenCanvas(1, 1).getContext('webgl2');
+  const ext = gl.getExtension('WEBGL_debug_renderer_info');
+  const title = getGPUInfo(gl, ext);
+  it(title, () => {});
+});