DogFatherGitandClaude Opus 5
ce1a1f758c
entwicklung.html, „Noch niemand im Team": 4,42:1 gemessen, noetig sind
4,5:1. Der Befund ist klein. Die Geschichte dahinter ist es nicht.
=== DREIMAL IN VIER WOCHEN, IMMER DERSELBE GRIFF ===
01.09. #6d7d92 -> #75859a gemessen 4,43 -> 4,95
07.09. #75859a -> #7f8fa6 gemessen 4,50 -> rund 4,9
25.09. #7f8fa6 -> #95a4ba gemessen 4,42 -> 5,75
Neben jedem dieser Schritte steht ein sorgfaeltiger Kommentar, der
erklaert, warum genau dieser Wert richtig ist. Alle drei waren richtig
-- fuer den Untergrund, den man GERADE KANNTE.
Der Hintergrund ist aber ein BILD. Bilder haben helle Stellen, und die
liegen bei jedem neuen Layout woanders. Wer eine Schrift auf zwei
Kommastellen genau gegen die hellste Stelle einstellt, die er heute
gefunden hat, stellt sie auf den naechsten Umbau ein.
=== WAS DIESMAL ANDERS GEMACHT WURDE ===
1. NICHT NUR DIE ROTE SEITE ANGESEHEN. Die schlechtesten Werte ALLER
vierzehn Seiten nebeneinandergelegt:
hilfe.html 4,90 auf rgb(51,53,56) <- die hellste im Haus
teamlage.html 4,98 auf rgb(45,52,64)
entwicklung 4,42 auf rgb(40,41,44) <- die, die rot war
befinden.html 5,38 auf rgb(29,39,46)
... zehn weitere ueber 6,3
Die rote Seite war also NICHT die gefaehrlichste. Zwei andere lagen
knapper an der Grenze, als der letzte Rutscher gross war -- sie
waeren als naechste drangewesen. Haette ich nur entwicklung.html
repariert, haette ich in zwei Wochen dasselbe noch einmal getan.
2. DER BEZUG IST JETZT DIE HELLSTE FLAECHE IM HAUS, nicht die der
Seite, die gerade rot ist. Beide Toene beider Haeuser gegen
rgb(51,53,56) gerechnet:
Gate still #7f8fa6 -> #95a4ba 4,35 -> 4,86
leise #94a5bb -> #9fb0c6 4,90 -> 5,56
Crew still #8f88b2 -> #a7a0cb 4,10 -> 5,00
leise #a9a2ca -> #b4aed6 5,10 -> 5,84
Der stille Ton im Crew-Haus stand bei 4,10 -- UNTER der Grenze, seit
Wochen, ohne dass eine Pruefung je etwas gesagt haette. Nicht weil
sie nachsichtig war, sondern weil noch keine Crew-Seite mit dieser
Flaeche angesehen wurde. Ein gruener Haken heisst nicht, dass
nachgesehen wurde.
3. PRUEF-BUEHNE PRUEFT JETZT AUCH DIE LUFT. Nicht nur „ueber 4,5",
sondern: „hat die schlechteste Stelle dieser Seite noch elf Prozent
Reserve?" Die Zahl ist gemessen und nicht gewaehlt -- beide
Rutscher oben waren rund elf Prozent gross, und 4,5 mal 1,11 ist
5,0. Eine Seite unter diesem Wert ist noch in Ordnung und schon in
Gefahr, und genau das soll sie sagen, solange man es noch in Ruhe
beheben kann.
Sie haengt an der jeweiligen Grenze, nicht an einer festen 5,0: Bei
grossem Text sind 3:1 erlaubt, dieselbe Luft sind dort 3,33. Eine
hineingeschriebene 5,0 wuerde grossen Text ohne Not anmahnen.
GEMESSEN: pruef-buehne 230 Pruefungen (vorher 192), 0 Fehler.
Schlechteste Seite jetzt hilfe.html mit 5,15:1 -- 15 % ueber der
Grenze. Die Schrift bleibt deutlich leiser als der Haupttext: der
steht bei 11,8:1, also mehr als doppelt so hoch.
Co-Authored-By: Claude Opus 5 <[email protected]>
582 lines
30 KiB
JavaScript
582 lines
30 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;
|
|
/* WELCHE Texte ungemessen blieben -- nicht nur wie viele.
|
|
„3 von 40" sagt, dass etwas ist, und nicht was; man muss die
|
|
Seite danach von Hand durchgehen. Mit den Anfaengen der drei
|
|
Texte sieht man in einer Sekunde, ob es dicht gesetzte Zeilen
|
|
sind (in Ordnung) oder etwas, das auf der Buehne liegt. */
|
|
const ohneListe = [];
|
|
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++;
|
|
if (ohneListe.length < 6) ohneListe.push(e.textContent.trim().slice(0, 28));
|
|
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,
|
|
ohneListe, 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}` : ""));
|
|
|
|
/* ==== UND WIE VIEL LUFT IST NOCH DA? (25.09.2026) ============
|
|
|
|
4,5:1 ist die Grenze, an der Text aufhoert, lesbar zu sein.
|
|
Eine Seite, die GENAU dort steht, ist nicht in Ordnung --
|
|
sie ist einen Handgriff davon entfernt, es nicht mehr zu sein.
|
|
|
|
Dass das kein Gedankenspiel ist, steht in gate.css: Derselbe
|
|
leiseste Ton musste dreimal in vier Wochen angehoben werden,
|
|
immer aus demselben Grund -- der Hintergrund ist ein Bild, es
|
|
wurde heller, und die Schrift war auf zwei Kommastellen genau
|
|
auf den alten Stand eingestellt.
|
|
|
|
01.09. 4,43 -> 4,95
|
|
07.09. 4,50 -> rund 4,9
|
|
25.09. 4,42 -> 5,75
|
|
|
|
Beide Rutscher waren rund elf Prozent gross. Deshalb steht
|
|
hier 1,11 und keine gewaehlte Zahl: Eine Seite besteht diese
|
|
Zeile genau dann, wenn sie noch EINEN Rutscher dieser Groesse
|
|
vertraegt, ohne unlesbar zu werden. Bei 4,5 sind das 5,0.
|
|
|
|
Diese Zeile ist die zweite Meinung zur Zeile darueber und
|
|
ersetzt sie nicht: Die obere sagt, ob die Seite in Ordnung
|
|
ist, diese, ob sie es morgen noch sein wird.
|
|
|
|
Sie haengt bewusst an `schlimmster.grenze` und nicht an einer
|
|
eigenen 5,0 -- bei grossem Text ist die Grenze 3:1, und
|
|
dieselbe Luft sind dort 3,33. Wer die Zahl fest hineinschriebe,
|
|
wuerde grossen Text unnoetig anmahnen. */
|
|
const LUFT = 1.11;
|
|
ok(schlimmster.v >= schlimmster.grenze * LUFT,
|
|
`${s}: und noch Luft bis zur Grenze `
|
|
+ `(${schlimmster.v.toFixed(2)}:1, noetig waeren `
|
|
+ `${(schlimmster.grenze * LUFT).toFixed(2)}:1 -- `
|
|
+ `${((schlimmster.v / schlimmster.grenze - 1) * 100).toFixed(0)} % ueber `
|
|
+ `${schlimmster.grenze}:1)`);
|
|
/* 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. */
|
|
/* ==== EIN ANTEIL STATT EINER ZAHL (25.09.2026) ================
|
|
|
|
Hier stand `<= 2`. Die Zahl stimmte, solange die Seiten klein
|
|
waren; treff-regeln.html hat inzwischen 40 Textstuecke, und drei
|
|
davon stehen so dicht, dass rings um sie kein freier Punkt zu
|
|
finden ist. Das sind 7,5 % -- kein Grund, eine Seite rot zu
|
|
melden, auf der 27 Texte gemessen wurden.
|
|
|
|
DIE SORGE DAHINTER BLEIBT RICHTIG: Eine Pruefung, die kaum
|
|
hingesehen hat, darf nicht „bestanden" sagen. Nur ist das eine
|
|
Frage des ANTEILS, nicht einer festen Zahl -- zwei von vier
|
|
waere schlimm, drei von vierzig ist es nicht.
|
|
|
|
Zwei bleiben immer erlaubt (kleine Seiten), darueber ein
|
|
Zehntel. Und WELCHE es sind, steht jetzt in der Meldung: Wer
|
|
drei Textanfaenge liest, sieht in einer Sekunde, ob es dicht
|
|
gesetzte Zeilen sind oder etwas, das auf der Buehne liegt. */
|
|
const erlaubtOhne = Math.max(2, Math.floor(schlimmster.gesamt / 10));
|
|
ok(schlimmster.ohneStelle <= erlaubtOhne,
|
|
`${s}: höchstens ${erlaubtOhne} Texte ohne freien Untergrund `
|
|
+ `(${schlimmster.ohneStelle} von ${schlimmster.gesamt})`
|
|
+ ((schlimmster.ohneListe || []).length
|
|
? ` -- ${schlimmster.ohneListe.map((x) => `"${x}"`).join(", ")}` : ""));
|
|
}
|
|
|
|
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);
|