Revert "Convert percentage-based width & height attributes to style properties"

This reverts commit bbc87ad

Author: pierlon

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

@@ -20,52 +20,6 @@ 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" style="width:100%"></iframe>
+							<iframe src="https://example.com/video/132886713" height="123" 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" style="width:100%;height:100%"></iframe>
+							<iframe src="https://example.com/video/132886713" width="100%" height="100%"></iframe>
 						</noscript>
 					</amp-iframe>
 				',

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

@@ -19,39 +19,9 @@ class AMP_Layout_Sanitizer_Test extends WP_UnitTestCase {
 	 */
 	public function get_body_data() {
 		return [
-			'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>',
+			'non_amp_component'                           => [
+				'<svg height="10%" width="10%"></svg>',
+				'<svg height="10%" width="10%"></svg>',
 			],
 
 			'no_width_or_height'                          => [