Merge pull request #3940 from ampproject/fix/decoding-lazy-attributes

For images, don't raise a validation error for loading="lazy" or decoding="async"
ampproject · Dec 17, 2019 · e4152e2 · e4152e2
2 parents b4b664d + b07e93b
commit e4152e2
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 1 deletion.
diff --git a/includes/sanitizers/class-amp-img-sanitizer.php b/includes/sanitizers/class-amp-img-sanitizer.php
@@ -197,10 +197,21 @@ private function filter_attributes( $attributes ) {
 
 				// Skip directly copying new web platform attributes from img to amp-img which are largely handled by AMP already.
 				case 'importance': // Not supported by AMP.
-				case 'loading': // Lazy-loading handled by amp-img natively.
 				case 'intrinsicsize': // Responsive images handled by amp-img directly.
 					break;
 
+				case 'loading': // Lazy-loading handled by amp-img natively.
+					if ( 'lazy' !== strtolower( $value ) ) {
+						$out[ $name ] = $value;
+					}
+					break;
+
+				case 'decoding': // Async decoding handled by AMP.
+					if ( 'async' !== strtolower( $value ) ) {
+						$out[ $name ] = $value;
+					}
+					break;
+
 				default:
 					$out[ $name ] = $value;
 					break;

diff --git a/tests/php/test-amp-img-sanitizer.php b/tests/php/test-amp-img-sanitizer.php
@@ -65,6 +65,31 @@ public function get_data() {
 				],
 			],
 
+			'image_with_decoding_attribute_of_async'   => [
+				'<img src="https://placehold.it/150x300" width="150" height="300" decoding="async">',
+				'<amp-img src="https://placehold.it/150x300" width="150" height="300" class="amp-wp-enforced-sizes" layout="intrinsic"><noscript><img src="https://placehold.it/150x300" width="150" height="300" decoding="async"></noscript></amp-img>',
+				[
+					'add_noscript_fallback' => true,
+				],
+			],
+
+			'image_with_loading_attribute_of_lazy'     => [
+				'<img src="https://placehold.it/150x300" width="150" height="300" loading="lazy">',
+				'<amp-img src="https://placehold.it/150x300" width="150" height="300" class="amp-wp-enforced-sizes" layout="intrinsic"><noscript><img src="https://placehold.it/150x300" width="150" height="300" loading="lazy"></noscript></amp-img>',
+				[
+					'add_noscript_fallback' => true,
+				],
+			],
+
+			'image_with_wrong_decoding_and_loading'    => [
+				'<img src="https://placehold.it/150x300" width="150" height="300" decoding="sync" loading="eager">',
+				'<amp-img src="https://placehold.it/150x300" width="150" height="300" class="amp-wp-enforced-sizes" layout="intrinsic"><noscript><img src="https://placehold.it/150x300" width="150" height="300" decoding="sync" loading="eager"></noscript></amp-img>',
+				[
+					'add_noscript_fallback' => true,
+				],
+				array_fill( 0, 2, AMP_Tag_And_Attribute_Sanitizer::DISALLOWED_ATTR ),
+			],
+
 			'simple_image_without_noscript'            => [
 				'<p><img src="http://placehold.it/300x300" width="300" height="300" /></p>',
 				'<p><amp-img src="http://placehold.it/300x300" width="300" height="300" class="amp-wp-enforced-sizes" layout="intrinsic"></amp-img></p>',