From 729e73e131d44be31d84e8178f0bffec587fcce1 Mon Sep 17 00:00:00 2001
From: Jonathan Sykes <telemagnadon@gmail.com>
Date: Sat, 3 Oct 2026 21:47:45 +0800
Subject: [PATCH] Verify iPhone Glass tab alignment in WebKit with badges and
 safe-area spacing

---
 tests/glass-panel.spec.js | 34 ++++++++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/tests/glass-panel.spec.js b/tests/glass-panel.spec.js
index b79fbdb..40f2279 100644
--- a/tests/glass-panel.spec.js
+++ b/tests/glass-panel.spec.js
@@ -69,3 +69,37 @@ for (const width of [390, 1440]) test(`Classic panel layout unchanged at ${width
   expect(differentPixels(a, b)).toBeLessThanOrEqual(32);
   await baseline.close();
 });
+
+for (const width of [390]) test(`iPhone bottom icons centered above labels with badges at ${width}`, async ({ browser }, info) => {
+  const { devices } = require('@playwright/test');
+  const { execFileSync } = require('node:child_process');
+  const context = await browser.newContext({ ...devices['iPhone 13'], viewport: { width, height: 844 }, serviceWorkers: 'block', baseURL: 'http://localhost:8096' });
+  const baseline = await context.newPage(), page = await context.newPage();
+  const oldCss = execFileSync('git', ['show', 'f2c9459:frontend/theme-glass-controls.css'], { encoding: 'utf8' });
+  await baseline.route('**/theme-glass-controls.css', r => r.fulfill({ contentType: 'text/css', body: oldCss }));
+  for (const p of [baseline, page]) {
+    await setup(p, width);
+    await p.evaluate(() => {
+      view = { type: 'history' }; render();
+      for (const [id, count] of [['bnQueueCount', '12'], ['bnDlCount', '7']]) { const b = document.getElementById(id); b.textContent = count; b.classList.remove('hidden'); }
+    });
+  }
+  const centers = p => p.locator('.bottom-nav-btn').evaluateAll(buttons => buttons.map(b => {
+    const icon = b.querySelector('svg').getBoundingClientRect(), box = b.querySelector('.bottom-nav-icon').getBoundingClientRect(), label = b.querySelector('.bottom-nav-label').getBoundingClientRect();
+    const s = getComputedStyle(b.querySelector('.bottom-nav-icon')), badge = b.querySelector('.bottom-nav-badge'), r = badge?.getBoundingClientRect();
+    return { icon: icon.x + icon.width / 2, box: box.x + box.width / 2, label: label.x + label.width / 2, iconBottom: icon.bottom, labelTop: label.top, padding: s.padding, buttonWidth: b.getBoundingClientRect().width, badge: r?.height ? { left: r.left, top: r.top } : null, iconRight: icon.right, iconTop: icon.top };
+  }));
+  // Reproduce the uploaded pre-Task-A build's shift before asserting the corrected build.
+  expect((await centers(baseline)).every(x => x.icon - x.label > 8)).toBe(true);
+  for (const x of await centers(page)) {
+    expect(Math.abs(x.icon - x.label)).toBeLessThan(0.6);
+    expect(Math.abs(x.box - x.label)).toBeLessThan(0.6);
+    expect(x.padding).toBe('0px'); expect(x.buttonWidth).toBeGreaterThanOrEqual(44);
+    expect(x.iconBottom).toBeLessThan(x.labelTop);
+    if (x.badge) { expect(Math.abs(x.badge.left - x.iconRight)).toBeLessThanOrEqual(4); expect(x.badge.top).toBeLessThan(x.iconTop); }
+  }
+  await expect(page.locator('.bottom-nav-btn[data-view="history"]')).toHaveClass(/active/);
+  await baseline.locator('#bottomNav').screenshot({ path: `/tmp/done9-nav-before-${info.project.name}-390.png` });
+  await page.locator('#bottomNav').screenshot({ path: `/tmp/done9-nav-after-${info.project.name}-390.png` });
+  await context.close();
+});