single-file-cli 2.6.2 → 2.6.3

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>

package/test/fidelity/pages/linked-stylesheet/theme.css

@@ -0,0 +1,38 @@
+:root {
+	--ink: #1b1b1f;
+	--paper: #fbfaf7;
+	--accent: #7a3b2e;
+	--edge: #d6d2c8;
+}
+
+body {
+	background: var(--paper);
+	color: var(--ink);
+	font: 16px/1.6 Georgia, "Times New Roman", serif;
+	margin: 0;
+	padding: 40px;
+}
+
+h1 {
+	font-size: 32px;
+	margin: 0 0 20px;
+	border-bottom: 4px solid var(--accent);
+	padding-bottom: 10px;
+}
+
+.panel {
+	border: 1px solid var(--edge);
+	background: #fff;
+	padding: 20px;
+	margin: 0 0 16px;
+}
+
+.panel b {
+	color: var(--accent);
+}
+
+.stripe {
+	height: 10px;
+	background: var(--accent);
+	margin: 24px 0;
+}

package/test/fidelity/pages/synthetic-italic/index.html

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<title>Synthetic italic</title>
+	<!--
+		Two faces, both declared with no style of their own, both drawn. The second is asked for in
+		italic, and since no italic face is declared the browser slants the normal one — a synthetic
+		oblique. The face is used; it is simply used at an angle.
+
+		What the page reports as its used fonts is read off the computed styles, and the family is
+		kept only when a loaded face answers for the computed font-style. A synthesized style has no
+		face behind it, so the match fails and the family is not recorded as used at all — while the
+		first sample keeps the list non-empty, so the guard for "nothing could be read" does not
+		apply either. The italic family is then declared, drawn, and pruned.
+	-->
+	<style>
+		@font-face {
+			font-family: "Fidelity Block";
+			src: url(../fonts/block.ttf) format("truetype");
+		}
+
+		@font-face {
+			font-family: "Fidelity Bar";
+			src: url(../fonts/bar.ttf) format("truetype");
+		}
+
+		body {
+			background: #fff;
+			margin: 0;
+			padding: 40px;
+			font: 20px/1.5 monospace;
+		}
+
+		.sample {
+			font-size: 48px;
+			margin: 0 0 24px;
+		}
+
+		.upright {
+			font-family: "Fidelity Block";
+		}
+
+		.slanted {
+			font-family: "Fidelity Bar";
+			font-style: italic;
+		}
+	</style>
+</head>
+
+<body>
+	<p>Upright, drawn with a face declared for that style:</p>
+	<p class="sample upright">abcdefghij</p>
+	<p>Italic, drawn by slanting a face declared without one:</p>
+	<p class="sample slanted">abcdefghij</p>
+</body>
+
+</html>

package/test/fidelity/pages/unresolved-font-property/index.html

@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<title>Unresolved font property</title>
+	<!--
+		The property holds a whole font shorthand, not a family list. The browser substitutes it and
+		draws the text in the face it names; the minifier must not read it as a list of families,
+		because the words in it are a style and a size and reading them as names would invent
+		families the document never had. So the family is genuinely unnameable from the stylesheets,
+		and the only thing left that knows it is the list of fonts the rendering reported.
+
+		The shape matters. A var() in family position — even one nested in a fallback — is walked
+		branch by branch and usually resolves, so a fixture written that way keeps its face through
+		the ordinary path and proves nothing about the case it was built for. This one was.
+
+		This is the page the pruning policy for undetermined values is decided on. Keeping every
+		declared face renders exactly like keeping the right one, so the two halves are checked
+		apart: the pixels say the face that was drawn survived, and the markup says the faces that
+		were not drawn are gone. A build that gives up on the document passes the first and fails
+		the second, which is what used to happen for every page holding one unreadable value.
+	-->
+	<style>
+		@font-face {
+			font-family: "Fidelity Block";
+			src: url(../fonts/block.ttf) format("truetype");
+		}
+
+		@font-face {
+			font-family: "Fidelity Unused One";
+			src: url(../fonts/band.ttf) format("truetype");
+		}
+
+		@font-face {
+			font-family: "Fidelity Unused Two";
+			src: url(../fonts/bar.ttf) format("truetype");
+		}
+
+		body {
+			background: #fff;
+			margin: 0;
+			padding: 40px;
+			font: 20px/1.5 monospace;
+		}
+
+		.card {
+			--sample-font: 48px "Fidelity Block";
+		}
+
+		/* a second declaration, so that the property has no single value to substitute into the
+		   shorthand. It names a face nothing draws with: a resolver that read these values as
+		   family lists would keep that one, which is the other way this can go wrong */
+		.note {
+			--sample-font: 48px "Fidelity Unused One";
+		}
+
+		.card .sample {
+			font: var(--sample-font);
+			margin: 0;
+		}
+	</style>
+</head>
+
+<body>
+	<div class="card">
+		<p>The family below is named inside a property holding a whole font shorthand.</p>
+		<p class="sample">abcdefghij</p>
+	</div>
+	<div class="note">
+		<p>This section declares the same property with another value and draws nothing with it.</p>
+	</div>
+</body>
+
+</html>