Changeset 60910 for trunk/tests/phpunit/tests/media.php

Timestamp:

10/07/2025 06:22:02 AM (12 months ago)

Author:

westonruter

Message:

Media: Switch to enqueueing contain-intrinsic-size CSS fix for IMG tags having sizes=auto.

This deprecates the wp_print_auto_sizes_contain_css_fix() function running at wp_head priority 1, in favor of a wp_enqueue_img_auto_sizes_contain_css_fix() function which runs just before at wp_head priority 0. The latter function unhooks the former while also enqueueing an inline style to be printed with all other styles but up front to preserve the cascade. This eliminates directly printing the STYLE tag, which was a change done similarly before for the emoji styles. See #58775.

For backwards compatibility, the CSS can still be prevented from being enqueued/printed via:

remove_action( 'wp_head', 'wp_print_auto_sizes_contain_css_fix', 1 );

This change ensures that all styles are printed together using the correct API for emitting styles.

Developed in ​https://github.com/WordPress/wordpress-develop/pull/8954.

Follow-up to [59435].

Props westonruter, sabernhardt, SirLouen, flixos90, joemcgill, SergeyBiryukov, superpoincare.
See #62413.
Fixes #62731.

File:

• trunk/tests/phpunit/tests/media.php (modified) (4 diffs)

trunk/tests/phpunit/tests/media.php

@@ -29 +29 @@
         protected static $large_filename = 'test-image-large.jpg';
         protected static $post_ids;
+
+        /**
+         * @var WP_Styles|null
+         */
+        protected static $original_wp_styles;
 
         public static function wpSetUpBeforeClass( WP_UnitTest_Factory $factory ) {
@@ -67 +72 @@
         }
 
+        public function set_up(): void {
+                global $wp_styles;
+                self::$original_wp_styles = $wp_styles;
+                $wp_styles                = null;
+                parent::set_up();
+        }
+
         public static function wpTearDownAfterClass() {
                 $GLOBALS['_wp_additional_image_sizes'] = self::$_sizes;
@@ -80 +92 @@
          */
         public function tear_down() {
-                global $_wp_current_template_id, $_wp_current_template_content;
+                global $_wp_current_template_id, $_wp_current_template_content, $wp_styles;
                 unset( $_wp_current_template_id, $_wp_current_template_content );
+
+                $wp_styles = self::$original_wp_styles;
 
                 parent::tear_down();
@@ -6578 +6592 @@
 
         /**
+         * Provides data to test wp_enqueue_img_auto_sizes_contain_css_fix().
+         *
+         * @return array<string, array>
+         */
+        public function data_provider_data_provider_to_test_wp_enqueue_img_auto_sizes_contain_css_fix(): array {
+                return array(
+                        'default'                     => array(
+                                'set_up'   => null,
+                                'expected' => true,
+                        ),
+                        'filtered_off'                => array(
+                                'set_up'   => static function (): void {
+                                        add_filter( 'wp_img_tag_add_auto_sizes', '__return_false' );
+                                },
+                                'expected' => false,
+                        ),
+                        'filtered_on'                 => array(
+                                'set_up'   => static function (): void {
+                                        add_filter( 'wp_img_tag_add_auto_sizes', '__return_false' );
+                                        add_filter( 'wp_img_tag_add_auto_sizes', '__return_true', 100 );
+                                },
+                                'expected' => true,
+                        ),
+                        'deprecated_function_removed' => array(
+                                'set_up'   => static function (): void {
+                                        remove_action( 'wp_head', 'wp_print_auto_sizes_contain_css_fix', 1 );
+                                },
+                                'expected' => false,
+                        ),
+                        'new_function_removed'        => array(
+                                'set_up'              => static function (): void {
+                                        remove_action( 'wp_head', 'wp_enqueue_img_auto_sizes_contain_css_fix', 0 );
+                                },
+                                'expected'            => false,
+                                'expected_deprecated' => 'wp_print_auto_sizes_contain_css_fix',
+                        ),
+                        'both_functions_removed'      => array(
+                                'set_up'   => static function (): void {
+                                        remove_action( 'wp_head', 'wp_enqueue_img_auto_sizes_contain_css_fix', 0 );
+                                        remove_action( 'wp_head', 'wp_print_auto_sizes_contain_css_fix', 1 );
+                                },
+                                'expected' => false,
+                        ),
+                );
+        }
+
+        /**
+         * Tests that IMG auto-sizes CSS fix is enqueued (and printed) when expected.
+         *
+         * @covers ::wp_enqueue_img_auto_sizes_contain_css_fix
+         * @ticket 62731
+         *
+         * @dataProvider data_provider_data_provider_to_test_wp_enqueue_img_auto_sizes_contain_css_fix
+         */
+        public function test_wp_enqueue_img_auto_sizes_contain_css_fix( ?Closure $set_up, bool $expected, ?string $expected_deprecated = null ): void {
+                if ( $set_up ) {
+                        $set_up();
+                }
+                if ( isset( $expected_deprecated ) ) {
+                        $this->setExpectedDeprecated( $expected_deprecated );
+                }
+
+                $this->assertCount( 0, wp_styles()->queue );
+                wp_enqueue_style( 'very-early-enqueued', home_url( '/very-early-enqueued.css' ) );
+                add_action(
+                        'wp_enqueue_scripts',
+                        static function () {
+                                wp_enqueue_style( 'wp-block-library' );
+                        }
+                );
+
+                $wp_head_output           = get_echo( 'wp_head' );
+                $html_processor           = new WP_HTML_Tag_Processor( $wp_head_output );
+                $found_style_text_content = null;
+                while ( $html_processor->next_tag( array( 'tag_name' => 'STYLE' ) ) ) {
+                        if ( $html_processor->get_attribute( 'id' ) === 'wp-img-auto-sizes-contain-inline-css' ) {
+                                $found_style_text_content = $html_processor->get_modifiable_text();
+                                break;
+                        }
+                }
+
+                $enqueued = wp_styles()->queue;
+                if ( $expected ) {
+                        $this->assertSame( 'wp-img-auto-sizes-contain', array_shift( $enqueued ) );
+                        $this->assertIsString( $found_style_text_content );
+                        $this->assertStringContainsString( 'contain-intrinsic-size', $found_style_text_content );
+                } else {
+                        $this->assertNull( $found_style_text_content );
+                }
+                $this->assertSame( 'very-early-enqueued', array_shift( $enqueued ) );
+                $this->assertContains( 'wp-emoji-styles', $enqueued );
+                $this->assertContains( 'wp-block-library', $enqueued );
+        }
+
+        /**
          * Data provider for test_wp_img_tag_add_auto_sizes().
          *