70 lines
3.8 KiB
TypeScript
70 lines
3.8 KiB
TypeScript
import assert from "node:assert/strict";
|
|
import { readdirSync, readFileSync } from "node:fs";
|
|
import { dirname, join } from "node:path";
|
|
import { test } from "node:test";
|
|
import { fileURLToPath } from "node:url";
|
|
|
|
const cssDir = join(dirname(fileURLToPath(import.meta.url)), "..", "..", "public", "css");
|
|
|
|
// A custom property holding oklch() passes unchecked on an engine below Chromium 111, so the
|
|
// var() that reads it is invalid at computed-value time: white text on no background.
|
|
for (const file of readdirSync(cssDir).filter((f) => f.endsWith(".css"))) {
|
|
test(`${file} declares no oklch() colour`, () => {
|
|
assert.ok(!/oklch\(/i.test(readFileSync(join(cssDir, file), "utf8")));
|
|
});
|
|
}
|
|
|
|
const stylesheet = readFileSync(join(cssDir, "styles.css"), "utf8").replace(/\/\*[\s\S]*?\*\//g, "");
|
|
|
|
// The index of the `}` closing the block whose `{` is the first one at or after `start`.
|
|
function blockEnd(start: number): number {
|
|
let depth = 0;
|
|
for (let i = stylesheet.indexOf("{", start); i < stylesheet.length; i++) {
|
|
if (stylesheet[i] === "{") depth++;
|
|
if (stylesheet[i] === "}" && --depth === 0) return i;
|
|
}
|
|
throw new Error("unbalanced braces in styles.css");
|
|
}
|
|
|
|
// The text is all there is to check: Playwright's engines all support `:has()`, so no E2E sees the
|
|
// stylesheet an older engine gets.
|
|
// Chromium below 105 and Firefox below 121 have no `:has()`, and nothing else reveals a folded
|
|
// branch there, so the fold may only exist where `:has()` works.
|
|
test("styles.css folds .nav-children only inside @supports selector(:has(a))", () => {
|
|
const open = stylesheet.indexOf("@supports selector(:has(a)) {");
|
|
assert.ok(open >= 0, "no @supports selector(:has(a)) block");
|
|
const close = blockEnd(open);
|
|
const outside = stylesheet.slice(0, open) + stylesheet.slice(close + 1);
|
|
assert.ok(!/\.nav-children\s*\{[^}]*display:\s*none/.test(outside), "a .nav-children rule hides it outside the guard");
|
|
assert.match(stylesheet.slice(open, close), /\.nav-children\s*\{\s*display:\s*none/, "the fold rule is gone");
|
|
});
|
|
|
|
// `@supports` adds no specificity, so the hiding rule has to come after the base `.theme-switch` rule.
|
|
test("styles.css hides the theme switch and the nav toggles where :has() is missing, after their base rules", () => {
|
|
const guard = stylesheet.indexOf("@supports not selector(:has(a)) {");
|
|
assert.ok(guard >= 0, "no @supports not selector(:has(a)) block");
|
|
const base = stylesheet.search(/^\.theme-switch\s*\{/m);
|
|
assert.ok(base >= 0 && base < guard, "the guard precedes the base .theme-switch rule");
|
|
const block = stylesheet.slice(guard, stylesheet.indexOf("\n}", guard));
|
|
assert.match(block, /\.theme-switch\s*\{\s*display:\s*none/);
|
|
assert.match(block, /\.nav-disc\s*\{\s*visibility:\s*hidden/);
|
|
});
|
|
|
|
// Without `:has()` nothing reads #nav-toggle, so an off-canvas sidebar there is unreachable and the
|
|
// hamburger does nothing: the sidebar has to stay in the flow, with the hamburger hidden.
|
|
test("styles.css moves the sidebar off-canvas at 860px only inside @supports selector(:has(a))", () => {
|
|
const open = stylesheet.indexOf("@media (max-width: 860px) {");
|
|
assert.ok(open >= 0, "no @media (max-width: 860px) block");
|
|
const close = blockEnd(open);
|
|
const media = stylesheet.slice(open, close);
|
|
const guard = media.indexOf("@supports selector(:has(a)) {");
|
|
assert.ok(guard >= 0, "no @supports selector(:has(a)) block inside the 860px media block");
|
|
const guardEnd = blockEnd(open + guard) - open;
|
|
const outside = media.slice(0, guard) + media.slice(guardEnd + 1);
|
|
const inside = media.slice(guard, guardEnd);
|
|
for (const offCanvas of [/translateX\(-100%\)/, /position:\s*fixed/, /#nav-toggle/, /\.hamburger/]) {
|
|
assert.doesNotMatch(outside, offCanvas, `${offCanvas} applies outside the guard`);
|
|
assert.match(inside, offCanvas, `${offCanvas} is gone from the guard`);
|
|
}
|
|
});
|