From dd691394f2de7ca4270c2936fd0ea7741d97af5d Mon Sep 17 00:00:00 2001
From: Felix Arntz <flixos90@git.wordpress.org>
Date: Tue, 16 Jan 2024 17:01:30 +0000
Subject: [PATCH] Media: Consider inline image CSS width to backfill `width`
 and `height` attributes.

Prior to this changeset, WordPress core would use the original image size, which in the particular case of inline images would be severely off, as they are usually very small. This could lead to incorrect application of `fetchpriority="high"` and other performance optimizations.

Props westonruter, flixos90, joemcgill, mukesh27.
Fixes #59352.


git-svn-id: https://develop.svn.wordpress.org/trunk@57294 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-includes/media.php                     |  7 ++
 .../media/wpImgTagAddWidthAndHeightAttr.php   | 85 +++++++++++++++++++
 2 files changed, 92 insertions(+)
 create mode 100644 tests/phpunit/tests/media/wpImgTagAddWidthAndHeightAttr.php

diff --git a/src/wp-includes/media.php b/src/wp-includes/media.php
index 9cf301e95c..38ec2213b7 100644
--- a/src/wp-includes/media.php
+++ b/src/wp-includes/media.php
@@ -2117,6 +2117,13 @@ function wp_img_tag_add_width_and_height_attr( $image, $context, $attachment_id
 		$size_array = wp_image_src_get_dimensions( $image_src, $image_meta, $attachment_id );
 
 		if ( $size_array ) {
+			// If the width is enforced through style (e.g. in an inline image), calculate the dimension attributes.
+			$style_width = preg_match( '/style="width:\s*(\d+)px;"/', $image, $match_width ) ? (int) $match_width[1] : 0;
+			if ( $style_width ) {
+				$size_array[1] = (int) round( $size_array[1] * $style_width / $size_array[0] );
+				$size_array[0] = $style_width;
+			}
+
 			$hw = trim( image_hwstring( $size_array[0], $size_array[1] ) );
 			return str_replace( '<img', "<img {$hw}", $image );
 		}
diff --git a/tests/phpunit/tests/media/wpImgTagAddWidthAndHeightAttr.php b/tests/phpunit/tests/media/wpImgTagAddWidthAndHeightAttr.php
new file mode 100644
index 0000000000..84bfc7cc7e
--- /dev/null
+++ b/tests/phpunit/tests/media/wpImgTagAddWidthAndHeightAttr.php
@@ -0,0 +1,85 @@
+<?php
+
+/**
+ * Tests for the `wp_img_tag_add_width_and_height_attr()` function.
+ *
+ * @group media
+ * @covers ::wp_img_tag_add_width_and_height_attr
+ */
+class Tests_Media_Wp_Img_Tag_Add_Width_And_Height_Attr extends WP_UnitTestCase {
+
+	protected static $attachment_id;
+	protected static $attachment_width;
+	protected static $attachment_height;
+
+	public static function wpSetUpBeforeClass( WP_UnitTest_Factory $factory ) {
+		$file                    = DIR_TESTDATA . '/images/2007-06-17DSC_4173.JPG';
+		self::$attachment_id     = $factory->attachment->create_upload_object( $file );
+		self::$attachment_width  = 680;
+		self::$attachment_height = 1024;
+	}
+
+	public static function tear_down_after_class() {
+		wp_delete_attachment( self::$attachment_id, true );
+		parent::tear_down_after_class();
+	}
+
+	/**
+	 * Tests that `wp_img_tag_add_width_and_height_attr()` adds dimension attributes to an image when they are missing.
+	 *
+	 * @ticket 50367
+	 */
+	public function test_add_width_and_height_when_missing() {
+		$image_tag = '<img src="' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . '">';
+
+		$this->assertSame(
+			'<img width="' . self::$attachment_width . '" height="' . self::$attachment_height . '" src="' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . '">',
+			wp_img_tag_add_width_and_height_attr( $image_tag, 'the_content', self::$attachment_id )
+		);
+	}
+
+	/**
+	 * Tests that `wp_img_tag_add_width_and_height_attr()` does not add dimension attributes when disabled via filter.
+	 *
+	 * @ticket 50367
+	 */
+	public function test_do_not_add_width_and_height_when_disabled_via_filter() {
+		add_filter( 'wp_img_tag_add_width_and_height_attr', '__return_false' );
+		$image_tag = '<img src="' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . '">';
+
+		$this->assertSame(
+			$image_tag,
+			wp_img_tag_add_width_and_height_attr( $image_tag, 'the_content', self::$attachment_id )
+		);
+	}
+
+	/**
+	 * Tests that `wp_img_tag_add_width_and_height_attr()` does not add dimension attributes to an image without src.
+	 *
+	 * @ticket 50367
+	 */
+	public function test_do_not_add_width_and_height_without_src() {
+		$image_tag = '<img>';
+
+		$this->assertSame(
+			$image_tag,
+			wp_img_tag_add_width_and_height_attr( $image_tag, 'the_content', self::$attachment_id )
+		);
+	}
+
+	/**
+	 * Tests that `wp_img_tag_add_width_and_height_attr()` respects the style attribute from the inline image format to
+	 * correctly set width and height based on that.
+	 *
+	 * @ticket 59352
+	 */
+	public function test_consider_inline_image_style_attr_to_set_width_and_height() {
+		// '85px' is the original width (680px) divided by 8, so the expected height is equivalently 1024/8=128.
+		$image_tag = '<img src="' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . '" style="width: 85px;">';
+
+		$this->assertSame(
+			'<img width="85" height="128" src="' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . '" style="width: 85px;">',
+			wp_img_tag_add_width_and_height_attr( $image_tag, 'the_content', self::$attachment_id )
+		);
+	}
+}