Something went wrong. Try again.
Web frontend and supporting services for lance.blue
Something went wrong. Try again.
3.5 kB · 86 lines
JavaScript
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687/** * The notched plate, checked structurally: there is no DOM under `npm test`, * and every way this breaks looks fine in a build. * * A plate is cut with clip-path, which clips an element's outline and * box-shadow along with its background. That has two consequences worth a * test. A plate's focus ring has to be an inset shadow, because an outlined * one is cut away without any rule failing. And a control that opts out of * the shape has to be given the outlined ring back, because the rule that * turns the outline off is written against every button. * * Run with `npm test`. */import { test } from "node:test";import assert from "node:assert/strict";import { readFile } from "node:fs/promises";import { join } from "node:path";
const web = join(new URL(".", import.meta.url).pathname, "..");const css = await readFile(join(web, "src/styles.css"), "utf8");
/** The body of the first rule whose selector list matches, or undefined. */function rule(selector) { const escaped = selector.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); return css.match(new RegExp(`(?:^|\\n)${escaped}\\s*{([^}]*)}`))?.[1];}
test("a button is a plate unless it says otherwise", () => { const shape = rule("button,\n.plate"); assert.ok(shape, "no shared shape rule for buttons and plates"); assert.match(shape, /clip-path: polygon\(/); assert.match(shape, /--notch:/); assert.match(shape, /border-radius: 0/);});
test("a plate's label is stencilled on", () => { const shape = rule("button,\n.plate"); assert.match(shape, /font-family: var\(--font-labels\)/); assert.match(shape, /text-transform: uppercase/); assert.match(shape, /letter-spacing:/);});
test("a control that is words to read gives the stencil back", () => { const reset = [ ...css.matchAll(/(?:^|\n)((?:\.[\w-]+,\n)+\.[\w-]+)\s*{([^}]*)}/g), ].find((m) => m[2].includes("text-transform: none")); assert.ok(reset, "nothing drops the stencilled label any more"); assert.match(reset[2], /font-family: inherit/); assert.match(reset[2], /letter-spacing: normal/); // The bar's own buttons set these capitals for themselves, so a reset on // them would put the chrome back into sentence case. assert.ok( !/\.(account|theme)-button/.test(reset[1]), "a chrome label is in the reset list", );});
test("a plate's focus ring is inset", () => { const ring = rule("button:focus-visible,\n.plate:focus-visible"); assert.ok(ring, "no shared focus-visible rule for plates"); assert.match(ring, /outline: 0/); assert.match(ring, /box-shadow: inset 0 0 0 2px var\(--plate-ring\)/);});
test("every control that drops the clip gets its outlined ring back", () => { const optOut = [ ...css.matchAll( /(?:^|\n)((?:\.[\w-]+,\n)+\.[\w-]+)\s*{\s*clip-path: none/g, ), ]; assert.ok(optOut.length, "nothing opts out of the plate any more"); const opted = optOut.flatMap((m) => m[1].split(",\n").map((s) => s.trim())); const focus = [ ...css.matchAll( /((?:\.[\w-]+:focus-visible,\n)+\.[\w-]+:focus-visible)\s*{([^}]*)}/g, ), ].find((m) => m[2].includes("box-shadow: none")); assert.ok(focus, "no focus rule for the controls that opted out"); assert.match(focus[2], /outline: 2px solid var\(--accent\)/); const restored = new Set( focus[1].split(",\n").map((s) => s.trim().replace(":focus-visible", "")), ); for (const name of opted) { assert.ok(restored.has(name), `${name} drops the clip and has no ring`); }});