Show project scrollbars on hover

This commit is contained in:
2026-07-20 12:08:52 +08:00
parent fd8d188f29
commit d15ca2eb5f
2 changed files with 62 additions and 1 deletions

View File

@@ -62,6 +62,7 @@ const collectMetrics = async () => page.evaluate(() => {
scrollHeight: node.scrollHeight,
overflowX: getComputedStyle(node).overflowX,
overflowY: getComputedStyle(node).overflowY,
scrollbarWidth: getComputedStyle(node).scrollbarWidth,
}
: null
@@ -110,13 +111,20 @@ await page.waitForTimeout(500)
await page.screenshot({ path: 'test-results/project-react-acro-light.png', fullPage: true })
const projectMetrics = await collectMetrics()
await page.locator('.channel-sidebar').hover()
const channelSidebarHoverMetrics = await collectMetrics()
await page.locator('.stage').hover()
const stageHoverMetrics = await collectMetrics()
await page.locator('.inspector').hover()
const inspectorHoverMetrics = await collectMetrics()
await page.locator('.topbar-actions .arco-btn').first().click()
await page.screenshot({ path: 'test-results/project-react-acro-dark.png', fullPage: true })
await browser.close()
await server.close()
console.log(JSON.stringify({ workspaceMetrics, projectMetrics, errors }, null, 2))
console.log(JSON.stringify({ workspaceMetrics, projectMetrics, channelSidebarHoverMetrics, stageHoverMetrics, inspectorHoverMetrics, errors }, null, 2))
const failures = []
const metrics = workspaceMetrics
@@ -224,6 +232,18 @@ for (const [name, overflow] of [
if (!overflow || overflow.overflowX !== 'hidden' || overflow.overflowY !== 'auto') {
failures.push(`expected ${name} to hide horizontal scrollbars and show vertical scrollbars only when needed, got ${JSON.stringify(overflow)}`)
}
if (overflow?.scrollbarWidth !== 'none') {
failures.push(`expected ${name} scrollbar to be hidden until hover, got ${JSON.stringify(overflow)}`)
}
}
for (const [name, overflow] of [
['channel sidebar hover', channelSidebarHoverMetrics.channelSidebarOverflow],
['stage hover', stageHoverMetrics.stageOverflow],
['inspector hover', inspectorHoverMetrics.inspectorOverflow],
]) {
if (overflow?.scrollbarWidth !== 'thin') {
failures.push(`expected ${name} scrollbar to appear on hover, got ${JSON.stringify(overflow)}`)
}
}
if (failures.length) {