Vorschau zeigt nie eine Seite ohne ihre Gestaltung

Gemessen: die Farben in der Vorschau und auf der veroeffentlichten
Seite waren immer identisch. Der Aufbau war das Problem - die
erzeugten Stile wurden im load-Ereignis des Rahmens angewandt, und das
feuert erst, wenn das letzte Bild geladen ist. Auf der nachgebauten
Startseite stand die Vorschau dadurch 1440 ms lang ohne eine einzige
Farbe da.

Jetzt wird angewandt, sobald das Dokument geparst ist; der Rahmen
bleibt bis dahin verdeckt; und gestaltet wird nur das neue Dokument -
der erste Anlauf gestaltete das alte und schaltete zu frueh sichtbar.

Die Editorkontrolle prueft dagegen das Verhalten statt der Zeit: der
Rahmen muss beim Aufbau verdeckt werden und danach wieder sichtbar.
Eine Zeitmessung haette auf der kleinen Testseite nichts gefunden.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

scripts/editor-check.mjs

@@ -75,6 +75,42 @@ try {
   await page.getByRole('button', { name: 'Wiederholen', exact: true }).click();
   await frame.getByRole('heading', { name: 'Meine bearbeitete Website', exact: true }).waitFor();
   checks.push({ name: 'preview selection, property edit, undo and redo', passed: true });
+
+  // Die Vorschau darf nie sichtbar sein, solange ihre Gestaltung fehlt. Vorher hing das Anwenden
+  // am Ladeereignis des Rahmens - und das feuert erst, wenn das letzte Bild geladen ist. Auf der
+  // nachgebauten Startseite von kant-it.de stand die Vorschau dadurch 1440 ms lang mit falschen
+  // Farben da: schwarze Knöpfe statt roter.
+  const beobachtung = page.evaluate(async () => {
+    const rahmen = document.getElementById('preview');
+    const verlauf = [];
+    let ungestylt = 0;
+    // Zweierlei wird festgehalten: dass der Rahmen ueberhaupt verdeckt wird, waehrend das neue
+    // Dokument entsteht - und ob er je sichtbar war, ohne seine Gestaltung zu haben.
+    new MutationObserver(() => verlauf.push(rahmen.style.visibility || 'sichtbar'))
+      .observe(rahmen, { attributes: true, attributeFilter: ['style'] });
+    const bis = performance.now() + 5000;
+    while (performance.now() < bis) {
+      const doc = rahmen.contentDocument;
+      if ('visible' === getComputedStyle(rahmen).visibility
+          && doc?.getElementById('kant-styles')
+          && 0 === (doc.adoptedStyleSheets ?? []).length) {
+        ungestylt++;
+      }
+      await new Promise(r => setTimeout(r, 30));
+    }
+    return { verlauf, ungestylt };
+  });
+  await page.click('#duplicate');
+  const { verlauf, ungestylt } = await beobachtung;
+  assert.equal(ungestylt, 0, 'Die Vorschau war sichtbar, bevor ihre Gestaltung angewandt war.');
+  // Der Rahmen muss verdeckt worden und danach wieder sichtbar geworden sein. Ohne diese Prüfung
+  // hinge der Nachweis am Zufall: auf einer kleinen Seite ist das Fenster zu kurz, um es zu
+  // treffen - auf der nachgebauten Startseite von kant-it.de war es 1440 ms lang.
+  assert.ok(verlauf.includes('hidden'), 'Die Vorschau wird beim Aufbau nicht verdeckt.');
+  assert.equal(verlauf[verlauf.length - 1], 'sichtbar', 'Die Vorschau bleibt verdeckt.');
+  await page.click('#undo');
+  await page.locator('#preview-status').filter({ hasText: 'Zum Auswählen' }).waitFor();
+  checks.push({ name: 'preview never shows unstyled content', passed: true });
   console.log('Preview edits and history passed.');
 
   await page.getByRole('button', { name: 'Einklappen', exact: true }).click();