Only look for auto as the first entry in the sizes attribute.

felixarntz · felixarntz · commit f34ab233af66 · 2024-08-08T09:02:08.000-07:00
diff --git a/plugins/auto-sizes/hooks.php b/plugins/auto-sizes/hooks.php
@@ -34,7 +34,7 @@ function auto_sizes_update_image_attributes( $attr ): array {
 	}
 
 	// Don't add 'auto' to the sizes attribute if it already exists.
-	if ( auto_sizes_attribute_includes_auto( $attr['sizes'] ) ) {
+	if ( auto_sizes_attribute_includes_valid_auto( $attr['sizes'] ) ) {
 		return $attr;
 	}
 
@@ -68,7 +68,7 @@ function auto_sizes_update_content_img_tag( $html ): string {
 	}
 
 	// Don't add 'auto' to the sizes attribute if it already exists.
-	if ( auto_sizes_attribute_includes_auto( $match[1] ) ) {
+	if ( auto_sizes_attribute_includes_valid_auto( $match[1] ) ) {
 		return $html;
 	}
 
@@ -79,20 +79,22 @@ function auto_sizes_update_content_img_tag( $html ): string {
 add_filter( 'wp_content_img_tag', 'auto_sizes_update_content_img_tag' );
 
 /**
- * Checks whether the given 'sizes' attribute includes the 'auto' keyword.
+ * Checks whether the given 'sizes' attribute includes the 'auto' keyword as the first item in the list.
+ *
+ * Per the HTML spec, if present it must be the first entry.
  *
  * @since n.e.x.t
  *
  * @param string $sizes_attr The 'sizes' attribute value.
  * @return bool True if the 'auto' keyword is present, false otherwise.
  */
-function auto_sizes_attribute_includes_auto( string $sizes_attr ): bool {
+function auto_sizes_attribute_includes_valid_auto( string $sizes_attr ): bool {
 	$parts = preg_split( '/\s*,\s*/', strtolower( trim( $sizes_attr ) ) );
-	if ( ! is_array( $parts ) ) {
+	if ( ! is_array( $parts ) || ! isset( $parts[0] ) ) {
 		return false;
 	}
 
-	return in_array( 'auto', $parts, true );
+	return 'auto' === $parts[0];
 }
 
 /**
diff --git a/plugins/auto-sizes/tests/test-auto-sizes.php b/plugins/auto-sizes/tests/test-auto-sizes.php
@@ -98,7 +98,7 @@ public function test_content_image_without_lazy_loading_does_not_have_auto_sizes
 	 * Test generated markup for an image with 'auto' keyword already present in sizes does not receive it again.
 	 *
 	 * @covers ::auto_sizes_update_image_attributes
-	 * @covers ::auto_sizes_attribute_includes_auto
+	 * @covers ::auto_sizes_attribute_includes_valid_auto
 	 * @dataProvider data_image_with_existing_auto_sizes
 	 */
 	public function test_image_with_existing_auto_sizes_is_not_processed_again( string $initial_sizes, bool $expected_processed ): void {
@@ -123,7 +123,7 @@ public function test_image_with_existing_auto_sizes_is_not_processed_again( stri
 	 * Test content filtered markup with 'auto' keyword already present in sizes does not receive it again.
 	 *
 	 * @covers ::auto_sizes_update_content_img_tag
-	 * @covers ::auto_sizes_attribute_includes_auto
+	 * @covers ::auto_sizes_attribute_includes_valid_auto
 	 * @dataProvider data_image_with_existing_auto_sizes
 	 */
 	public function test_content_image_with_existing_auto_sizes_is_not_processed_again( string $initial_sizes, bool $expected_processed ): void {
@@ -168,33 +168,41 @@ public function data_image_with_existing_auto_sizes(): array {
 				'auto, (max-width: 1024px) 100vw, 1024px',
 				false,
 			),
+			'sole keyword'                => array(
+				'auto',
+				false,
+			),
+			'with space before'           => array(
+				' auto, (max-width: 1024px) 100vw, 1024px',
+				false,
+			),
+			'with uppercase'              => array(
+				'AUTO, (max-width: 1024px) 100vw, 1024px',
+				false,
+			),
+
+			/*
+			 * The following scenarios technically include the 'auto' keyword,
+			 * but it is in the wrong place, as per the HTML spec it must be
+			 * the first entry in the list.
+			 * Therefore in these invalid cases the 'auto' keyword should still
+			 * be added to the beginning of the list.
+			 */
 			'within, without space'       => array(
 				'(max-width: 1024px) 100vw, auto,1024px',
-				false,
+				true,
 			),
 			'within, with space'          => array(
 				'(max-width: 1024px) 100vw, auto, 1024px',
-				false,
+				true,
 			),
 			'at the end, without space'   => array(
 				'(max-width: 1024px) 100vw,auto',
-				false,
+				true,
 			),
 			'at the end, with space'      => array(
 				'(max-width: 1024px) 100vw, auto',
-				false,
-			),
-			'sole keyword'                => array(
-				'auto',
-				false,
-			),
-			'with space at beginning'     => array(
-				' auto, (max-width: 1024px) 100vw, 1024px',
-				false,
-			),
-			'with uppercase'              => array(
-				'AUTO, (max-width: 1024px) 100vw, 1024px',
-				false,
+				true,
 			),
 		);
 	}

Original file line number	Diff line number	Diff line change
`@@ -34,7 +34,7 @@ function auto_sizes_update_image_attributes( $attr ): array {`
`34`	`34`	`}`
`35`	`35`
`36`	`36`	`// Don't add 'auto' to the sizes attribute if it already exists.`
`37`		`- if ( auto_sizes_attribute_includes_auto( $attr['sizes'] ) ) {`
	`37`	`+ if ( auto_sizes_attribute_includes_valid_auto( $attr['sizes'] ) ) {`
`38`	`38`	`return $attr;`
`39`	`39`	`}`
`40`	`40`
`@@ -68,7 +68,7 @@ function auto_sizes_update_content_img_tag( $html ): string {`
`68`	`68`	`}`
`69`	`69`
`70`	`70`	`// Don't add 'auto' to the sizes attribute if it already exists.`
`71`		`- if ( auto_sizes_attribute_includes_auto( $match[1] ) ) {`
	`71`	`+ if ( auto_sizes_attribute_includes_valid_auto( $match[1] ) ) {`
`72`	`72`	`return $html;`
`73`	`73`	`}`
`74`	`74`
`@@ -79,20 +79,22 @@ function auto_sizes_update_content_img_tag( $html ): string {`
`79`	`79`	`add_filter( 'wp_content_img_tag', 'auto_sizes_update_content_img_tag' );`
`80`	`80`
`81`	`81`	`/**`
`82`		`- * Checks whether the given 'sizes' attribute includes the 'auto' keyword.`
	`82`	`+ * Checks whether the given 'sizes' attribute includes the 'auto' keyword as the first item in the list.`
	`83`	`+ *`
	`84`	`+ * Per the HTML spec, if present it must be the first entry.`
`83`	`85`	`*`
`84`	`86`	`* @since n.e.x.t`
`85`	`87`	`*`
`86`	`88`	`* @param string $sizes_attr The 'sizes' attribute value.`
`87`	`89`	`* @return bool True if the 'auto' keyword is present, false otherwise.`
`88`	`90`	`*/`
`89`		`-function auto_sizes_attribute_includes_auto( string $sizes_attr ): bool {`
	`91`	`+function auto_sizes_attribute_includes_valid_auto( string $sizes_attr ): bool {`
`90`	`92`	`$parts = preg_split( '/\s,\s/', strtolower( trim( $sizes_attr ) ) );`
`91`		`- if ( ! is_array( $parts ) ) {`
	`93`	`+ if ( ! is_array( $parts ) \|\| ! isset( $parts[0] ) ) {`
`92`	`94`	`return false;`
`93`	`95`	`}`
`94`	`96`
`95`		`- return in_array( 'auto', $parts, true );`
	`97`	`+ return 'auto' === $parts[0];`
`96`	`98`	`}`
`97`	`99`
`98`	`100`	`/**`