Add support for intrinsicsize on converted img elements; pass through…

… importance/loading to noscript fallback
ampproject · Aug 23, 2019 · 8e5754e · 8e5754e
1 parent 22f882a
commit 8e5754e
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 5 deletions.
diff --git a/includes/sanitizers/class-amp-img-sanitizer.php b/includes/sanitizers/class-amp-img-sanitizer.php
@@ -131,12 +131,16 @@ public function sanitize() {
 
 			// Determine which images need their dimensions determined/extracted.
 			$missing_dimensions = (
-				( ! $has_height && 'fixed-height' === $layout )
-				||
+				! $node->hasAttribute( 'intrinsicsize' )
+				&&
 				(
-					( ! $has_width || ! $has_height )
-					&&
-					in_array( $layout, [ 'fixed', 'responsive', 'intrinsic' ], true )
+					( ! $has_height && 'fixed-height' === $layout )
+					||
+					(
+						( ! $has_width || ! $has_height )
+						&&
+						in_array( $layout, [ 'fixed', 'responsive', 'intrinsic' ], true )
+					)
 				)
 			);
 			if ( $missing_dimensions ) {
@@ -203,12 +207,36 @@ private function filter_attributes( $attributes ) {
 					$out['noloading'] = $value;
 					break;
 
+				// 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': // Handled below.
+					break;
+
 				default:
 					$out[ $name ] = $value;
 					break;
 			}
 		}
 
+		/*
+		 * Convert intrinsicsize <https://github.com/WICG/intrinsicsize-attribute> into amp-img, overriding whatever currently may be specified on the img.
+		 *
+		 * - "If no width/height are otherwise set, then the image dimensions are those specified by 'intrinsicsize'."
+		 * - "If the width attribute is set on the image, then intrinsicsize would set the height to maintain the aspect ratio."
+		 * - "If width and height attributes are both on the image, then intrinsicsize attribute’s value only affects the values of naturalWidth/naturalHeight, but not the rendered size of the image."
+		 */
+		if ( isset( $attributes['intrinsicsize'] ) && preg_match( '/^\s*(?P<width>\d+(?:\.\d+)?)x(?P<height>\d+(?:\.\d+)?)\s*$/', $attributes['intrinsicsize'], $matches ) ) {
+			if ( ! isset( $out['width'] ) && ! isset( $out['height'] ) ) {
+				$out['width']  = $matches['width'];
+				$out['height'] = $matches['height'];
+			} elseif ( isset( $out['width'] ) && ! isset( $out['height'] ) ) {
+				$out['height'] = (string) ( (float) $out['width'] * ( (float) $matches['height'] / (float) $matches['width'] ) );
+			} elseif ( isset( $out['height'] ) && ! isset( $out['width'] ) ) {
+				$out['width'] = (string) ( (float) $out['height'] * ( (float) $matches['width'] / (float) $matches['height'] ) );
+			}
+		}
+
 		return $out;
 	}
 

diff --git a/tests/php/test-amp-img-sanitizer.php b/tests/php/test-amp-img-sanitizer.php
@@ -53,6 +53,38 @@ public function get_data() {
 				],
 			],
 
+			'image_with_new_platform_attributes'       => [
+				'<img src="https://placehold.it/150x300" importance="low" intrinsicsize="150x300" 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" importance="low" intrinsicsize="150x300" loading="lazy"></noscript></amp-img>',
+				[
+					'add_noscript_fallback' => true,
+				],
+			],
+
+			'image_with_intrinsicsize_and_only_width'  => [
+				'<img src="https://placehold.it/150x300" intrinsicsize="150x300" width="75">',
+				'<amp-img src="https://placehold.it/150x300" width="75" height="150" class="amp-wp-enforced-sizes" layout="intrinsic"><noscript><img src="https://placehold.it/150x300" intrinsicsize="150x300" width="75"></noscript></amp-img>',
+				[
+					'add_noscript_fallback' => true,
+				],
+			],
+
+			'image_with_intrinsicsize_and_only_height' => [
+				'<img src="https://placehold.it/150x300" intrinsicsize="150x300" height="100">',
+				'<amp-img src="https://placehold.it/150x300" height="100" width="50" class="amp-wp-enforced-sizes" layout="intrinsic"><noscript><img src="https://placehold.it/150x300" intrinsicsize="150x300" height="100"></noscript></amp-img>',
+				[
+					'add_noscript_fallback' => true,
+				],
+			],
+
+			'image_with_intrinsicsize_and_both_dimes'  => [
+				'<img src="https://placehold.it/150x300" intrinsicsize="150x300" width="100" height="200">',
+				'<amp-img src="https://placehold.it/150x300" width="100" height="200" class="amp-wp-enforced-sizes" layout="intrinsic"><noscript><img src="https://placehold.it/150x300" intrinsicsize="150x300" width="100" height="200"></noscript></amp-img>',
+				[
+					'add_noscript_fallback' => true,
+				],
+			],
+
 			'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>',