fix(ui-primitives): keep two-digit source markers out of the scroll clip

Making `.sources` a scroll container turned its `padding-left` from spacing
into a correctness constraint. A scroll container clips inline-start overflow
with no way to scroll it back, and `::marker` is right-aligned to the content
edge, so past nine sources the markers rendered as `0.` and `1.` where `10.`
and `11.` belonged.

`searchMaxResults` is an unbounded positive integer, so size the padding in
`em` against the list's own font to hold a three-digit marker. The browser e2e
measures a `999. ` marker in that inherited font and requires the computed
padding to be at least that wide, pinning the room against the widest marker
rather than one fixture's source count.
This commit is contained in:
Chinesezjc
2026-08-03 18:58:44 +08:00
parent 2b02202ba1
commit e6d6e192d5
6 changed files with 41 additions and 7 deletions

View File

@@ -271,6 +271,25 @@ describe('web e2e: shipped default web search', () => {
expect(geometry.scrollHeight).toBeGreaterThan(geometry.clientHeight)
})
it.skipIf(MODE === 'record')('reserves marker room a scroll container cannot clip back', async () => {
onTestFailed(() => saveFailureShot(page, 'web-e2e-search-marker-room'))
// `overflow-y: auto` clips inline-start overflow with no way to scroll it
// back, and markers are right-aligned to the content edge, so a marker wider
// than `padding-left` silently loses its leading digits. `searchMaxResults`
// is an unbounded positive integer, so measure the widest three-digit marker
// in the list's own font and require the shipped padding to hold it.
const marker = await page.locator('[data-web="search"] ol').evaluate((element) => {
const probe = document.createElement('span')
probe.style.cssText = 'position:absolute;visibility:hidden;white-space:pre;font:inherit'
probe.textContent = '999. '
element.append(probe)
const widest = probe.getBoundingClientRect().width
probe.remove()
return { widest, paddingLeft: parseFloat(getComputedStyle(element).paddingLeft) }
})
expect(marker.paddingLeft).toBeGreaterThanOrEqual(marker.widest)
})
it.skipIf(MODE === 'record')('stayed clean and kept the exact fixture inventory', async () => {
expect(tripwire.pageErrors).toEqual([])
expect(tripwire.warnings).toEqual([])