From a932821bc8af2cf79c31dd36f6f71fcb5fc9eb0c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Greg=20Berg=C3=A9?= Date: Wed, 19 Mar 2025 17:18:30 +0100 Subject: [PATCH 01/13] Trigger tests From ab72ff214f5d2cfe6cc999f14599a0656e6a21c6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Greg=20Berg=C3=A9?= Date: Wed, 19 Mar 2025 22:18:24 +0100 Subject: [PATCH 02/13] Fix search button flakiness --- .../gitbook/src/components/Search/SearchButton.tsx | 10 ++++++---- packages/gitbook/tailwind.config.ts | 4 ++-- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/gitbook/src/components/Search/SearchButton.tsx b/packages/gitbook/src/components/Search/SearchButton.tsx index 5244dbb60e..5cbc638646 100644 --- a/packages/gitbook/src/components/Search/SearchButton.tsx +++ b/packages/gitbook/src/components/Search/SearchButton.tsx @@ -115,9 +115,13 @@ function Shortcut() { setOperatingSystem(getOperatingSystem()); }, []); - return operatingSystem ? ( + return ( - ) : ( - ); } diff --git a/packages/gitbook/tailwind.config.ts b/packages/gitbook/tailwind.config.ts index 340978ab4c..3efc2f5105 100644 --- a/packages/gitbook/tailwind.config.ts +++ b/packages/gitbook/tailwind.config.ts @@ -297,8 +297,8 @@ const config: Config = { present: 'present .5s ease-out both', scaleIn: 'scaleIn 200ms ease', scaleOut: 'scaleOut 200ms ease', - fadeIn: 'fadeIn 200ms ease', - fadeOut: 'fadeOut 200ms ease', + fadeIn: 'fadeIn 200ms ease forwards', + fadeOut: 'fadeOut 200ms ease forwards', enterFromLeft: 'enterFromLeft 250ms ease', enterFromRight: 'enterFromRight 250ms ease', exitToLeft: 'exitToLeft 250ms ease', From 42b14f726fb04242ef5e771d1214edfa213ea25d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Greg=20Berg=C3=A9?= Date: Wed, 19 Mar 2025 22:35:54 +0100 Subject: [PATCH 03/13] Remove pixelated --- packages/gitbook/e2e/util.ts | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/gitbook/e2e/util.ts b/packages/gitbook/e2e/util.ts index c75eae4e83..31967f7f52 100644 --- a/packages/gitbook/e2e/util.ts +++ b/packages/gitbook/e2e/util.ts @@ -191,11 +191,6 @@ export function runTestCases(testCases: TestsCase[]) { .intercom-lightweight-app { display: none !important; } - - /* Switch image rendering to pixelated */ - img { - image-rendering: pixelated; - } `, threshold: screenshotOptions?.threshold ?? undefined, fullPage: testEntry.fullPage ?? false, From fc812bf2a35c8ea6c3871c295b90ad8833d0a0a8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Greg=20Berg=C3=A9?= Date: Wed, 19 Mar 2025 22:42:43 +0100 Subject: [PATCH 04/13] Stabilize inline images --- packages/gitbook/e2e/internal.spec.ts | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/packages/gitbook/e2e/internal.spec.ts b/packages/gitbook/e2e/internal.spec.ts index ed9900f04f..d659d4c646 100644 --- a/packages/gitbook/e2e/internal.spec.ts +++ b/packages/gitbook/e2e/internal.spec.ts @@ -484,6 +484,17 @@ const testCases: TestsCase[] = [ name: 'Cards', url: 'blocks/cards', fullPage: true, + run: async (page) => { + // Resize the image to avoid the flakiness in rendering + // "vertical-align: middle" is unstable + await page + .locator('img[width=22]') + .first() + .evaluate((img) => { + img.style.width = '40px'; + img.style.height = '40px'; + }); + }, }, { name: 'Math', From b91be39f33e093dfb1487fc84d36631b995070f8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Greg=20Berg=C3=A9?= Date: Wed, 19 Mar 2025 22:42:53 +0100 Subject: [PATCH 05/13] Stabilize images --- .../gitbook/src/components/DocumentView/Caption.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/gitbook/src/components/DocumentView/Caption.tsx b/packages/gitbook/src/components/DocumentView/Caption.tsx index f7649e68a8..183e90d402 100644 --- a/packages/gitbook/src/components/DocumentView/Caption.tsx +++ b/packages/gitbook/src/components/DocumentView/Caption.tsx @@ -56,7 +56,17 @@ export function Caption( captionParagraph.type !== 'paragraph' || isNodeEmpty(captionParagraph) ) { - return
{children}
; + return ( +
+ {children} +
+ ); } return ( From 684de777ade822730b80fb78ed0e0ccf23be9092 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Greg=20Berg=C3=A9?= Date: Wed, 19 Mar 2025 22:45:08 +0100 Subject: [PATCH 06/13] Stabilize inline images again --- packages/gitbook/src/components/DocumentView/InlineImage.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/gitbook/src/components/DocumentView/InlineImage.tsx b/packages/gitbook/src/components/DocumentView/InlineImage.tsx index 4a3663b823..82d8b639c1 100644 --- a/packages/gitbook/src/components/DocumentView/InlineImage.tsx +++ b/packages/gitbook/src/components/DocumentView/InlineImage.tsx @@ -32,6 +32,10 @@ export async function InlineImage(props: InlineProps) { className={tcls( size !== 'line' ? ['inline-flex', 'max-w-[300px]', 'align-middle'] : null )} + style={{ + // Stabilize the height of the image. + height: 'calc-size(auto,round(down,size,1px))', + }} > {inline.data.caption Date: Wed, 19 Mar 2025 22:54:01 +0100 Subject: [PATCH 07/13] Improve image stabilization --- packages/gitbook/e2e/util.ts | 29 +++++++++++++++++++ .../src/components/DocumentView/Caption.tsx | 12 +------- .../components/DocumentView/InlineImage.tsx | 4 --- 3 files changed, 30 insertions(+), 15 deletions(-) diff --git a/packages/gitbook/e2e/util.ts b/packages/gitbook/e2e/util.ts index 31967f7f52..2fe53377fe 100644 --- a/packages/gitbook/e2e/util.ts +++ b/packages/gitbook/e2e/util.ts @@ -197,6 +197,7 @@ export function runTestCases(testCases: TestsCase[]) { beforeScreenshot: async ({ runStabilization }) => { await runStabilization(); await waitForIcons(page); + await stabilizeImages(page); if (screenshotOptions?.waitForTOCScrolling !== false) { await waitForTOCScrolling(page); } @@ -343,6 +344,34 @@ async function waitForIcons(page: Page) { }); } +/** + * Take all images, measure them and set their width and height to rounded values. + */ +async function stabilizeImages(page: Page) { + await page.waitForFunction(async () => { + const images = Array.from(document.querySelectorAll('img')); + await Promise.all( + images.map(async (img) => { + return new Promise((resolve) => { + if (img.complete) { + img.style.width = `${Math.round(img.width)}px`; + img.style.height = `${Math.round(img.height)}px`; + resolve(); + } else { + img.onload = () => { + img.style.width = `${Math.round(img.width)}px`; + img.style.height = `${Math.round(img.height)}px`; + resolve(); + }; + img.onerror = () => resolve(); // Skip failed images + } + }); + }) + ); + return true; + }); +} + /** * Wait for TOC to be correctly scrolled into view. */ diff --git a/packages/gitbook/src/components/DocumentView/Caption.tsx b/packages/gitbook/src/components/DocumentView/Caption.tsx index 183e90d402..f7649e68a8 100644 --- a/packages/gitbook/src/components/DocumentView/Caption.tsx +++ b/packages/gitbook/src/components/DocumentView/Caption.tsx @@ -56,17 +56,7 @@ export function Caption( captionParagraph.type !== 'paragraph' || isNodeEmpty(captionParagraph) ) { - return ( -
- {children} -
- ); + return
{children}
; } return ( diff --git a/packages/gitbook/src/components/DocumentView/InlineImage.tsx b/packages/gitbook/src/components/DocumentView/InlineImage.tsx index 82d8b639c1..4a3663b823 100644 --- a/packages/gitbook/src/components/DocumentView/InlineImage.tsx +++ b/packages/gitbook/src/components/DocumentView/InlineImage.tsx @@ -32,10 +32,6 @@ export async function InlineImage(props: InlineProps) { className={tcls( size !== 'line' ? ['inline-flex', 'max-w-[300px]', 'align-middle'] : null )} - style={{ - // Stabilize the height of the image. - height: 'calc-size(auto,round(down,size,1px))', - }} > {inline.data.caption Date: Wed, 19 Mar 2025 23:03:00 +0100 Subject: [PATCH 08/13] Stabilize search button --- packages/gitbook/playwright.config.ts | 3 +++ packages/gitbook/src/components/Search/SearchButton.tsx | 6 ++++-- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/gitbook/playwright.config.ts b/packages/gitbook/playwright.config.ts index 1f79e89b81..849d9538f6 100644 --- a/packages/gitbook/playwright.config.ts +++ b/packages/gitbook/playwright.config.ts @@ -18,5 +18,8 @@ export default defineConfig({ use: { trace: 'on-first-retry', screenshot: 'only-on-failure', + contextOptions: { + reducedMotion: 'reduce', + }, }, }); diff --git a/packages/gitbook/src/components/Search/SearchButton.tsx b/packages/gitbook/src/components/Search/SearchButton.tsx index 5cbc638646..ab8516d059 100644 --- a/packages/gitbook/src/components/Search/SearchButton.tsx +++ b/packages/gitbook/src/components/Search/SearchButton.tsx @@ -119,8 +119,10 @@ function Shortcut() {