/* ===================================================================== pruef-bewegung.mjs — keine endlose Bewegung auf etwas, das niemand sieht. --------------------------------------------------------------------- WARUM ES DIESE PRÜFUNG GIBT Am 30.09.2026 scheiterte `pruef-browser` in WebKit daran, dass der Anmeldeknopf nie „ruhig" wurde. Gemessen wanderte sein Kasten pro Bild um ein Fünftel Pixel, und zwei Bewegungen liefen dabei. Eine davon war: .knopf__laden { opacity: 0; animation: dreh .8s linear infinite; } .knopf[disabled] .knopf__laden { opacity: 1; } Nur die Deckkraft schaltete um. Die Drehung lief ab dem Laden der Seite, auf JEDEM Knopf, für immer — nicht zu sehen und trotzdem jedes Bild neu gerechnet. Dieselbe Suche fand einen zweiten: Auf der öffentlichen Website lief an jedem Navigationspunkt eine elf Sekunden lange Aurora, unsichtbar bis zum Überfahren. Beides fällt niemandem auf, weil nichts abstürzt und nichts falsch aussieht. Es kostet nur Rechenzeit und Akku — auf genau den Seiten, die am häufigsten offen sind. --------------------------------------------------------------------- WAS GEPRÜFT WIRD 1. KEINE ENDLOSE BEWEGUNG IM SELBEN BLOCK wie `opacity: 0`, `display: none` oder `visibility: hidden`. Die Bewegung gehört dorthin, wo das Ding sichtbar wird — also in die Regel mit dem Zustand (`[disabled]`, `:hover`, `.offen`). 2. JEDE STILVORLAGE mit endloser Bewegung kennt die Hausregel `prefers-reduced-motion`. Gemessen am 30.09.: alle 42 tun es. Die Zeile hält diesen Stand fest, statt ihn dem Zufall zu überlassen. --------------------------------------------------------------------- DREI AUSGÄNGE Findet sie keine Stilvorlagen, ist das „konnte nicht nachsehen" (Rückgabe 2) und nicht „alles in Ordnung". Eine Prüfung, die ihre Voraussetzung nicht hat, muss das sagen. Aufrufen mit: node server/pruef-bewegung.mjs ===================================================================== */ import { readdirSync, readFileSync, existsSync } from "node:fs"; import { dirname, join } from "node:path"; import { fileURLToPath } from "node:url"; const HIER = dirname(fileURLToPath(import.meta.url)); const REPO = join(HIER, ".."); /* BEIDE HÄUSER UND DIE ÖFFENTLICHE SEITE. Der erste Fund lag im Workspace, der zweite auf der Website — eine Prüfung, die nur einen der beiden Orte kennt, hätte die Hälfte gefunden. */ const ORTE = [ join(REPO, "workspace", "assets", "css"), join(REPO, "assets", "css"), ]; let ok = 0, fehl = 0; const pruef = (name, bedingung, zusatz = "") => { if (bedingung) { ok++; console.log(` ok ${name}`); } else { fehl++; console.log(` FEHL ${name}${zusatz ? "\n " + zusatz : ""}`); } }; /* Kommentare weg -- sonst zählt jeder Satz, der das Wort erklärt. Genau diese Falle hat am 29.09. eine andere Prüfung dreimal getroffen: Sie las ihre eigenen Beispieltexte als Befunde. */ const ohneKommentar = (t) => t.replace(/\/\*[\s\S]*?\*\//g, ""); /** Alle Regelblöcke einer Stilvorlage: Selektor + Körper. * * Verschachtelte Blöcke (`@media`) fallen dabei auseinander — das ist * hier richtig: Gefragt ist, was IN einem Regelblock zusammensteht, * nicht wo er liegt. */ const REGEL = /([^{}]+)\{([^{}]*)\}/g; const UNSICHTBAR = [ [/opacity:\s*0\s*(?:;|$)/m, "opacity: 0"], [/display:\s*none/, "display: none"], [/visibility:\s*hidden/, "visibility: hidden"], ]; const ENDLOS = /\binfinite\b/; function dateien() { const liste = []; for (const ort of ORTE) { if (!existsSync(ort)) continue; for (const f of readdirSync(ort)) { if (f.endsWith(".css")) liste.push(join(ort, f)); } } return liste; } /** Findet in einem Stilblatt-Text die Blöcke, die beides haben. */ export function blindeBewegung(text) { const treffer = []; const t = ohneKommentar(text); let m; REGEL.lastIndex = 0; while ((m = REGEL.exec(t)) !== null) { const sel = m[1].trim().replace(/\s+/g, " "); const koerper = m[2]; if (!ENDLOS.test(koerper)) continue; for (const [muster, wort] of UNSICHTBAR) { if (muster.test(koerper)) { treffer.push({ sel, wort }); break; } } } return treffer; } console.log("\n=== Endlose Bewegung auf etwas Unsichtbarem ==="); const alle = dateien(); if (alle.length < 10) { /* DER DRITTE AUSGANG. Keine Stilvorlagen heißt „konnte nicht nachsehen" — nicht „alles in Ordnung". */ console.log(` KONNTE NICHT NACHSEHEN: nur ${alle.length} Stilvorlagen gefunden.`); process.exit(2); } console.log(` ${alle.length} Stilvorlagen in beiden Häusern und auf der Website.`); const funde = []; let mitEndlos = 0; const ohneRuhe = []; for (const p of alle) { const text = readFileSync(p, "utf8"); const t = ohneKommentar(text); if (ENDLOS.test(t)) { mitEndlos++; if (!/prefers-reduced-motion/.test(t)) ohneRuhe.push(p.split(/[\\/]/).pop()); } for (const f of blindeBewegung(text)) { funde.push(`${p.split(/[\\/]/).pop()}: ${f.sel.slice(0, 54)} (${f.wort})`); } } /* DIE ZAHL GEHÖRT IN DIE BEDINGUNG. Fände die Prüfung gar keine endlose Bewegung, wäre „keine blinde" trivial wahr — und bliebe es, wenn jemand die Suche kaputt macht. */ pruef(`${mitEndlos} Stilvorlagen haben überhaupt eine endlose Bewegung`, mitEndlos >= 5, `nur ${mitEndlos} — sucht die Prüfung noch richtig?`); pruef("keine endlose Bewegung auf etwas Unsichtbarem", funde.length === 0, funde.slice(0, 8).join("\n ")); pruef("jede davon kennt die Bewegungsarmut-Regel", ohneRuhe.length === 0, `ohne prefers-reduced-motion: ${ohneRuhe.join(", ")}`); /* --------------------------------------------------------------------- DIE GEGENPROBEN — jede muss anschlagen --------------------------------------------------------------------- Eine Prüfung, die immer bestätigt, bestätigt nichts. Die Proben stehen hier als Text und nicht als Datei: Sie sollen genau die Fälle abbilden, um die es geht, und nicht versehentlich mitgelesen werden. ------------------------------------------------------------------- */ console.log("\n --- Gegenproben (jede MUSS anschlagen) ---"); const probeSchlecht = ".kreisel { opacity: 0; animation: dreh .8s linear infinite; }"; pruef("Gegenprobe: unsichtbar + endlos wird gefunden", blindeBewegung(probeSchlecht).length === 1); const probeGut = ".kreisel { opacity: 1; animation: dreh .8s linear infinite; }"; pruef("Gegenprobe: sichtbar + endlos ist in Ordnung", blindeBewegung(probeGut).length === 0); const probeStill = ".kreisel { opacity: 0; }"; pruef("Gegenprobe: unsichtbar ohne Bewegung ist in Ordnung", blindeBewegung(probeStill).length === 0); const probeGetrennt = ".kreisel { opacity: 0; }\n" + ".knopf[disabled] .kreisel { opacity: 1; animation: dreh .8s linear infinite; }"; pruef("Gegenprobe: richtig getrennt gebaut wird NICHT gemeldet", blindeBewegung(probeGetrennt).length === 0, "genau so gehört es: die Bewegung in der Regel, die es sichtbar macht"); const probeVerborgen = ".menue { display: none; animation: schweben 3s infinite; }"; pruef("Gegenprobe: auch `display: none` zählt", blindeBewegung(probeVerborgen).length === 1); const probeKommentar = "/* .kreisel { opacity: 0; animation: x 1s infinite; } */\n" + ".echt { color: red; }"; pruef("Gegenprobe: ein Beispiel IM KOMMENTAR zählt nicht", blindeBewegung(probeKommentar).length === 0, "sonst liest die Prüfung ihre eigenen Erklärungen als Befunde"); console.log(`\n${ok + fehl} Pruefungen, ${fehl} Fehler`); console.log(fehl === 0 ? "ALLES IN ORDNUNG" : "NICHT IN ORDNUNG"); process.exit(fehl === 0 ? 0 : 1);