Fassung 1.6.1: flexible Editorflaeche und passende Blockeigenschaften

scripts/editor-check.mjs

@@ -104,6 +104,77 @@ try {
   const frame = page.frameLocator('#preview');
   await frame.locator('h1').waitFor();
   await page.locator('#preview-status').filter({ hasText: 'Entwurf ·' }).waitFor();
+  // Flexible panels, contextual fields and a root insertion from a deeply selected element.
+  const leftHandle = page.locator('[data-resize="left"]'), rightHandle = page.locator('[data-resize="right"]');
+  await leftHandle.focus(); await page.keyboard.press('ArrowRight');
+  assert.equal(await leftHandle.getAttribute('aria-valuenow'), '290');
+  const rightBox = await rightHandle.boundingBox();
+  await page.mouse.move(rightBox.x + 3, rightBox.y + 100); await page.mouse.down();
+  await page.mouse.move(rightBox.x - 57, rightBox.y + 100, { steps: 6 }); await page.mouse.up();
+  assert.equal(await rightHandle.getAttribute('aria-valuenow'), '380');
+  await page.reload();
+  await frame.locator('h1').waitFor();
+  await page.locator('#preview-status').filter({ hasText: 'Entwurf ·' }).waitFor();
+  assert.equal(await leftHandle.getAttribute('aria-valuenow'), '290');
+  assert.equal(await rightHandle.getAttribute('aria-valuenow'), '380');
+  for (const width of [1920, 1100, 850, 390]) {
+    await page.setViewportSize({ width, height: 1100 });
+    await page.waitForTimeout(100);
+    assert.equal(await page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth), true, `workspace fits ${width}`);
+    for (const selector of ['.left-panel', '.right-panel', '.library-buttons']) {
+      assert.equal(await page.locator(selector).first().evaluate(el => el.scrollWidth <= el.clientWidth + 1), true, `${selector} fits ${width}`);
+    }
+  }
+  await page.setViewportSize({ width: 1600, height: 1100 });
+  await frame.locator('h1').click();
+  const sectionCount = await frame.locator('main > .block-section').count();
+  await page.locator('#add-root-section').click();
+  await page.waitForFunction(count => document.querySelector('#preview').contentDocument.querySelectorAll('main > .block-section').length === count + 1, sectionCount);
+  await page.locator('#undo').click();
+  await page.waitForFunction(count => document.querySelector('#preview').contentDocument.querySelectorAll('main > .block-section').length === count, sectionCount);
+  await page.locator('#redo').click();
+  await page.waitForFunction(count => document.querySelector('#preview').contentDocument.querySelectorAll('main > .block-section').length === count + 1, sectionCount);
+  await page.locator('#undo').click();
+  await frame.locator('h1').click();
+  await page.locator('#library [data-add="image"]').click();
+  await page.locator('[data-panel="design"]').click();
+  assert.equal(await page.locator('#style-fontSize').count(), 0);
+  assert.equal(await page.locator('#style-objectFit').isVisible(), true);
+  await page.locator('#preview-status').filter({ hasText: 'Entwurf ·' }).waitFor();
+  await page.screenshot({ path: 'reports/editor/context-image.png', fullPage: true });
+  await page.getByRole('button', { name: 'Alle Eigenschaften anzeigen', exact: true }).click();
+  assert.equal(await page.locator('#style-fontSize').count(), 1);
+  await page.locator('#undo').click();
+  await page.locator('#preview-status').filter({ hasText: 'Entwurf ·' }).waitFor();
+  await frame.locator('main .block-text').first().click();
+  await page.locator('[data-panel="design"]').click();
+  assert.equal(await page.locator('#style-objectFit').count(), 0);
+  assert.equal(await page.locator('#style-fontSize').isVisible(), true);
+  const textWidth = await frame.locator('main .block-text').first().evaluate(el => ({ width: el.getBoundingClientRect().width, parent: el.parentElement.clientWidth }));
+  assert.ok(Math.abs(textWidth.width - textWidth.parent) < 2, 'text uses its container width');
+  const sizeGroup = page.locator('.design-group').filter({ has: page.locator('summary', { hasText: /^Größe$/ }) });
+  await sizeGroup.locator('summary').click();
+  await page.locator('#style-maxWidth').locator('xpath=following-sibling::select').selectOption('ch');
+  await page.locator('#style-maxWidth').fill('60');
+  await page.locator('#style-maxWidth').blur();
+  await page.waitForFunction(() => {
+    const el = document.querySelector('#preview').contentDocument.querySelector('main .block-text');
+    return Boolean(el && el.getBoundingClientRect().width < el.parentElement.clientWidth - 100);
+  });
+  await page.getByLabel('Maximale Breite Vorgabe', { exact: true }).selectOption('none');
+  await page.waitForFunction(() => {
+    const el = document.querySelector('#preview').contentDocument.querySelector('main .block-text');
+    return Boolean(el && getComputedStyle(el).maxWidth === 'none');
+  });
+  await page.locator('#undo').click();
+  await page.locator('#undo').click();
+  await page.locator('#preview-status').filter({ hasText: 'Entwurf ·' }).waitFor();
+  await page.locator('.right-panel').evaluate(el => el.scrollTop = 0);
+  await page.locator('.left-panel > .panel-section').first().evaluate(el => el.scrollTop = 0);
+  await page.screenshot({ path: 'reports/editor/flexible-workspace.png', fullPage: true });
+  await leftHandle.dblclick(); await rightHandle.dblclick();
+  await page.locator('[data-panel="content"]').click();
+  checks.push({ name: 'resizable persistent panels, root sections, contextual image/text properties and full text width', passed: true });
   await frame.locator('h1').click();
   assert.equal(await page.locator('#properties-title').innerText(), 'Überschrift');
   await page.getByLabel('Text', { exact: true }).fill('Meine bearbeitete Website');