diff --git a/includes/sanitizers/class-amp-layout-sanitizer.php b/includes/sanitizers/class-amp-layout-sanitizer.php
index aec510423df..d4ef50cf6ae 100644
--- a/includes/sanitizers/class-amp-layout-sanitizer.php
+++ b/includes/sanitizers/class-amp-layout-sanitizer.php
@@ -19,11 +19,12 @@ class AMP_Layout_Sanitizer extends AMP_Base_Sanitizer {
public function sanitize() {
$xpath = new DOMXPath( $this->dom );
// Elements with the `layout` attribute will be validated by `AMP_Tag_And_Attribute_Sanitizer`.
- $nodes = $xpath->query( '//*[ not( @layout ) and ( @data-amp-layout or @width or @height ) ]' );
+ $nodes = $xpath->query( '//*[ not( @layout ) and ( @data-amp-layout or @width or @height or @style ) ]' );
foreach ( $nodes as $node ) {
$width = $node->getAttribute( 'width' );
$height = $node->getAttribute( 'height' );
+ $style = $node->getAttribute( 'style' );
// The `layout` attribute can also be defined through the `data-amp-layout` attribute.
if ( $node->hasAttribute( 'data-amp-layout' ) ) {
@@ -32,12 +33,31 @@ public function sanitize() {
$node->removeAttribute( 'data-amp-layout' );
}
- // If the width & height are `100%` the layout must be `fill`.
+ if ( ! $this->attr_empty( $style ) ) {
+ $styles = $this->parse_style_string( $style );
+
+ // If both height & width descriptors are 100%, apply fill layout.
+ if (
+ isset( $styles['width'], $styles['height'] ) &&
+ ( '100%' === $styles['width'] && '100%' === $styles['height'] )
+ ) {
+ unset( $styles['width'], $styles['height'] );
+
+ if ( empty( $styles ) ) {
+ $node->removeAttribute( 'style' );
+ } else {
+ $node->setAttribute( 'style', $this->reassemble_style_string( $styles ) );
+ }
+
+ $this->set_layout_fill( $node );
+ continue;
+ }
+ }
+
+ // If the width & height are `100%` then apply fill layout.
if ( '100%' === $width && '100%' === $height ) {
- $node->removeAttribute( 'width' );
- $node->removeAttribute( 'height' );
- $node->setAttribute( 'layout', AMP_Rule_Spec::LAYOUT_FILL );
- return;
+ $this->set_layout_fill( $node );
+ continue;
}
// If the width is `100%`, convert the layout to `fixed-height` and width to `auto`.
@@ -49,4 +69,20 @@ public function sanitize() {
$this->did_convert_elements = true;
}
+
+ /**
+ * Apply the `fill` layout.
+ *
+ * @param DOMElement $node Node.
+ */
+ private function set_layout_fill( $node ) {
+ if ( $node->hasAttribute( 'width' ) && $node->hasAttribute( 'height' ) ) {
+ $node->removeAttribute( 'width' );
+ $node->removeAttribute( 'height' );
+ }
+
+ if ( AMP_Rule_Spec::LAYOUT_FILL !== $node->getAttribute( 'layout' ) ) {
+ $node->setAttribute( 'layout', AMP_Rule_Spec::LAYOUT_FILL );
+ }
+ }
}
diff --git a/tests/php/test-amp-layout-sanitizer.php b/tests/php/test-amp-layout-sanitizer.php
index d3634a93f22..c7c5b552458 100644
--- a/tests/php/test-amp-layout-sanitizer.php
+++ b/tests/php/test-amp-layout-sanitizer.php
@@ -54,6 +54,16 @@ public function get_body_data() {
'100%_width_and_height_with_layout_attr' => [
'',
],
+
+ '100%_width_and_height_style_descriptors' => [
+ '',
+ '',
+ ],
+
+ '1002%_width_and_height_style_descriptors' => [
+ '',
+ '',
+ ],
];
}