josh/ytplayer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Verify iPhone Glass tab alignment in WebKit with badges and safe-area spacing

Browse Source
This commit is contained in:
Jonathan Sykes
2026-10-03 21:47:45 +08:00
parent 3c0adb2577
commit 729e73e131
1 changed files with 34 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
tests/glass-panel.spec.js
View File

@@ -69,3 +69,37 @@ for (const width of [390, 1440]) test(`Classic panel layout unchanged at ${width
expect(differentPixels(a, b)).toBeLessThanOrEqual(32); expect(differentPixels(a, b)).toBeLessThanOrEqual(32);
await baseline.close(); 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();
});