Accommodate for a 100% width or height being defined as style descrip…

…tor or via its attribute
ampproject · Dec 6, 2019 · e3efc98 · e3efc98
1 parent bb9c7cd
commit e3efc98
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 3 deletions.
diff --git a/includes/sanitizers/class-amp-layout-sanitizer.php b/includes/sanitizers/class-amp-layout-sanitizer.php
@@ -36,12 +36,29 @@ public function sanitize() {
 			if ( ! $this->attribute_empty( $style ) ) {
 				$styles = $this->parse_style_string( $style );
 
-				// If both height & width descriptors are 100%, apply fill layout.
+				/*
+				 * If both height & width descriptors are 100%, or
+				 *    width attribute is 100% and height style descriptor is 100%, or
+				 *    height attribute is 100% and width style descriptor is 100%
+				 * then apply fill layout.
+				 */
 				if (
-					isset( $styles['width'], $styles['height'] ) &&
-					( '100%' === $styles['width'] && '100%' === $styles['height'] )
+					(
+						isset( $styles['width'], $styles['height'] ) &&
+						( '100%' === $styles['width'] && '100%' === $styles['height'] )
+					) ||
+					(
+						( ! $this->attribute_empty( $width ) && '100%' === $width ) &&
+						( isset( $styles['height'] ) && '100%' === $styles['height'] )
+					) ||
+					(
+						( ! $this->attribute_empty( $height ) && '100%' === $height ) &&
+						( isset( $styles['width'] ) && '100%' === $styles['width'] )
+					)
 				) {
 					unset( $styles['width'], $styles['height'] );
+					$node->removeAttribute( 'width' );
+					$node->removeAttribute( 'height' );
 
 					if ( empty( $styles ) ) {
 						$node->removeAttribute( 'style' );

diff --git a/tests/php/test-amp-layout-sanitizer.php b/tests/php/test-amp-layout-sanitizer.php
@@ -64,6 +64,16 @@ public function get_body_data() {
 				'<amp-img src="foo.jpg" style="width:100%; height:100%; color:#000"></amp-img>',
 				'<amp-img src="foo.jpg" style="color:#000" layout="fill"></amp-img>',
 			],
+
+			'fill_height_attribute_and_width_style'       => [
+				'<amp-img src="foo.jpg" style="width:100%;" height="100%"></amp-img>',
+				'<amp-img src="foo.jpg" layout="fill"></amp-img>',
+			],
+
+			'fill_width_attribute_and_height_style'       => [
+				'<amp-img src="foo.jpg" style="height:100%;" width="100%"></amp-img>',
+				'<amp-img src="foo.jpg" layout="fill"></amp-img>',
+			],
 		];
 	}