single-file-cli 2.6.2 → 2.6.4

package/test/fidelity/browser.js

@@ -0,0 +1,162 @@
+/* global setTimeout, clearTimeout, fetch, createImageBitmap, OffscreenCanvas */
+
+// One browser, driven over CDP, doing two jobs: rendering a page to a PNG, and comparing two of
+// those PNGs. The comparison runs *in* the browser on purpose — Node has no image decoder, and
+// adding one as a dependency to compare pictures taken by a browser that already decodes PNG
+// natively would be paying twice for the same capability.
+//
+// The rules encoded here were all learned by getting them wrong:
+//
+//   - a comparison without a noise floor says nothing. Pages that reflow between two shots of the
+//     SAME file are common, so every comparison is made against a control taken from the same
+//     source, and the floor is a measured output of the run rather than an assumption.
+//   - a whole-image verdict is not usable. One line of reflow near the top shifts every pixel
+//     below it, so a single number cannot tell a small local difference from a large one. The
+//     images are compared in horizontal bands, and the bands are reported separately.
+//   - images of different heights are not an error to be normalised away. A saved page that is
+//     shorter than its source has lost something; the extra rows count as differing pixels.
+import { options as cdpOptions, CDP } from "simple-cdp";
+import { importLibModule } from "../target.js";
+
+const LOCALHOST = "http://localhost:";
+const EMPTY_PAGE_URL = "about:blank";
+const BAND_HEIGHT = 1000;
+const VIEWPORT_WIDTH = 1200;
+const VIEWPORT_HEIGHT = 900;
+const LOAD_TIMEOUT = 60000;
+const COMMAND_TIMEOUT = 60000;
+const SETTLE_TIMEOUT = 10000;
+// Waiting for the fonts and for two frames is waiting on the page, and a page is allowed not to
+// answer: a self-extracting archive replaces the document as it opens, and a font that never
+// resolves leaves document.fonts.ready pending for good. The race means this expression always
+// settles, so the only thing that can hang is the connection, which has its own limit below.
+const SETTLE_EXPRESSION = `Promise.race([
+	(async () => {
+		if (document.fonts) {
+			await document.fonts.ready;
+		}
+		await new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+	})(),
+	new Promise(resolve => setTimeout(resolve, ${SETTLE_TIMEOUT}))
+])`;
+
+export { openBrowser, BAND_HEIGHT };
+
+async function openBrowser({ headless = true } = {}) {
+	const { launchBrowser, closeBrowser } = await importLibModule("browser.js");
+	cdpOptions.apiUrl = LOCALHOST + (await launchBrowser({ headless }));
+	// A command with no limit waits for its answer for ever, and that is the default. One that never
+	// came back took a whole CI run with it: the suite reported nothing but its own test timeout,
+	// the connection stayed wedged, and every check after it in the file was never reached. With a
+	// limit the failure names the method that did not answer, which is the difference between a
+	// diagnosis and a rerun.
+	cdpOptions.commandMaxTime = COMMAND_TIMEOUT;
+	const comparisonTarget = await createSession();
+	return { capture, compare, close };
+
+	async function capture(url, { width = VIEWPORT_WIDTH, height = VIEWPORT_HEIGHT } = {}) {
+		const { cdp, targetId } = await createSession();
+		const { Page, Emulation, Runtime } = cdp;
+		try {
+			await Page.enable();
+			await Emulation.setDeviceMetricsOverride({ width, height, deviceScaleFactor: 1, mobile: false });
+			await Promise.all([waitUntilLoaded(Page), Page.navigate({ url })]);
+			await Runtime.evaluate({ expression: SETTLE_EXPRESSION, awaitPromise: true });
+			const { data } = await Page.captureScreenshot({ format: "png", captureBeyondViewport: true });
+			return data;
+		} finally {
+			await CDP.closeTarget(targetId);
+		}
+	}
+
+	// the two screenshots and the band height go in, the count of pixels that differ comes out —
+	// per band, so that a caller can say where the pages parted company and not only that they did
+	async function compare(firstImage, secondImage, bandHeight = BAND_HEIGHT) {
+		const expression = "(" + compareInBrowser.toString() + ")(" +
+			JSON.stringify(firstImage) + "," + JSON.stringify(secondImage) + "," + bandHeight + ")";
+		const { result, exceptionDetails } = await comparisonTarget.cdp.Runtime.evaluate({
+			expression,
+			awaitPromise: true,
+			returnByValue: true
+		});
+		if (exceptionDetails) {
+			throw new Error("the comparison failed in the browser: " + exceptionDetails.text);
+		}
+		return result.value;
+	}
+
+	async function close() {
+		await CDP.closeTarget(comparisonTarget.targetId).catch(() => { });
+		await closeBrowser();
+	}
+}
+
+async function createSession(url = EMPTY_PAGE_URL) {
+	const targetInfo = await CDP.createTarget(url);
+	return { cdp: new CDP(targetInfo), targetId: targetInfo.id };
+}
+
+function waitUntilLoaded(Page) {
+	return new Promise((resolve, reject) => {
+		const timeout = setTimeout(() => {
+			Page.removeEventListener("loadEventFired", onLoad);
+			reject(new Error("the page did not finish loading"));
+		}, LOAD_TIMEOUT);
+		Page.addEventListener("loadEventFired", onLoad);
+
+		function onLoad() {
+			clearTimeout(timeout);
+			Page.removeEventListener("loadEventFired", onLoad);
+			resolve();
+		}
+	});
+}
+
+// serialised into the browser, so it stands alone: no imports, no closure over anything here
+function compareInBrowser(firstImage, secondImage, bandHeight) {
+	return (async () => {
+		const [first, second] = await Promise.all([decode(firstImage), decode(secondImage)]);
+		const width = Math.max(first.width, second.width);
+		const height = Math.max(first.height, second.height);
+		const [firstPixels, secondPixels] = [draw(first), draw(second)];
+		const bands = [];
+		let differing = 0;
+		for (let top = 0; top < height; top += bandHeight) {
+			const bottom = Math.min(top + bandHeight, height);
+			let bandDiffering = 0;
+			for (let offset = top * width * 4; offset < bottom * width * 4; offset += 4) {
+				if (firstPixels[offset] != secondPixels[offset] ||
+					firstPixels[offset + 1] != secondPixels[offset + 1] ||
+					firstPixels[offset + 2] != secondPixels[offset + 2] ||
+					firstPixels[offset + 3] != secondPixels[offset + 3]) {
+					bandDiffering++;
+				}
+			}
+			differing += bandDiffering;
+			bands.push({ top, bottom, differing: bandDiffering, total: (bottom - top) * width });
+		}
+		return {
+			width,
+			height,
+			differing,
+			total: width * height,
+			sizeMatches: first.width == second.width && first.height == second.height,
+			bands
+		};
+
+		async function decode(data) {
+			const response = await fetch("data:image/png;base64," + data);
+			return createImageBitmap(await response.blob());
+		}
+
+		// both images are drawn on a canvas of the union size, so an image that is shorter than the
+		// other leaves transparent rows where the other has content, and those rows count as
+		// differing rather than being quietly cropped away
+		function draw(image) {
+			const canvas = new OffscreenCanvas(width, height);
+			const context = canvas.getContext("2d", { willReadFrequently: true });
+			context.drawImage(image, 0, 0);
+			return context.getImageData(0, 0, width, height).data;
+		}
+	})();
+}

package/test/fidelity/make-font.js

@@ -0,0 +1,294 @@
+// Writes a TrueType font in which every printable ASCII character is the same filled rectangle.
+// Text set in it is a solid bar, so a page that loses the face does not merely reflow slightly —
+// it changes from a black block to readable words, which no pixel comparison can miss.
+//
+// It is generated rather than borrowed for two reasons. A real font carries a licence and a few
+// hundred kilobytes into a fixture directory, and, more importantly, the fonts already lying around
+// for probing turned out to map no letters at all: text set in them silently fell back to a system
+// family, which made a working fix look broken and cost an afternoon. A font built here maps
+// exactly what it claims to map, and the shapes differ per variant so that "the right family was
+// kept" is a visible statement and not only "some family was kept".
+//
+// Not a test. Run it to regenerate the committed .ttf files:
+//
+//   node test/fidelity/make-font.js
+//
+import { writeFile } from "node:fs/promises";
+import { join, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+import process from "node:process";
+
+const UNITS_PER_EM = 1000;
+const FIRST_CHARACTER_CODE = 0x20;
+const LAST_CHARACTER_CODE = 0x7e;
+const ASCENT = 800;
+const DESCENT = -200;
+const ADVANCE_WIDTH = 600;
+const MAGIC_NUMBER = 0x5f0f3cf5;
+const CHECKSUM_MAGIC = 0xb1b0afba;
+const TABLE_RECORD_SIZE = 16;
+const HEAD_CHECKSUM_ADJUSTMENT_OFFSET = 8;
+
+// each fixture family is a different shape, so a screenshot says which face was used and not just
+// that one was: a full block, a band across the middle, a bar sitting on the baseline
+const VARIANTS = {
+	"block": { bottom: 0, top: 760, left: 60, right: 540 },
+	"band": { bottom: 260, top: 500, left: 40, right: 560 },
+	"bar": { bottom: 0, top: 160, left: 40, right: 560 }
+};
+
+export { createFont, VARIANTS };
+
+if (import.meta.url === ("file://" + process.argv[1]) || import.meta.filename === process.argv[1]) {
+	const directory = join(dirname(fileURLToPath(import.meta.url)), "pages", "fonts");
+	await Promise.all(Object.keys(VARIANTS).map(async name => {
+		const path = join(directory, name + ".ttf");
+		await writeFile(path, createFont(Object.assign({ familyName: "Fidelity " + name }, VARIANTS[name])));
+		console.log("wrote " + path); // eslint-disable-line no-console
+	}));
+}
+
+function createFont({ familyName, top, bottom, left, right }) {
+	const glyph = buildGlyph({ top, bottom, left, right });
+	const tables = [
+		["OS/2", buildOS2({ top, bottom })],
+		["cmap", buildCmap()],
+		["glyf", glyph],
+		["head", buildHead({ top, bottom, left, right })],
+		["hhea", buildHhea()],
+		["hmtx", buildHmtx()],
+		["loca", buildLoca(glyph.length)],
+		["maxp", buildMaxp()],
+		["name", buildName(familyName)],
+		["post", buildPost()]
+	];
+	return assemble(tables);
+}
+
+// the offset table, the table records and the tables themselves, followed by the one value that can
+// only be computed once the whole file exists: the checksum adjustment in head
+function assemble(tables) {
+	const headerSize = 12 + tables.length * TABLE_RECORD_SIZE;
+	const size = tables.reduce((total, [, content]) => total + align(content.length), headerSize);
+	const font = new Uint8Array(size);
+	const view = new DataView(font.buffer);
+	const entrySelector = Math.floor(Math.log2(tables.length));
+	const searchRange = 16 * (2 ** entrySelector);
+	view.setUint32(0, 0x00010000);
+	view.setUint16(4, tables.length);
+	view.setUint16(6, searchRange);
+	view.setUint16(8, entrySelector);
+	view.setUint16(10, tables.length * 16 - searchRange);
+	let offset = headerSize;
+	let headOffset;
+	tables.forEach(([tag, content], index) => {
+		const record = 12 + index * TABLE_RECORD_SIZE;
+		Array.from(tag).forEach((character, position) => view.setUint8(record + position, character.charCodeAt(0)));
+		view.setUint32(record + 4, checksum(content));
+		view.setUint32(record + 8, offset);
+		view.setUint32(record + 12, content.length);
+		font.set(content, offset);
+		if (tag == "head") {
+			headOffset = offset;
+		}
+		offset += align(content.length);
+	});
+	view.setUint32(headOffset + HEAD_CHECKSUM_ADJUSTMENT_OFFSET, (CHECKSUM_MAGIC - checksum(font)) >>> 0);
+	return font;
+}
+
+function checksum(content) {
+	const view = new DataView(content.buffer, content.byteOffset, content.byteLength);
+	let sum = 0;
+	for (let offset = 0; offset + 4 <= content.length; offset += 4) {
+		sum = (sum + view.getUint32(offset)) >>> 0;
+	}
+	// a table is padded to a multiple of four with zeroes, and the checksum is taken over the
+	// padded form: the trailing bytes are read as if those zeroes were already there
+	if (content.length % 4) {
+		let tail = 0;
+		for (let offset = content.length - content.length % 4; offset < content.length; offset++) {
+			tail = (tail << 8) | content[offset];
+		}
+		sum = (sum + (tail << (8 * (4 - content.length % 4)))) >>> 0;
+	}
+	return sum;
+}
+
+function align(length) {
+	return length + (length % 4 ? 4 - length % 4 : 0);
+}
+
+function buildHead({ top, bottom, left, right }) {
+	const writer = createWriter(54);
+	writer.uint32(0x00010000);
+	writer.uint32(0x00010000);
+	writer.uint32(0);
+	writer.uint32(MAGIC_NUMBER);
+	writer.uint16(0x0003);
+	writer.uint16(UNITS_PER_EM);
+	writer.uint32(0); writer.uint32(0);
+	writer.uint32(0); writer.uint32(0);
+	writer.int16(left); writer.int16(bottom); writer.int16(right); writer.int16(top);
+	writer.uint16(0);
+	writer.uint16(8);
+	writer.int16(2);
+	// the long form of loca, so that the offsets are plain byte counts rather than halves
+	writer.int16(1);
+	writer.int16(0);
+	return writer.content;
+}
+
+function buildHhea() {
+	const writer = createWriter(36);
+	writer.uint32(0x00010000);
+	writer.int16(ASCENT); writer.int16(DESCENT); writer.int16(0);
+	writer.uint16(ADVANCE_WIDTH);
+	writer.int16(0); writer.int16(0); writer.int16(ADVANCE_WIDTH);
+	writer.int16(1); writer.int16(0); writer.int16(0);
+	writer.int16(0); writer.int16(0); writer.int16(0); writer.int16(0);
+	writer.int16(0);
+	writer.uint16(2);
+	return writer.content;
+}
+
+function buildMaxp() {
+	const writer = createWriter(32);
+	writer.uint32(0x00010000);
+	writer.uint16(2);
+	writer.uint16(4); writer.uint16(1);
+	writer.uint16(0); writer.uint16(0);
+	writer.uint16(1); writer.uint16(0);
+	writer.uint16(0); writer.uint16(0); writer.uint16(0); writer.uint16(0); writer.uint16(0);
+	writer.uint16(0); writer.uint16(0);
+	return writer.content;
+}
+
+function buildHmtx() {
+	const writer = createWriter(8);
+	writer.uint16(ADVANCE_WIDTH); writer.int16(0);
+	writer.uint16(ADVANCE_WIDTH); writer.int16(0);
+	return writer.content;
+}
+
+// format 4, one segment covering printable ASCII and the terminator the format requires. Every
+// character in the segment maps to the single glyph, including the space: text set in this font is
+// one unbroken bar, which is exactly the point.
+//
+// The segment therefore has to name its glyph per character, through idRangeOffset and an array of
+// indices. The shorter-looking route, a single idDelta added to the character code, maps a range
+// LINEARLY — a font written that way claims a different glyph for every character, and the browser
+// rejects the whole table as soon as one of them is past the last glyph
+function buildCmap() {
+	const characterCount = LAST_CHARACTER_CODE - FIRST_CHARACTER_CODE + 1;
+	const subtableLength = 32 + characterCount * 2;
+	const writer = createWriter(12 + subtableLength);
+	writer.uint16(0); writer.uint16(1);
+	writer.uint16(3); writer.uint16(1); writer.uint32(12);
+	writer.uint16(4); writer.uint16(subtableLength); writer.uint16(0);
+	writer.uint16(4); writer.uint16(4); writer.uint16(1); writer.uint16(0);
+	writer.uint16(LAST_CHARACTER_CODE); writer.uint16(0xffff);
+	writer.uint16(0);
+	writer.uint16(FIRST_CHARACTER_CODE); writer.uint16(0xffff);
+	writer.uint16(0); writer.uint16(1);
+	// counted from the position of this very field, which is why the first segment's offset is the
+	// four bytes that the second segment's offset occupies
+	writer.uint16(4); writer.uint16(0);
+	for (let index = 0; index < characterCount; index++) {
+		writer.uint16(1);
+	}
+	return writer.content;
+}
+
+// glyph 0 is the empty .notdef, so the whole table is glyph 1: one closed contour of four on-curve
+// points, given as deltas from the previous point. It is padded here rather than at assembly time,
+// so that the offset loca gives for the end of the glyph stays inside the length glyf declares
+function buildGlyph({ top, bottom, left, right }) {
+	const writer = createWriter(36);
+	writer.int16(1);
+	writer.int16(left); writer.int16(bottom); writer.int16(right); writer.int16(top);
+	writer.uint16(3);
+	writer.uint16(0);
+	writer.uint8(1); writer.uint8(1); writer.uint8(1); writer.uint8(1);
+	writer.int16(left); writer.int16(right - left); writer.int16(0); writer.int16(left - right);
+	writer.int16(bottom); writer.int16(0); writer.int16(top - bottom); writer.int16(0);
+	return writer.content;
+}
+
+function buildLoca(glyphLength) {
+	const writer = createWriter(12);
+	writer.uint32(0); writer.uint32(0); writer.uint32(align(glyphLength));
+	return writer.content;
+}
+
+function buildOS2({ top, bottom }) {
+	const writer = createWriter(96);
+	writer.uint16(4);
+	writer.int16(ADVANCE_WIDTH);
+	writer.uint16(400); writer.uint16(5); writer.uint16(0);
+	writer.int16(650); writer.int16(600); writer.int16(0); writer.int16(75);
+	writer.int16(650); writer.int16(600); writer.int16(0); writer.int16(350);
+	writer.int16(50); writer.int16(300);
+	writer.int16(0);
+	for (let index = 0; index < 10; index++) {
+		writer.uint8(0);
+	}
+	writer.uint32(1); writer.uint32(0); writer.uint32(0); writer.uint32(0);
+	Array.from("SFTD").forEach(character => writer.uint8(character.charCodeAt(0)));
+	writer.uint16(0x0040);
+	writer.uint16(FIRST_CHARACTER_CODE); writer.uint16(LAST_CHARACTER_CODE);
+	writer.int16(ASCENT); writer.int16(DESCENT); writer.int16(0);
+	writer.uint16(ASCENT); writer.uint16(-DESCENT);
+	writer.uint32(1); writer.uint32(0);
+	writer.int16(Math.round((top - bottom) / 2)); writer.int16(top);
+	writer.uint16(0); writer.uint16(FIRST_CHARACTER_CODE); writer.uint16(1);
+	return writer.content;
+}
+
+function buildName(familyName) {
+	const names = [[1, familyName], [2, "Regular"], [3, familyName + " Regular"], [4, familyName], [5, "Version 1.0"], [6, familyName.replace(/ /g, "")]];
+	const strings = names.map(([, value]) => encodeUTF16(value));
+	const header = 6 + names.length * 12;
+	const writer = createWriter(header + strings.reduce((total, string) => total + string.length, 0));
+	writer.uint16(0); writer.uint16(names.length); writer.uint16(header);
+	let offset = 0;
+	names.forEach(([identifier], index) => {
+		writer.uint16(3); writer.uint16(1); writer.uint16(0x0409); writer.uint16(identifier);
+		writer.uint16(strings[index].length); writer.uint16(offset);
+		offset += strings[index].length;
+	});
+	strings.forEach(string => string.forEach(byte => writer.uint8(byte)));
+	return writer.content;
+}
+
+function encodeUTF16(value) {
+	const bytes = [];
+	Array.from(value).forEach(character => {
+		const code = character.charCodeAt(0);
+		bytes.push(code >> 8, code & 0xff);
+	});
+	return bytes;
+}
+
+function buildPost() {
+	const writer = createWriter(32);
+	writer.uint32(0x00030000);
+	writer.uint32(0);
+	writer.int16(-100); writer.int16(50);
+	writer.uint32(1);
+	writer.uint32(0); writer.uint32(0); writer.uint32(0); writer.uint32(0);
+	return writer.content;
+}
+
+function createWriter(size) {
+	const content = new Uint8Array(size);
+	const view = new DataView(content.buffer);
+	let offset = 0;
+	return {
+		content,
+		uint8: value => view.setUint8(offset++, value),
+		int16: value => (view.setInt16(offset, value), offset += 2),
+		uint16: value => (view.setUint16(offset, value & 0xffff), offset += 2),
+		uint32: value => (view.setUint32(offset, value >>> 0), offset += 4)
+	};
+}

package/test/fidelity/pages/duplicate-stylesheet/index.html

@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<title>Duplicate stylesheet</title>
+	<!--
+		Two <style> elements with byte-identical content. The archive writer groups them, stores the
+		content once as an entry, and points a <link> at it. Both elements are rewritten: the second
+		because it is a duplicate, the first because it is the one the duplicates were folded into —
+		leaving that one inline stored the same stylesheet twice, once as the entry and once in the
+		page.
+
+		The attributes are here because the rewrite replaces the element rather than editing it. An
+		id a script looks up and a class a selector matches have to survive that, and they were
+		being dropped: the archive came back with a bare <link>.
+	-->
+	<style id="palette" class="theme" data-role="tokens">
+		:root {
+			--ink: #17202a;
+			--paper: #f4f4f2;
+			--accent: #1f5673;
+			--edge: #c9c9c4;
+		}
+
+		body {
+			background: var(--paper);
+			color: var(--ink);
+			font: 16px/1.6 Georgia, "Times New Roman", serif;
+			margin: 0;
+			padding: 40px;
+		}
+
+		h1 {
+			font-size: 34px;
+			margin: 0 0 24px;
+			border-bottom: 3px solid var(--accent);
+			padding-bottom: 12px;
+		}
+
+		.grid {
+			display: grid;
+			grid-template-columns: repeat(3, 1fr);
+			gap: 16px;
+			margin: 24px 0;
+		}
+
+		.cell {
+			background: #fff;
+			border: 1px solid var(--edge);
+			padding: 20px;
+		}
+
+		.cell b {
+			color: var(--accent);
+		}
+
+		.rule {
+			height: 8px;
+			background: var(--accent);
+			margin: 32px 0;
+		}
+	</style>
+	<style>
+		:root {
+			--ink: #17202a;
+			--paper: #f4f4f2;
+			--accent: #1f5673;
+			--edge: #c9c9c4;
+		}
+
+		body {
+			background: var(--paper);
+			color: var(--ink);
+			font: 16px/1.6 Georgia, "Times New Roman", serif;
+			margin: 0;
+			padding: 40px;
+		}
+
+		h1 {
+			font-size: 34px;
+			margin: 0 0 24px;
+			border-bottom: 3px solid var(--accent);
+			padding-bottom: 12px;
+		}
+
+		.grid {
+			display: grid;
+			grid-template-columns: repeat(3, 1fr);
+			gap: 16px;
+			margin: 24px 0;
+		}
+
+		.cell {
+			background: #fff;
+			border: 1px solid var(--edge);
+			padding: 20px;
+		}
+
+		.cell b {
+			color: var(--accent);
+		}
+
+		.rule {
+			height: 8px;
+			background: var(--accent);
+			margin: 32px 0;
+		}
+	</style>
+</head>
+
+<body>
+	<h1>Duplicate stylesheet</h1>
+	<p>The two style elements above hold the same declarations. Everything on this page is drawn by
+		them, so a stylesheet that goes missing in the save takes the whole layout with it.</p>
+	<div class="grid">
+		<div class="cell"><b>One</b><br>Bordered cell drawn by the shared stylesheet.</div>
+		<div class="cell"><b>Two</b><br>Bordered cell drawn by the shared stylesheet.</div>
+		<div class="cell"><b>Three</b><br>Bordered cell drawn by the shared stylesheet.</div>
+	</div>
+	<div class="rule"></div>
+	<p>The grid, the rule above and the serif family all come from the custom properties declared in
+		the same block, so the comparison fails loudly rather than subtly.</p>
+</body>
+
+</html>

package/test/fidelity/pages/frame-fonts/index.html

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<title>Frame fonts</title>
+	<!--
+		The frame is sandboxed, which gives it an opaque origin and puts its contentDocument out of
+		reach. SingleFile then re-parses it from its srcdoc with DOMParser, and that document is
+		never rendered: it reports no font as used at all.
+
+		An empty list of used fonts is not a short one. Every rendered element has a computed
+		font-family, so nothing rendered can report none — an empty list means the styles could not
+		be read. Read as an answer instead of as an absence, it said "this frame uses no font" and
+		every face the frame declared was pruned. Measured on derstandard.at, where a newsletter box
+		inside such a frame fell back to a system font, and on MDN, where the text in the CSS demo
+		reflowed.
+
+		The frame declares its own face and uses it, and the face is not declared anywhere in the
+		parent: nothing outside the frame can keep it alive.
+	-->
+	<style>
+		body {
+			background: #fff;
+			margin: 0;
+			padding: 40px;
+			font: 20px/1.5 monospace;
+		}
+
+		iframe {
+			width: 700px;
+			height: 220px;
+			border: 2px solid #333;
+		}
+	</style>
+</head>
+
+<body>
+	<p>The frame below declares and uses a face that the page around it never names.</p>
+	<iframe sandbox title="framed" srcdoc="
+		<!DOCTYPE html>
+		<meta charset=&quot;utf-8&quot;>
+		<style>
+			@font-face { font-family: &quot;Fidelity Frame&quot;; src: url(../fonts/bar.ttf) format(&quot;truetype&quot;) }
+			body { margin: 0; padding: 20px; background: #fff }
+			p { font: 48px &quot;Fidelity Frame&quot;, serif; margin: 0 0 16px }
+		</style>
+		<p>abcdefghij</p>
+		<p>klmnopqrst</p>
+	"></iframe>
+</body>
+
+</html>

package/test/fidelity/pages/linked-stylesheet/index.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<title>Linked stylesheet</title>
+	<!--
+		An external stylesheet, linked with the attributes a page uses to find it again: an id a
+		theme switcher looks up, a class a selector matches, a data attribute a script reads.
+
+		A plain save has nowhere to put an external stylesheet, so the link becomes a style element
+		holding its content — a brand-new element, built with the media and the text and nothing
+		else. Everything the page used to identify that stylesheet was dropped, on every plain save
+		of every page with an external stylesheet. The archive path had the same defect in the other
+		direction and was fixed first; this is its mirror.
+	-->
+	<link rel="stylesheet" type="text/css" href="theme.css" id="theme" class="site-theme" data-role="tokens" title="Site theme">
+</head>
+
+<body>
+	<h1>Linked stylesheet</h1>
+	<p>Everything below is drawn by the linked stylesheet, so losing it in the save is not subtle.</p>
+	<div class="panel"><b>Panel</b> — bordered by the linked stylesheet.</div>
+	<div class="panel"><b>Panel</b> — bordered by the linked stylesheet.</div>
+	<div class="stripe"></div>
+	<p>The element carrying that stylesheet is looked up by id, by class and by data attribute, none
+		of which survives a rewrite that keeps only the text.</p>
+</body>
+
+</html>