mirror of
https://github.com/hanzo-apps/hanzo.ai.git
synced 2026-10-29 07:20:43 +00:00
zeekay
df977104c9
Focus and the /beta section start behind the bar (under), so the page's light runs up to the top of the window, and the stylesheet override that forced the bar transparent is gone: the bar owns its own ground (@hanzo/app 0.2.36). bar.spec.ts holds it at 1440 and 390: transparent and borderless at rest, the light's top at the window's, glass once the page has moved. Claude-Session: https://claude.ai/code/session_017vrVus6PPBgP5YRzKV1iqW
50 lines
2.4 KiB
TypeScript
50 lines
2.4 KiB
TypeScript
import { expect, test, type Page } from '@playwright/test'
|
|
import { serveExport } from './export'
|
|
|
|
/**
|
|
* THE BAR OVER A FOCUSED PAGE HAS NO GROUND AT REST.
|
|
*
|
|
* The wordmark at the start and the account at the end stand on the page's own
|
|
* light: the glow begins at the top of the window, behind the bar, so no band shows
|
|
* above it. Once the page has moved under the bar, the bar takes the page's ground,
|
|
* frosted, and gives it up again at the top.
|
|
*/
|
|
|
|
let base: string
|
|
let stop: () => Promise<void>
|
|
test.beforeAll(async () => {
|
|
const served = await serveExport()
|
|
base = served.url
|
|
stop = served.close
|
|
})
|
|
test.afterAll(async () => stop())
|
|
|
|
const bar = (page: Page) => page.locator('header[data-slot="masthead"]').first()
|
|
|
|
for (const [name, size] of [['desktop', { width: 1440, height: 900 }], ['phone', { width: 390, height: 844 }]] as const) {
|
|
test(`${name}: a focused page's bar is transparent at rest and its light starts at the top of the window`, async ({ page }) => {
|
|
await page.setViewportSize(size)
|
|
await page.route('**/*', (route) => (new URL(route.request().url()).origin === base ? route.continue() : route.abort()))
|
|
await page.goto(`${base}/auth/callback`)
|
|
await expect(bar(page)).toBeVisible({ timeout: 30_000 })
|
|
await expect(bar(page)).toHaveAttribute('data-scrolled', 'false')
|
|
expect(await bar(page).evaluate((el) => getComputedStyle(el).backgroundColor)).toBe('rgba(0, 0, 0, 0)')
|
|
expect(await bar(page).evaluate((el) => getComputedStyle(el).borderBottomWidth)).toBe('0px')
|
|
// The light is drawn from the window's top edge, behind the bar.
|
|
const glow = await page.locator('[data-slot="glow"]').first().boundingBox()
|
|
expect(glow?.y ?? 99).toBeLessThanOrEqual(1)
|
|
})
|
|
}
|
|
|
|
test('the page moving under the bar gives it glass, and the top gives it back', async ({ page }) => {
|
|
await page.setViewportSize({ width: 390, height: 360 })
|
|
await page.route('**/*', (route) => (new URL(route.request().url()).origin === base ? route.continue() : route.abort()))
|
|
await page.goto(`${base}/auth/callback`)
|
|
await expect(bar(page)).toBeVisible({ timeout: 30_000 })
|
|
await page.evaluate(() => window.scrollTo(0, 120))
|
|
await expect(bar(page)).toHaveAttribute('data-scrolled', 'true')
|
|
expect(await bar(page).evaluate((el) => getComputedStyle(el).backgroundColor)).not.toBe('rgba(0, 0, 0, 0)')
|
|
await page.evaluate(() => window.scrollTo(0, 0))
|
|
await expect(bar(page)).toHaveAttribute('data-scrolled', 'false')
|
|
})
|