8.4CSS Feature Support Testing

Use @supports queries to detect browser capabilities, but also test the fallback behavior:

test('CSS container queries have fallback', async ({ page }) => {
    await page.goto('/dashboard');

    // Check if the browser supports container queries
    const supportsContainerQueries = await page.evaluate(() => {
        return CSS.supports('container-type', 'inline-size');
    });

    if (supportsContainerQueries) {
        // Verify responsive card layout
        const card = page.locator('.dashboard-card').first();
        const box = await card.boundingBox();
        expect(box?.width).toBeGreaterThan(0);
    } else {
        // Verify fallback layout works
        const card = page.locator('.dashboard-card').first();
        const box = await card.boundingBox();
        expect(box?.width).toBeGreaterThan(0);
        // Fallback should still be usable
    }
});