diff --git a/test/e2e/specs/interactivity/__snapshots__/Router-styles-should-support-relative-URLs-in-referenced-style-sheets-1-chromium.png b/test/e2e/specs/interactivity/__snapshots__/Router-styles-should-support-relative-URLs-in-referenced-style-sheets-1-chromium.png
deleted file mode 100644
index 4bc0f7a6b1dd70..00000000000000
Binary files a/test/e2e/specs/interactivity/__snapshots__/Router-styles-should-support-relative-URLs-in-referenced-style-sheets-1-chromium.png and /dev/null differ
diff --git a/test/e2e/specs/interactivity/__snapshots__/Router-styles-should-support-relative-URLs-in-referenced-style-sheets-2-chromium.png b/test/e2e/specs/interactivity/__snapshots__/Router-styles-should-support-relative-URLs-in-referenced-style-sheets-2-chromium.png
deleted file mode 100644
index 7339cccdb78f28..00000000000000
Binary files a/test/e2e/specs/interactivity/__snapshots__/Router-styles-should-support-relative-URLs-in-referenced-style-sheets-2-chromium.png and /dev/null differ
diff --git a/test/e2e/specs/interactivity/__snapshots__/Router-styles-should-support-relative-URLs-in-referenced-style-sheets-3-chromium.png b/test/e2e/specs/interactivity/__snapshots__/Router-styles-should-support-relative-URLs-in-referenced-style-sheets-3-chromium.png
deleted file mode 100644
index 97943030eb1e88..00000000000000
Binary files a/test/e2e/specs/interactivity/__snapshots__/Router-styles-should-support-relative-URLs-in-referenced-style-sheets-3-chromium.png and /dev/null differ
diff --git a/test/e2e/specs/interactivity/__snapshots__/Router-styles-should-support-relative-URLs-in-referenced-style-sheets-4-chromium.png b/test/e2e/specs/interactivity/__snapshots__/Router-styles-should-support-relative-URLs-in-referenced-style-sheets-4-chromium.png
deleted file mode 100644
index b7c455784e8a42..00000000000000
Binary files a/test/e2e/specs/interactivity/__snapshots__/Router-styles-should-support-relative-URLs-in-referenced-style-sheets-4-chromium.png and /dev/null differ
diff --git a/test/e2e/specs/interactivity/__snapshots__/Router-styles-should-support-relative-URLs-in-referenced-style-sheets-5-chromium.png b/test/e2e/specs/interactivity/__snapshots__/Router-styles-should-support-relative-URLs-in-referenced-style-sheets-5-chromium.png
deleted file mode 100644
index b7c455784e8a42..00000000000000
Binary files a/test/e2e/specs/interactivity/__snapshots__/Router-styles-should-support-relative-URLs-in-referenced-style-sheets-5-chromium.png and /dev/null differ
diff --git a/test/e2e/specs/interactivity/router-styles.spec.ts b/test/e2e/specs/interactivity/router-styles.spec.ts
index 9ebeb110ebe0f2..de577c48424979 100644
--- a/test/e2e/specs/interactivity/router-styles.spec.ts
+++ b/test/e2e/specs/interactivity/router-styles.spec.ts
@@ -170,7 +170,45 @@ test.describe( 'Router styles', () => {
 		const csn = page.getByTestId( 'client-side navigation' );
 		const background = page.getByTestId( 'background-from-link' );
 
-		await expect( background ).toHaveScreenshot();
+		const expectBackgroundImage = async (
+			color: 'red' | 'green' | 'blue'
+		) => {
+			const assetPathPattern = `/router-styles-${ color }/assets/10x10_e2e_test_image_${ color }\\.png`;
+
+			// Match the path because the test origin varies between environments.
+			// Decoding the resolved URL also preserves the previous screenshots'
+			// guarantee that the referenced asset loads successfully.
+			await expect( background ).toHaveCSS(
+				'background-image',
+				new RegExp( assetPathPattern )
+			);
+			const imageLoaded = await background.evaluate(
+				async ( element ) => {
+					const match = getComputedStyle(
+						element
+					).backgroundImage.match( /^url\(["']?(.*?)["']?\)$/ );
+
+					if ( ! match ) {
+						return false;
+					}
+
+					const image = new Image();
+					image.src = match[ 1 ];
+
+					try {
+						await image.decode();
+					} catch {
+						return false;
+					}
+
+					return true;
+				}
+			);
+
+			expect( imageLoaded ).toBe( true );
+		};
+
+		await expect( background ).toHaveCSS( 'background-image', 'none' );
 
 		await page.getByTestId( 'link red' ).click();
 
@@ -178,25 +216,25 @@ test.describe( 'Router styles', () => {
 		// It should be visible again after a successful navigation.
 		await expect( csn ).toBeHidden();
 		await expect( csn ).toBeVisible();
-		await expect( background ).toHaveScreenshot();
+		await expectBackgroundImage( 'red' );
 
 		await page.getByTestId( 'link green' ).click();
 
 		await expect( csn ).toBeHidden();
 		await expect( csn ).toBeVisible();
-		await expect( background ).toHaveScreenshot();
+		await expectBackgroundImage( 'green' );
 
 		await page.getByTestId( 'link blue' ).click();
 
 		await expect( csn ).toBeHidden();
 		await expect( csn ).toBeVisible();
-		await expect( background ).toHaveScreenshot();
+		await expectBackgroundImage( 'blue' );
 
 		await page.getByTestId( 'link all' ).click();
 
 		await expect( csn ).toBeHidden();
 		await expect( csn ).toBeVisible();
-		await expect( background ).toHaveScreenshot();
+		await expectBackgroundImage( 'blue' );
 	} );
 
 	test( 'should update style tags with modified content', async ( {