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

Timestamp:

06/09/2022 05:29:57 AM (2 years ago)

Author:

peterwilsoncc

Message:

Media: Add decoding="async" to image attributes.

Dynamically add decoding="async" to image tags on the front end of a site to instruct browsers to download them in parallel.

Modifies wp_get_attachment_image(), get_avatar() to include the attribute by default. Modifies wp_filter_content_tags() to add the attribute during the front-end render of the site.

Introduces wp_img_tag_add_decoding_attr() to take an image tag and modify it to include the attribute. Introduces the filter wp_img_tag_add_decoding_attr used to define the default value for the attribute.

Props adamsilverstein, ayeshrajans, costdev, flixos90, hellofromtonya, isaumya, michaelbourne, mihai2u, mitogh, sergiomdgomes, spacedmonkey, westonruter, peterwilsoncc.
Fixes #53232.

File:

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

trunk/tests/phpunit/tests/media.php

@@ -1475 +1475 @@
         $image    = image_downsize( self::$large_id, 'thumbnail' );
         $expected = sprintf(
-            '<img width="%1$d" height="%2$d" src="%3$s" class="attachment-thumbnail size-thumbnail" alt="" loading="lazy" />',
+            '<img width="%1$d" height="%2$d" src="%3$s" class="attachment-thumbnail size-thumbnail" alt="" decoding="async" loading="lazy" />',
             $image[1],
             $image[2],
@@ -1513 +1513 @@
         $image    = image_downsize( self::$large_id, 'thumbnail' );
         $expected = sprintf(
-            '<img width="%1$d" height="%2$d" src="%3$s" class="attachment-thumbnail size-thumbnail" alt="Some very clever alt text" loading="lazy" />',
+            '<img width="%1$d" height="%2$d" src="%3$s" class="attachment-thumbnail size-thumbnail" alt="Some very clever alt text" decoding="async" loading="lazy" />',
             $image[1],
             $image[2],
@@ -2248 +2248 @@
             $respimg_html5
         );
+        $content_filtered = wp_img_tag_add_decoding_attr( $content_filtered, 'the_content' );
 
         // Do not add width, height, and loading.
@@ -2273 +2274 @@
         $img = get_image_tag( self::$large_id, '', '', '', 'medium' );
         $img = wp_img_tag_add_loading_attr( $img, 'test' );
+        $img = wp_img_tag_add_decoding_attr( $img, 'the_content' );
 
         // Replace the src URL.
@@ -2287 +2289 @@
         $img = get_image_tag( self::$large_id, '', '', '', 'medium' );
         $img = wp_img_tag_add_loading_attr( $img, 'test' );
+        $img = wp_img_tag_add_decoding_attr( $img, 'the_content' );
         $img = preg_replace( '|<img ([^>]+) />|', '<img $1 ' . 'srcset="image2x.jpg 2x" />', $img );
 
@@ -2334 +2337 @@
     public function test_wp_filter_content_tags_filter_with_identical_image_tags_custom_attributes() {
         $img     = get_image_tag( self::$large_id, '', '', '', 'large' );
-        $img     = str_replace( '<img ', '<img srcset="custom" sizes="custom" loading="custom" ', $img );
+        $img     = str_replace( '<img ', '<img srcset="custom" sizes="custom" loading="custom" decoding="custom"', $img );
         $content = "$img\n$img";
 
@@ -2359 +2362 @@
         add_filter( 'wp_img_tag_add_width_and_height_attr', '__return_false' );
         add_filter( 'wp_img_tag_add_srcset_and_sizes_attr', '__return_false' );
+        add_filter( 'wp_img_tag_add_decoding_attr', '__return_false' );
 
         add_filter(
@@ -2461 +2465 @@
             $respimg_relative
         );
+        $expected = wp_img_tag_add_decoding_attr( $expected, 'the_content' );
 
         $actual = wp_filter_content_tags( $unfiltered );
@@ -2603 +2608 @@
         $expected = '<img width="999" height="999" ' .
             'src="' . $uploads_url . 'test-image-testsize-999x999.jpg" ' .
-            'class="attachment-testsize size-testsize" alt="" loading="lazy" ' .
+            'class="attachment-testsize size-testsize" alt="" decoding="async" loading="lazy" ' .
             'srcset="' . $uploads_url . 'test-image-testsize-999x999.jpg 999w, ' . $uploads_url . $basename . '-150x150.jpg 150w" ' .
             'sizes="(max-width: 999px) 100vw, 999px" />';
@@ -2910 +2915 @@
 
         $content_unfiltered = sprintf( $content, $img, $img_no_width_height, $img_no_width, $img_no_height );
-        $content_filtered   = sprintf( $content, $img, $respimg_no_width_height, $img_no_width, $img_no_height );
+        $content_filtered   = wp_img_tag_add_decoding_attr( sprintf( $content, $img, $respimg_no_width_height, $img_no_width, $img_no_height ), 'the_content' );
 
         // Do not add loading, srcset, and sizes.
@@ -2968 +2973 @@
 
         $content_unfiltered = sprintf( $content, $img, $img_xhtml, $img_html5, $img_eager, $img_no_width_height, $iframe, $iframe_eager, $iframe_no_width_height );
-        $content_filtered   = sprintf( $content, $lazy_img, $lazy_img_xhtml, $lazy_img_html5, $img_eager, $img_no_width_height, $lazy_iframe, $iframe_eager, $iframe_no_width_height );
+        $content_filtered   = wp_img_tag_add_decoding_attr( sprintf( $content, $lazy_img, $lazy_img_xhtml, $lazy_img_html5, $img_eager, $img_no_width_height, $lazy_iframe, $iframe_eager, $iframe_no_width_height ), 'the_content' );
 
         // Do not add width, height, srcset, and sizes.
@@ -2997 +3002 @@
 
         $content_unfiltered = sprintf( $content, $img, $iframe );
-        $content_filtered   = sprintf( $content, $lazy_img, $lazy_iframe );
+        $content_filtered   = sprintf( $content, wp_img_tag_add_decoding_attr( $lazy_img, 'the_content' ), $lazy_iframe, 'the_content' );
 
         // Do not add srcset and sizes while testing.
@@ -3015 +3020 @@
      */
     public function test_wp_filter_content_tags_loading_lazy_opted_out() {
-        $img    = get_image_tag( self::$large_id, '', '', '', 'medium' );
+        $img    = wp_img_tag_add_decoding_attr( get_image_tag( self::$large_id, '', '', '', 'medium' ), 'the_content' );
         $iframe = '<iframe src="https://www.example.com" width="640" height="360"></iframe>';
 
@@ -3479 +3484 @@
         // Following the threshold of 2, the first two content media elements should not be lazy-loaded.
         $content_unfiltered = $img1 . $iframe1 . $img2 . $img3 . $iframe2;
-        $content_expected   = $img1 . $iframe1 . $lazy_img2 . $lazy_img3 . $lazy_iframe2;
+        $content_expected   = wp_img_tag_add_decoding_attr( $img1 . $iframe1 . $lazy_img2 . $lazy_img3 . $lazy_iframe2, 'the_content' );
 
         $wp_query     = new WP_Query( array( 'post__in' => array( self::$post_ids['publish'] ) ) );