Files
dogfather-universe/server/pruef-buehne.mjs
T
DogFatherGitandClaude Opus 5 80dee4d0c8 Highlights nach vorn, kraeftige Chatfarben, alle Farben in einer Kachel
screen1 -- HIGHLIGHTS AUF ANSCHLAGBRETTS PLATZ
  Kein Tausch, sondern ein Aufruecken: Highlights nimmt die Stelle,
  alle anderen wandern eine weiter. Inhaltlich stimmt das auch --
  was die Leute selbst gemacht haben, steht vor dem, was ihnen
  angesagt wird.

screen2 -- DIE CHATFARBEN SIND GERECHNET, NICHT GEGRIFFEN
  Gemessen, was drinstand: Buntheit 0,002 bis 0,048, im Mittel 0,028
  -- auf dem Bildschirm zwoelf Grautoene. Das lag nicht an fehlendem
  Mut, sondern an der Fusszeile der Blase: Sie stand auf der leisen
  Hausschrift, und gegen die darf die Flaeche kaum Farbe haben.

  Deshalb ZUERST die Schrift (--blase-text/--blase-leise, eigene
  Farben der Blase), DANN die Flaeche. Andersherum waere es der
  Fehler vom selben Vormittag gewesen, als 27 von 31 Startkacheln
  unlesbar wurden.

  tools/chat-kacheln-rechnen.mjs liest beide Schriftfarben aus dem
  CSS und rechnet daraus die hellste Flaeche, die sie noch tragen.
  Ergebnis: Buntheit 0,072 bis 0,268, alle zwoelf auf DERSELBEN
  Leuchtdichte -- also exakt demselben Kontrast (7,02 bis 7,13:1).

  Zwei Anlaeufe waren falsch und stehen im Werkzeug begruendet:
    - hoechste Buntheit nehmen, dann Kontrast pruefen. Musste
      scheitern: gesaettigtes Gelb ist bei gleicher empfundener
      Helligkeit viel heller als Blau.
    - gleiche OKLab-Helligkeit statt gleicher Leuchtdichte. Das
      Versprechen der zwoelf lautet "ueberall gleich gut lesbar",
      und Lesbarkeit haengt an der Leuchtdichte, nicht am Eindruck.

  WER NICHTS EINSTELLT, BEKOMMT TROTZDEM EINE FARBE. Gemessen an der
  Live-Datenbank hatten vier von fuenfzehn eine gewaehlt -- der Chat
  war fuer alle anderen einfarbig. Jetzt vergibt der Server einen der
  elf bunten Toene aus der Personennummer, stabil. Schrittweite 4:
  elf ist prim, also laufen alle Toene durch, und vier Schritte sind
  131 Grad im Farbkreis -- aufeinanderfolgende Nummern landen so weit
  auseinander wie moeglich. Mit id % 11 sassen zwei Nachbarn im
  selben Gespraech magenta und rot nebeneinander.

  Niemand verliert seine Wahl: veilchen, ziegel und moos sind die
  drei gewaehlten und behalten ihren Farbbereich.

  Dazu: Blasen mit 22px runden Kanten (nur die Ecke zur Person bleibt
  spitz -- sie sagt, wer spricht), Lichtsaum oben innen, weicher
  Schatten. Der Name hell und fett mit Rollenpunkt davor; er stand
  auf leisem Grau mit 85 Prozent Deckung und war der schwaechste Text
  der Seite, ausgerechnet der, der sagt, wer spricht.

  ZWEI REGELBLOECKE FUER DIESELBE BLASE ZUSAMMENGELEGT. Der untere
  gewann und hat an einem Tag zweimal Schaden angerichtet: Er stellte
  die runden Kanten auf 16px zurueck (die Aenderung waere wirkungslos
  ausgeliefert worden), und er mischte 26 Prozent Akzentfarbe in die
  eigene Blase -- die hatte damit eine Farbe, die in CHAT_KACHELN
  nicht vorkommt und die die Kontrastpruefung nie angesehen hat.

screen3 -- ALLE FARBEN DES HAUSES IN EINER KACHEL
  tools/kachel-regenbogen.mjs leitet die 31 benutzten Toene ab
  (bereicheFuer/zusatzBereicheFuer ueber alle Rollen und beide
  Haeuser) und schreibt daraus einen Streifenverlauf mit harten
  Kanten -- "nicht gemischt" war die eigentliche Ansage. Ein Verlauf
  ergaebe Zwischentoene, die es im Haus nicht gibt.

  Gegen einen deckenden Grund gemischt, nicht gegen --flaeche: Die
  ist halbdurchsichtig, und durch 31 schmale Baender schien das
  Buehnenbild -- sie verloren genau das, wofuer sie da sind.

  Der Lesesaum ist staerker als auf den anderen Kacheln, und zwar
  gemessen: Mit deren Werten kam der Text auf 4,45:1, fuenf
  Hundertstel unter der Grenze. Gefunden hat das pruef-kachelfarben,
  nicht der Blick -- 4,45 gegen 4,50 sieht man nicht.

pruef-buehne -- DIE ZAHL GEHOERT IN DIE BEDINGUNG
  Die Abtastung wurde nachsichtiger (fremde Flaechen zaehlen nicht
  mehr als Untergrund eines Textes). Das war richtig und hat einen
  Fehlalarm beseitigt, der seit Tagen kam. Eine Lockerung kann aber
  zu weit gehen, deshalb muss jetzt jeder gefundene Text in genau
  einem von drei Toepfen landen: gemessen, ohne freien Untergrund,
  oder aussortiert. Geht die Rechnung nicht auf, ist unterwegs etwas
  still verschwunden.

  Erster Anlauf war "mindestens 5 Stellen" -- und wurde auf
  uebersicht.html sofort rot, weil die Seite nur vier Texte hat.
  Eine feste Schwelle ist eine Rechnung von gestern; diese war keine
  fuenf Minuten alt.

Gemessen: pruef-kachelfarben 22/0 (war 18, neu: die Willkommenskachel
traegt wirklich alle benutzten Farben, in beide Richtungen geprueft),
pruef-buehne 192/0, pruef-chatkachel 32/0, pruef-chat-optik 45/0,
pruef-chat 48/0, pruef-erwaehnung 69/0, pruef-start-ansicht 153/0,
pruef-treff 80/0, pruef-willkommen 67/0, pruef-treffchat 110/0,
pruef-css-klassen 30/0.

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-09-22 12:57:56 +02:00

514 lines
26 KiB
JavaScript

/* ===================================================================
Pruefung der Buehne (Casper und HasiDog im Hintergrund).
Ein Bild hinter einem Arbeitswerkzeug ist der schnellste Weg zu einer
Oberflaeche, die gut aussieht und unbenutzbar ist. Deshalb wird hier
NICHT geprueft, ob es huebsch ist, sondern ob der Text noch lesbar
ist -- und zwar an echten BILDPUNKTEN aus dem fertigen Bild, nicht an
der Farbangabe im Stil. Die sagt naemlich nichts darueber, was
dahinterliegt.
Massstab WCAG: 4,5:1 fuer normalen Text, 3:1 fuer grossen.
=================================================================== */
import { mkdtempSync, rmSync } from "node:fs";
import { tmpdir } from "node:os";
import { join } from "node:path";
/* =====================================================================
DER DUNKELSTE FARBSTOPP DER ERSTEN HINTERGRUNDEBENE
Gebraucht an ZWEI Stellen (Messung und Gegenprobe), deshalb steht er
hier einmal und wird als Quelltext in die Seite gereicht. Zwei
Kopien waeren zwei Gelegenheiten auseinanderzulaufen -- und genau
das ist der Fehler, den diese Datei sonst sucht.
DAS ENDE DER EBENE WIRD UEBER KLAMMERN GEZAEHLT, nicht ueber `"),"`.
Mein erster Anlauf schnitt bei der ersten Zeichenfolge `),` ab --
die steht aber schon am Ende des ERSTEN `rgb(...)`. Er las damit
immer nur den ersten Stopp und haette einen dunklen Verlauf fuer
hell gehalten. Die Gegenprobe unten hat es in der ersten Minute
gemeldet. */
function dunkelsterStopp(backgroundImage) {
if (!backgroundImage || backgroundImage === "none") return null;
const start = backgroundImage.indexOf("(");
if (start < 0) return null;
let tiefe = 0, ende = -1;
for (let i = start; i < backgroundImage.length; i++) {
if (backgroundImage[i] === "(") tiefe++;
else if (backgroundImage[i] === ")") { tiefe--; if (tiefe === 0) { ende = i + 1; break; } }
}
const erste = ende > 0 ? backgroundImage.slice(0, ende) : backgroundImage;
const stopps = [...erste.matchAll(/rgba?\(([^)]+)\)/g)]
.map((m) => m[1].split(",").slice(0, 3).map((x) => Number(x.trim())))
.filter((f) => f.length === 3 && f.every((x) => Number.isFinite(x)));
if (!stopps.length) return null;
const hell = (f) => 0.2126 * f[0] + 0.7152 * f[1] + 0.0722 * f[2];
return stopps.reduce((a, b) => (hell(b) < hell(a) ? b : a));
}
const DUNKELSTER_QUELLE = dunkelsterStopp.toString();
/* ZWOELF SEITEN KAMEN AM 19.09.2026 DAZU -- und zwar nicht, weil sie neu
sind, sondern weil sie bis dahin GAR KEINE Buehne hatten.
Der Umbau vom 19.09. frueh heisst "Jede Seite traegt die Farbe ihrer
Kachel". Nachgemessen traf das auf 18 von 34 Seiten zu: `zuSeite()`
sucht nur in `Bereiche.GRUPPEN`, und dort stehen ausschliesslich die
Kacheln der AGENTUR. Die Kacheln von Team Dogi und vom Treff liefert
der Server -- die kannte die Stelle nicht. Seit der Reparatur in
kopf.js bekommen auch sie Ton UND Buehne, und damit steht auf ihnen
zum ersten Mal Text ueber einem Foto. Genau das misst diese Datei.
NUR EINE TEILMENGE LAUFEN LASSEN: `BUEHNE_SEITEN=werdegang.html`.
Ohne die Angabe laeuft die ganze Liste -- das dauert spuerbar und
gehoert deshalb in einen abgesprochenen Lauf, nicht in jede
Zwischenpruefung. */
const ALLE_SEITEN = [
"start.html", "uebersicht.html", "personen.html", "content.html",
"aufgaben.html", "kalender.html",
/* Die zwoelf ohne Buehne, bis zum 19.09.2026: */
"werdegang.html", "entwicklung.html", "talente.html", "befinden.html",
"hilfe.html", "rechte.html", "teamlage.html", "teilen.html",
"bewerbungen.html", "treff-moderation.html", "treff-regeln.html",
/* Neu am 21.09.2026 -- sie traegt eine Buehne und viel Text. */
"willkommen.html",
"unsere-seiten.html",
];
const SEITEN = process.env.BUEHNE_SEITEN
? process.env.BUEHNE_SEITEN.split(",").map((s) => s.trim()).filter(Boolean)
: ALLE_SEITEN;
/* DRITTER AUSGANG: Wer sich vertippt, soll es merken, statt eine
Prüfung über null Seiten für bestanden zu halten. */
{
const unbekannt = SEITEN.filter((s) => !ALLE_SEITEN.includes(s));
if (!SEITEN.length || unbekannt.length) {
console.log("ABBRUCH: unbekannte Seite(n) in BUEHNE_SEITEN: " + unbekannt.join(", "));
process.exit(2);
}
}
console.log(`Gemessen werden ${SEITEN.length} von ${ALLE_SEITEN.length} Seiten.`);
/* WIE LANGE DAS DAUERN DARF -- aus der Listenlaenge, nicht aus dem Kopf.
Sechs Seiten auf zwei Bildschirmgroessen brauchten bisher knapp
220 Sekunden, also rund 18 s je Seite und Groesse. Aufgerundet auf 22,
damit ein langsamer Lauf nicht faelschlich als Fehlschlag endet.
Eine feste Zahl waere hier eine Zeitbombe: Mit den zwoelf neuen
Seiten waere die alte Frist gerissen, und der Abbruch saehe aus wie
ein Befund. */
const SEITEN_ZEIT = SEITEN.length * 2 * 22_000;
console.log(`Zeitrahmen: ${Math.round((100_000 + SEITEN_ZEIT) / 1000)} s.`);
const ordner = mkdtempSync(join(tmpdir(), "ws-buehne-"));
process.env.WORKSPACE_DB = join(ordner, "workspace.db");
/* DER PORT MUSS MEINER SEIN (nachgeruestet 19.09.2026).
Ohne diese Zeile startet der eigene Server bei belegtem Port
STILL nicht -- und alles Folgende misst gegen einen fremden
Stand. Das ist der dritte Ausgang: belegt ist etwas anderes
als kaputt. */
const PORT = await eigenerPort(import.meta, "pruef-buehne");
process.env.PORT = `${PORT}`;
process.env.SITE_ACCESS_SECRET = "lokaler-test";
process.env.SITE_ACCESS_CODE_DOGI = "DOGI-TEST-1";
process.env.SITE_ACCESS_CODE_VANVAN = "VANVAN-TEST-1";
process.env.SITE_PUBLIC_LAUNCH_AT = "2020-01-01T00:00:00+01:00";
const express = (await import("express")).default;
const ec = express.response.cookie;
express.response.cookie = function (n, w, o) { return ec.call(this, n, w, { ...(o || {}), secure: false }); };
import { notbremse } from "./helfer-notbremse.mjs";
import { eigenerPort } from "./helfer-port.mjs";
await import("./index.js");
/* DIE NOTBREMSE. Muss NACH index.js stehen: Der Server haengt dort
zwei Auffangnetze ein, die einen Absturz nur protokollieren --
richtig fuer den Betrieb, fatal fuer eine Pruefung. Ohne diese
Zeile bleibt der Prozess nach einem Fehler ewig stehen, weil der
Server ihn am Leben haelt (siehe helfer-notbremse.mjs). */
notbremse(120_000 + SEITEN_ZEIT, "pruef-buehne");
await new Promise((r) => setTimeout(r, 700));
const BASIS = `http://127.0.0.1:${PORT}`;
/* Die Frist waechst mit der Liste: 220 s reichten fuer sechs Seiten.
Eine feste Zahl waere hier eine Zeitbombe -- die zwoelf neuen
haetten sie gerissen, und der Abbruch saehe aus wie ein Befund. */
setTimeout(() => { console.log("ABBRUCH: Zeit ueberschritten"); process.exit(1); },
100_000 + SEITEN_ZEIT).unref?.();
let fehler = 0;
const ok = (b, t) => { console.log((b ? " ok " : " FEHL ") + t); if (!b) fehler++; };
await fetch(BASIS + "/workspace/api/anmelden", {
method: "POST", headers: { "Content-Type": "application/json" },
body: JSON.stringify({ rolle: "admin", code: "x" }) }).catch(() => {});
const { DatabaseSync } = await import("node:sqlite");
const { scryptSync, randomBytes } = await import("node:crypto");
/* Warten, bis der Server die Datenbank wirklich angelegt hat. Der
Anmeldeversuch oben STOESST das nur an -- Schema und Umstellungen
laufen danach. Wer sofort weiterschreibt, trifft auf "no such table". */
for (let i = 0; i < 60; i++) {
try {
const p = new DatabaseSync(process.env.WORKSPACE_DB);
try { p.prepare("SELECT 1 FROM personen LIMIT 1").get(); break; } finally { p.close(); }
} catch (f) {
if (i === 0 || i === 5) console.log(" warte auf die Datenbank:", f.message);
await new Promise((r) => setTimeout(r, 250));
}
}
const d = new DatabaseSync(process.env.WORKSPACE_DB);
const jetzt = new Date().toISOString();
const salt = randomBytes(16).toString("hex");
const hash = scryptSync("CODE-DOGI-0001", salt, 64, { N: 32768, r: 8, p: 1, maxmem: 96 * 1024 * 1024 }).toString("hex");
d.prepare("INSERT INTO personen (name, rolle, code_hash, code_salt, code_n, aktiv, erstellt) VALUES (?,?,?,?,?,1,?)")
.run("Filipe", "admin", hash, salt, 32768, jetzt);
d.close();
const { chromium } = await import(
"file:///C:/Users/qciga/Documents/Obelix/Analyse/node_modules/playwright/index.mjs");
const browser = await chromium.launch();
/* Der Kalender kam am 01.09.2026 dazu -- er bringt die meisten neuen
Farbflächen mit (vier Arten, Feiertagsfärbung, Anlassmarken), und
genau dort entscheidet sich, ob der hellere Hintergrund noch trägt. */
for (const [breite, hoehe, wie] of [[1440, 950, "Computer"], [390, 780, "Handy"]]) {
console.log(`\n=== ${wie} (${breite}x${hoehe})`);
const kontext = await browser.newContext({ viewport: { width: breite, height: hoehe } });
const seite = await kontext.newPage();
await seite.goto(BASIS + "/workspace/", { waitUntil: "domcontentloaded" });
await seite.click('.rolle[data-rolle="admin"]');
await seite.fill("#code", "CODE-DOGI-0001");
await seite.click("button[type=submit]");
await seite.waitForURL("**/start.html", { timeout: 15000 });
for (const s of SEITEN) {
await seite.goto(BASIS + "/workspace/" + s, { waitUntil: "networkidle" });
await seite.waitForTimeout(800);
const da = await seite.evaluate(() => ({
/* Seit dem 01.09.2026 gibt es neun Bühnen statt einer, benannt
nach ihrer Szene (buehne-garage-breit.webp). Der alte Ausdruck
suchte nach "buehne-breit" und fand nichts mehr -- gemeldet als
"die Bühne liegt im Hintergrund: FEHL", obwohl sie da war. */
buehne: /buehne-[a-z]+-(breit|schmal)\.webp/
.test(getComputedStyle(document.body, "::before").backgroundImage),
schleier: !!document.querySelector(".schleier"),
durchlaessig: getComputedStyle(document.querySelector(".schleier") || document.body).pointerEvents,
}));
if (s === "start.html") {
ok(da.buehne, "die Bühne liegt im Hintergrund");
}
ok(da.schleier && da.durchlaessig === "none",
`${s}: Schleier da und durchlässig für Klicks (${da.durchlaessig})`);
/* Der eigentliche Punkt: Kontrast an ECHTEN Bildpunkten aus dem
fertigen Bild. Gemessen wird der Untergrund direkt NEBEN jedem
sichtbaren Text -- nicht die Farbangabe im Stil, die weiß nichts
davon, was dahinterliegt. */
const bild = await seite.screenshot({ type: "png" });
const schlimmster = await seite.evaluate(async ([b64, quelle]) => {
/* Derselbe Helfer wie in der Gegenprobe -- als Quelltext
hereingereicht, damit es ihn nur EINMAL gibt. */
const dunkelster = new Function("return " + quelle)();
const kanal = (v) => { v /= 255; return v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4; };
const hell = (c) => 0.2126 * kanal(c[0]) + 0.7152 * kanal(c[1]) + 0.0722 * kanal(c[2]);
const kontrast = (a, b) => {
const w = [hell(a), hell(b)].sort((x, y) => y - x);
return (w[0] + 0.05) / (w[1] + 0.05);
};
const bild = new Image();
bild.src = "data:image/png;base64," + b64;
await bild.decode();
const c = document.createElement("canvas");
c.width = bild.width; c.height = bild.height;
const g = c.getContext("2d");
g.drawImage(bild, 0, 0);
const skala = bild.width / window.innerWidth;
/* Wo darf man den Untergrund abtasten?
Vorher wurde stur 4 px rechts neben dem Text gemessen. Das ging
gut, solange dort nichts stand -- sobald aber zwei Textstücke
nebeneinanderliegen (Grußwort und Name, Marke und Ortsangabe),
traf der Punkt DEN NACHBARTEXT und die Prüfung verglich Schrift
mit Schrift. Ergebnis: 1,1:1 und ein Alarm, der nichts mit der
Lesbarkeit zu tun hatte.
Jetzt werden mehrere Stellen rings um den Text angeboten und
jede zuerst gefragt: Liegt dort wirklich Untergrund? Ein Punkt
gilt nur, wenn an seiner Stelle KEIN fremdes Textelement liegt.
Das macht die Prüfung strenger, nicht lockerer -- sie misst
jetzt tatsächlich das, was sie behauptet zu messen. */
const istFremderText = (el2, e) =>
el2 && el2 !== e && !el2.contains(e) && !e.contains(el2)
&& el2.children.length === 0 && el2.textContent.trim().length > 0;
let schlecht = null, anzahl = 0, ohneStelle = 0, uebersprungen = 0;
const alle = [...document.querySelectorAll("p, h1, h2, h3, span, a, li")]
.filter((e) => e.children.length === 0 && e.textContent.trim().length > 2);
for (const e of alle) {
const r = e.getBoundingClientRect();
if (r.width < 8 || r.height < 8) { uebersprungen++; continue; }
if (r.top < 0 || r.bottom > window.innerHeight) { uebersprungen++; continue; }
const mitte = r.top + r.height / 2;
const st0 = getComputedStyle(e);
const kandidaten = [];
let gemessenBei = null, gemessenAuf = null;
/* ZUERST IN DER EIGENEN POLSTERUNG.
Zweiter Fund an derselben Pruefung: Sie tastete ausschliesslich
NEBEN dem Element ab. Traegt der Text seine Flaeche aber selbst
(eine Beschriftung mit eigenem Hintergrund und Polsterung), dann
liegt jeder Punkt daneben schon auf dem Hintergrundbild -- und
gemeldet wurde 1,89:1, obwohl der Text auf einer deckenden
Flaeche steht und tadellos lesbar ist.
Der Untergrund eines Textes ist das, worauf er WIRKLICH liegt.
Hat das Element genug Polsterung, wird dort gemessen: innen,
aber sicher neben jedem Buchstaben. */
const pl = parseFloat(st0.paddingLeft) || 0;
const pt = parseFloat(st0.paddingTop) || 0;
if (pt >= 5) kandidaten.push([r.left + r.width / 2, r.top + pt / 2]);
if (pl >= 7) kandidaten.push([r.left + pl / 2, mitte]);
/* Danach wie bisher rings herum. */
kandidaten.push(
[r.right + 4, mitte], [r.right + 14, mitte],
[r.left - 4, mitte], [r.left - 14, mitte],
[r.left + r.width / 2, r.top - 3], [r.left + r.width / 2, r.bottom + 3],
);
let p = null;
for (const [kx, ky] of kandidaten) {
if (kx < 0 || ky < 0 || kx >= window.innerWidth || ky >= window.innerHeight) continue;
if (istFremderText(document.elementFromPoint(kx, ky), e)) continue;
/* UND KEIN FREMDER UNTERGRUND (22.09.2026).
============================================================
Diese Pruefung meldete tagelang 3,28:1 fuer den Markentext
in der Kopfleiste. Drei Vermutungen nacheinander gemessen
und alle drei widerlegt: nicht die Glut der Leiste, nicht
der Schein hinter der Schrift, nicht die Schriftfarbe.
Die Antwort kam erst, als die Pruefung sagen konnte, WO
sie misst: bei 125,34 -- auf `button.wahl2__knopf`. Bei
390 px liegt der Sicht-Umschalter direkt neben dem
Schriftzug, und der Abtastpunkt 4 px rechts daneben trifft
SEINEN Hintergrund. Der Text liegt dort nicht drauf.
Dieselbe Lehre wie schon einmal oben, nur andersherum:
Damals mass sie daneben statt innen, hier misst sie
daneben und trifft einen Nachbarn. Ein Element mit
eigenem, deckendem Hintergrund, das KEIN Vorfahre des
Textes ist, taugt nicht als sein Untergrund.
Die Regel ist schmal: Nur deckende Hintergruende zaehlen
als fremd. Ein durchsichtiger Nachbar laesst denselben
Grund durch wie der Text selbst -- dort darf weiter
gemessen werden. */
const dort = document.elementFromPoint(kx, ky);
if (dort && dort !== e && !e.contains(dort) && !dort.contains(e)) {
/* WESSEN FLAECHE IST DAS? Der Knopf selbst ist oft
durchsichtig -- seine Flaeche traegt der Behaelter
darueber. Deshalb die Elternkette hoch bis zum ersten
deckenden Hintergrund und fragen, ob DER auch ueber dem
Text liegt. Tut er das nicht, ist es eine fremde
Flaeche, und der Text liegt dort nicht drauf. */
const flaecheVon = (n) => {
for (let q = n; q && q !== document.documentElement; q = q.parentElement) {
const st2 = getComputedStyle(q);
const g2 = st2.backgroundColor || "";
const teile = g2.match(/[\d.]+/g);
const deckend = teile && (teile.length < 4 || Number(teile[3]) >= 0.5)
&& !/rgba\(0, 0, 0, 0\)/.test(g2);
const bild = st2.backgroundImage && st2.backgroundImage !== "none"
&& (st2.webkitBackgroundClip || st2.backgroundClip || "")
.split(",")[0].trim() !== "text";
if (deckend || bild) return q;
}
return null;
};
const meine = flaecheVon(e);
const fremde = flaecheVon(dort);
if (fremde && fremde !== meine) continue;
/* AUCH EINE HALBDURCHSICHTIGE EIGENE FLAECHE ZAEHLT.
Der Knopf, der den Fehlalarm ausloeste, liegt in
DERSELBEN Kopfleiste wie der Text -- die deckende
Flaeche ist also dieselbe. Er traegt aber darueber noch
eine eigene, halbdurchsichtige, und genau die hebt den
gemessenen Punkt an. Ein Text liegt darauf nicht drauf,
er liegt DANEBEN. */
{
let fremdeFlaeche = false;
for (let q = dort; q && q !== meine && !q.contains(e); q = q.parentElement) {
const st3 = getComputedStyle(q);
const t3 = (st3.backgroundColor || "").match(/[\d.]+/g);
const hatFarbe = t3 && (t3.length < 4 || Number(t3[3]) > 0.02);
const hatBild = st3.backgroundImage && st3.backgroundImage !== "none";
if (hatFarbe || hatBild) { fremdeFlaeche = true; break; }
}
if (fremdeFlaeche) continue;
}
}
const bx = Math.round(kx * skala), by = Math.round(ky * skala);
if (bx < 0 || bx >= c.width || by < 0 || by >= c.height) continue;
p = g.getImageData(bx, by, 1, 1).data;
gemessenBei = Math.round(kx) + "," + Math.round(ky);
const hier = document.elementFromPoint(kx, ky);
gemessenAuf = hier ? hier.tagName.toLowerCase()
+ (typeof hier.className === "string" && hier.className
? "." + hier.className.trim().split(/\s+/)[0] : "") : "nichts";
break;
}
/* Kein freier Punkt gefunden -- das wird GEZÄHLT und ausgegeben.
Ein stillschweigend übersprungener Text wäre eine Prüfung, die
behauptet, etwas geprüft zu haben. */
if (!p) { ohneStelle++; continue; }
const st = st0;
/* WENN DIE SCHRIFT IHRE FARBE AUS EINEM VERLAUF BEKOMMT
(09.09.2026).
Seit die Abschnittsschilder aus gebuerstetem Metall bestehen
(`background-clip: text`), ist ihr `color` notwendigerweise
`transparent` -- anders geht die Technik nicht. Diese
Pruefung las genau dieses `color`, machte daraus [0,0,0] und
meldete 1,07:1 fuer Text, der in Wahrheit hell und gut
lesbar ist. Fuenf Fehlalarme auf drei Seiten.
Eine Warnung, die bei richtiger Arbeit anschlaegt, wird
abgeschaltet -- deshalb wird sie hier nicht weichgemacht,
sondern GENAUER: Bei Verlaufsschrift zaehlt der DUNKELSTE
Farbstopp des Verlaufs. Das ist der schlechteste Punkt, den
es auf dieser Schrift wirklich gibt, und damit strenger als
ein Mittelwert und ehrlicher als das durchsichtige `color`.
Nur die ERSTE Ebene wird gelesen: `background-clip: text,
border-box, border-box` schneidet Ebene 1 auf die Schrift zu,
die uebrigen sind die Flaeche darunter. */
const clipText = (st.webkitBackgroundClip || st.backgroundClip || "")
.split(",")[0].trim() === "text";
let farbe = clipText ? dunkelster(st.backgroundImage) : null;
if (!farbe) farbe = st.color.match(/\d+/g).slice(0, 3).map(Number);
const gr = parseFloat(st.fontSize);
const fett = Number(st.fontWeight) >= 700;
const grenze = (gr >= 24 || (gr >= 18.66 && fett)) ? 3 : 4.5;
const v = kontrast(farbe, [p[0], p[1], p[2]]);
anzahl++;
if (!schlecht || v / grenze < schlecht.v / schlecht.grenze) {
/* WO ES STEHT, NICHT NUR WAS DASTEHT (22.09.2026).
Diese Pruefung meldete tagelang 3,28:1 bei "Spicy & Dogi"
-- und die Suche danach kostete eine halbe Stunde, weil
derselbe Text an mehreren Stellen vorkommt. Eine Pruefung,
die einen Fehler findet, ihn aber nicht auffindbar macht,
kostet mehr Zeit als sie spart. */
const wo = e.tagName.toLowerCase()
+ (typeof e.className === "string" && e.className
? "." + e.className.trim().split(/\s+/).join(".") : "");
schlecht = { v, grenze, text: e.textContent.trim().slice(0, 26),
grund: [p[0], p[1], p[2]], wo,
eltern: (() => { const k=[]; for (let q=e.parentElement; q && k.length<4; q=q.parentElement)
k.push(q.tagName.toLowerCase()+(typeof q.className==="string"&&q.className?"."+q.className.trim().split(/\s+/)[0]:"")); return k.join(" < "); })(),
lage: Math.round(r.left)+","+Math.round(r.top)+" "+Math.round(r.width)+"x"+Math.round(r.height),
gemessenBei, gemessenAuf,
groesse: Math.round(gr * 10) / 10, fett: st.fontWeight,
verlauf: clipText };
}
}
return { ...schlecht, anzahl, ohneStelle, uebersprungen, gesamt: alle.length };
}, [bild.toString("base64"), DUNKELSTER_QUELLE]);
/* ---- GEGENPROBE ZUR VERLAUFSSCHRIFT ----------------------------
Seit die Messung bei `background-clip: text` den dunkelsten
Farbstopp nimmt statt des durchsichtigen `color`, muss bewiesen
werden, dass sie damit noch NEIN sagen kann. Sonst haette ich
eine Warnung entschaerft, statt sie genauer zu machen.
Zwei erfundene Elemente auf derselben Seite: eines mit einem
hellen Verlauf (muss durchgehen), eines mit einem dunklen (muss
durchfallen). Beide werden sofort wieder entfernt. */
const gegen = await seite.evaluate((quelle) => {
const dunkelster = new Function("return " + quelle)();
const bauen = (verlauf) => {
const d = document.createElement("span");
d.textContent = "Probe";
d.style.cssText = "position:fixed;left:-9999px;font-size:14px;"
+ `background:${verlauf} text;-webkit-background-clip:text;`
+ "background-clip:text;color:transparent;";
document.body.append(d);
const st = getComputedStyle(d);
const clip = (st.webkitBackgroundClip || st.backgroundClip || "").split(",")[0].trim();
const gefunden = dunkelster(st.backgroundImage);
d.remove();
return { clip, dunkelster: gefunden };
};
return {
hell: bauen("linear-gradient(180deg, #ffffff, #cfd9e6)"),
dunkel: bauen("linear-gradient(180deg, #ffffff, #101418)"),
};
}, DUNKELSTER_QUELLE);
ok(gegen.hell.clip === "text" && gegen.hell.dunkelster
&& gegen.hell.dunkelster.join(",") === "207,217,230",
`${s}: Gegenprobe -- heller Verlauf, dunkelster Stopp erkannt `
+ `(${gegen.hell.dunkelster?.join(",")})`);
ok(gegen.dunkel.dunkelster && gegen.dunkel.dunkelster.join(",") === "16,20,24",
`${s}: Gegenprobe -- dunkler Verlauf wird als dunkel erkannt `
+ `(${gegen.dunkel.dunkelster?.join(",")}), also faellt so etwas auf`);
/* DIE ZAHL GEHOERT IN DIE BEDINGUNG (22.09.2026).
Sie stand bisher nur im Meldetext. Am 22.09. wurde die Abtastung
nachsichtiger gemacht (fremde Flaechen zaehlen nicht mehr als
Untergrund) -- richtig, aber eine Lockerung kann zu weit gehen.
Wuerde sie irgendwann JEDEN Punkt verwerfen, waere diese Zeile
fuer immer gruen, ohne je wieder etwas anzusehen.
ERSTER ANLAUF WAR `anzahl >= 5` -- und die Pruefung wurde auf
uebersicht.html sofort rot, weil die Seite schlicht nur vier
Texte hat. Eine feste Schwelle ist eine Rechnung von gestern;
sie war hier keine fuenf Minuten alt.
Richtig ist die ABLEITUNG: Jeder gefundene Text muss in genau
einem der drei Toepfe landen -- gemessen, ohne freien Untergrund,
oder vorher aussortiert (zu klein / ausserhalb des Bildes). Geht
die Rechnung nicht auf, ist unterwegs etwas verschwunden, und
zwar still. Diese Bedingung braucht keine Zahl und veraltet nicht.
Wie VIELE davon gemessen werden duerfen, deckelt die Zeile
darunter ("hoechstens zwei Texte ohne freien Untergrund"). */
ok(schlimmster.anzahl + schlimmster.ohneStelle + schlimmster.uebersprungen
=== schlimmster.gesamt
&& schlimmster.v >= schlimmster.grenze,
`${s}: schlechtester Kontrast ${schlimmster.v.toFixed(2)}:1 (nötig ${schlimmster.grenze}:1) `
+ `bei "${schlimmster.text}" auf rgb(${schlimmster.grund.join(",")}) · `
+ `${schlimmster.anzahl} gemessen + ${schlimmster.ohneStelle} ohne Grund `
+ `+ ${schlimmster.uebersprungen} aussortiert = ${schlimmster.gesamt}`
+ (schlimmster.wo ? ` -- ${schlimmster.wo}, ${schlimmster.groesse}px/${schlimmster.fett}`
+ (schlimmster.verlauf ? ", Verlauf im Text" : "")
+ ` [${schlimmster.lage}] in ${schlimmster.eltern}`
+ ` -- gemessen bei ${schlimmster.gemessenBei} auf ${schlimmster.gemessenAuf}` : ""));
/* Wenn rings um einen Text nirgends freier Untergrund liegt, ist er
ungeprüft geblieben. Das darf vorkommen (dicht gesetzte Zeilen),
aber nicht unbemerkt und nicht bei vielen -- sonst meldet die
Prüfung "bestanden" für eine Seite, die sie kaum angesehen hat. */
ok(schlimmster.ohneStelle <= 2,
`${s}: höchstens zwei Texte ohne freien Untergrund `
+ `(${schlimmster.ohneStelle} von ${schlimmster.gesamt})`);
}
if (breite === 1440) {
await seite.goto(BASIS + "/workspace/start.html", { waitUntil: "networkidle" });
await seite.waitForTimeout(800);
await seite.screenshot({ path: "pruef-buehne.png" });
}
await kontext.close();
}
await browser.close();
console.log(`\n${fehler === 0 ? "Alles in Ordnung." : fehler + " Prüfung(en) fehlgeschlagen."}`);
try { rmSync(ordner, { recursive: true, force: true }); } catch { /* egal */ }
process.exit(fehler === 0 ? 0 : 1);