ranger-compiler 3.5.1 → 3.5.2

package/dist/lib/evg/gl/measure-check.mjs

@@ -0,0 +1,135 @@
+#!/usr/bin/env node
+// SPDX-License-Identifier: MIT
+//
+// Is the browser the thing measuring the page?
+//
+//   npm run evg:measure:web
+//
+// `evg-measure.js` hands `EVGHostTextMeasurer` one function and every layout
+// in the page is meant to measure with it. A page that silently fell back to
+// the table would look the same to every other check — the picture is a
+// picture either way — so this asks the pages themselves, in Chromium:
+//
+//   * is the measurer installed and attached, and did the layout CALL it;
+//   * does a run measured through EVG come out at the width canvas
+//     `measureText` gives the same font shorthand, which is the width the
+//     painter draws it at — the claim the file exists to make good on;
+//   * are the face metrics the canvas's `fontBoundingBox*`, and is the line
+//     gap non-negative and taken from a real `line-height: normal` box.
+//
+// Two pages, because they take the measurer two ways: the RealTrainer page
+// through an ES module bundle, the responsive page through a global.
+
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { createServer } from "node:http";
+import { requireDom, findChromium } from "../../../gallery/ui/conformance/dom-adapter.mjs";
+
+const HERE = path.dirname(fileURLToPath(import.meta.url));
+const ROOT = path.resolve(HERE, "..", "..", "..");
+
+const PAGES = [
+  {
+    name: "realtrainer (bundle)",
+    built: "gallery/realtrainer/web/bundle.js",
+    build: "npm run rt:page",
+    url: "/gallery/realtrainer/web/index.html?page=980x760",
+    ready: () => window.__app && window.__fontMeasure,
+  },
+  {
+    name: "responsive (global)",
+    built: "lib/evg/web/responsive/dist/index.html",
+    build: "npm run evg:responsive:web",
+    url: "/lib/evg/web/responsive/dist/index.html",
+    ready: () => window.__evgResponsive && window.__fontMeasure,
+  },
+];
+
+for (const p of PAGES) {
+  if (!fs.existsSync(path.join(ROOT, p.built))) {
+    console.error(`${p.built} missing — run \`${p.build}\` first`);
+    process.exit(3);
+  }
+}
+
+const TYPES = {
+  ".html": "text/html", ".js": "text/javascript", ".mjs": "text/javascript",
+  ".cjs": "text/javascript", ".css": "text/css", ".json": "application/json",
+  ".png": "image/png", ".svg": "image/svg+xml",
+};
+const server = createServer((req, res) => {
+  const rel = decodeURIComponent(new URL(req.url, "http://x").pathname);
+  const file = path.join(ROOT, rel.slice(1));
+  if (!file.startsWith(ROOT) || !fs.existsSync(file) || fs.statSync(file).isDirectory()) {
+    res.writeHead(404).end("not found");
+    return;
+  }
+  res.writeHead(200, { "content-type": TYPES[path.extname(file)] || "application/octet-stream" })
+    .end(fs.readFileSync(file));
+});
+await new Promise((r) => server.listen(0, r));
+const port = server.address().port;
+
+const { chromium } = requireDom("playwright-core");
+const browser = await chromium.launch({ executablePath: findChromium(), args: ["--use-gl=angle", "--use-angle=swiftshader"] });
+
+let passed = 0, failed = 0;
+const ok = (what, cond, detail = "") => {
+  if (cond) passed += 1; else failed += 1;
+  console.log(`  ${cond ? "PASS" : "FAIL"} ${what}${cond || !detail ? "" : "  (" + detail + ")"}`);
+};
+
+// What the page says about its measurer. Runs in the browser.
+const probe = () => {
+  const h = window.__fontMeasure;
+  const m = h.measurers[0];
+  const c = document.createElement("canvas").getContext("2d");
+  const family = "sans-serif", size = 14, text = "Päiväkirja — 3x5@90kg";
+  c.font = `${size}px ${family}`;
+  const canvasW = c.measureText("‭" + text + "‬").width;
+  const fm = c.measureText("Hg");
+  const run = m.measureText(text, family, size);
+  c.font = `bold ${size}px ${family}`;
+  const canvasBoldW = c.measureText("‭" + text + "‬").width;
+  const bold = m.measureText(text, family + "-Bold", size);
+  return {
+    attached: m.isAttached(), host: m.hostName, key: m.measureKey(),
+    widthCalls: m.widthCalls, faceCalls: m.faceCalls,
+    evgW: run.width, canvasW, evgBoldW: bold.width, canvasBoldW,
+    asc: run.ascent, desc: run.descent, canvasAsc: fm.fontBoundingBoxAscent, canvasDesc: fm.fontBoundingBoxDescent,
+    lineH: m.getLineHeight(family, size),
+    // What the table would have said, for the record.
+    tableW: (typeof m.fallback === "object" && m.fallback) ? m.fallback.measureText(text, family, size).width : -1,
+  };
+};
+
+for (const p of PAGES) {
+  console.log(`--- ${p.name}`);
+  const page = await browser.newPage({ viewport: { width: 1200, height: 800 } });
+  const errors = [];
+  page.on("pageerror", (e) => errors.push(String(e)));
+  await page.goto(`http://127.0.0.1:${port}${p.url}`, { waitUntil: "networkidle" });
+  await page.waitForFunction(p.ready, null, { timeout: 20000 });
+  const r = await page.evaluate(probe);
+  ok("the measurer is installed and attached", r.attached && r.host === "canvas", JSON.stringify({ attached: r.attached, host: r.host }));
+  ok("the layout called the browser for widths", r.widthCalls > 0, `widthCalls=${r.widthCalls}`);
+  ok("and for faces, once per face", r.faceCalls > 0 && r.faceCalls % 3 === 0 && r.faceCalls <= r.widthCalls * 3, `faceCalls=${r.faceCalls}`);
+  ok("a run through EVG is the width the painter's canvas gives it", Math.abs(r.evgW - r.canvasW) < 0.001, `evg=${r.evgW} canvas=${r.canvasW}`);
+  ok("and a bold run, through the -Bold convention", Math.abs(r.evgBoldW - r.canvasBoldW) < 0.001 && r.evgBoldW !== r.evgW, `evg=${r.evgBoldW} canvas=${r.canvasBoldW}`);
+  ok("the ascent and descent are the face's", Math.abs(r.asc - r.canvasAsc) < 0.001 && Math.abs(r.desc - r.canvasDesc) < 0.001, `evg=${r.asc}/${r.desc} canvas=${r.canvasAsc}/${r.canvasDesc}`);
+  ok("line-height: normal is at least the face's box", r.lineH >= r.asc + r.desc - 0.001 && r.lineH < (r.asc + r.desc) * 1.3, `lineH=${r.lineH} asc+desc=${r.asc + r.desc}`);
+  ok("the key names the host", /^host:canvas:/.test(r.key), r.key);
+  ok("no page errors", errors.length === 0, errors.join("; "));
+  console.log(`  (table would have said ${r.tableW.toFixed(2)}, the browser says ${r.canvasW.toFixed(2)})`);
+  await page.close();
+}
+
+await browser.close();
+server.close();
+console.log(`\npassed = ${passed}  failed = ${failed}`);
+if (failed > 0) {
+  console.log("FAILURES");
+  process.exit(1);
+}
+console.log("ALL PASS");

package/dist/lib/evg/gl/rotation-check.mjs

@@ -0,0 +1,207 @@
+/**
+ * The painter's rotation pivot, checked in a real GPU context.
+ *
+ *   node lib/evg/gl/rotation-check.mjs [--write-png out.png]
+ *
+ * `EVGTimingTest` proves the DISPLAY LIST carries the right origin. It cannot
+ * prove the shader turns anything about it — that lives in GLSL, and the only
+ * honest way to check GLSL is to run it and look at the pixels.
+ *
+ * The case that matters is a box AND its text. A text command's quad is sized
+ * to the ink, not to the line box it was laid out in, so its own centre is
+ * nowhere near the element's. Turn each command about its own centre and the
+ * words slide out of the box; turn both about the shared origin and they stay
+ * put. Every probe below is a point that is inside the box under one of those
+ * rules and outside it under the other.
+ *
+ * Exit code 0 when every probe reads the colour it should.
+ */
+
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath, pathToFileURL } from "node:url";
+import { requireDom, findChromium, assertDomInstalled } from "../../../gallery/ui/conformance/dom-adapter.mjs";
+
+const HERE = path.dirname(fileURLToPath(import.meta.url));
+const BLUE = [37, 99, 235];
+const W = 620;
+const H = 260;
+
+/**
+ * One 160x60 box with a label in it, turned about `origin` — given as a
+ * fraction of the box on each axis, so [0.5, 0.5] is the centre and [0, 0] is
+ * the top-left corner. What `transform-origin` resolves to, in other words;
+ * this file checks the painter, and the resolution itself is checked in
+ * `EVGTimingTest` against the browser's own numbers.
+ */
+function panel(x, y, deg, origin = [0.5, 0.5]) {
+  const rot = deg ? { rot: deg, rox: x + 160 * origin[0], roy: y + 60 * origin[1] } : {};
+  return [
+    { k: 0, x, y, w: 160, h: 60, r: 8, c: [...BLUE, 1], ...rot },
+    { k: 3, x: x + 14, y: y + 18, w: 132, h: 24, text: "Rotated", size: 22,
+      font: "system-ui", c: [255, 255, 255, 1], ...rot },
+  ];
+}
+
+const LIST = {
+  width: W,
+  height: H,
+  cmds: [
+    ...panel(20, 30, 0),
+    ...panel(230, 30, 20),
+    ...panel(430, 30, 45),
+    // The same 45 degrees about the TOP-LEFT corner rather than the centre.
+    // Without a working origin this is indistinguishable from the panel above
+    // it, so it is what proves the field is read at all rather than being
+    // carried around and ignored.
+    ...panel(120, 150, 45, [0, 0]),
+  ],
+};
+
+// Each probe names a point and what must be there. The centre of a turned box
+// is still its centre — that is the whole claim — and the corner of the page
+// must stay empty, which is what fails when a rotation is applied about the
+// page origin instead.
+const PROBES = [
+  { at: [100, 60], want: "blue", why: "the unturned box is where it was put" },
+  { at: [310, 60], want: "blue", why: "a 20 degree turn keeps its own centre" },
+  { at: [510, 60], want: "blue", why: "and so does a 45 degree turn" },
+  // "Blank" is ALPHA zero, not white: the canvas clears to transparent and the
+  // page's white shows through it. Reading the colour channels here would
+  // compare against a background this canvas never painted.
+  { at: [5, 250], want: "blank", why: "nothing was flung to the page corner" },
+  { at: [610, 250], want: "blank", why: "nor to the other one" },
+  // Turned about its top-left corner, the second panel's own corner stays put
+  // while the rest of it swings down and right. Its centre therefore is NOT
+  // where a centre-pivoted turn would leave it.
+  // Just inside the pivoted corner, not on it: the box has an 8px radius and
+  // an antialiased edge, so the corner pixel itself is legitimately empty.
+  { at: [120, 167], want: "blue", why: "a corner pivot leaves the corner where it was" },
+  { at: [120, 210], want: "blue", why: "and the box now hangs below that corner" },
+  { at: [190, 180], want: "blank", why: "instead of sitting where a centre pivot would put it" },
+];
+
+const painter = fs.readFileSync(path.join(HERE, "evg-webgl.js"), "utf8").replace(/^export /gm, "");
+
+const PAGE = `<!doctype html><meta charset="utf-8"><body style="margin:0;background:#fff">
+<canvas id="c" width="${W}" height="${H}" style="width:${W}px;height:${H}px"></canvas>
+<script>
+${painter}
+(async () => {
+  try {
+    const c = document.getElementById("c");
+    const gl = c.getContext("webgl2", { antialias: true, preserveDrawingBuffer: true });
+    await document.fonts.ready;
+    window.__stats = renderDisplayList(gl, { list: ${JSON.stringify(LIST)}, width: ${W}, height: ${H} }, { dpr: 1 });
+  } catch (e) { window.__ERR__ = String(e && e.stack || e); }
+  window.__DONE__ = true;
+})();
+</script></body>`;
+
+assertDomInstalled();
+const { chromium } = requireDom("playwright-core");
+// SwiftShader: this has to run on a machine with no GPU, and a check that only
+// runs on someone's laptop is not a check.
+const browser = await chromium.launch({
+  executablePath: findChromium(),
+  args: ["--use-gl=swiftshader", "--enable-unsafe-swiftshader"],
+});
+const page = await browser.newPage({ viewport: { width: W + 40, height: H + 40 }, deviceScaleFactor: 2 });
+const pageErrors = [];
+page.on("pageerror", (e) => pageErrors.push(String(e.message)));
+
+const tmp = path.join(HERE, ".rotation-check.html");
+fs.writeFileSync(tmp, PAGE);
+try {
+  await page.goto(pathToFileURL(tmp).href);
+  await page.waitForFunction("window.__DONE__ === true", { timeout: 30000 });
+  const err = await page.evaluate(() => window.__ERR__ || null);
+  if (err) throw new Error("painter threw: " + err);
+
+  const write = process.argv.indexOf("--write-png");
+  if (write > -1 && process.argv[write + 1]) {
+    await page.locator("#c").screenshot({ path: process.argv[write + 1] });
+  }
+
+  const read = await page.evaluate((probes) => {
+    const c = document.getElementById("c");
+    const gl = c.getContext("webgl2");
+    const px = new Uint8Array(4);
+    return probes.map(([x, y]) => {
+      // WebGL reads from the bottom left; the display list is y-down.
+      gl.readPixels(x, c.height - y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, px);
+      return [px[0], px[1], px[2], px[3]];
+    });
+  }, PROBES.map((p) => p.at));
+
+  // Where the WORDS ended up in the 45-degree panel, as the centroid of the
+  // white ink. This is the probe that actually separates the two pivots.
+  //
+  // The painter sizes a text quad to the INK, not to the line box the command
+  // carries, so "Rotated" sits left of centre in a 160-wide panel and its own
+  // centre is about 20px from the element's. Turned about the shared origin
+  // that offset swings up and to the left; turned about itself the ink stays
+  // put while the box moves out from under it. Twenty pixels of disagreement,
+  // in a place a box-centre probe cannot see.
+  const ink = await page.evaluate((box) => {
+    const c = document.getElementById("c");
+    const gl = c.getContext("webgl2");
+    const buf = new Uint8Array(c.width * c.height * 4);
+    gl.readPixels(0, 0, c.width, c.height, gl.RGBA, gl.UNSIGNED_BYTE, buf);
+    let sx = 0, sy = 0, n = 0;
+    for (let y = 0; y < c.height; y++) {
+      for (let x = box[0]; x < box[1]; x++) {
+        const i = (((c.height - 1 - y) * c.width) + x) * 4;
+        // White and opaque: the glyphs. The panel behind them is strong blue,
+        // so the two do not blur into each other at any antialiased edge.
+        if (buf[i + 3] > 200 && buf[i] > 200 && buf[i + 1] > 200 && buf[i + 2] > 200) {
+          sx += x; sy += y; n += 1;
+        }
+      }
+    }
+    return n ? { x: sx / n, y: sy / n, n } : null;
+  }, [380, 620]);
+
+  let failed = 0;
+  console.log("EVG WebGL painter — rotation about a named origin\n");
+  for (let i = 0; i < PROBES.length; i++) {
+    const p = PROBES[i];
+    const got = read[i];
+    // Antialiasing makes an exact match the wrong test; "which of the two
+    // colours is this nearer" is the question actually being asked.
+    const near = (a, b) => Math.abs(a[0] - b[0]) + Math.abs(a[1] - b[1]) + Math.abs(a[2] - b[2]) < 60;
+    const ok = p.want === "blue" ? (got[3] > 200 && near(got, BLUE)) : got[3] < 20;
+    if (!ok) failed += 1;
+    console.log(`  ${ok ? "PASS" : "FAIL"} ${p.why} — (${p.at}) is rgba(${got})`);
+  }
+  if (!ink) {
+    failed += 1;
+    console.log("  FAIL no white ink found in the turned panel at all");
+  } else {
+    // Expected under the shared pivot. Derived from the geometry, not from a
+    // previous run: the ink's own centre offset from the element centre,
+    // swung 45 degrees about that centre.
+    const okX = Math.abs(ink.x - 495) < 6;
+    const okY = Math.abs(ink.y - 45) < 6;
+    if (!okX || !okY) failed += 1;
+    console.log(
+      `  ${okX && okY ? "PASS" : "FAIL"} the words were carried round the ELEMENT centre, ` +
+        `not spun about their own — ink at (${ink.x.toFixed(1)}, ${ink.y.toFixed(1)}), ` +
+        `expected near (495, 45); spun in place would be near (489, 60)`,
+    );
+  }
+  if (pageErrors.length) {
+    failed += 1;
+    for (const e of pageErrors) console.log("  FAIL page error: " + e);
+  }
+  console.log("");
+  if (failed) {
+    console.log(`RESULT FAIL — ${failed}`);
+    process.exitCode = 1;
+  } else {
+    console.log("RESULT OK");
+  }
+} finally {
+  await browser.close();
+  fs.rmSync(tmp, { force: true });
+}

package/dist/lib/evg/gl/shift-check.mjs

@@ -0,0 +1,113 @@
+#!/usr/bin/env node
+// SPDX-License-Identifier: MIT
+//
+// Every draw in the WebGL painter has to honour the layer shift.
+//
+//   node lib/evg/gl/shift-check.mjs
+//
+// A SCROLL DOES NOT REBUILD THE FRAME. The painter keeps what it uploaded and
+// moves it with a uniform — `uShift`, one per shader, set from `curShift`
+// before each run. That is the whole reason a scroll frame costs a fraction of
+// a millisecond, and it has one failure mode: a draw that forgets the uniform
+// goes on painting where the frame was BUILT while everything around it moves.
+//
+// It is invisible until you scroll, it needs a GPU to see, and there is no
+// headless oracle for it. It happened: `drawFill` never set the path shader's
+// shift, so on the diary's charts the area under the curve stayed behind while
+// the curve, the card and the page moved — for a whole scroll, until something
+// forced the list to be built again.
+//
+// So the rule is checked as text, which needs no GPU: every `drawX` in the
+// paint loop, and the batch draw itself, must mention `curShift`. That is
+// coarse on purpose — it cannot tell a correct shift from a wrong one — but
+// the mistake it catches is the one that actually happens: forgetting it
+// entirely in a function written beside three that do it.
+//
+// Exit code 0 when every draw accounts for the shift.
+
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const HERE = path.dirname(fileURLToPath(import.meta.url));
+const FILE = path.join(HERE, "evg-webgl.js");
+const src = fs.readFileSync(FILE, "utf8");
+const lines = src.split("\n");
+
+let failed = 0;
+const ok = (name, cond, detail) => {
+  if (cond) console.log("  PASS " + name);
+  else {
+    failed += 1;
+    console.log("  FAIL " + name + (detail === undefined ? "" : " — " + detail));
+  }
+};
+
+// The painter's own draw helpers: `const drawSomething = (…) => {`.
+const draws = [];
+for (let i = 0; i < lines.length; i += 1) {
+  const m = /^\s*const (draw[A-Za-z0-9_]*)\s*=\s*\(/.exec(lines[i]);
+  if (!m) continue;
+  // The body, by brace depth from this line.
+  let depth = 0;
+  let started = false;
+  const body = [];
+  for (let j = i; j < lines.length; j += 1) {
+    for (const ch of lines[j]) {
+      if (ch === "{") { depth += 1; started = true; }
+      else if (ch === "}") depth -= 1;
+    }
+    body.push(lines[j]);
+    if (started && depth <= 0) break;
+  }
+  draws.push({ name: m[1], line: i + 1, body: body.join("\n") });
+}
+
+// The draws that are NOT in a layer, each with the reason. A post-pass runs
+// over the finished surface: the layer's shift is in those pixels already, and
+// a pass that applied it again would move the effect twice — once with the
+// page and once more on top of it. Each one is named here so that leaving a
+// draw out of the rule stays a decision rather than an omission.
+const EXPECTED_SHIFTLESS = {
+  drawLegacyRipple: "a post-pass over the finished surface — the shift is in the texture",
+};
+
+console.log("--- the painter's draws ---");
+ok("there are draws to check", draws.length >= 3, draws.length + " found");
+for (const d of draws) {
+  if (d.name in EXPECTED_SHIFTLESS) {
+    ok(`${d.name} is deliberately outside a layer`,
+       !d.body.includes("curShift"),
+       `evg-webgl.js:${d.line} mentions curShift, but it is listed as ` +
+       `shiftless: ${EXPECTED_SHIFTLESS[d.name]}`);
+    continue;
+  }
+  ok(`${d.name} accounts for the layer shift`,
+     d.body.includes("curShift"),
+     `evg-webgl.js:${d.line} draws without mentioning curShift`);
+}
+
+console.log("");
+console.log("--- and the shaders that carry it ---");
+// Both programs declare the uniform; both must have a location read for it,
+// or a draw that "sets the shift" would be writing to nothing.
+const shifts = (src.match(/uniform vec2 uShift;/g) || []).length;
+ok("both shaders declare uShift", shifts === 2, shifts + " declarations");
+ok("the batch shader's location is read", /uShift:\s*gl\.getUniformLocation/.test(src));
+ok("the path shader's location is read", /pathShiftLoc:\s*gl\.getUniformLocation/.test(src));
+// …and every location that is read is written somewhere, or it is decoration.
+for (const loc of ["built.uShift", "built.pathShiftLoc"]) {
+  const uses = src.split(`gl.uniform2f(${loc},`).length - 1;
+  ok(`${loc} is set by a draw`, uses >= 1, "never passed to uniform2f");
+}
+
+console.log("");
+if (failed > 0) {
+  console.log(`  ${failed} check(s) failed`);
+  process.exit(1);
+}
+console.log("  every draw in the painter moves with its layer");
+// The marker `scripts/run-gallery-editor-tests.sh` greps for. The compiler
+// prints `[FAIL]` and still exits 0, so that runner refuses to take a zero
+// exit as a pass — a suite has to SAY it passed.
+console.log("ALL PASS");

package/dist/lib/evg/gl/stroke-check.mjs

@@ -0,0 +1,168 @@
+// SPDX-License-Identifier: MIT
+//
+// A stroke's corners, ends and dashes, measured rather than looked at.
+//
+//   node lib/evg/gl/stroke-check.mjs
+//
+// The painter turns a polyline into triangles, and until the joins existed
+// it turned it into a chain of SEPARATE BARS: two rectangles meeting at an
+// angle cover the inside of the turn twice and the outside not at all, so a
+// thick line came apart at every corner. That is invisible in a unit test
+// that counts commands and obvious on a page, which is the combination that
+// keeps a bug.
+//
+// So this measures area. An L of two 100-long segments at width 20 is two
+// 2,000 quads and a corner; what goes in the corner is exactly what the
+// join is, and each of them has a number that can be worked out on paper:
+//
+//   miter, 90°   the 10 x 10 square the quads left empty          100
+//   bevel        the triangle across it                            50
+//   round        a disc of radius 10 at each of the three vertices
+//   square cap   half a width added to each open end            2 x 200
+//
+// Areas are summed with the shoelace formula over every triangle, so an
+// overlap counts twice — which is why the round numbers below are ranges
+// and the flat ones are exact.
+
+import { strokeTriangles, dashRings, parseDash } from "./evg-webgl.js";
+
+let passed = 0;
+let failed = 0;
+const ok = (name, cond, detail) => {
+  if (cond) {
+    passed += 1;
+    console.log("  PASS  " + name + (detail ? " (" + detail + ")" : ""));
+  } else {
+    failed += 1;
+    console.log("  FAIL  " + name + (detail ? " (" + detail + ")" : ""));
+  }
+};
+const near = (a, b, eps) => Math.abs(a - b) <= eps;
+
+/** The area of a triangle soup, overlaps counted twice. */
+function area(tris) {
+  let a = 0;
+  for (let i = 0; i + 5 < tris.length; i += 6) {
+    a += Math.abs(
+      (tris[i + 2] - tris[i]) * (tris[i + 5] - tris[i + 1]) -
+        (tris[i + 4] - tris[i]) * (tris[i + 3] - tris[i + 1]),
+    ) / 2;
+  }
+  return a;
+}
+
+/** Is any triangle covering this point? */
+function covers(tris, px, py) {
+  const side = (ax, ay, bx, by) => (bx - ax) * (py - ay) - (by - ay) * (px - ax);
+  for (let i = 0; i + 5 < tris.length; i += 6) {
+    const d1 = side(tris[i], tris[i + 1], tris[i + 2], tris[i + 3]);
+    const d2 = side(tris[i + 2], tris[i + 3], tris[i + 4], tris[i + 5]);
+    const d3 = side(tris[i + 4], tris[i + 5], tris[i], tris[i + 1]);
+    const neg = d1 < 0 || d2 < 0 || d3 < 0;
+    const pos = d1 > 0 || d2 > 0 || d3 > 0;
+    if (!(neg && pos)) return true;
+  }
+  return false;
+}
+
+const L = [0, 0, 100, 0, 100, 100];
+const LINE = [0, 0, 100, 0];
+const BOX = [0, 0, 100, 0, 100, 100, 0, 100, 0, 0];
+const W = 20;
+
+console.log("=== stroke caps, joins and dashes ===");
+
+// --- the corner is filled, and by the right amount ------------------------
+{
+  const miter = strokeTriangles([L], W, 0, 0);
+  ok("a miter corner is the square the quads left empty", near(area(miter), 4100, 0.01), area(miter).toFixed(1));
+  const bevel = strokeTriangles([L], W, 0, 2);
+  ok("a bevel is the triangle across it", near(area(bevel), 4050, 0.01), area(bevel).toFixed(1));
+  const round = strokeTriangles([L], W, 0, 1);
+  ok("a round join is a disc at the vertex", area(round) > 4200 && area(round) < 5000, area(round).toFixed(1));
+}
+
+// --- the outside of the turn is actually covered --------------------------
+{
+  const butt = strokeTriangles([L], W, 0, 99); // an unknown join: bevel only
+  // The far corner of the turn, a whisker inside the outer edge.
+  ok("the outer corner is covered", covers(strokeTriangles([L], W, 0, 0), 109, -9));
+  ok("and was not before a join existed", !covers(
+    // What the painter drew before: the two quads alone.
+    strokeTriangles([[0, 0, 100, 0]], W, 0, 0).concat(strokeTriangles([[100, 0, 100, 100]], W, 0, 0)),
+    109, -9,
+  ));
+  ok("an unknown join still bevels rather than gapping", covers(butt, 105, -5));
+}
+
+// --- caps ------------------------------------------------------------------
+{
+  const butt = strokeTriangles([LINE], W, 0, 0);
+  ok("a butt cap stops where the line stops", near(area(butt), 2000, 0.01), area(butt).toFixed(1));
+  ok("and draws nothing past it", !covers(butt, 105, 0));
+  const square = strokeTriangles([LINE], W, 2, 0);
+  ok("a square cap runs on by half a width", near(area(square), 2400, 0.01), area(square).toFixed(1));
+  ok("which covers the point past the end", covers(square, 105, 0));
+  ok("but not two widths past it", !covers(square, 115, 0));
+  const round = strokeTriangles([LINE], W, 1, 0);
+  ok("a round cap is a disc at each end", area(round) > 2400 && area(round) < 2700, area(round).toFixed(1));
+  ok("round covers just past the end", covers(round, 105, 0));
+  ok("and not the corner a square cap would fill", !covers(round, 109, 9));
+}
+
+// --- a closed ring has joins, not caps ------------------------------------
+{
+  const closed = strokeTriangles([BOX], W, 1, 0);
+  ok("a closed ring gets no cap blob on its seam", near(area(closed), 4 * 2000 + 4 * 100, 0.01), area(closed).toFixed(1));
+  ok("and its seam corner is filled", covers(closed, -9, -9));
+}
+
+// --- a near-reversal does not grow a spike --------------------------------
+{
+  const hairpin = [0, 0, 100, 0, 0, 1];
+  const t = strokeTriangles([hairpin], W, 0, 0);
+  let far = 0;
+  for (let i = 0; i < t.length; i += 2) far = Math.max(far, t[i]);
+  ok("the miter is cut back at the limit", far < 100 + 4 * (W / 2) + 1, "furthest x " + far.toFixed(1));
+}
+
+// --- a degenerate ring is not a crash -------------------------------------
+{
+  ok("a ring with one point draws nothing", strokeTriangles([[5, 5]], W, 1, 1).length === 0);
+  ok("a zero-length segment draws nothing", strokeTriangles([[5, 5, 5, 5]], W, 1, 1).length === 0);
+  ok("and no rings at all is no triangles", strokeTriangles([], W, 1, 1).length === 0);
+}
+
+// --- dashes ---------------------------------------------------------------
+{
+  const line = [[0, 0, 100, 0]];
+  ok("a pattern of two cuts the line", dashRings(line, [4, 4], 0).length === 13);
+  // An ODD list runs twice: "10" is 10 on and 10 off, not 10 on and nothing
+  // off — which would draw a solid line and read as a missing feature.
+  const single = dashRings(line, [10], 0);
+  ok("an odd pattern runs twice", single.length === 5, JSON.stringify(single[0]) + " …");
+  ok("and its first dash is the pattern long", single[0][2] === 10);
+  ok("with a gap of the same", single[1][0] === 20);
+  const off = dashRings(line, [10], 5);
+  ok("an offset starts part-way into the pattern", off[0][2] === 5, JSON.stringify(off[0]));
+  ok("a pattern of nothing is the line as it was", dashRings(line, [], 0) === line);
+  ok("and so is a pattern of zeroes", dashRings(line, [0, 0], 0) === line);
+
+  // A dash keeps its place in the pattern around a corner rather than
+  // restarting at the bend, which is what a browser does and what makes a
+  // dashed box look regular.
+  const corner = dashRings([[0, 0, 10, 0, 10, 10]], [6, 4], 0);
+  ok("a dash carries on round a corner", corner.length === 2, JSON.stringify(corner));
+
+  ok("the text is read as numbers", JSON.stringify(parseDash("6 4")) === "[6,4]");
+  ok("commas too", JSON.stringify(parseDash("2,3")) === "[2,3]");
+  ok("and nonsense is dropped", JSON.stringify(parseDash("none")) === "[]");
+}
+
+console.log("");
+console.log(`passed=${passed} failed=${failed}`);
+if (failed > 0) {
+  console.log("SOME FAILED");
+  process.exit(1);
+}
+console.log("ALL PASS");