WordPress.org
Get WordPress

Make WordPress Core

Changeset 59435 for branches/6.7


Ignore:
Timestamp:
11/20/2024 02:31:02 PM (21 months ago)
Author:
desrosj
Message:

Media: Avoid images with sizes=auto to be displayed downsized in supporting browsers.

Based on the user agent stylesheet rules outlined in ​https://html.spec.whatwg.org/multipage/rendering.html#img-contain-size, images that have sizes=auto while applying width: auto or width: fit-content would be constrained to only 300px width.

This changeset overrides said user agent stylesheet rule with a much larger constraint, to avoid the problem.

Additionally, it introduces a filter wp_img_tag_add_auto_sizes which can be used to opt out of the functionality, as an additional measure.

Reviewed by desrosj, joemcgill.
Merges [59415] to the 6.7 branch.

Props joemcgill, flixos90, dooperweb, SirLouen, azaozz, mukesh27, apermo.
Fixes #62413.
See #61847, #62345.

Location:
branches/6.7
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • branches/6.7

  • branches/6.7/src/wp-includes/default-filters.php

    r59120 r59435  
    612612add_filter( 'style_loader_src', 'wp_style_loader_src', 10, 2 );
    613613
     614add_action( 'wp_head', 'wp_print_auto_sizes_contain_css_fix', 1 );
    614615add_action( 'wp_head', 'wp_maybe_inline_styles', 1 ); // Run for styles enqueued in <head>.
    615616add_action( 'wp_footer', 'wp_maybe_inline_styles', 1 ); // Run for late-loaded styles in the footer.

  • branches/6.7/src/wp-includes/media.php

    r59367 r59435  
    11381138                }
    11391139
     1140                /** This filter is documented in wp-includes/media.php */
     1141                $add_auto_sizes = apply_filters( 'wp_img_tag_add_auto_sizes', true );
     1142
    11401143                // Adds 'auto' to the sizes attribute if applicable.
    11411144                if (
     1145                        $add_auto_sizes &&
    11421146                        isset( $attr['loading'] ) &&
    11431147                        'lazy' === $attr['loading'] &&
    … …  
    19861990 */
    19871991function wp_img_tag_add_auto_sizes( string $image ): string {
     1992        /**
     1993         * Filters whether auto-sizes for lazy loaded images is enabled.
     1994         *
     1995         * @since 6.7.1
     1996         *
     1997         * @param boolean $enabled Whether auto-sizes for lazy loaded images is enabled.
     1998         */
     1999        if ( ! apply_filters( 'wp_img_tag_add_auto_sizes', true ) ) {
     2000                return $image;
     2001        }
     2002
    19882003        $processor = new WP_HTML_Tag_Processor( $image );
    19892004
    … …  
    19942009
    19952010        // Bail early if the image is not lazy-loaded.
    1996         $value = $processor->get_attribute( 'loading' );
    1997         if ( ! is_string( $value ) || 'lazy' !== strtolower( trim( $value, " \t\f\r\n" ) ) ) {
     2011        $loading = $processor->get_attribute( 'loading' );
     2012        if ( ! is_string( $loading ) || 'lazy' !== strtolower( trim( $loading, " \t\f\r\n" ) ) ) {
     2013                return $image;
     2014        }
     2015
     2016        /*
     2017         * Bail early if the image doesn't have a width attribute.
     2018         * Per WordPress Core itself, lazy-loaded images should always have a width attribute.
     2019         * However, it is possible that lazy-loading could be added by a plugin, where we don't have that guarantee.
     2020         * As such, it still makes sense to ensure presence of a width attribute here in order to use `sizes=auto`.
     2021         */
     2022        $width = $processor->get_attribute( 'width' );
     2023        if ( ! is_string( $width ) || '' === $width ) {
    19982024                return $image;
    19992025        }
    … …  
    20282054        list( $first_size ) = explode( ',', $sizes_attr, 2 );
    20292055        return 'auto' === strtolower( trim( $first_size, " \t\f\r\n" ) );
     2056}
     2057
     2058/**
     2059 * Prints a CSS rule to fix potential visual issues with images using `sizes=auto`.
     2060 *
     2061 * This rule overrides the similar rule in the default user agent stylesheet, to avoid images that use e.g.
     2062 * `width: auto` or `width: fit-content` to appear smaller.
     2063 *
     2064 * @since 6.7.1
     2065 * @see https://html.spec.whatwg.org/multipage/rendering.html#img-contain-size
     2066 * @see https://core.trac.wordpress.org/ticket/62413
     2067 */
     2068function wp_print_auto_sizes_contain_css_fix() {
     2069        /** This filter is documented in wp-includes/media.php */
     2070        $add_auto_sizes = apply_filters( 'wp_img_tag_add_auto_sizes', true );
     2071        if ( ! $add_auto_sizes ) {
     2072                return;
     2073        }
     2074
     2075        ?>
     2076        <style>img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px }</style>
     2077        <?php
    20302078}
    20312079

  • branches/6.7/tests/phpunit/tests/media.php

    r59381 r59435  
    62026202
    62036203        /**
     6204         * Test generated markup for an image with no width does not get auto-sizes.
     6205         *
     6206         * @ticket 61847
     6207         * @ticket 62413
     6208         */
     6209        public function test_image_without_width_does_not_have_auto_sizes() {
     6210                // Disable automatic width calculation.
     6211                add_filter(
     6212                        'wp_get_attachment_image_src',
     6213                        function ( $img_data ) {
     6214                                return array( $img_data[0], null, null );
     6215                        }
     6216                );
     6217
     6218                $markup = wp_get_attachment_image( self::$large_id, 'large', false, array( 'loading' => false ) );
     6219
     6220                $this->assertStringNotContainsString(
     6221                        'width="',
     6222                        $markup,
     6223                        'Failed confirming the test markup did not include a width attribute.'
     6224                );
     6225
     6226                $this->assertStringNotContainsString(
     6227                        'sizes="auto, ',
     6228                        $markup,
     6229                        'Failed asserting that the sizes attribute for an image without a width does not include "auto".'
     6230                );
     6231        }
     6232
     6233        /**
    62046234         * Test content filtered markup with lazy loading gets auto-sizes.
    62056235         *
    … …  
    62346264                        wp_filter_content_tags( get_image_tag( self::$large_id, '', '', '', 'large' ) ),
    62356265                        'Failed asserting that the sizes attribute for a content image without lazy loading does not include "auto" with the expected sizes.'
     6266                );
     6267        }
     6268
     6269        /**
     6270         * Test content filtered markup with lazy loading does not get auto-sizes when disabled.
     6271         *
     6272         * @ticket 61847
     6273         * @ticket 62413
     6274         *
     6275         * @covers ::wp_img_tag_add_auto_sizes
     6276         */
     6277        public function test_content_image_does_not_have_auto_sizes_when_disabled() {
     6278                // Force lazy loading attribute.
     6279                add_filter( 'wp_img_tag_add_loading_attr', '__return_true' );
     6280                // Disable auto-sizes attribute.
     6281                add_filter( 'wp_img_tag_add_auto_sizes', '__return_false' );
     6282
     6283                $this->assertStringNotContainsString(
     6284                        'sizes="auto, ',
     6285                        wp_filter_content_tags( get_image_tag( self::$large_id, '', '', '', 'large' ) ),
     6286                        'Failed asserting that the sizes attribute for a content image with lazy loading does not include "auto" when disabled.'
     6287                );
     6288        }
     6289
     6290        /**
     6291         * Test generated image markup with lazy loading does not get auto-sizes when disabled.
     6292         *
     6293         * @ticket 61847
     6294         * @ticket 62413
     6295         *
     6296         * @covers ::wp_img_tag_add_auto_sizes
     6297         */
     6298        public function test_generated_image_does_not_have_auto_sizes_when_disabled() {
     6299                // Disable auto-sizes attribute.
     6300                add_filter( 'wp_img_tag_add_auto_sizes', '__return_false' );
     6301
     6302                $this->assertStringNotContainsString(
     6303                        'sizes="auto, ',
     6304                        wp_get_attachment_image( self::$large_id, 'large', false, array( 'loading' => 'lazy' ) ),
     6305                        'Failed asserting that the sizes attribute for an image with lazy loading does not include "auto" when disabled.'
    62366306                );
    62376307        }
    … …  
    63866456                return array(
    63876457                        'expected_with_single_quoted_attributes'       => array(
    6388                                 'input'    => "<img src='https://example.com/foo-300x225.jpg' srcset='https://example.com/foo-300x225.jpg 300w, https://example.com/foo-1024x768.jpg 1024w, https://example.com/foo-768x576.jpg 768w, https://example.com/foo-1536x1152.jpg 1536w, https://example.com/foo-2048x1536.jpg 2048w' sizes='(max-width: 650px) 100vw, 650px' loading='lazy'>",
    6389                                 'expected' => "<img src='https://example.com/foo-300x225.jpg' srcset='https://example.com/foo-300x225.jpg 300w, https://example.com/foo-1024x768.jpg 1024w, https://example.com/foo-768x576.jpg 768w, https://example.com/foo-1536x1152.jpg 1536w, https://example.com/foo-2048x1536.jpg 2048w' sizes=\"auto, (max-width: 650px) 100vw, 650px\" loading='lazy'>",
     6458                                'input'    => "<img width='300' height='225' src='https://example.com/foo-300x225.jpg' srcset='https://example.com/foo-300x225.jpg 300w, https://example.com/foo-1024x768.jpg 1024w, https://example.com/foo-768x576.jpg 768w, https://example.com/foo-1536x1152.jpg 1536w, https://example.com/foo-2048x1536.jpg 2048w' sizes='(max-width: 650px) 100vw, 650px' loading='lazy'>",
     6459                                'expected' => "<img width='300' height='225' src='https://example.com/foo-300x225.jpg' srcset='https://example.com/foo-300x225.jpg 300w, https://example.com/foo-1024x768.jpg 1024w, https://example.com/foo-768x576.jpg 768w, https://example.com/foo-1536x1152.jpg 1536w, https://example.com/foo-2048x1536.jpg 2048w' sizes=\"auto, (max-width: 650px) 100vw, 650px\" loading='lazy'>",
    63906460                        ),
    63916461                        'expected_with_data_sizes_attribute'           => array(
     6462                                'input'    => '<img width="300" height="225" data-tshirt-sizes="S M L" src="https://example.com/foo-300x225.jpg" srcset="https://example.com/foo-300x225.jpg 300w, https://example.com/foo-1024x768.jpg 1024w, https://example.com/foo-768x576.jpg 768w, https://example.com/foo-1536x1152.jpg 1536w, https://example.com/foo-2048x1536.jpg 2048w" sizes="(max-width: 650px) 100vw, 650px" loading="lazy">',
     6463                                'expected' => '<img width="300" height="225" data-tshirt-sizes="S M L" src="https://example.com/foo-300x225.jpg" srcset="https://example.com/foo-300x225.jpg 300w, https://example.com/foo-1024x768.jpg 1024w, https://example.com/foo-768x576.jpg 768w, https://example.com/foo-1536x1152.jpg 1536w, https://example.com/foo-2048x1536.jpg 2048w" sizes="auto, (max-width: 650px) 100vw, 650px" loading="lazy">',
     6464                        ),
     6465                        'expected_with_data_sizes_attribute_already_present' => array(
     6466                                'input'    => '<img width="300" height="225" data-tshirt-sizes="S M L" src="https://example.com/foo-300x225.jpg" srcset="https://example.com/foo-300x225.jpg 300w, https://example.com/foo-1024x768.jpg 1024w, https://example.com/foo-768x576.jpg 768w, https://example.com/foo-1536x1152.jpg 1536w, https://example.com/foo-2048x1536.jpg 2048w" sizes="AUTO, (max-width: 650px) 100vw, 650px" loading="lazy">',
     6467                                'expected' => '<img width="300" height="225" data-tshirt-sizes="S M L" src="https://example.com/foo-300x225.jpg" srcset="https://example.com/foo-300x225.jpg 300w, https://example.com/foo-1024x768.jpg 1024w, https://example.com/foo-768x576.jpg 768w, https://example.com/foo-1536x1152.jpg 1536w, https://example.com/foo-2048x1536.jpg 2048w" sizes="AUTO, (max-width: 650px) 100vw, 650px" loading="lazy">',
     6468                        ),
     6469                        'not_expected_with_loading_lazy_in_attr_value' => array(
     6470                                'input'    => '<img width="300" height="225" src="https://example.com/foo-300x225.jpg" srcset="https://example.com/foo-300x225.jpg 300w, https://example.com/foo-1024x768.jpg 1024w, https://example.com/foo-768x576.jpg 768w, https://example.com/foo-1536x1152.jpg 1536w, https://example.com/foo-2048x1536.jpg 2048w" sizes="(max-width: 650px) 100vw, 650px" alt=\'This is the LCP image and it should not get loading="lazy"!\'>',
     6471                                'expected' => '<img width="300" height="225" src="https://example.com/foo-300x225.jpg" srcset="https://example.com/foo-300x225.jpg 300w, https://example.com/foo-1024x768.jpg 1024w, https://example.com/foo-768x576.jpg 768w, https://example.com/foo-1536x1152.jpg 1536w, https://example.com/foo-2048x1536.jpg 2048w" sizes="(max-width: 650px) 100vw, 650px" alt=\'This is the LCP image and it should not get loading="lazy"!\'>',
     6472                        ),
     6473                        'not_expected_with_data_loading_attribute_present' => array(
     6474                                'input'    => '<img width="300" height="225" src="https://example.com/foo-300x225.jpg" srcset="https://example.com/foo-300x225.jpg 300w, https://example.com/foo-1024x768.jpg 1024w, https://example.com/foo-768x576.jpg 768w, https://example.com/foo-1536x1152.jpg 1536w, https://example.com/foo-2048x1536.jpg 2048w" sizes="(max-width: 650px) 100vw, 650px" data-removed-loading="lazy">',
     6475                                'expected' => '<img width="300" height="225" src="https://example.com/foo-300x225.jpg" srcset="https://example.com/foo-300x225.jpg 300w, https://example.com/foo-1024x768.jpg 1024w, https://example.com/foo-768x576.jpg 768w, https://example.com/foo-1536x1152.jpg 1536w, https://example.com/foo-2048x1536.jpg 2048w" sizes="(max-width: 650px) 100vw, 650px" data-removed-loading="lazy">',
     6476                        ),
     6477                        'expected_when_attributes_have_spaces_after_them' => array(
     6478                                'input'    => '<img width="300" height="225" src = "https://example.com/foo-300x225.jpg" srcset = "https://example.com/foo-300x225.jpg 300w, https://example.com/foo-1024x768.jpg 1024w, https://example.com/foo-768x576.jpg 768w, https://example.com/foo-1536x1152.jpg 1536w, https://example.com/foo-2048x1536.jpg 2048w" sizes = "(max-width: 650px) 100vw, 650px" loading = "lazy">',
     6479                                'expected' => '<img width="300" height="225" src = "https://example.com/foo-300x225.jpg" srcset = "https://example.com/foo-300x225.jpg 300w, https://example.com/foo-1024x768.jpg 1024w, https://example.com/foo-768x576.jpg 768w, https://example.com/foo-1536x1152.jpg 1536w, https://example.com/foo-2048x1536.jpg 2048w" sizes="auto, (max-width: 650px) 100vw, 650px" loading = "lazy">',
     6480                        ),
     6481                        'expected_when_attributes_are_upper_case'      => array(
     6482                                'input'    => '<IMG WIDTH="300" HEIGHT="225" SRC="https://example.com/foo-300x225.jpg" SRCSET="https://example.com/foo-300x225.jpg 300w, https://example.com/foo-1024x768.jpg 1024w, https://example.com/foo-768x576.jpg 768w, https://example.com/foo-1536x1152.jpg 1536w, https://example.com/foo-2048x1536.jpg 2048w" SIZES="(max-width: 650px) 100vw, 650px" LOADING="LAZY">',
     6483                                'expected' => '<IMG WIDTH="300" HEIGHT="225" SRC="https://example.com/foo-300x225.jpg" SRCSET="https://example.com/foo-300x225.jpg 300w, https://example.com/foo-1024x768.jpg 1024w, https://example.com/foo-768x576.jpg 768w, https://example.com/foo-1536x1152.jpg 1536w, https://example.com/foo-2048x1536.jpg 2048w" sizes="auto, (max-width: 650px) 100vw, 650px" LOADING="LAZY">',
     6484                        ),
     6485                        'expected_when_loading_lazy_lacks_quotes'      => array(
     6486                                'input'    => '<img width="300" height="225" src="https://example.com/foo-300x225.jpg" srcset="https://example.com/foo-300x225.jpg 300w, https://example.com/foo-1024x768.jpg 1024w, https://example.com/foo-768x576.jpg 768w, https://example.com/foo-1536x1152.jpg 1536w, https://example.com/foo-2048x1536.jpg 2048w" sizes="(max-width: 650px) 100vw, 650px" loading=lazy>',
     6487                                'expected' => '<img width="300" height="225" src="https://example.com/foo-300x225.jpg" srcset="https://example.com/foo-300x225.jpg 300w, https://example.com/foo-1024x768.jpg 1024w, https://example.com/foo-768x576.jpg 768w, https://example.com/foo-1536x1152.jpg 1536w, https://example.com/foo-2048x1536.jpg 2048w" sizes="auto, (max-width: 650px) 100vw, 650px" loading=lazy>',
     6488                        ),
     6489                        'expected_when_loading_lazy_has_whitespace'    => array(
     6490                                'input'    => '<img width="300" height="225" src="https://example.com/foo-300x225.jpg" srcset="https://example.com/foo-300x225.jpg 300w, https://example.com/foo-1024x768.jpg 1024w, https://example.com/foo-768x576.jpg 768w, https://example.com/foo-1536x1152.jpg 1536w, https://example.com/foo-2048x1536.jpg 2048w" sizes="(max-width: 650px) 100vw, 650px" loading=" lazy ">',
     6491                                'expected' => '<img width="300" height="225" src="https://example.com/foo-300x225.jpg" srcset="https://example.com/foo-300x225.jpg 300w, https://example.com/foo-1024x768.jpg 1024w, https://example.com/foo-768x576.jpg 768w, https://example.com/foo-1536x1152.jpg 1536w, https://example.com/foo-2048x1536.jpg 2048w" sizes="auto, (max-width: 650px) 100vw, 650px" loading=" lazy ">',
     6492                        ),
     6493                        'not_expected_when_sizes_auto_lacks_quotes'    => array(
     6494                                'input'    => '<img width="300" height="225" src="https://example.com/foo-300x225.jpg" srcset="https://example.com/foo-300x225.jpg 300w, https://example.com/foo-1024x768.jpg 1024w, https://example.com/foo-768x576.jpg 768w, https://example.com/foo-1536x1152.jpg 1536w, https://example.com/foo-2048x1536.jpg 2048w" sizes=auto loading="lazy">',
     6495                                'expected' => '<img width="300" height="225" src="https://example.com/foo-300x225.jpg" srcset="https://example.com/foo-300x225.jpg 300w, https://example.com/foo-1024x768.jpg 1024w, https://example.com/foo-768x576.jpg 768w, https://example.com/foo-1536x1152.jpg 1536w, https://example.com/foo-2048x1536.jpg 2048w" sizes=auto loading="lazy">',
     6496                        ),
     6497                        'not_expected_when_img_lacks_dimensions'       => array(
    63926498                                'input'    => '<img data-tshirt-sizes="S M L" src="https://example.com/foo-300x225.jpg" srcset="https://example.com/foo-300x225.jpg 300w, https://example.com/foo-1024x768.jpg 1024w, https://example.com/foo-768x576.jpg 768w, https://example.com/foo-1536x1152.jpg 1536w, https://example.com/foo-2048x1536.jpg 2048w" sizes="(max-width: 650px) 100vw, 650px" loading="lazy">',
    6393                                 'expected' => '<img data-tshirt-sizes="S M L" src="https://example.com/foo-300x225.jpg" srcset="https://example.com/foo-300x225.jpg 300w, https://example.com/foo-1024x768.jpg 1024w, https://example.com/foo-768x576.jpg 768w, https://example.com/foo-1536x1152.jpg 1536w, https://example.com/foo-2048x1536.jpg 2048w" sizes="auto, (max-width: 650px) 100vw, 650px" loading="lazy">',
    6394                         ),
    6395                         'expected_with_data_sizes_attribute_already_present' => array(
    6396                                 'input'    => '<img data-tshirt-sizes="S M L" src="https://example.com/foo-300x225.jpg" srcset="https://example.com/foo-300x225.jpg 300w, https://example.com/foo-1024x768.jpg 1024w, https://example.com/foo-768x576.jpg 768w, https://example.com/foo-1536x1152.jpg 1536w, https://example.com/foo-2048x1536.jpg 2048w" sizes="AUTO, (max-width: 650px) 100vw, 650px" loading="lazy">',
    6397                                 'expected' => '<img data-tshirt-sizes="S M L" src="https://example.com/foo-300x225.jpg" srcset="https://example.com/foo-300x225.jpg 300w, https://example.com/foo-1024x768.jpg 1024w, https://example.com/foo-768x576.jpg 768w, https://example.com/foo-1536x1152.jpg 1536w, https://example.com/foo-2048x1536.jpg 2048w" sizes="AUTO, (max-width: 650px) 100vw, 650px" loading="lazy">',
    6398                         ),
    6399                         'not_expected_with_loading_lazy_in_attr_value' => array(
    6400                                 'input'    => '<img src="https://example.com/foo-300x225.jpg" srcset="https://example.com/foo-300x225.jpg 300w, https://example.com/foo-1024x768.jpg 1024w, https://example.com/foo-768x576.jpg 768w, https://example.com/foo-1536x1152.jpg 1536w, https://example.com/foo-2048x1536.jpg 2048w" sizes="(max-width: 650px) 100vw, 650px" alt=\'This is the LCP image and it should not get loading="lazy"!\'>',
    6401                                 'expected' => '<img src="https://example.com/foo-300x225.jpg" srcset="https://example.com/foo-300x225.jpg 300w, https://example.com/foo-1024x768.jpg 1024w, https://example.com/foo-768x576.jpg 768w, https://example.com/foo-1536x1152.jpg 1536w, https://example.com/foo-2048x1536.jpg 2048w" sizes="(max-width: 650px) 100vw, 650px" alt=\'This is the LCP image and it should not get loading="lazy"!\'>',
    6402                         ),
    6403                         'not_expected_with_data_loading_attribute_present' => array(
    6404                                 'input'    => '<img src="https://example.com/foo-300x225.jpg" srcset="https://example.com/foo-300x225.jpg 300w, https://example.com/foo-1024x768.jpg 1024w, https://example.com/foo-768x576.jpg 768w, https://example.com/foo-1536x1152.jpg 1536w, https://example.com/foo-2048x1536.jpg 2048w" sizes="(max-width: 650px) 100vw, 650px" data-removed-loading="lazy">',
    6405                                 'expected' => '<img src="https://example.com/foo-300x225.jpg" srcset="https://example.com/foo-300x225.jpg 300w, https://example.com/foo-1024x768.jpg 1024w, https://example.com/foo-768x576.jpg 768w, https://example.com/foo-1536x1152.jpg 1536w, https://example.com/foo-2048x1536.jpg 2048w" sizes="(max-width: 650px) 100vw, 650px" data-removed-loading="lazy">',
    6406                         ),
    6407                         'expected_when_attributes_have_spaces_after_them' => array(
    6408                                 'input'    => '<img src = "https://example.com/foo-300x225.jpg" srcset = "https://example.com/foo-300x225.jpg 300w, https://example.com/foo-1024x768.jpg 1024w, https://example.com/foo-768x576.jpg 768w, https://example.com/foo-1536x1152.jpg 1536w, https://example.com/foo-2048x1536.jpg 2048w" sizes = "(max-width: 650px) 100vw, 650px" loading = "lazy">',
    6409                                 'expected' => '<img src = "https://example.com/foo-300x225.jpg" srcset = "https://example.com/foo-300x225.jpg 300w, https://example.com/foo-1024x768.jpg 1024w, https://example.com/foo-768x576.jpg 768w, https://example.com/foo-1536x1152.jpg 1536w, https://example.com/foo-2048x1536.jpg 2048w" sizes="auto, (max-width: 650px) 100vw, 650px" loading = "lazy">',
    6410                         ),
    6411                         'expected_when_attributes_are_upper_case'      => array(
    6412                                 'input'    => '<IMG SRC="https://example.com/foo-300x225.jpg" SRCSET="https://example.com/foo-300x225.jpg 300w, https://example.com/foo-1024x768.jpg 1024w, https://example.com/foo-768x576.jpg 768w, https://example.com/foo-1536x1152.jpg 1536w, https://example.com/foo-2048x1536.jpg 2048w" SIZES="(max-width: 650px) 100vw, 650px" LOADING="LAZY">',
    6413                                 'expected' => '<IMG SRC="https://example.com/foo-300x225.jpg" SRCSET="https://example.com/foo-300x225.jpg 300w, https://example.com/foo-1024x768.jpg 1024w, https://example.com/foo-768x576.jpg 768w, https://example.com/foo-1536x1152.jpg 1536w, https://example.com/foo-2048x1536.jpg 2048w" sizes="auto, (max-width: 650px) 100vw, 650px" LOADING="LAZY">',
    6414                         ),
    6415                         'expected_when_loading_lazy_lacks_quotes'      => array(
    6416                                 'input'    => '<img src="https://example.com/foo-300x225.jpg" srcset="https://example.com/foo-300x225.jpg 300w, https://example.com/foo-1024x768.jpg 1024w, https://example.com/foo-768x576.jpg 768w, https://example.com/foo-1536x1152.jpg 1536w, https://example.com/foo-2048x1536.jpg 2048w" sizes="(max-width: 650px) 100vw, 650px" loading=lazy>',
    6417                                 'expected' => '<img src="https://example.com/foo-300x225.jpg" srcset="https://example.com/foo-300x225.jpg 300w, https://example.com/foo-1024x768.jpg 1024w, https://example.com/foo-768x576.jpg 768w, https://example.com/foo-1536x1152.jpg 1536w, https://example.com/foo-2048x1536.jpg 2048w" sizes="auto, (max-width: 650px) 100vw, 650px" loading=lazy>',
    6418                         ),
    6419                         'expected_when_loading_lazy_has_whitespace'    => array(
    6420                                 'input'    => '<img src="https://example.com/foo-300x225.jpg" srcset="https://example.com/foo-300x225.jpg 300w, https://example.com/foo-1024x768.jpg 1024w, https://example.com/foo-768x576.jpg 768w, https://example.com/foo-1536x1152.jpg 1536w, https://example.com/foo-2048x1536.jpg 2048w" sizes="(max-width: 650px) 100vw, 650px" loading=" lazy ">',
    6421                                 'expected' => '<img src="https://example.com/foo-300x225.jpg" srcset="https://example.com/foo-300x225.jpg 300w, https://example.com/foo-1024x768.jpg 1024w, https://example.com/foo-768x576.jpg 768w, https://example.com/foo-1536x1152.jpg 1536w, https://example.com/foo-2048x1536.jpg 2048w" sizes="auto, (max-width: 650px) 100vw, 650px" loading=" lazy ">',
    6422                         ),
    6423                         'not_expected_when_sizes_auto_lacks_quotes'    => array(
    6424                                 'input'    => '<img src="https://example.com/foo-300x225.jpg" srcset="https://example.com/foo-300x225.jpg 300w, https://example.com/foo-1024x768.jpg 1024w, https://example.com/foo-768x576.jpg 768w, https://example.com/foo-1536x1152.jpg 1536w, https://example.com/foo-2048x1536.jpg 2048w" sizes=auto loading="lazy">',
    6425                                 'expected' => '<img src="https://example.com/foo-300x225.jpg" srcset="https://example.com/foo-300x225.jpg 300w, https://example.com/foo-1024x768.jpg 1024w, https://example.com/foo-768x576.jpg 768w, https://example.com/foo-1536x1152.jpg 1536w, https://example.com/foo-2048x1536.jpg 2048w" sizes=auto loading="lazy">',
     6499                                'expected' => '<img data-tshirt-sizes="S M L" src="https://example.com/foo-300x225.jpg" srcset="https://example.com/foo-300x225.jpg 300w, https://example.com/foo-1024x768.jpg 1024w, https://example.com/foo-768x576.jpg 768w, https://example.com/foo-1536x1152.jpg 1536w, https://example.com/foo-2048x1536.jpg 2048w" sizes="(max-width: 650px) 100vw, 650px" loading="lazy">',
    64266500                        ),
    64276501                );
Note: See TracChangeset for help on using the changeset viewer.