HDR/test/landing-page.test.mjs

import assert from 'node:assert/strict';
import { spawnSync } from 'node:child_process';
import { readFile, readdir } from 'node:fs/promises';
import test from 'node:test';

test('landing page teaches users how to install and swap HDR assets', async () => {
  const html = await readFile(new URL('../index.html', import.meta.url), 'utf8');
  const productSectionCount = [...html.matchAll(/class="[^"]*product-section/g)].length;

  assert.match(html, /<title>HDR Web Plugin/);
  assert.match(html, /styles\/demo\.css\?v=/);
  assert.match(html, /HDR Web Plugin/);
  assert.match(html, /data-hdr-image-src/);
  assert.match(html, /data-hdr-video-src/);
  assert.match(html, /data-copy-snippet/);
  assert.match(html, /https:\/\/hdr-web-plugin-demo\.pages\.dev\/dist\/hdr-web-plugin\.js\?v=/);
  assert.match(html, /data-hdr-media-type="image"/);
  assert.match(html, /dist\/hdr-web-plugin\.js\?v=0\.6\.2/);
  assert.match(html, /data-hdr-text="true"/);
  assert.match(html, /data-hdr-text-boost="2\.8"/);
  assert.match(html, /class="product-wordmark-title"/);
  assert.match(html, /class="sr-only">HDR Web Plugin/);
  assert.match(html, /class="hdr-wordmark"/);
  assert.match(html, /src="\.\/media\/hdr-wordmark\.png"/);
  assert.doesNotMatch(html, /<h1 class="hdr-title" data-hdr-text="true">HDR Web Plugin<\/h1>/);
  assert.match(html, /id="overview"/);
  assert.match(html, /href="#overview"/);
  assert.match(html, /href="#install"/);
  assert.match(html, /href="#assets"/);
  assert.match(html, /href="#api"/);
  assert.match(html, /href="#specs"/);
  assert.match(html, /href="\.\/demos\/fireworks.html"/);
  assert.match(html, /Real starfield/);
  assert.match(html, /class="product-hero"/);
  assert.match(html, /class="[^"]*unified-section/);
  assert.match(html, /class="single-page-grid"/);
  assert.match(html, /class="[^"]*landing-panel/);
  assert.match(html, /class="[^"]*demo-card/);
  assert.match(html, /class="[^"]*setup-flow compact/);
  assert.match(html, /class="[^"]*asset-options compact/);
  assert.match(html, /class="[^"]*spec-grid/);
  assert.equal(productSectionCount, 1);
});

test('landing page wordmark is a 16-bit HDR PNG asset', async () => {
  const png = await readFile(new URL('../media/hdr-wordmark.png', import.meta.url));
  const css = await readFile(new URL('../styles/demo.css', import.meta.url), 'utf8');
  const signature = png.subarray(0, 8).toString('hex');
  const chunkType = png.subarray(12, 16).toString('ascii');
  const width = png.readUInt32BE(16);
  const height = png.readUInt32BE(20);
  const bitDepth = png.readUInt8(24);
  const colorType = png.readUInt8(25);

  assert.equal(signature, '89504e470d0a1a0a');
  assert.equal(chunkType, 'IHDR');
  assert.equal(width >= 1600, true);
  assert.equal(height >= 320, true);
  assert.equal(bitDepth, 16);
  assert.equal(colorType, 6);
  assert.doesNotMatch(css, /\.hdr-wordmark\s*{[^}]*background:\s*#000000/i);
  assert.match(css, /\.hdr-wordmark\s*{[^}]*background:\s*transparent/i);
  assert.match(css, /\.hdr-wordmark\s*{[^}]*filter:\s*none/i);

  const probe = spawnSync('ffprobe', [
    '-v',
    'error',
    '-select_streams',
    'v:0',
    '-show_entries',
    'stream=pix_fmt,color_transfer,color_primaries',
    '-of',
    'default=nw=1',
    new URL('../media/hdr-wordmark.png', import.meta.url)
  ], { encoding: 'utf8' });

  assert.equal(probe.status, 0);
  assert.match(probe.stdout, /pix_fmt=rgba64be/);
  assert.match(probe.stdout, /color_transfer=smpte2084/);
  assert.match(probe.stdout, /color_primaries=bt2020/);
});

test('real starfield demo uses a true astronomy HDR image', async () => {
  const html = await readFile(new URL('../demos/fireworks.html', import.meta.url), 'utf8');
  const css = await readFile(new URL('../styles/demo.css', import.meta.url), 'utf8');
  const demoFiles = await readdir(new URL('../demos/', import.meta.url));

  assert.match(html, /<title>HDR Real Starfield Demo<\/title>/);
  assert.match(html, /styles\/demo\.css\?v=0\.6\.9/);
  assert.match(html, /data-hdr-media-type="image"/);
  assert.match(html, /data-hdr-image-src="..\/media\/hubble-westerlund-2-hdr\.png"/);
  assert.doesNotMatch(html, /data-hdr-video-src/);
  assert.doesNotMatch(html, /data-hdr-webm-src/);
  assert.match(html, /data-hdr-effects="false"/);
  assert.match(html, /data-hdr-badge="false"/);
  assert.match(html, /class="[^"]*starfield-page/);
  assert.match(html, /class="starfield-immersive"/);
  assert.match(html, /class="starfield-asset"/);
  assert.match(html, /src="..\/media\/hubble-westerlund-2-hdr\.png"/);
  assert.match(html, /NASA, ESA, the Hubble Heritage Team/);
  assert.match(html, /href="..\/index\.html"/);
  assert.doesNotMatch(html, /class="demo-layout"/);
  assert.doesNotMatch(html, /class="fireworks-copy"/);
  assert.doesNotMatch(html, /class="fireworks-stage"/);
  assert.doesNotMatch(html, /class="demo-notes"/);
  assert.doesNotMatch(html, /Shader bloom/);
  assert.doesNotMatch(html, /fireworks-webgl\.js/);
  assert.doesNotMatch(html, /class="[^"]*firework-bloom/);
  assert.equal(demoFiles.includes('fireworks-webgl.js'), false);
  assert.match(css, /\.starfield-asset\s*{[^}]*object-fit:\s*cover;/s);
  assert.match(css, /dynamic-range-limit:\s*no-limit;/);
});

test('real starfield image is a 16-bit HDR PNG asset', async () => {
  const png = await readFile(new URL('../media/hubble-westerlund-2-hdr.png', import.meta.url));
  const signature = png.subarray(0, 8).toString('hex');
  const chunkType = png.subarray(12, 16).toString('ascii');
  const width = png.readUInt32BE(16);
  const height = png.readUInt32BE(20);
  const bitDepth = png.readUInt8(24);
  const colorType = png.readUInt8(25);

  assert.equal(signature, '89504e470d0a1a0a');
  assert.equal(chunkType, 'IHDR');
  assert.equal(width >= 2400, true);
  assert.equal(height >= 1350, true);
  assert.equal(bitDepth, 16);
  assert.equal(colorType, 6);

  const probe = spawnSync('ffprobe', [
    '-v',
    'error',
    '-select_streams',
    'v:0',
    '-show_entries',
    'stream=pix_fmt,color_transfer,color_primaries',
    '-of',
    'default=nw=1',
    new URL('../media/hubble-westerlund-2-hdr.png', import.meta.url)
  ], { encoding: 'utf8' });

  assert.equal(probe.status, 0);
  assert.match(probe.stdout, /pix_fmt=rgba64be/);
  assert.match(probe.stdout, /color_transfer=smpte2084/);
  assert.match(probe.stdout, /color_primaries=bt2020/);
});