single-file-core 1.5.116 → 1.5.118

package/core/helper.js

@@ -408,10 +408,10 @@ function getElementsInfo(win, doc, element, options, data = { usedFonts: new Map
 						}
 					}
 					if (options.removeUnusedFonts) {
-						getUsedFont(computedStyle, options, data.usedFonts);
-						getUsedFont(getComputedStyle(win, element, ":first-letter"), options, data.usedFonts);
-						getUsedFont(getComputedStyle(win, element, ":before"), options, data.usedFonts);
-						getUsedFont(getComputedStyle(win, element, ":after"), options, data.usedFonts);
+						getUsedFont(computedStyle, data.usedFonts);
+						getUsedFont(getComputedStyle(win, element, ":first-letter"), data.usedFonts);
+						getUsedFont(getComputedStyle(win, element, ":before"), data.usedFonts);
+						getUsedFont(getComputedStyle(win, element, ":after"), data.usedFonts);
 					}
 				}
 			}
@@ -611,12 +611,28 @@ function getResourcesInfo(win, doc, element, options, data, elementHidden, compu
 	}
 }
 
-function getUsedFont(computedStyle, options, usedFonts) {
+// Every family in the computed font-family is recorded, and the set of faces the document actually
+// resolved is deliberately NOT consulted. Narrowing the list to the loaded faces is the obvious
+// idea — a fallback stack names every family the page might need and only some are used — and it
+// was written in 2019, wired to an option nothing ever set, and dead until it was reconnected here.
+// Reconnected, it saved nothing measurable on nine real pages and cost fidelity twice: a face
+// matched on its declared style is not found when the browser SYNTHESIZED that style, so a family
+// drawn in an italic it declares no face for was dropped from the page that draws it; and a webfont
+// that merely failed to load on the capturing machine would be dropped from the archive for good.
+// It belongs with the unicode-range work, which needs the same information and can weigh a measured
+// benefit against those, not here.
+function getUsedFont(computedStyle, usedFonts) {
 	if (computedStyle) {
 		const fontStyle = computedStyle.getPropertyValue("font-style") || "normal";
 		computedStyle.getPropertyValue("font-family").split(",").forEach(fontFamilyName => {
 			fontFamilyName = normalizeFontFamily(fontFamilyName);
-			if (!options.loadedFonts || options.loadedFonts.find(font => normalizeFontFamily(font.family) == fontFamilyName && font.style == fontStyle)) {
+			// an element with no computed font-family at all is one whose styles could not be read,
+			// not one drawn in a family with no name. It happens to every element of a frame that
+			// was re-parsed from its srcdoc, because the computed style is asked of the parent
+			// window and the document it belongs to is not the one being rendered. Recorded, it
+			// turns "nothing is known here" into a list of length one, which reads downstream as a
+			// complete answer and prunes every face the frame declares
+			if (fontFamilyName) {
 				const fontWeight = getFontWeight(computedStyle.getPropertyValue("font-weight"));
 				const fontVariant = computedStyle.getPropertyValue("font-variant") || "normal";
 				const value = [fontFamilyName, fontWeight, fontStyle, fontVariant];

package/core/lib/processor-helper-inline.js

@@ -44,6 +44,10 @@ const EMPTY_URL_SOURCE = /^url\(["']?data:[^,]*,?["']?\)/;
 const LOCAL_SOURCE = "local(";
 const FONT_MAX_LOAD_DELAY = 5000;
 const DUPLICATE_STYLESHEET_ATTRIBUTE_NAME = "data-sf-duplicate-stylesheet-ref";
+// the attributes that say how the link fetched its stylesheet, which the style element now holding
+// that stylesheet has no use for. Everything else identified the element in the page
+const LINK_FETCH_ATTRIBUTE_NAMES = ["rel", "href", "type", "media", "as", "crossorigin", "integrity",
+	"referrerpolicy", "hreflang", "sizes", "imagesrcset", "imagesizes", "fetchpriority"];
 
 let util;
 
@@ -162,6 +166,15 @@ function getProcessorHelperClass(utilInstance) {
 				if (stylesheetInfo) {
 					stylesheets.delete(linkElement);
 					const styleElement = doc.createElement("style");
+					// the element is replaced rather than rewritten, so whatever identified it in
+					// the page has to be carried over: an id a script still looks up, a class a
+					// selector still matches. The attributes left out are the ones that describe
+					// the fetch the style element no longer performs
+					Array.from(linkElement.attributes).forEach(({ name, value }) => {
+						if (!LINK_FETCH_ATTRIBUTE_NAMES.includes(name.toLowerCase())) {
+							styleElement.setAttribute(name, value);
+						}
+					});
 					if (stylesheetInfo.mediaText) {
 						styleElement.media = stylesheetInfo.mediaText;
 					}

package/core/lib/processor-helper.js

@@ -36,6 +36,7 @@ const CANVAS_TAG_FOUND = /<canvas/gi;
 const EMPTY_URL_SOURCE = /^url\(["']?data:[^,]*,?["']?\)/;
 const LOCAL_SOURCE = "local(";
 const FONT_MAX_LOAD_DELAY = 5000;
+const LINK_OWN_ATTRIBUTE_NAMES = ["rel", "type", "href", "media"];
 
 let util;
 
@@ -100,6 +101,7 @@ function getProcessorHelperClass(utilInstance) {
 		replaceStylesheets(doc, stylesheets, options, resources) {
 			const entries = Array.from(stylesheets).reverse();
 			const linkElements = new Map();
+			const sharedStyleElements = new Map();
 			Array.from(new Set(options.inlineStylesheetsRefs.values())).forEach(stylesheetRefIndex => {
 				const linkElement = doc.createElement("link");
 				linkElement.setAttribute("rel", "stylesheet");
@@ -117,6 +119,11 @@ function getProcessorHelperClass(utilInstance) {
 					: cssTree.parse(content, { context: "stylesheet", parseCustomProperty: true });
 				resources.stylesheets.set(resources.stylesheets.size, { name, content: this.generateStylesheetContent(stylesheet, options) });
 				linkElements.set(stylesheetRefIndex, linkElement);
+				// the element the duplicates were folded into is not itself a duplicate, so it is
+				// absent from inlineStylesheetsRefs and would keep its content inline: the archive
+				// would then hold the same stylesheet twice, once as the entry the links point at
+				// and once in the page
+				sharedStyleElements.set(styleElement, stylesheetRefIndex);
 			});
 			for (const [key, stylesheetInfo] of entries) {
 				if (key.urlNode) {
@@ -135,11 +142,22 @@ function getProcessorHelperClass(utilInstance) {
 					resources.stylesheets.set(resources.stylesheets.size, { name, stylesheet: stylesheetInfo.stylesheet, url: stylesheetInfo.url });
 				} else {
 					const styleElement = key.element;
-					const stylesheetRefIndex = options.inlineStylesheetsRefs.get(styleElement);
+					const stylesheetRefIndex = options.inlineStylesheetsRefs.has(styleElement)
+						? options.inlineStylesheetsRefs.get(styleElement)
+						: sharedStyleElements.get(styleElement);
 					if (stylesheetRefIndex === undefined) {
 						styleElement.textContent = this.generateStylesheetContent(stylesheetInfo.stylesheet, options);
 					} else {
 						const linkElement = linkElements.get(stylesheetRefIndex).cloneNode(true);
+						// the element is replaced rather than rewritten, so whatever identified it in
+						// the page has to be carried over: an id a script still looks up, a class a
+						// selector still matches. The attributes left out are the ones that describe
+						// the link itself, which the code around here sets
+						Array.from(styleElement.attributes).forEach(({ name, value }) => {
+							if (!LINK_OWN_ATTRIBUTE_NAMES.includes(name.toLowerCase())) {
+								linkElement.setAttribute(name, value);
+							}
+						});
 						if (stylesheetInfo.mediaText) {
 							linkElement.media = stylesheetInfo.mediaText;
 						}

package/modules/css-fonts-minifier.js

@@ -92,19 +92,33 @@ function process(doc, stylesheets, styles, options) {
 	fontsInfo.used = fontsInfo.used.map(fontNames => fontNames.map(familyName => resolveFamilyName(familyName, options)));
 	fontsInfo.used = fontsInfo.used.map(fontNames => helper.flatten(fontNames));
 	const variableFound = fontsInfo.used.find(fontNames => fontNames.find(fontName => fontName.match(/^var\(--/)));
+	// an empty list of rendered fonts does not mean the document uses none: every rendered element
+	// has a computed font-family, so an empty list means the computed styles could not be read at
+	// all. A frame whose contentDocument is unreachable is re-parsed from its srcdoc with
+	// DOMParser, and that document is never rendered, so it reports nothing and every face it
+	// declares would be dropped
+	const usedFontsUnknown = !options.usedFonts || !options.usedFonts.length;
 	let unusedFonts, filteredUsedFonts;
-	if (variableFound) {
+	if (usedFontsUnknown) {
 		unusedFonts = [];
 	} else {
 		filteredUsedFonts = new Map();
-		fontsInfo.used.forEach(fontNames => fontNames.forEach(familyName => {
-			if (fontsInfo.declared.find(fontInfo => fontInfo.fontFamily == familyName)) {
-				const optionalData = options.usedFonts && options.usedFonts.filter(fontInfo => fontInfo[0] == familyName);
-				if (optionalData && optionalData.length) {
-					filteredUsedFonts.set(familyName, optionalData);
-				}
-			}
-		}));
+		fontsInfo.used.forEach(fontNames => fontNames.forEach(familyName =>
+			keepDeclaredFontIfRendered(familyName, fontsInfo, filteredUsedFonts, options)));
+		// A family named through a value that could not be resolved cannot be looked up in the
+		// stylesheets — but the browser resolved it when it drew the page, so whatever it named is
+		// in the list of fonts actually rendered, and that list answers for it.
+		//
+		// Giving up on the whole document instead, which is what an unresolved name used to do,
+		// kept every declared face on any page holding one unreadable value anywhere while every
+		// other page pruned as usual. That was not a policy about uncertainty: a page that names
+		// its families plainly has always dropped a face it had not drawn yet, and only a page
+		// whose value happened not to parse was spared. The difference came from a parse failure,
+		// so it is the rendered list that decides in both cases now.
+		if (variableFound) {
+			fontsInfo.declared.forEach(fontInfo =>
+				keepDeclaredFontIfRendered(fontInfo.fontFamily, fontsInfo, filteredUsedFonts, options));
+		}
 		unusedFonts = fontsInfo.declared.filter(fontInfo => !filteredUsedFonts.has(fontInfo.fontFamily));
 	}
 	const docChars = Array.from(new Set(docContent)).map(char => char.charCodeAt(0)).sort((value1, value2) => value1 - value2);
@@ -120,6 +134,17 @@ function process(doc, stylesheets, styles, options) {
 	return stats;
 }
 
+// a face is kept when the page declares it and the browser reports having drawn with it: the
+// stylesheets say what exists, the rendered list says what was needed
+function keepDeclaredFontIfRendered(familyName, fontsInfo, filteredUsedFonts, options) {
+	if (fontsInfo.declared.find(fontInfo => fontInfo.fontFamily == familyName)) {
+		const optionalData = options.usedFonts.filter(fontInfo => fontInfo[0] == familyName);
+		if (optionalData.length) {
+			filteredUsedFonts.set(familyName, optionalData);
+		}
+	}
+}
+
 function getFontsInfo(cssRules, fontsInfo, options) {
 	cssRules.forEach(ruleData => {
 		if (ruleData.type == "Atrule" && (ruleData.name == "media" || ruleData.name == "supports" || ruleData.name == "layer" || ruleData.name == "container") && ruleData.block && ruleData.block.children) {
@@ -200,25 +225,68 @@ function getCustomPropertyValues(name, options) {
 	return values;
 }
 
-function resolveFamilyName(familyName, options) {
+function resolveFamilyName(familyName, options, resolvedProperties = new Set()) {
 	const matchedVar = familyName.match(REGEXP_CUSTOM_PROPERTY_FAMILY);
 	if (matchedVar) {
+		const propertyName = matchedVar[1];
 		const fallback = matchedVar[2];
-		// a var() nested in the fallback cannot be split on its commas, so the family is left
-		// undetermined rather than read as a list of broken names
-		if (!fallback || !fallback.includes("var(")) {
-			const values = getCustomPropertyValues(matchedVar[1], options);
+		// a property naming itself, directly or through another one, would resolve for ever: the
+		// chain already walked is carried down the branch so it stops instead
+		if (!resolvedProperties.has(propertyName)) {
+			const properties = new Set(resolvedProperties);
+			properties.add(propertyName);
+			const values = getCustomPropertyValues(propertyName, options);
 			if (values) {
-				const families = helper.flatten(values.map(value => splitFamilyNames(value)));
-				return fallback ? families.concat(splitFamilyNames(fallback)) : families;
+				const families = helper.flatten(values.map(value => splitFamilyNames(value, options, properties)));
+				const fallbackFamilies = fallback ? splitFamilyNames(fallback, options, properties) : [];
+				// the browser takes the property or the fallback, so knowing one branch is not
+				// knowing the value: a var() left unresolved in either one keeps the family
+				// undetermined, exactly as it was before the nested one could be read at all
+				if (!families.concat(fallbackFamilies).some(testUnresolvedFamilyName)) {
+					return families.concat(fallbackFamilies);
+				}
 			}
 		}
 	}
 	return familyName;
 }
 
-function splitFamilyNames(value) {
-	return value.split(",").map(familyName => normalizeFamilyName(familyName)).filter(familyName => familyName);
+function testUnresolvedFamilyName(familyName) {
+	return typeof familyName == "string" && familyName.startsWith("var(");
+}
+
+function splitFamilyNames(value, options, resolvedProperties) {
+	const familyNames = splitValues(value).map(familyName => normalizeFamilyName(familyName)).filter(familyName => familyName);
+	return options
+		? helper.flatten(familyNames.map(familyName => resolveFamilyName(familyName, options, resolvedProperties)))
+		: familyNames;
+}
+
+// a family list is split on its top-level commas only: the commas inside a var() belong to that
+// var(), and the ones inside a quoted name belong to the name. Splitting on every comma is what
+// made a var() nested in a fallback unreadable, and it also broke a family named "Foo, Bar"
+function splitValues(value) {
+	const values = [];
+	let depth = 0, quote, start = 0;
+	for (let index = 0; index < value.length; index++) {
+		const character = value.charAt(index);
+		if (quote) {
+			if (character == quote && value.charAt(index - 1) != "\\") {
+				quote = null;
+			}
+		} else if (character == "\"" || character == "'") {
+			quote = character;
+		} else if (character == "(") {
+			depth++;
+		} else if (character == ")") {
+			depth--;
+		} else if (character == "," && !depth) {
+			values.push(value.substring(start, index));
+			start = index + 1;
+		}
+	}
+	values.push(value.substring(start));
+	return values;
 }
 
 function filterUnusedFonts(cssRules, declaredFonts, unusedFonts, filteredUsedFonts, docChars) {

package/modules/css-rules-minifier.js

@@ -71,7 +71,8 @@ const ANONYMOUS_LAYER_PLACEHOLDER = "\u0000";
 
 export {
 	process,
-	isUnsupportedPropertyValue
+	isUnsupportedPropertyValue,
+	isUnsupportedVendorValue
 };
 
 function isUnsupportedPropertyValue(property, value) {
@@ -79,6 +80,30 @@ function isUnsupportedPropertyValue(property, value) {
 	return Boolean(!match.matched && match.error && match.error.name !== UNKNOWN_PROPERTY_ERROR_NAME);
 }
 
+// A vendor-prefixed VALUE is dropped only when this browser cannot actually use it. Dropping every
+// one of them was the overreach: `display:-ms-flexbox` is genuinely dead here and worth removing,
+// but `display:-webkit-box` is alive and load-bearing — `-webkit-line-clamp` does nothing without
+// it, so a page keeps its clamp rules and silently stops clamping. On anandabazar.com that expanded
+// 80 clamped headlines by a line each and moved the page 150px, with nothing wrong-looking left in
+// the saved CSS. Four of the five sites in a fifteen-site sweep that use line-clamp were affected.
+function isUnsupportedVendorValue(property, name) {
+	if (!name.startsWith(VENDOR_PREFIX)) {
+		return false;
+	}
+	// unknown fails open, the same rule the unknown-property branch follows: a dropped valid
+	// declaration breaks rendering, a kept invalid one is ignored. With no browser to ask, keep.
+	if (!globalThis.CSS || !globalThis.CSS.supports) {
+		return false;
+	}
+	try {
+		return !globalThis.CSS.supports(property, name);
+	// eslint-disable-next-line no-unused-vars
+	} catch (error) {
+		// a value CSS.supports will not even take as an argument tells us nothing either way
+		return false;
+	}
+}
+
 function process(doc, stylesheets) {
 	const docContext = {
 		doc,
@@ -497,7 +522,8 @@ function collectDeclarationItemsForElement(element, docContext) {
 			hasValueChildNodes &&
 			value.children.size == 1) {
 			if (value.children.head.data.name) {
-				isInvalidValue = value.children.head.data.name.startsWith(VENDOR_PREFIX) || INVALID_CSS_ESCAPE_TEST.test(value.children.head.data.name);
+				const name = value.children.head.data.name;
+				isInvalidValue = isUnsupportedVendorValue(property, name) || INVALID_CSS_ESCAPE_TEST.test(name);
 			} if (!property.startsWith(VENDOR_PREFIX) && value.children.head.data.value) {
 				try {
 					isInvalidValue = isUnsupportedPropertyValue(property, value);

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "single-file-core",
-  "version": "1.5.116",
+  "version": "1.5.118",
   "description": "SingleFile Core",
   "author": "Gildas Lormeau",
   "license": "AGPL-3.0-or-later",
   "scripts": {
-    "test": "deno run --allow-read test/sfz-harness/format-rules.js && deno run --allow-read test/sfz-harness/stored-trigger.js && deno run --allow-read test/sfz-harness/check-determinism.js && deno run --allow-read test/sfz-harness/option-wiring.js && deno run --allow-read test/sfz-harness/css-property-filter.js && deno run --allow-read test/sfz-harness/adopted-stylesheets-hook.js && deno run --allow-read test/sfz-harness/css-fonts-minifier.js && deno run --allow-read test/sfz-harness/inlined-functions.js",
+    "test": "deno run --allow-read test/sfz-harness/format-rules.js && deno run --allow-read test/sfz-harness/stored-trigger.js && deno run --allow-read test/sfz-harness/check-determinism.js && deno run --allow-read test/sfz-harness/option-wiring.js && deno run --allow-read test/sfz-harness/css-property-filter.js && deno run --allow-read test/sfz-harness/adopted-stylesheets-hook.js && deno run --allow-read test/sfz-harness/css-fonts-minifier.js && deno run --allow-read test/sfz-harness/inlined-functions.js && deno run --allow-read test/sfz-harness/pages-archive.js",
     "bump-patch": "npm version patch --no-git-tag-version && npm run bump-commit",
     "bump-minor": "npm version minor --no-git-tag-version && npm run bump-commit",
     "bump-major": "npm version major --no-git-tag-version && npm run bump-commit",

package/processors/compression/compression-packager.js

@@ -31,7 +31,8 @@ import {
 	ZipReader
 } from "./../../vendor/zip/zip.js";
 import {
-	createArchive
+	createArchive,
+	escapeHTML
 } from "./compression.js";
 
 const browser = globalThis.browser;
@@ -232,13 +233,3 @@ function getTOCContent(pages) {
 		pages.map(page => "<li><a href=\"" + escapeHTML(page.url) + "\">" + escapeHTML(page.title || page.url) + "</a></li>").join("") +
 		"</ul></nav>";
 }
-
-// the prelude declares the windows-1252 charset, non-ASCII characters must be
-// encoded as HTML entities to survive it
-function escapeHTML(value) {
-	return Array.from(value).map(character => {
-		const codePoint = character.codePointAt(0);
-		return codePoint < 32 || codePoint > 126 || character == "&" || character == "<" || character == ">" || character == "\"" ?
-			"&#" + codePoint + ";" : character;
-	}).join("");
-}

package/processors/compression/compression.js

@@ -151,15 +151,27 @@ const PROCESS_OPTION_NAMES = [
 export {
 	process,
 	createArchive,
+	escapeHTML,
 	PROCESS_OPTION_NAMES
 };
 
 async function process(pageData, options, lastModDate = new Date()) {
 	let script;
+	// The worker is configured before anything else, and outside the extension it is turned off
+	// rather than left alone. Given no address, zip.js resolves its default one against the page
+	// being saved, so the browser asks the CAPTURED SITE for a file that site has never heard of:
+	// three 404s in the user's own server logs for every archive, and then a fallback to the main
+	// thread anyway, which is where the work was always going to happen. Choosing the fallback
+	// costs nothing that was ever gained and asks the site for nothing.
+	const extensionContext = Boolean(browser && browser.runtime && browser.runtime.getURL);
+	if (extensionContext) {
+		configure({ workerURI: "/lib/single-file-z-worker.js" });
+	} else {
+		configure({ useWebWorkers: false });
+	}
 	if (options.zipScript) {
 		script = options.zipScript;
-	} else if (browser && browser.runtime && browser.runtime.getURL) {
-		configure({ workerURI: "/lib/single-file-z-worker.js" });
+	} else if (extensionContext) {
 		script = await (await fetch(browser.runtime.getURL(SCRIPT_PATH))).text();
 	}
 	return createArchive(pageData, options, script, zipWriter => {
@@ -622,7 +634,7 @@ function getHTMLHeadData(pageData, options) {
 	let pageContent = "";
 	// the title is left out of a password-protected archive: manifest.json carries it too and
 	// is encrypted, so emitting it here would publish what the password is meant to cover
-	const title = options.password ? "" : getPageTitle(pageData);
+	const title = options.password ? "" : escapeHTML(pageData.title || "");
 	pageContent += "<title>" + title + "</title>";
 	// the canonical link publishes the URL the archive was saved from, for the same reason
 	// the title above is left out of a password-protected archive
@@ -644,12 +656,13 @@ function getHTMLHeadData(pageData, options) {
 	return pageContent;
 }
 
-function getPageTitle(pageData) {
-	// numeric character references are ASCII bytes, so the title survives the single-byte
-	// charset universal mode declares, and any parser decodes them back to the original text
-	return Array.from(pageData.title || "").map(character => {
+// every piece of text in the prelude goes through this, wherever it is assembled: the prelude
+// declares a single-byte charset, and numeric character references are ASCII bytes, so they
+// survive it and any parser decodes them back to the original text
+function escapeHTML(value) {
+	return Array.from(value).map(character => {
 		const codePoint = character.codePointAt(0);
-		return codePoint < 32 || codePoint > 126 || character == "&" || character == "<" || character == ">" ?
+		return codePoint < 32 || codePoint > 126 || character == "&" || character == "<" || character == ">" || character == "\"" ?
 			"&#" + codePoint + ";" : character;
 	}).join("");
 }

package/test/sfz-harness/README.md

@@ -29,6 +29,8 @@ any check failed.
 | `option-wiring.js` | That every option `compression.js` reads is either declared as a caller option or classified as internal, and that `single-file.js` still builds its argument from that declaration. Guards the layer the other suites sit below. |
 | `css-property-filter.js` | That the declaration filter keeps a property css-tree's dictionary does not know (`stop-color`, `flood-opacity`, anything newer than the pinned build) and still drops a genuinely invalid value. |
 | `adopted-stylesheets-hook.js` | That the page-world hook answers the adopted-stylesheets request for a CLOSED shadow root, which its host does not expose. |
+| `inlined-functions.js` | That a function serialized into a self-extracting archive names nothing outside itself. An import survives bundling and still reads correctly, and the archive then throws a bare `ReferenceError` and renders nothing. |
+| `pages-archive.js` | That `createPagesArchive` packs several pages into one archive correctly: the first page at the root and the others in folders, the manifest, the symlink a deduplicated entry leaves behind, and the escaping of crawled titles in both tables of contents. |
 | `css-fonts-minifier.js` | That `removeUnusedFonts` reads the font families it prunes on correctly: a `var()` family resolved from the values the document declares and not only from the ones the body inherits, every font kept when the value is genuinely undetermined, and a multi-word family name that does not also claim a font named after its own tail. |
 
 ## The tools

package/test/sfz-harness/css-fonts-minifier.js

@@ -11,6 +11,13 @@
 // so it can only keep too much, never too little — and options.usedFonts, which comes from the
 // rendered computed styles, gates the result anyway.
 //
+// What happens when even the union cannot answer changed with it. Switching pruning off for the
+// whole document was never a policy about uncertainty — a page naming its families plainly has
+// always dropped a face it had not drawn yet, and only a page holding one unreadable value anywhere
+// was spared, all of it. So the rendered list decides in that case too: a family the browser
+// resolved when it drew the page is in that list whatever the stylesheets can be made to say. The
+// one case that still keeps everything is the one where the rendering itself is missing.
+//
 // The other var() defects this pins, all found alongside it:
 //   - custom property names are case-sensitive; they were lowercased with the family names, so
 //     var(--ProbeFont) never resolved, not even from :root
@@ -45,6 +52,11 @@ const USED_FONTS = [
 
 const ALL_FAMILIES = ["usedone", "usedtwo", "usedthree", "unused"];
 
+// what survives when the stylesheets cannot say which family a value names: the faces the page
+// declares AND the rendering reports having drawn with. It is USED_FONTS that decides there, so a
+// face nothing drew is dropped even though nothing could be shown to name it either
+const RENDERED_FAMILIES = ["usedone", "usedtwo", "usedthree"];
+
 let failures = 0;
 
 check("a plain family name prunes the rest",
@@ -83,12 +95,18 @@ check("the font shorthand resolves a property written with a fallback",
 	run({ rules: ".card{--probe-font:\"UsedOne\"}.card p{font:italic 1em var(--probe-font,serif)}" }),
 	["usedone"]);
 
-// the conservative half of the contract: when the value genuinely cannot be determined, every
-// declared font stays, including the one no rule names. These are the cases the union does not
-// cover, and getting them wrong loses fonts from the saved page rather than merely wasting bytes
-check("a property declared nowhere keeps every font",
+// The other half of the contract: what happens when the value genuinely cannot be determined. The
+// stylesheets no longer decide there — the rendering does. The browser resolved the value when it
+// drew the page, so whatever the property named is in the list of fonts reported as used, and a
+// face absent from that list was drawn by nothing.
+//
+// It used to keep EVERY declared face, and not as a decision about uncertainty: a page naming its
+// families plainly has always dropped a face it had not drawn yet, and only a page holding one
+// value that happened not to parse was spared — the whole document, over one unreadable name. The
+// case these checks still guard is the one below them, where the rendering itself is unavailable.
+check("a property declared nowhere falls back to the fonts that were drawn",
 	run({ rules: ".card p{font-family:var(--set-by-script),serif}" }),
-	ALL_FAMILIES);
+	RENDERED_FAMILIES);
 
 // the shorthand cannot be substituted with several candidate values, but its var() sits in family
 // position, so the parser hands it back as the family and the union answers it there instead
@@ -97,18 +115,51 @@ check("a font shorthand with several candidates resolves through the family",
 	["usedone", "usedtwo"]);
 
 // a property holding the whole shorthand is the case the union must NOT touch: its values are not
-// family lists, and reading them as such would drop every font in the document
-check("a property holding a whole shorthand keeps every font",
+// family lists, and reading them as such would name families the document never had
+check("a property holding a whole shorthand falls back to the fonts that were drawn",
 	run({ rules: ".card{--font:italic 1em \"UsedOne\"}.note{--font:italic 1em \"UsedTwo\"}p{font:var(--font)}" }),
-	ALL_FAMILIES);
+	RENDERED_FAMILIES);
 
-check("a var() nested in a fallback keeps every font",
+check("a var() nested in a fallback falls back to the fonts that were drawn",
 	run({ rules: ".card{--probe-font:\"UsedOne\"}.card p{font-family:var(--other,var(--probe-font),serif)}" }),
+	RENDERED_FAMILIES);
+
+// the check above leaves the family undetermined because the OUTER property is declared nowhere.
+// A var() written in the font-family itself is split by the AST walk, which hands each branch over
+// separately, so nesting alone was never the problem there. The chain that did give up is a var()
+// inside a property VALUE: it was read one level deep and whatever it named stayed unresolved,
+// which switched pruning off for the whole document
+check("a property whose value is another declared property resolves through it",
+	run({ rules: ".card{--first-font:var(--second-font)}.note{--second-font:\"UsedOne\"}.card p{font-family:var(--first-font),serif}" }),
+	["usedone"]);
+
+// splitting that value on every comma cut this one into "var(--second-font" and "\"UsedTwo\")",
+// two names that resolve to nothing, and the document went undetermined over a value it holds in full
+check("a value holding a var() with its own fallback is split on the top-level comma",
+	run({ rules: ".card{--first-font:var(--second-font,\"UsedTwo\"),serif}.note{--second-font:\"UsedOne\"}.card p{font-family:var(--first-font)}" }),
+	["usedone", "usedtwo"]);
+
+// two properties naming each other resolve for ever without the guard: this check hangs rather
+// than fails when it regresses
+check("a property naming itself through another one falls back to the fonts that were drawn",
+	run({ rules: ".card{--first-font:var(--second-font)}.note{--second-font:var(--first-font)}.card p{font-family:var(--first-font),serif}" }),
+	RENDERED_FAMILIES);
+
+// The rendered-fonts list is what says a declared face is really drawn, and an EMPTY one is not
+// the same answer as a short one: every rendered element has a computed font-family, so an empty
+// list means the computed styles could not be read at all. It happens for real. A frame whose
+// contentDocument is unreachable is re-parsed from its srcdoc with DOMParser
+// (processors/frame-tree/content/content-frame-tree.js), and that document is never rendered, so
+// it reports no font and the frame lost EVERY face it declared — measured on derstandard.at,
+// where the newsletter box inside such a frame fell back to a system font, and on MDN, where the
+// text in the CSS-demo frame reflowed. The families are named right there in the frame's own CSS.
+check("a document that reports no rendered font keeps every font",
+	run({ rules: ".card p{font-family:\"UsedOne\",serif}", usedFonts: [] }),
 	ALL_FAMILIES);
 
-check("a property whose value is another undetermined property keeps every font",
+check("a property whose value is another undetermined property falls back to the fonts that were drawn",
 	run({ rules: ".card{--probe-font:var(--set-by-script)}.card p{font-family:var(--probe-font),serif}" }),
-	ALL_FAMILIES);
+	RENDERED_FAMILIES);
 
 // An unquoted family name is a sequence of identifier tokens, and the walk that joins them has to
 // resume after the LAST of them. Resuming after the first pushed every word but that one again as a

package/test/sfz-harness/css-property-filter.js

@@ -10,7 +10,7 @@
 // The rule this pins: unknown must fail open. A dropped valid declaration breaks rendering; a kept
 // invalid one is ignored by the browser.
 import * as cssTree from "../../vendor/css-tree.js";
-import { isUnsupportedPropertyValue } from "../../modules/css-rules-minifier.js";
+import { isUnsupportedPropertyValue, isUnsupportedVendorValue } from "../../modules/css-rules-minifier.js";
 
 // valid declarations whose property the vendored css-tree does not know. Every one of these was
 // deleted before the fix. The SVG paint-server and filter properties are the ones that matter in
@@ -77,6 +77,34 @@ const wrongValue = cssTree.lexer.matchProperty("margin-trim", cssTree.parse("blo
 check("unknown property reports SyntaxReferenceError", unknownProperty.error && unknownProperty.error.name, "SyntaxReferenceError");
 check("wrong value reports SyntaxMatchError", wrongValue.error && wrongValue.error.name, "SyntaxMatchError");
 
+// The same failure as above, one step earlier and on VALUES rather than properties. Before the fix
+// the call site dropped any single-identifier value beginning with "-", asking nothing: the test
+// for a dead `display:-ms-flexbox` also deleted a live `display:-webkit-box`. That one costs more
+// than it looks, because `-webkit-line-clamp` does nothing without it and both of ITS declarations
+// survive — being unknown properties, they already fail open — so the rule keeps a clamp it no
+// longer applies. Four of the five sites in a fifteen-site sweep that use line-clamp were affected;
+// on one of them 80 headlines each grew a line and the page moved 150px.
+//
+// CSS.supports is the authority and Deno has none, so it is stubbed here. That is also the point of
+// the last group: with no browser to ask, this must KEEP, which is the same fail-open rule as above.
+const CHROME_SUPPORTS = new Set(["display:-webkit-box", "display:-webkit-inline-box", "-webkit-box-orient:vertical"]);
+const originalCSS = globalThis.CSS;
+globalThis.CSS = { supports: (property, value) => CHROME_SUPPORTS.has(property + ":" + value) };
+try {
+	// alive in this browser, and load-bearing
+	check("vendor value kept: display: -webkit-box", isUnsupportedVendorValue("display", "-webkit-box"), false);
+	check("vendor value kept: display: -webkit-inline-box", isUnsupportedVendorValue("display", "-webkit-inline-box"), false);
+	// dead in this browser, and the reason the check exists at all — the fix must not disable it
+	check("vendor value dropped: display: -ms-flexbox", isUnsupportedVendorValue("display", "-ms-flexbox"), true);
+	check("vendor value dropped: display: -moz-box", isUnsupportedVendorValue("display", "-moz-box"), true);
+	// not vendor-prefixed, so this predicate must not have an opinion either way
+	check("non-vendor value untouched: display: flex", isUnsupportedVendorValue("display", "flex"), false);
+	check("non-vendor value untouched: color: nonsense", isUnsupportedVendorValue("color", "nonsense"), false);
+} finally {
+	globalThis.CSS = originalCSS;
+}
+check("no browser to ask keeps the value", isUnsupportedVendorValue("display", "-ms-flexbox"), false);
+
 if (failed) {
 	console.log("FAILED");
 	Deno.exit(1);

package/test/sfz-harness/format-rules.js

@@ -2,7 +2,9 @@ import "./dom-stub.js";
 import { makePageData, makeOptions, runProcess, mulberry32 } from "./common.js";
 import { ZipReader, BlobReader } from "../../vendor/zip/zip.js";
 
-const TITLE = "日本語 — café & <b>";
+// the quote is there because the escaper the title shares with the table of contents encodes
+// it for an attribute value, where it matters, and a title has to round-trip through that too
+const TITLE = "日本語 — café & <b> \"quoted\"";
 const PDF = new TextEncoder().encode("%PDF-1.4\n1 0 obj\n<<>>\nendobj\ntrailer\n<<>>\n%%EOF\n");
 
 let failed = false;

package/test/sfz-harness/pages-archive.js

@@ -0,0 +1,177 @@
+// createPagesArchive packs several single-page archives into one. Nothing exercised it until this
+// file: the module was reachable only through a crawl, so a change to the folder layout, the
+// manifest, the deduplication or the table of contents broke nothing that anyone ran.
+//
+// Three of its rules are worth stating, because they look arbitrary in the code:
+//
+//   - the first page is stored at the ROOT and the others under pages/N/. The root page is what a
+//     reader opens, so it cannot be moved into a folder without changing every relative URL the
+//     capture already resolved.
+//   - a duplicate entry becomes a SYMLINK rather than being dropped. The router resolves it from
+//     the alias map in the manifest and never reads it, but a plain unzip has to produce complete
+//     page folders, and only a symlink gives both.
+//   - the titles written into the table of contents are CRAWLED, so they are attacker-controlled
+//     text going into an href attribute and into element content. Both escapers are checked here.
+import "./dom-stub.js";
+import { makePageData, makeOptions, runProcess } from "./common.js";
+import { createPagesArchive } from "../../processors/compression/compression-packager.js";
+import { ZipReader, BlobReader, TextWriter } from "../../vendor/zip/zip.js";
+
+// a title as it comes back from a crawl: the quote closes the href it is written into, the angle
+// bracket opens an element, and the ampersand is what a naive escaper double-encodes
+const HOSTILE_TITLE = "Intro & \"start\" <b>";
+const SYMLINK_UNIX_MODE = 0o120777;
+
+let failed = false;
+
+const pages = [
+	await makePage(1, { url: "https://example.com/docs/intro.html", title: HOSTILE_TITLE, originalUrls: ["https://example.com/docs/"] }),
+	await makePage(2, { url: "https://example.com/docs/api/reference.html", title: "Reference" })
+];
+
+{
+	const entries = await readArchive(await createPagesArchive(pages, packagerOptions()));
+	const manifest = JSON.parse(await readEntry(entries, "sfz-pages.json"));
+	check("the first page is stored at the root of the archive", entries.has("index.html"), true);
+	check("a later page is stored in a folder of its own", entries.has("pages/2/index.html"), true);
+	check("the manifest names the path of every page",
+		manifest.pages.map(page => page.path).join(" "), " pages/2/");
+	check("the manifest names the url of every page",
+		manifest.pages.map(page => page.url).join(" "), "https://example.com/docs/intro.html https://example.com/docs/api/reference.html");
+	check("the manifest keeps the title a page was saved with", manifest.pages[0].title, HOSTILE_TITLE);
+	// a page reached through several urls has to answer to all of them, or a link to the url the
+	// crawler did not settle on leaves the archive
+	check("the manifest keeps the urls a page was reached by",
+		(manifest.pages[0].originalUrls || []).join(" "), "https://example.com/docs/");
+}
+
+// the router reads these two out of the manifest, and "auto" is the absence of a choice rather
+// than a value: writing it would pin the default of the day into every archive
+{
+	const entries = await readArchive(await createPagesArchive(pages, packagerOptions({ markUnarchivedLinks: true, pageTransitions: "slide" })));
+	const manifest = JSON.parse(await readEntry(entries, "sfz-pages.json"));
+	check("the manifest records that unarchived links are marked", manifest.markUnarchivedLinks, true);
+	check("the manifest records the page transition it was given", manifest.pageTransitions, "slide");
+}
+
+{
+	const entries = await readArchive(await createPagesArchive(pages, packagerOptions({ pageTransitions: "auto" })));
+	const manifest = JSON.parse(await readEntry(entries, "sfz-pages.json"));
+	check("the default page transition is not written to the manifest", "pageTransitions" in manifest, false);
+}
+
+// Both fixtures declare the same stylesheet, so pages/2/styles.css is byte-for-byte the entry
+// already written at the root.
+{
+	const entries = await readArchive(await createPagesArchive(pages, packagerOptions({ dedupPages: true })));
+	const manifest = JSON.parse(await readEntry(entries, "sfz-pages.json"));
+	const duplicate = entries.get("pages/2/styles.css");
+	check("a repeated entry is still present after deduplication", Boolean(duplicate), true);
+	check("the repeated entry points at the one that was kept",
+		await readEntry(entries, "pages/2/styles.css"), "../../styles.css");
+	// without the mode, tar and unzip write the path as the FILE CONTENT and the page folder ends
+	// up holding a text file where a stylesheet belongs
+	check("the repeated entry carries the unix symlink mode",
+		duplicate.externalFileAttributes >>> 16, SYMLINK_UNIX_MODE);
+	// read through a default, so that a manifest with no aliases at all reports as a failed check
+	// rather than throwing and taking every check after it down with it
+	check("the manifest maps the repeated entry to the one it aliases",
+		(manifest.aliases || {})["pages/2/styles.css"], "styles.css");
+	check("an entry that is not repeated is left alone",
+		"pages/2/index.html" in (manifest.aliases || {}), false);
+}
+
+{
+	const entries = await readArchive(await createPagesArchive(pages, packagerOptions()));
+	const manifest = JSON.parse(await readEntry(entries, "sfz-pages.json"));
+	check("nothing is aliased when deduplication is off", "aliases" in manifest, false);
+	check("a repeated entry is stored whole when deduplication is off",
+		(await readEntry(entries, "pages/2/styles.css")).includes("font-family"), true);
+}
+
+{
+	const entries = await readArchive(await createPagesArchive(pages, packagerOptions({ tocPage: true })));
+	const toc = await readEntry(entries, "sfz-toc.html");
+	check("the table of contents page is stored when it is asked for", entries.has("sfz-toc.html"), true);
+	check("the table of contents links to the page at the root", toc.includes("href=\"index.html\""), true);
+	check("the table of contents links to the page in its folder", toc.includes("href=\"pages/2/index.html\""), true);
+	// the escaped form has to be there AND the raw form has to be absent: a title written twice,
+	// once escaped and once not, passes any check that only looks for the escaped one
+	check("a crawled title is escaped into the table of contents",
+		toc.includes("Intro &amp; &quot;start&quot; &lt;b&gt;"), true);
+	check("a crawled title is not also written raw", toc.includes(HOSTILE_TITLE), false);
+	// the groups are details/summary and nothing else on purpose: the page has to stay usable
+	// after a plain unzip, where no script runs
+	check("pages are grouped by the segments of their path",
+		toc.includes("<details open><summary>docs</summary>"), true);
+	check("the table of contents needs no script", toc.includes("<script"), false);
+}
+
+{
+	const entries = await readArchive(await createPagesArchive(pages, packagerOptions()));
+	check("no table of contents page is stored when it is not asked for", entries.has("sfz-toc.html"), false);
+}
+
+// one origin is the whole archive's origin and adding it to every path would say nothing; two
+// origins make it the first thing that tells two pages apart
+{
+	const mixedPages = [pages[0], await makePage(3, { url: "https://other.example.org/notes.html", title: "Notes" })];
+	const entries = await readArchive(await createPagesArchive(mixedPages, packagerOptions({ tocPage: true })));
+	const toc = await readEntry(entries, "sfz-toc.html");
+	check("pages from several origins are grouped by origin",
+		toc.includes("<summary>https://example.com</summary>"), true);
+}
+
+// the prelude list is read without decompressing anything, by tools that never extract the
+// archive, so it is the only place the pages are named in plain text
+{
+	const bytes = await createPagesArchive(pages, packagerOptions({ pageList: true }));
+	const prelude = new TextDecoder("windows-1252").decode(bytes);
+	check("the prelude lists the pages when the page list is asked for",
+		prelude.includes("<a href=\"https://example.com/docs/api/reference.html\">Reference</a>"), true);
+	// anchored on the link, not on the escaped text alone: the same title is also written into the
+	// wrapper's own <title>, which the writer escapes the same way, so a search for the escaped
+	// form anywhere in the archive passes even when the page list itself is written raw
+	check("the prelude escapes a crawled title too",
+		prelude.includes("<a href=\"https://example.com/docs/intro.html\">Intro &#38; &#34;start&#34; &#60;b&#62;</a>"), true);
+	check("the prelude is not written when the page list is not asked for",
+		new TextDecoder("windows-1252").decode(await createPagesArchive(pages, packagerOptions())).includes("<nav><ul>"), false);
+}
+
+console.log(failed ? "\nsome checks FAILED" : "\nall checks passed");
+Deno.exit(failed ? 1 : 0);
+
+// each page of a multi-page archive is a single-page archive, so the fixtures are built by the
+// writer the rest of the harness already covers
+async function makePage(seed, { url, title, originalUrls }) {
+	const pageData = makePageData(seed, 2 * 1024);
+	pageData.title = title;
+	const { bytes } = await runProcess(pageData, makeOptions({ url }));
+	return { url, title, originalUrls, getData: async () => bytes };
+}
+
+function packagerOptions(overrides = {}) {
+	return {
+		selfExtractingArchive: true,
+		extractDataFromPage: true,
+		zipScript: "/* zip script stub */",
+		...overrides
+	};
+}
+
+async function readArchive(bytes) {
+	const zipReader = new ZipReader(new BlobReader(new Blob([bytes])));
+	const entries = await zipReader.getEntries();
+	await zipReader.close();
+	return new Map(entries.map(entry => [entry.filename, entry]));
+}
+
+function readEntry(entries, filename) {
+	return entries.get(filename).getData(new TextWriter());
+}
+
+function check(label, actual, expected) {
+	const ok = actual === expected;
+	console.log(`${ok ? "PASS" : "FAIL"} ${label}: ${actual}${ok ? "" : " (expected " + expected + ")"}`);
+	failed ||= !ok;
+}