single-file-cli 2.6.1 → 2.6.3

package/test/fidelity/README.md

@@ -0,0 +1,111 @@
+# Fidelity harness
+
+Renders a page, saves it, renders the save, and compares the pixels. The rest of the e2e suite
+reads a capture as text or as bytes — a marker is present, an entry is named what it should be, the
+console is clean. A save can pass all of that and still come back with its type in a fallback
+family, its grid collapsed or a frame drawn blank.
+
+The checks live in [`../e2e/fidelity.test.js`](../e2e/fidelity.test.js) and run with the rest of the
+suite:
+
+```
+./build-dev.sh && npm run test:dev
+```
+
+`test:dev` is the form that matters here, and it is also what switches these checks on. They are
+skipped on the default target, which runs the committed `lib/` — a build of the *pinned npm release*
+of single-file-core, so a green run there says nothing about a local fix, and a check written for one
+stays red until it ships. To run them against that released build anyway:
+
+```
+SINGLE_FILE_FIDELITY=1 node --test test/e2e/fidelity.test.js
+```
+
+**They do not run in CI yet, and that is a hold rather than a decision.** The first CI run wedged on
+a CDP command that never answered: simple-cdp leaves commands without a limit by default, so nothing
+failed, the connection stayed stuck, every check after the first was never reached, and the job had
+to be cancelled after ten minutes. The limit is set now (`commandMaxTime`), so a repeat would name
+the method that did not answer instead of hanging — but that has not been seen on a runner yet.
+Where they belong is a CI job that builds core from source and runs `test:dev`.
+
+## What it can assert, and why
+
+A page that does not render identically to **itself** cannot be held to rendering identically to its
+save. Every check therefore captures the source twice first and uses the difference as its floor.
+On these fixtures the floor is zero, which is why they are hand-built and static rather than
+mirrored from the web — real pages reflow between two shots of the same file, and a suite built on
+them reports noise as regression.
+
+The comparison is done in the browser, on the two PNGs: 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. Images are compared in horizontal bands so that a failure says
+*where* the two renderings parted company, and a save shorter than its source counts its missing rows
+as differing rather than having them cropped away.
+
+Two things pixels cannot see, which are asserted on the saved markup instead:
+
+- an `id` a script looks up or a `class` a selector matches, on an element the save replaced;
+- pruning that did not happen. A build that gives up and keeps every font renders exactly like a
+  correct one.
+
+## The fixtures
+
+Each is a defect that shipped, kept in the shape that made it visible, with a comment in the page
+saying which.
+
+| Fixture | What it holds |
+|---|---|
+| `duplicate-stylesheet/` | Two `<style>` elements with identical content. The archive writer folds them into one entry and points links at it; the element they were folded into kept its content inline as well, and the replacement dropped the attributes that identified it. |
+| `linked-stylesheet/` | An external stylesheet linked with an id, a class, a data attribute and a title. A plain save has nowhere to put it, so the link becomes a style element — a new one, built from the media and the text and nothing else. |
+| `used-fonts/` | Five declared faces, three drawn — named as a plain family, through a custom property declared on a descendant, and through the `font` shorthand. The minifier has stopped resolving each of those at some point. |
+| `frame-fonts/` | A sandboxed frame declaring and using a face the page around it never names. Its `contentDocument` is out of reach, so it is re-parsed from its srcdoc and reports nothing about what it draws with. |
+| `synthetic-italic/` | A face drawn in an italic it declares no face for, so the browser slants the upright one. Matching a loaded face against the computed style found nothing and pruned the family off the page that draws it. |
+| `unresolved-font-property/` | A family named inside a property holding a whole font shorthand, declared twice so there is no single value to substitute. The stylesheets cannot name it; the rendered list can. |
+
+`pages/fonts/` holds generated fonts in which every printable ASCII character is the same filled
+rectangle: text set in them is a solid bar, so a face that goes missing is not a subtle reflow. The
+three shapes differ, so keeping the *wrong* face is as visible as keeping none.
+[`make-font.js`](make-font.js) writes them; run it after changing it, and commit the result.
+
+## Rules the harness enforces, and what they cost to learn
+
+Each of these is a way a run reported good news that was not true.
+
+1. **A run without a noise floor concludes nothing.** Measured every time, never assumed.
+2. **A whole-image verdict is not usable.** One line of reflow near the top moves every pixel below
+   it, and a single number cannot tell a small local difference from a large one.
+3. **A fixture that fails to load renders identically to itself.** The floor is zero, the save of
+   that same failure matches it, and the check passes while testing nothing — it happened here, with
+   a directory served as a file giving two beautifully identical 404 pages. The server records every
+   miss and the checks refuse to conclude when there is one. Only the favicon is excused: a request
+   to the captured site that the site cannot answer is a defect wherever it comes from, and this is
+   how the archive writer was caught asking that site for a zip worker three times per save.
+4. **The output file is removed before each save.** The default conflict action is to uniquify, so a
+   second save writes `saved (2).html` and leaves the stale file where the test is looking.
+5. **A stale dev build reads as "the change has no effect".** [`../target.js`](../target.js) refuses
+   to start when `.dev/` is older than the newest source file in single-file-core.
+6. **Assert on content, not on a number.** A five-megabyte cookie-consent wall looks exactly like a
+   successful save.
+
+## Adding a fixture
+
+Build the page around the defect, in the shape that made it visible, and say in an HTML comment what
+that was — the fixtures read as a record of what has gone wrong, which is most of their value once
+the bug is a year old.
+
+Then confirm the check can fail. Break the fix in single-file-core, rebuild, watch it go red, and
+put it back. A check that passes against deliberately broken code is protecting nothing, and this is
+not a formality here: `frame-fonts` found a defect on its first run that the commit it was written
+to guard did not cover, `unresolved-font-property` had to be reshaped twice before it exercised the
+code it names — a var() in family position resolves through the ordinary path, whatever it is nested
+in — and `synthetic-italic` exists because a fixture that should have been unremarkable came back
+with an empty list of used fonts.
+
+Two traps worth knowing before writing one. A face used in a style the fonts do not declare is
+drawn synthesized, which changes what the page reports about it; and a family name appears in the
+declarations that *use* it as well as in the `@font-face` that declares it, so read the declared
+faces out of the `@font-face` rules rather than searching the page for a name.
+
+And commit the fix before mutating it. Restoring the tree between mutations is a `git checkout`,
+which takes the uncommitted fix with it — the next mutation then fails to apply against code that
+is already reverted, and reports a pass. It has happened twice here.

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)
+	};
+}