| 1 | // Unit tests for neutralizeBlockingResources — the render-blocking-stylesheet |
| 2 | // guard that fixed the all-black Remotion render (external Google Fonts <link> |
| 3 | // kept the srcdoc iframe from painting in headless chromium). See |
| 4 | // notes/2026-06-06-remotion-adapter-verify.md. |
| 5 | import { test } from 'node:test'; |
| 6 | import assert from 'node:assert/strict'; |
| 7 | import { neutralizeBlockingResources } from '../dist/render.js'; |
| 8 | |
| 9 | test('async-loads an external Google Fonts stylesheet link', () => { |
| 10 | const html = `<head><link href="https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap" rel="stylesheet" /></head>`; |
| 11 | const out = neutralizeBlockingResources(html); |
| 12 | assert.match(out, /media="print"/); |
| 13 | assert.match(out, /onload="this\.media='all'"/); |
| 14 | // still references the font so it applies if it loads in time |
| 15 | assert.match(out, /fonts\.googleapis\.com/); |
| 16 | }); |
| 17 | |
| 18 | test('handles rel before href, single quotes, no self-closing slash', () => { |
| 19 | const html = `<link rel='stylesheet' href='https://cdn.example.com/x.css'>`; |
| 20 | const out = neutralizeBlockingResources(html); |
| 21 | assert.match(out, /media="print"/); |
| 22 | }); |
| 23 | |
| 24 | test('handles protocol-relative external links', () => { |
| 25 | const html = `<link rel="stylesheet" href="//cdn.example.com/a.css">`; |
| 26 | const out = neutralizeBlockingResources(html); |
| 27 | assert.match(out, /media="print"/); |
| 28 | }); |
| 29 | |
| 30 | test('leaves relative / same-document stylesheet links untouched', () => { |
| 31 | const html = `<link rel="stylesheet" href="./local.css">`; |
| 32 | assert.equal(neutralizeBlockingResources(html), html); |
| 33 | }); |
| 34 | |
| 35 | test('leaves inline <style> untouched', () => { |
| 36 | const html = `<style>@import url(https://fonts.googleapis.com/x);body{color:red}</style>`; |
| 37 | assert.equal(neutralizeBlockingResources(html), html); |
| 38 | }); |
| 39 | |
| 40 | test('does not double-process a link that already declares media', () => { |
| 41 | const html = `<link rel="stylesheet" href="https://fonts.googleapis.com/x" media="screen">`; |
| 42 | assert.equal(neutralizeBlockingResources(html), html); |
| 43 | }); |
| 44 | |
| 45 | test('neutralizes every external stylesheet in a multi-link head', () => { |
| 46 | const html = `<link rel="stylesheet" href="https://fonts.googleapis.com/a"> |
| 47 | <link rel="stylesheet" href="https://use.typekit.net/b.css"> |
| 48 | <link rel="stylesheet" href="/local.css">`; |
| 49 | const out = neutralizeBlockingResources(html); |
| 50 | assert.equal((out.match(/media="print"/g) ?? []).length, 2); |
| 51 | assert.match(out, /href="\/local\.css"/); // local one unchanged |
| 52 | }); |
| 53 | |
| 54 | test('is a no-op for HTML with no stylesheet links', () => { |
| 55 | const html = `<!doctype html><html><body><h1>hi</h1></body></html>`; |
| 56 | assert.equal(neutralizeBlockingResources(html), html); |
| 57 | }); |
| 58 |