test(images): wait for the resized grid row before asserting no overflow

At 700px and 390px the Images grid has two columns, so the poll for a card at the row start was already true of the 700px layout. Under CI load WebKit can run no rendering frame between setViewportSize and the overflow check, so the cards still carried the 700px widths and scrollWidth exceeded the viewport by 296px. Wait until the first row fits the resized grid instead.
2026-10-22 22:27:40 -07:00
1 changed files with 6 additions and 1 deletions
@@ -787,7 +787,12 @@ test('density changes and resize preserve identity focus and selection', async (
    await page.getByRole('button',{name:'Grid',exact:true}).click();
    for (const [width,columns] of [[951,3],[950,3],[700,2],[390,2]]) {
        await page.setViewportSize({width,height:844});
-        await expect.poll(()=>cards(page).nth(columns).evaluate(node=>node.offsetLeft)).toBe(0);
+        // 700px and 390px both lay out two columns, so a card at the row start alone is also true of the previous
+        // width's cards before WebKit runs the first frame after the resize; wait for the row to fit the new grid.
+        await expect.poll(()=>page.locator('.image-grid').evaluate((grid,columns)=>{
+            const row=[...grid.querySelectorAll(':scope > article[data-image-key]')];
+            return row[columns].offsetLeft===0&&row[columns-1].getBoundingClientRect().right<=grid.getBoundingClientRect().right+1;
+        },columns)).toBe(true);
        await first.getByRole('button',{name:/^Open /}).focus();await page.keyboard.press('ArrowDown');
        await expect(cards(page).nth(columns).getByRole('button',{name:/^Open /})).toBeFocused();
        expect(await page.evaluate(()=>document.documentElement.scrollWidth-document.documentElement.clientWidth)).toBeLessThanOrEqual(1);