Skip to content

Commit c5de91c

Browse files
westonruterwestonruter
committed
Account for upper-case loading attribute and with whitespace padding
Refactor test cases to use snapshots
1 parent 6433721 commit c5de91c

File tree

2 files changed

+55
-88
lines changed

2 files changed

+55
-88
lines changed

‎plugins/auto-sizes/hooks.php‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,8 @@ function auto_sizes_update_content_img_tag( $html ): string {
6565
}
6666

6767
// Bail early if the image is not lazy-loaded.
68-
if ( 'lazy' !== $processor->get_attribute( 'loading' ) ) {
68+
$value = $processor->get_attribute( 'loading' );
69+
if ( ! is_string( $value ) || 'lazy' !== strtolower( trim( $value, " \t\f\r\n" ) ) ) {
6970
return $html;
7071
}
7172

‎plugins/auto-sizes/tests/test-auto-sizes.php‎

Lines changed: 53 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -217,96 +217,62 @@ public function test_auto_sizes_render_generator(): void {
217217
$this->assertStringContainsString( 'auto-sizes ' . IMAGE_AUTO_SIZES_VERSION, $tag );
218218
}
219219

220-
public function test_content_image_with_single_quote_replacement_does_not_have_auto_sizes(): void {
221-
add_filter(
222-
'get_image_tag',
223-
static function ( $html ) {
224-
return str_replace(
225-
'" />',
226-
'" loading="lazy" sizes="(max-width: 1024px) 100vw, 1024px" />',
227-
$html
228-
);
229-
}
230-
);
231-
232-
$image_tag = str_replace( '"', "'", $this->get_image_tag( self::$image_id ) );
233-
$image_content = wp_filter_content_tags( $image_tag );
234-
235-
$processor = new WP_HTML_Tag_Processor( $image_content );
236-
$this->assertTrue( $processor->next_tag( array( 'tag_name' => 'IMG' ) ), 'Failed to find the IMG tag.' );
237-
$sizes = $processor->get_attribute( 'sizes' );
238-
$this->assertTrue( auto_sizes_attribute_includes_valid_auto( $sizes ), 'The sizes attribute does not include "auto" as the first item in the list.' );
239-
$this->assertStringContainsString( 'auto', $sizes, 'The sizes attribute does not contain "auto".' );
240-
}
241-
242-
public function test_content_image_with_custom_attribute_name_with_sizes_at_the_end_does_not_have_auto_sizes(): void {
243-
add_filter(
244-
'get_image_tag',
245-
static function ( $html ) {
246-
return str_replace(
247-
'" />',
248-
'" loading="lazy" sizes="(max-width: 1024px) 100vw, 1024px" data-tshirt-sizes="S M L" />',
249-
$html
250-
);
251-
}
252-
);
253-
254-
$image_tag = $this->get_image_tag( self::$image_id );
255-
$image_content = wp_filter_content_tags( $image_tag );
256-
257-
$processor = new WP_HTML_Tag_Processor( $image_content );
258-
$this->assertTrue( $processor->next_tag( array( 'tag_name' => 'IMG' ) ), 'Failed to find the IMG tag.' );
259-
$data_tshirt_sizes = $processor->get_attribute( 'data-tshirt-sizes' );
260-
$this->assertStringNotContainsString( 'auto', $data_tshirt_sizes, 'The data-tshirt-sizes attribute should not contain "auto".' );
261-
$this->assertSame( 'S M L', $data_tshirt_sizes, 'The data-tshirt-sizes attribute does not match the expected value.' );
262-
}
263-
264-
public function test_content_image_with_lazy_load_text_in_alt_does_not_have_auto_sizes(): void {
265-
add_filter(
266-
'get_image_tag',
267-
static function ( $html ) {
268-
return str_replace(
269-
'alt="',
270-
'alt="This is the LCP image and it should not get loading="lazy"!',
271-
$html
272-
);
273-
}
220+
/**
221+
* @return array<string, mixed>
222+
*/
223+
public function data_provider_to_test_auto_sizes_update_content_img_tag(): array {
224+
return array(
225+
'expected_with_single_quoted_attributes' => array(
226+
'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'>",
227+
'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'>",
228+
),
229+
'expected_with_data_sizes_attribute' => array(
230+
'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">',
231+
'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">',
232+
),
233+
'expected_with_data_sizes_attribute_already_present' => array(
234+
'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">',
235+
'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">',
236+
),
237+
'not_expected_with_loading_lazy_in_attr_value' => array(
238+
'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"!\'>',
239+
'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"!\'>',
240+
),
241+
'not_expected_with_data_loading_attribute_present' => array(
242+
'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">',
243+
'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">',
244+
),
245+
'expected_when_attributes_have_spaces_after_them' => array(
246+
'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">',
247+
'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">',
248+
),
249+
'expected_when_attributes_are_upper_case' => array(
250+
'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">',
251+
'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">',
252+
),
253+
'expected_when_loading_lazy_lacks_quotes' => array(
254+
'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>',
255+
'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>',
256+
),
257+
'expected_when_loading_lazy_has_whitespace' => array(
258+
'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 ">',
259+
'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 ">',
260+
),
261+
'not_expected_when_sizes_auto_lacks_quotes' => array(
262+
'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">',
263+
'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">',
264+
),
274265
);
275-
276-
$image_tag = $this->get_image_tag( self::$image_id );
277-
$image_content = wp_filter_content_tags( $image_tag );
278-
279-
$processor = new WP_HTML_Tag_Processor( $image_content );
280-
$this->assertTrue( $processor->next_tag( array( 'tag_name' => 'IMG' ) ), 'Failed to find the IMG tag.' );
281-
$this->assertNull( $processor->get_attribute( 'loading' ), 'The loading attribute should be null when lazy-load text is in the alt attribute.' );
282-
$sizes = $processor->get_attribute( 'sizes' );
283-
$this->assertFalse( auto_sizes_attribute_includes_valid_auto( $sizes ), 'The sizes attribute does not include "auto" as the first item in the list.' );
284-
$this->assertStringNotContainsString( 'auto', $sizes, 'The sizes attribute should not contain "auto".' );
285266
}
286267

287-
public function test_content_image_with_custom_attribute_name_with_loading_lazy_at_the_end_does_not_have_auto_sizes(): void {
288-
// Force lazy loading attribute.
289-
add_filter( 'wp_img_tag_add_loading_attr', '__return_false' );
290-
291-
add_filter(
292-
'get_image_tag',
293-
static function ( $html ) {
294-
return str_replace(
295-
'" />',
296-
'" data-removed-loading="lazy" />',
297-
$html
298-
);
299-
}
268+
/**
269+
* @covers ::auto_sizes_update_content_img_tag
270+
* @dataProvider data_provider_to_test_auto_sizes_update_content_img_tag
271+
*/
272+
public function test_auto_sizes_update_content_img_tag( string $input, string $expected ): void {
273+
$this->assertSame(
274+
$expected,
275+
auto_sizes_update_content_img_tag( $input )
300276
);
301-
302-
$image_tag = $this->get_image_tag( self::$image_id );
303-
$image_content = wp_filter_content_tags( $image_tag );
304-
305-
$processor = new WP_HTML_Tag_Processor( $image_content );
306-
$this->assertTrue( $processor->next_tag( array( 'tag_name' => 'IMG' ) ), 'Failed to find the IMG tag.' );
307-
$this->assertNull( $processor->get_attribute( 'loading' ), 'The loading attribute should be null when a custom attribute name is used.' );
308-
$sizes = $processor->get_attribute( 'sizes' );
309-
$this->assertFalse( auto_sizes_attribute_includes_valid_auto( $sizes ), 'The sizes attribute does not include "auto" as the first item in the list.' );
310-
$this->assertStringNotContainsString( 'auto', $sizes, 'The sizes attribute should not contain "auto".' );
311277
}
312278
}

0 commit comments

Comments
 (0)