@krizaka/page-audit 0.3.0 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@krizaka/page-audit",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "The page audit of every Krizaka app, in one place: HTTP status, empty main, horizontal overflow, a card out of its panel, sections covering each other, a column cut off, top chrome overlaps, unnamed buttons, empty headings. Runs in a real browser (Playwright) over a route list, viewports and themes, with View Transitions neutralised and a self-test on its own fixtures.",
   "keywords": [
     "krizaka",

package/src/fixtures.mjs

@@ -43,3 +43,8 @@ export const BROKEN_PARTS = page(`<img src="data:image/png;base64,AAAA" width="4
 /** Chrome that fits the family: one footer naming Krizaka, a nav. */
 export const CHROME_FINE = `<!doctype html><html><body><nav>n</nav><main><p>Hello</p></main><footer>A Krizaka product</footer></body></html>`;
 export const CHROME_BAD = `<!doctype html><html><body><main><p>Hello</p></main><footer>one</footer><footer>two</footer></body></html>`;
+
+/** A short token in a table row stretched by a tall neighbour: the cell is tall, its text is one line. */
+export const TOKEN_IN_STRETCHED_ROW = page(`<table style="width:600px"><tbody><tr><td>orazaka-media-pack</td><td>${"A long description. ".repeat(30)}</td></tr></tbody></table>`);
+/** An identifier in a narrow cell that breaks every few characters. */
+export const TOKEN_WRAPPED = page(`<table style="width:100px;table-layout:fixed"><tbody><tr><td style="word-break:break-all;font-size:20px">abcdefghijklmnopqrstuvwxyz0123456789</td></tr></tbody></table>`);

package/src/page-audit.mjs

@@ -164,14 +164,15 @@ function clipsOf() {
     .map(nameOf);
 }
 
-/** A long token (an id, an address) that wraps character by character: a cell taller than two lines for text without a space. */
+/** A long token (an id, an address) that wraps character by character: text without a space whose own lines (not the cell's, which a taller neighbour in the row stretches) are more than two and a half. */
 function tooTall(el) {
   const text = (el.textContent || "").trim();
   if (text.length < 12 || /\s/.test(text) || el.children.length > 1) return false;
   const cs = getComputedStyle(el);
   const lh = Number.parseFloat(cs.lineHeight) || Number.parseFloat(cs.fontSize) * 1.4;
-  const content = el.getBoundingClientRect().height - Number.parseFloat(cs.paddingTop) - Number.parseFloat(cs.paddingBottom);
-  return content > lh * 2.5;
+  const range = document.createRange();
+  range.selectNodeContents(el);
+  return range.getBoundingClientRect().height > lh * 2.5;
 }
 
 function wrappedOf() {

package/src/self-test.mjs

@@ -1,6 +1,6 @@
 // The audit proven on its own fixtures, in a real browser: each broken fixture must be reported, the fine ones must not.
 // A guard that stopped seeing is itself a red build.
-import { BOX_TOO_WIDE, BROKEN_PARTS, CARD_OVER_NEXT, CHROME_BAD, CHROME_FINE, COLUMN_CUT, EMPTY_MAIN, FINE, FOLDED_SECTION, FRAME_FITS, FRAME_FORCES_SCROLL, HIDDEN_CONTENT, SECTIONS_OVERLAP, SMALL_ACTION } from "./fixtures.mjs";
+import { BOX_TOO_WIDE, BROKEN_PARTS, CARD_OVER_NEXT, CHROME_BAD, CHROME_FINE, COLUMN_CUT, EMPTY_MAIN, FINE, FOLDED_SECTION, FRAME_FITS, FRAME_FORCES_SCROLL, HIDDEN_CONTENT, SECTIONS_OVERLAP, SMALL_ACTION, TOKEN_IN_STRETCHED_ROW, TOKEN_WRAPPED } from "./fixtures.mjs";
 import { auditPage, problemsOf } from "./page-audit.mjs";
 import { auditContext } from "./settle.mjs";
 
@@ -9,6 +9,7 @@ const EXPECT = [
   ["a card over the next section", CARD_OVER_NEXT, /covers a neighbouring section/],
   ["two sections on top of each other", SECTIONS_OVERLAP, /covers a neighbouring section/],
   ["a column cut by a clipping wrapper", COLUMN_CUT, /is cut off/],
+  ["an identifier that breaks every few characters", TOKEN_WRAPPED, /wraps one character per line/],
   ["an empty <main>", EMPTY_MAIN, /empty <main>/, { emptyMain: true }],
   ["a frame that forces a scroll", FRAME_FORCES_SCROLL, /the frame forces a scroll/, { frame: true }],
   ["an action under the tap target", SMALL_ACTION, /an action is 24 px tall \(< 36\)/, { minAction: 36 }],
@@ -23,6 +24,7 @@ const FINES = [
   ["a fine layout", FINE],
   ["content that is not drawn (a visually hidden table, a folded details)", HIDDEN_CONTENT],
   ["a section folded in a details", FOLDED_SECTION],
+  ["a short token in a row a taller neighbour stretches", TOKEN_IN_STRETCHED_ROW],
 ];
 /** Fixtures that must stay clean even with every opt-in check on. */
 const ALL = { emptyMain: true, frame: true, minAction: 36, boxes: true, pictures: true, emptyControls: true, hardColors: true, landmarks: "public" };