Convert percentage-based width & height attributes to style properties

Author: pierlon

includes/sanitizers/class-amp-layout-sanitizer.php

@@ -20,6 +20,52 @@ class AMP_Layout_Sanitizer extends AMP_Base_Sanitizer {
 	public function sanitize() {
 		$xpath = new DOMXPath( $this->dom );
 
+		/*
+		 * Convert all percentage-based width or height values into style properties.
+		 *
+		 * The following query could be made simpler by using the `ends-with` function, but it is not a valid function in
+		 * XPath 1.0, which the `DOMXPath` class uses.
+		 */
+		$nodes = $xpath->query( '//*[ "%" = substring( @width, string-length( @width ) ) or "%" = substring( @height, string-length( @height ) ) ]' );
+
+		foreach ( $nodes as $node ) {
+			$width  = $node->getAttribute( 'width' );
+			$height = $node->getAttribute( 'height' );
+			$style  = $node->getAttribute( 'style' );
+
+			$styles         = $this->is_empty_attribute_value( $style ) ? [] : $this->parse_style_string( $style );
+			$attr_converted = false;
+
+			// Convert the percentage-based width attribute to a style property.
+			if ( ! isset( $styles['width'] ) && '%' === substr( $width, -1 ) ) {
+				// Ignore if its an AMP component and the width is `100%`.
+				if ( '100%' === $width && strpos( $node->tagName, 'amp-' ) === 0 ) {
+					continue;
+				}
+
+				$styles['width'] = $width;
+				$attr_converted  = true;
+				$node->removeAttribute( 'width' );
+			}
+
+			// Convert the percentage-based height attribute to a style property.
+			if ( ! isset( $styles['height'] ) && '%' === substr( $height, -1 ) ) {
+				// Ignore if its an AMP component and the height is `100%`.
+				if ( '100%' === $height && strpos( $node->tagName, 'amp-' ) === 0 ) {
+					continue;
+				}
+
+				$styles['height'] = $height;
+				$attr_converted   = true;
+				$node->removeAttribute( 'height' );
+			}
+
+			// If either dimension was converted, update the style property with it.
+			if ( $attr_converted ) {
+				$node->setAttribute( 'style', $this->reassemble_style_string( $styles ) );
+			}
+		}
+
 		/**
 		 * Sanitize AMP nodes to be AMP compatible. Elements with the `layout` attribute will be validated by
 		 * `AMP_Tag_And_Attribute_Sanitizer`.

tests/php/test-amp-iframe-sanitizer.php

@@ -89,7 +89,7 @@ public function get_data() {
 				'
 					<amp-iframe src="https://example.com/video/132886713" height="123" width="auto" layout="fixed-height" sandbox="allow-scripts allow-same-origin">
 						<noscript>
-							<iframe src="https://example.com/video/132886713" height="123" width="100%"></iframe>
+							<iframe src="https://example.com/video/132886713" height="123" style="width:100%"></iframe>
 						</noscript>
 					</amp-iframe>
 				',
@@ -100,7 +100,7 @@ public function get_data() {
 				'
 					<amp-iframe src="https://example.com/video/132886713" layout="fill" sandbox="allow-scripts allow-same-origin">
 						<noscript>
-							<iframe src="https://example.com/video/132886713" width="100%" height="100%"></iframe>
+							<iframe src="https://example.com/video/132886713" style="width:100%;height:100%"></iframe>
 						</noscript>
 					</amp-iframe>
 				',

tests/php/test-amp-layout-sanitizer.php

@@ -19,9 +19,39 @@ class AMP_Layout_Sanitizer_Test extends WP_UnitTestCase {
 	 */
 	public function get_body_data() {
 		return [
-			'non_amp_component'                           => [
-				'<svg height="10%" width="10%"></svg>',
-				'<svg height="10%" width="10%"></svg>',
+			'non_amp_component_with_percent_style_props'  => [
+				'<svg height="100%" width="100%" style="width:20%;height:20%"></svg>',
+				'<svg height="100%" width="100%" style="width:20%;height:20%"></svg>',
+			],
+
+			'amp_component_with_percent_style_props'      => [
+				'<amp-img height="100%" width="10%" style="width:20%;height:20%"></amp-img>',
+				'<amp-img height="100%" width="10%" style="width:20%;height:20%"></amp-img>',
+			],
+
+			'non_amp_component_no_percent_attrs'          => [
+				'<svg height="100" width="100"></svg>',
+				'<svg height="100" width="100"></svg>',
+			],
+
+			'non_amp_component_with_percent_attrs'        => [
+				'<svg height="100%" width="100%"></svg>',
+				'<svg style="width:100%;height:100%"></svg>',
+			],
+
+			'amp_component_with_percent_attrs'            => [
+				'<amp-img height="10%" width="10%"></amp-img>',
+				'<amp-img style="width:10%;height:10%"></amp-img>',
+			],
+
+			'amp_component_with_100%_percent_attrs'       => [
+				'<amp-img height="100%" width="100%"></amp-img>',
+				'<amp-img layout="fill"></amp-img>',
+			],
+
+			'amp_component_with_a_100%_percent_attr'      => [
+				'<amp-img height="10%" width="10"></amp-img>',
+				'<amp-img width="10" style="height:10%"></amp-img>',
 			],
 
 			'no_width_or_height'                          => [