Commit eb03f67b68e for woocommerce

commit eb03f67b68eaf7793a2cd8d5a87a7cf376109055
Author: Vlad Olaru <vlad.olaru@automattic.com>
Date:   Mon Sep 14 11:24:13 2026 +0300

    [tests] Pin the colour picker swatch's painted box in both WP version states (#68671)

    test(settings): Pin the colour swatch's painted box in both WP version states

    The Email settings screen renders five classic colour fields, and a
    WP-version compatibility rule resizes their swatches. Trunk's test opened
    that screen, added the `wc-wp-version-gte-70` body class and asserted the
    first swatch painted 40x40. It covered the WP 7.0 state only.

    This keeps that approach and the rendered-box measurement, and adds the
    state below it. With only `wc-wp-version-gte-53` the swatch is declared
    30x30 with the default `content-box`, so its 1px border paints outside
    the box and it measures 32x32. With `wc-wp-version-gte-70` it is declared
    40x40 *and* switched to `box-sizing: border-box`, so it measures exactly
    40x40 rather than 42x42.

    That second half is why the measurement has to be of the painted box.
    `toHaveCSS( 'height' )` reads the declared value, so it returns `40px`
    whether or not `box-sizing: border-box` is present -- it cannot see the
    defect the rule exists to prevent. `boundingBox()` can, and the batch's
    second mutation demonstrates it: removing `box-sizing` turns this test red
    at 42 against 40, and would leave a declared-value assertion green.

    The guard around `boundingBox()` is replaced by `toMatchObject`, which
    drops the conditional the ESLint Playwright rules flag without giving up
    the measurement.

    This deviates from a faithful extraction of the migration branch, on the
    author's decision. That branch rewrote this test to mount its own markup
    and assert declared CSS, on the stated grounds that "Email Improvements no
    longer renders the classic color fields". That premise is false: the five
    fields are registered in class-wc-settings-emails.php behind
    `! $block_email_editor_enabled`, and `block_email_editor` is not enabled
    by default. Measured on a WP 7.1 environment, the screen renders five
    `.colorpickpreview` elements.

    Refs TESTOPS-288
    Refs #68046

    Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>

diff --git a/plugins/woocommerce/changelog/testops-288-colour-picker b/plugins/woocommerce/changelog/testops-288-colour-picker
new file mode 100644
index 00000000000..34fcca5280c
--- /dev/null
+++ b/plugins/woocommerce/changelog/testops-288-colour-picker
@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+Comment: Strengthen the colour picker swatch E2E test to pin the painted box in both the pre-WP 7.0 and WP 7.0 states, so the box-sizing half of the compatibility rule is covered.
+
diff --git a/plugins/woocommerce/tests/e2e/tests/settings/colour-picker-swatch-height.spec.ts b/plugins/woocommerce/tests/e2e/tests/settings/colour-picker-swatch-height.spec.ts
index 86ecd80317e..4e9dc9d4d19 100644
--- a/plugins/woocommerce/tests/e2e/tests/settings/colour-picker-swatch-height.spec.ts
+++ b/plugins/woocommerce/tests/e2e/tests/settings/colour-picker-swatch-height.spec.ts
@@ -12,21 +12,40 @@ test.describe( 'Colour picker swatch height on Email settings', () => {
 	} ) => {
 		await page.goto( 'wp-admin/admin.php?page=wc-settings&tab=email' );

-		// Add the WP 7.0+ body class to simulate WP 7.0 environment.
-		await page.evaluate( () => {
-			document.body.classList.add( 'wc-wp-version-gte-70' );
-		} );
+		await expect( page.locator( 'body' ) ).toHaveClass(
+			/wc-wp-version-gte-53/
+		);

+		// The swatch below is the one the settings screen renders, not a mounted
+		// fixture, so the assertions also prove the classic colour fields are still
+		// on this screen.
 		const swatch = page.locator( '.colorpickpreview' ).first();
 		await expect( swatch ).toBeVisible();

-		const swatchBox = await swatch.boundingBox();
-		if ( ! swatchBox ) {
-			throw new Error( 'Could not get bounding box for swatch' );
-		}
+		// Measure the painted box rather than the declared CSS. The swatch carries a
+		// 1px border, so the two differ wherever the rule sets no box-sizing, and
+		// making them agree at 40px is the whole point of the WP 7.0 rule.
+		await page.evaluate( () => {
+			document.body.classList.remove( 'wc-wp-version-gte-70' );
+		} );
+
+		// Pre-WP 7.0: 30px declared, content-box, so 32px painted. This figure is for
+		// the wide layout; the same rule has a max-width: 782px branch that declares
+		// 40px, which would paint 42px.
+		expect( await swatch.boundingBox() ).toMatchObject( {
+			height: 32,
+			width: 32,
+		} );
+
+		await page.evaluate( () => {
+			document.body.classList.add( 'wc-wp-version-gte-70' );
+		} );

-		// With the gte-70 class, the swatch should be 40px to match WP 7.0 input height.
-		expect( swatchBox.height ).toBe( 40 );
-		expect( swatchBox.width ).toBe( 40 );
+		// WP 7.0+: 40px declared with box-sizing: border-box, so 40px painted, which
+		// is what matches the taller WP 7.0 inputs.
+		expect( await swatch.boundingBox() ).toMatchObject( {
+			height: 40,
+			width: 40,
+		} );
 	} );
 } );