Changeset 4bb93aa in Klonkt for test/ward-pwa.test.js

Timestamp:

08/12/2026 08:32:32 PM (3 months ago)

Author:

Robin <roboburr@…>

Children:

5412cbb

Parents:

5218863

Message:

Ward-PWA: hidden wint weer van display:flex

De gespreks-overlay stond vanaf het laden permanent over de pagina
(Robins schermafdruk, 12-8). De terugknop deed zijn werk wel: hij zette
netjes hidden. Maar het hidden-attribuut werkt via de browser-stylesheet
(display:none), en elke eigen display-regel wint daarvan; de flex van
#thread hield de overlay dus zichtbaar, dicht noch open te krijgen.

Eén regel lost de hele klasse op, niet alleen dit geval:
[hidden] { display: none !important; }

Changed files:
src/assets/css/ward.css

• de [hidden]-regel, bovenaan, met uitleg

test/ward-pwa.test.js

• bewaakt dat de regel bestaat EN dat er een display:flex is om van te winnen; anders bewaakt de test niets

-robo
Co-Authored-By: Claude Opus 4.8 <noreply@…>

File:

• test/ward-pwa.test.js (modified) (1 diff)

test/ward-pwa.test.js

@@ -212 +212 @@
   } finally { server.close(); }
 });
+
+test('hidden wint van elke display-regel in de stylesheet', async () => {
+  // De gespreks-overlay heeft display:flex; zonder een [hidden]-regel met
+  // !important verslaat die de browser-default en staat een "verborgen"
+  // overlay permanent over de pagina (Robins schermafdruk, 12-8). De CSS is
+  // hier de waarheid, dus die bewaken we, niet de DOM.
+  const fs = await import('node:fs');
+  const css = fs.readFileSync(new URL('../src/assets/css/ward.css', import.meta.url), 'utf8');
+  assert.match(css, /\[hidden\]\s*\{\s*display:\s*none\s*!important/, 'de [hidden]-regel ontbreekt');
+  // En hij moet VOOR de #thread-regel staan is niet nodig (important wint),
+  // maar de flex-regel moet er wel zijn, anders bewaakt deze test niets.
+  assert.match(css, /#thread\s*\{[^}]*display:\s*flex/);
+});