Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Remove 'sizes' attribute for <amp-iframe> and <amp-video>; add appropriate layout #937

Merged
merged 22 commits into from
Apr 4, 2018
Merged

Remove 'sizes' attribute for <amp-iframe> and <amp-video>; add appropriate layout #937

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
87e8501
Issue #864: Remove 'sizes' attribute for <amp-iframe> and <amp-video>.
Feb 6, 2018
936f302
Issue #864: Remove extra line in set_layout().
Feb 6, 2018
6848541
Issue #864: Remove the 'sizes' attribute from <amp-img>.
Feb 13, 2018
9348ed3
Merge branch 'develop' into fix/864-remove-sizes
Feb 14, 2018
11405b3
Issue #864: Remove layout="responsive" from <amp-iframe>.
Feb 14, 2018
f95c0be
Issue #864: Add comment after addition of 'style.'
Feb 14, 2018
6bd4326
Issue #864: Remove <amp-img> sizes attribute if present.
Feb 15, 2018
613f16f
Issue #864: Add layout="responsive" to <amp-iframe>.
Feb 15, 2018
878e023
Issue #864: Convert 'data-amp-layout' to 'layout.'
Mar 1, 2018
037f6ef
Issue #864: Allow 'data-amp-layout' in wp_kses() for 'post.'
Mar 1, 2018
a233b59
Issue #864: Change logic for adding 'data-amp-layout'.
Mar 1, 2018
011e478
Issue #864: Move add_layout() to AMP_Theme_Support.
Mar 1, 2018
c5c46ac
Merge in develop, resolve conflicts.
Mar 1, 2018
e344418
Rename to whitelist_layout_in_wp_kses_allowed_html().
Mar 1, 2018
adce308
864 - Use intrinsic as default layout for images
mehigh Mar 29, 2018
81e20c5
Merge in 0.7, resolve conflicts.
Mar 29, 2018
bc5c407
Update unit tests for layout.
Mar 29, 2018
ece0f86
Align equals signs, use () after class.
Mar 29, 2018
02db229
Set default layout of <amp-iframe> and <amp-video> to intrinsic.
Mar 29, 2018
f983029
Remove my duplicate layout assignment in AMP_Video_Sanitizer.
Mar 31, 2018
f5a3c73
Conditionally set layout to 'responsive' for <amp-video>.
Mar 31, 2018
c347f2b
Merge in 0.7 branch, resolve conflict.
Apr 4, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions includes/class-amp-theme-support.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -248,6 +248,7 @@ public static function add_hooks() {
add_filter( 'cancel_comment_reply_link', array( __CLASS__, 'filter_cancel_comment_reply_link' ), 10, 3 );
add_action( 'comment_form', array( __CLASS__, 'amend_comment_form' ), 100 );
remove_action( 'comment_form', 'wp_comment_form_unfiltered_html_nonce' );
add_filter( 'wp_kses_allowed_html', array( __CLASS__, 'whitelist_layout_in_wp_kses_allowed_html' ), 10 );

if ( AMP_Validation_Utils::should_validate_response() ) {
AMP_Validation_Utils::add_validation_hooks();
Expand Down Expand Up @@ -1113,6 +1114,22 @@ public static function prepare_response( $response, $args = array() ) {
return $response;
}

/**
* Adds 'data-amp-layout' to the allowed <img> attributes for wp_kses().
*
* @since 0.7
*
* @param array $context Allowed tags and their allowed attributes.
* @return array $context Filtered allowed tags and attributes.
*/
public static function whitelist_layout_in_wp_kses_allowed_html( $context ) {
if ( ! empty( $context['img']['width'] ) && ! empty( $context['img']['height'] ) ) {
$context['img']['data-amp-layout'] = true;
}

return $context;
}

/**
* Enqueue AMP assets if this is an AMP endpoint.
*
Expand Down
46 changes: 2 additions & 44 deletions includes/sanitizers/class-amp-base-sanitizer.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -201,7 +201,7 @@ public function sanitize_dimension( $value, $dimension ) {
}

/**
* Enforce fixed height.
* Sets the layout, and possibly the 'height' and 'width' attributes.
*
* @param string[] $attributes {
* Attributes.
Expand All @@ -214,60 +214,18 @@ public function sanitize_dimension( $value, $dimension ) {
* }
* @return string[]
*/
public function enforce_fixed_height( $attributes ) {
public function set_layout( $attributes ) {
if ( empty( $attributes['height'] ) ) {
unset( $attributes['width'] );
$attributes['height'] = self::FALLBACK_HEIGHT;
}

if ( empty( $attributes['width'] ) ) {
$attributes['layout'] = 'fixed-height';
}

return $attributes;
}

/**
* This is our workaround to enforce max sizing with layout=responsive.
*
* We want elements to not grow beyond their width and shrink to fill the screen on viewports smaller than their width.
*
* See https://github.com/ampproject/amphtml/issues/1280#issuecomment-171533526
* See https://github.com/Automattic/amp-wp/issues/101
*
* @param string[] $attributes {
* Attributes.
*
* @type int $height
* @type int $width
* @type string $sizes
* @type string $class
* @type string $layout
* }
* @return string[]
*/
public function enforce_sizes_attribute( $attributes ) {
if ( ! isset( $attributes['width'], $attributes['height'] ) ) {
return $attributes;
}

$max_width = $attributes['width'];
if ( isset( $this->args['content_max_width'] ) && $max_width >= $this->args['content_max_width'] ) {
$max_width = $this->args['content_max_width'];
}

// Allows floats and integers but prevents negative values.
// Uses string format to prevent additional modification.
$attributes['sizes'] = sprintf(
'(min-width: %1$spx) %1$spx, 100vw',
max( 0, floatval( $max_width ) )
);

$this->add_or_append_attribute( $attributes, 'class', 'amp-wp-enforced-sizes' );

return $attributes;
}

/**
* Adds or appends key and value to list of attributes
*
Expand Down
11 changes: 6 additions & 5 deletions includes/sanitizers/class-amp-iframe-sanitizer.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,9 +79,11 @@ public function sanitize() {
}

$this->did_convert_elements = true;

$new_attributes = $this->enforce_fixed_height( $new_attributes );
$new_attributes = $this->enforce_sizes_attribute( $new_attributes );
$new_attributes = $this->set_layout( $new_attributes );
if ( empty( $new_attributes['layout'] ) && ! empty( $new_attributes['width'] ) && ! empty( $new_attributes['height'] ) ) {
$new_attributes['layout'] = 'intrinsic';
$this->add_or_append_attribute( $new_attributes, 'class', 'amp-wp-enforced-sizes' );
}

$new_node = AMP_DOM_Utils::create_node( $this->dom, 'amp-iframe', $new_attributes );

Expand Down Expand Up @@ -126,8 +128,7 @@ public function sanitize() {
* @return array Returns HTML attributes; removes any not specifically declared above from input.
*/
private function filter_attributes( $attributes ) {
$out = array();
$out['style'] = 'max-width:100%'; // AMP_Style_Sanitizer will move this to the amp-custom style.
$out = array();

foreach ( $attributes as $name => $value ) {
switch ( $name ) {
Expand Down
10 changes: 8 additions & 2 deletions includes/sanitizers/class-amp-img-sanitizer.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,6 @@ private function filter_attributes( $attributes ) {
case 'alt':
case 'class':
case 'srcset':
case 'sizes':
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@kienstra We need to add layout attribute here so that it's possible to control the image sizing at the theme's level (see my comment in the AMPConf theme).

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That sounds good, @delawski. If it's alright, I'll work on this in several hours.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@delawski @kienstra Adding a layout to an HTML img element makes me nervous. I think it would be better actually to introduce an data-amp-layout attribute which the sanitizer could convert into a layout attribute when converting an img into an amp-img. This would allow for regular plain HTML in post content to be decorated with the data-amp-layout attribute and for the content to be still served as valid HTML. This will also allow for such img[data-amp-layout] to be styled with CSS in non-AMP responses. This would play nicely into adding AMP support for Gutenberg blocks as described in #902 (comment)

We'll need to allow data-amp-layout attribute to Kses for it to be saved with unfiltered_html.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, @westonruter. The 2 commits below convert 'data-amp-layout' to 'layout' in the image sanitizer, and allow 'data-amp-layout' in wp_kses(), when in a 'post' context.

case 'on':
case 'attribution':
$out[ $name ] = $value;
Expand All @@ -130,6 +129,10 @@ private function filter_attributes( $attributes ) {
$out[ $name ] = $this->sanitize_dimension( $value, $name );
break;

case 'data-amp-layout':
$out['layout'] = $value;
break;

default:
break;
}
Expand Down Expand Up @@ -204,7 +207,10 @@ private function adjust_and_replace_nodes_in_array_map( $node_lists ) {
private function adjust_and_replace_node( $node ) {
$old_attributes = AMP_DOM_Utils::get_node_attributes_as_assoc_array( $node );
$new_attributes = $this->filter_attributes( $old_attributes );
$new_attributes = $this->enforce_sizes_attribute( $new_attributes );
$this->add_or_append_attribute( $new_attributes, 'class', 'amp-wp-enforced-sizes' );
if ( empty( $new_attributes['layout'] ) && ! empty( $new_attributes['height'] ) && ! empty( $new_attributes['width'] ) ) {
$new_attributes['layout'] = 'intrinsic';
}
if ( $this->is_gif_url( $new_attributes['src'] ) ) {
$this->did_convert_elements = true;

Expand Down
10 changes: 5 additions & 5 deletions includes/sanitizers/class-amp-video-sanitizer.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,9 +49,10 @@ public function sanitize() {
$old_attributes = AMP_DOM_Utils::get_node_attributes_as_assoc_array( $node );

$new_attributes = $this->filter_attributes( $old_attributes );

$new_attributes = $this->enforce_fixed_height( $new_attributes );
$new_attributes = $this->enforce_sizes_attribute( $new_attributes );
$new_attributes = $this->set_layout( $new_attributes );
if ( empty( $new_attributes['layout'] ) && ! empty( $new_attributes['width'] ) && ! empty( $new_attributes['height'] ) ) {
$new_attributes['layout'] = 'responsive';
}

$new_node = AMP_DOM_Utils::create_node( $this->dom, 'amp-video', $new_attributes );

Expand Down Expand Up @@ -124,8 +125,7 @@ public function sanitize() {
* @return array Returns HTML attributes; removes any not specifically declared above from input.
*/
private function filter_attributes( $attributes ) {
$out = array();
$out['style'] = 'max-width:100%'; // Note that this will get moved to amp-custom style by AMP_Style_Sanitizer.
$out = array();

foreach ( $attributes as $name => $value ) {
switch ( $name ) {
Expand Down
36 changes: 18 additions & 18 deletions tests/test-amp-iframe-sanitizer.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,57 +10,57 @@ public function get_data() {

'simple_iframe' => array(
'<iframe src="https://example.com/embed/132886713" width="500" height="281" frameborder="0" class="iframe-class" allowtransparency="false" allowfullscreen></iframe>',
'<amp-iframe style="max-width:100%" src="https://example.com/embed/132886713" width="500" height="281" frameborder="0" class="iframe-class amp-wp-enforced-sizes" allowfullscreen="" sandbox="allow-scripts allow-same-origin" sizes="(min-width: 500px) 500px, 100vw"></amp-iframe>',
'<amp-iframe src="https://example.com/embed/132886713" width="500" height="281" frameborder="0" class="iframe-class amp-wp-enforced-sizes" allowfullscreen="" sandbox="allow-scripts allow-same-origin" layout="intrinsic"></amp-iframe>',
),

'force_https' => array(
'<iframe src="http://example.com/embed/132886713" width="500" height="281" frameborder="0" class="iframe-class" allowtransparency="false" allowfullscreen></iframe>',
'<amp-iframe style="max-width:100%" src="https://example.com/embed/132886713" width="500" height="281" frameborder="0" class="iframe-class amp-wp-enforced-sizes" allowfullscreen="" sandbox="allow-scripts allow-same-origin" sizes="(min-width: 500px) 500px, 100vw"></amp-iframe>',
'<amp-iframe src="https://example.com/embed/132886713" width="500" height="281" frameborder="0" class="iframe-class amp-wp-enforced-sizes" allowfullscreen="" sandbox="allow-scripts allow-same-origin" layout="intrinsic"></amp-iframe>',
),

'iframe_without_dimensions' => array(
'<iframe src="https://example.com/video/132886713"></iframe>',
'<amp-iframe style="max-width:100%" src="https://example.com/video/132886713" sandbox="allow-scripts allow-same-origin" height="400" layout="fixed-height"></amp-iframe>',
'<amp-iframe src="https://example.com/video/132886713" sandbox="allow-scripts allow-same-origin" height="400" layout="fixed-height"></amp-iframe>',
),

'iframe_with_height_only' => array(
'<iframe src="https://example.com/video/132886713" height="400"></iframe>',
'<amp-iframe style="max-width:100%" src="https://example.com/video/132886713" height="400" sandbox="allow-scripts allow-same-origin" layout="fixed-height"></amp-iframe>',
'<amp-iframe src="https://example.com/video/132886713" height="400" sandbox="allow-scripts allow-same-origin" layout="fixed-height"></amp-iframe>',
),

'iframe_with_width_only' => array(
'<iframe src="https://example.com/video/132886713" width="600"></iframe>',
'<amp-iframe style="max-width:100%" src="https://example.com/video/132886713" sandbox="allow-scripts allow-same-origin" height="400" layout="fixed-height"></amp-iframe>',
'<amp-iframe src="https://example.com/video/132886713" sandbox="allow-scripts allow-same-origin" height="400" layout="fixed-height"></amp-iframe>',
),

'iframe_with_invalid_frameborder' => array(
'<iframe src="https://example.com/embed/132886713" width="500" height="281" frameborder="no"></iframe>',
'<amp-iframe style="max-width:100%" src="https://example.com/embed/132886713" width="500" height="281" frameborder="0" sandbox="allow-scripts allow-same-origin" sizes="(min-width: 500px) 500px, 100vw" class="amp-wp-enforced-sizes"></amp-iframe>',
'<amp-iframe src="https://example.com/embed/132886713" width="500" height="281" frameborder="0" sandbox="allow-scripts allow-same-origin" layout="intrinsic" class="amp-wp-enforced-sizes"></amp-iframe>',
),

'iframe_with_1_frameborder' => array(
'<iframe src="https://example.com/embed/132886713" width="500" height="281" frameborder=1></iframe>',
'<amp-iframe style="max-width:100%" src="https://example.com/embed/132886713" width="500" height="281" frameborder="1" sandbox="allow-scripts allow-same-origin" sizes="(min-width: 500px) 500px, 100vw" class="amp-wp-enforced-sizes"></amp-iframe>',
'<amp-iframe src="https://example.com/embed/132886713" width="500" height="281" frameborder="1" sandbox="allow-scripts allow-same-origin" layout="intrinsic" class="amp-wp-enforced-sizes"></amp-iframe>',
),

'simple_iframe_with_sandbox' => array(
'<iframe src="https://example.com/embed/132886713" width="500" height="281" sandbox="allow-same-origin"></iframe>',
'<amp-iframe style="max-width:100%" src="https://example.com/embed/132886713" width="500" height="281" sandbox="allow-same-origin" sizes="(min-width: 500px) 500px, 100vw" class="amp-wp-enforced-sizes"></amp-iframe>',
'<amp-iframe src="https://example.com/embed/132886713" width="500" height="281" sandbox="allow-same-origin" layout="intrinsic" class="amp-wp-enforced-sizes"></amp-iframe>',
),

'iframe_with_blacklisted_attribute' => array(
'<iframe src="https://example.com/embed/132886713" width="500" height="281" scrolling="auto"></iframe>',
'<amp-iframe style="max-width:100%" src="https://example.com/embed/132886713" width="500" height="281" sandbox="allow-scripts allow-same-origin" sizes="(min-width: 500px) 500px, 100vw" class="amp-wp-enforced-sizes"></amp-iframe>',
'<amp-iframe src="https://example.com/embed/132886713" width="500" height="281" sandbox="allow-scripts allow-same-origin" layout="intrinsic" class="amp-wp-enforced-sizes"></amp-iframe>',
),

'iframe_with_sizes_attribute_is_overridden' => array(
'<iframe src="https://example.com/iframe" width="500" height="281" sizes="(min-width: 100px) 300px, 90vw"></iframe>',
'<amp-iframe style="max-width:100%" src="https://example.com/iframe" width="500" height="281" sizes="(min-width: 500px) 500px, 100vw" sandbox="allow-scripts allow-same-origin" class="amp-wp-enforced-sizes"></amp-iframe>',
'<iframe src="https://example.com/iframe" width="500" height="281"></iframe>',
'<amp-iframe src="https://example.com/iframe" width="500" height="281" sandbox="allow-scripts allow-same-origin" layout="intrinsic" class="amp-wp-enforced-sizes"></amp-iframe>',
),

'iframe_with_protocol_relative_url' => array(
'<iframe src="//example.com/video/132886713"></iframe>',
'<amp-iframe style="max-width:100%" src="https://example.com/video/132886713" sandbox="allow-scripts allow-same-origin" height="400" layout="fixed-height"></amp-iframe>',
'<amp-iframe src="https://example.com/video/132886713" sandbox="allow-scripts allow-same-origin" height="400" layout="fixed-height"></amp-iframe>',
),

'multiple_same_iframe' => array(
Expand All @@ -69,7 +69,7 @@ public function get_data() {
<iframe src="https://example.com/embed/132886713" width="500" height="281"></iframe>
<iframe src="https://example.com/embed/132886713" width="500" height="281"></iframe>
',
'<amp-iframe style="max-width:100%" src="https://example.com/embed/132886713" width="500" height="281" sandbox="allow-scripts allow-same-origin" sizes="(min-width: 500px) 500px, 100vw" class="amp-wp-enforced-sizes"></amp-iframe><amp-iframe style="max-width:100%" src="https://example.com/embed/132886713" width="500" height="281" sandbox="allow-scripts allow-same-origin" sizes="(min-width: 500px) 500px, 100vw" class="amp-wp-enforced-sizes"></amp-iframe><amp-iframe style="max-width:100%" src="https://example.com/embed/132886713" width="500" height="281" sandbox="allow-scripts allow-same-origin" sizes="(min-width: 500px) 500px, 100vw" class="amp-wp-enforced-sizes"></amp-iframe>',
'<amp-iframe src="https://example.com/embed/132886713" width="500" height="281" sandbox="allow-scripts allow-same-origin" layout="intrinsic" class="amp-wp-enforced-sizes"></amp-iframe><amp-iframe src="https://example.com/embed/132886713" width="500" height="281" sandbox="allow-scripts allow-same-origin" layout="intrinsic" class="amp-wp-enforced-sizes"></amp-iframe><amp-iframe src="https://example.com/embed/132886713" width="500" height="281" sandbox="allow-scripts allow-same-origin" layout="intrinsic" class="amp-wp-enforced-sizes"></amp-iframe>',
),

'multiple_different_iframes' => array(
Expand All @@ -78,19 +78,19 @@ public function get_data() {
<iframe src="https://example.com/embed/67890" width="280" height="501"></iframe>
<iframe src="https://example.com/embed/11111" width="700" height="601"></iframe>
',
'<amp-iframe style="max-width:100%" src="https://example.com/embed/12345" width="500" height="281" sandbox="allow-scripts allow-same-origin" sizes="(min-width: 500px) 500px, 100vw" class="amp-wp-enforced-sizes"></amp-iframe><amp-iframe style="max-width:100%" src="https://example.com/embed/67890" width="280" height="501" sandbox="allow-scripts allow-same-origin" sizes="(min-width: 280px) 280px, 100vw" class="amp-wp-enforced-sizes"></amp-iframe><amp-iframe style="max-width:100%" src="https://example.com/embed/11111" width="700" height="601" sandbox="allow-scripts allow-same-origin" sizes="(min-width: 700px) 700px, 100vw" class="amp-wp-enforced-sizes"></amp-iframe>',
'<amp-iframe src="https://example.com/embed/12345" width="500" height="281" sandbox="allow-scripts allow-same-origin" layout="intrinsic" class="amp-wp-enforced-sizes"></amp-iframe><amp-iframe src="https://example.com/embed/67890" width="280" height="501" sandbox="allow-scripts allow-same-origin" layout="intrinsic" class="amp-wp-enforced-sizes"></amp-iframe><amp-iframe src="https://example.com/embed/11111" width="700" height="601" sandbox="allow-scripts allow-same-origin" layout="intrinsic" class="amp-wp-enforced-sizes"></amp-iframe>',
),
'iframe_in_p_tag' => array(
'<p><iframe src="https://example.com/video/132886713" width="500" height="281"></iframe></p>',
'<amp-iframe style="max-width:100%" src="https://example.com/video/132886713" width="500" height="281" sandbox="allow-scripts allow-same-origin" sizes="(min-width: 500px) 500px, 100vw" class="amp-wp-enforced-sizes"></amp-iframe>',
'<amp-iframe src="https://example.com/video/132886713" width="500" height="281" sandbox="allow-scripts allow-same-origin" layout="intrinsic" class="amp-wp-enforced-sizes"></amp-iframe>',
),
'multiple_iframes_in_p_tag' => array(
'<p><iframe src="https://example.com/video/132886713" width="500" height="281"></iframe><iframe src="https://example.com/video/132886714" width="500" height="281"></iframe></p>',
'<amp-iframe style="max-width:100%" src="https://example.com/video/132886713" width="500" height="281" sandbox="allow-scripts allow-same-origin" sizes="(min-width: 500px) 500px, 100vw" class="amp-wp-enforced-sizes"></amp-iframe><amp-iframe style="max-width:100%" src="https://example.com/video/132886714" width="500" height="281" sandbox="allow-scripts allow-same-origin" sizes="(min-width: 500px) 500px, 100vw" class="amp-wp-enforced-sizes"></amp-iframe>',
'<amp-iframe src="https://example.com/video/132886713" width="500" height="281" sandbox="allow-scripts allow-same-origin" layout="intrinsic" class="amp-wp-enforced-sizes"></amp-iframe><amp-iframe src="https://example.com/video/132886714" width="500" height="281" sandbox="allow-scripts allow-same-origin" layout="intrinsic" class="amp-wp-enforced-sizes"></amp-iframe>',
),
'multiple_iframes_and_contents_in_p_tag' => array(
'<p>contents<iframe src="https://example.com/video/132886713" width="500" height="281"></iframe><iframe src="https://example.com/video/132886714" width="500" height="281"></iframe></p>',
'<p>contents</p><amp-iframe style="max-width:100%" src="https://example.com/video/132886713" width="500" height="281" sandbox="allow-scripts allow-same-origin" sizes="(min-width: 500px) 500px, 100vw" class="amp-wp-enforced-sizes"></amp-iframe><amp-iframe style="max-width:100%" src="https://example.com/video/132886714" width="500" height="281" sandbox="allow-scripts allow-same-origin" sizes="(min-width: 500px) 500px, 100vw" class="amp-wp-enforced-sizes"></amp-iframe>',
'<p>contents</p><amp-iframe src="https://example.com/video/132886713" width="500" height="281" sandbox="allow-scripts allow-same-origin" layout="intrinsic" class="amp-wp-enforced-sizes"></amp-iframe><amp-iframe src="https://example.com/video/132886714" width="500" height="281" sandbox="allow-scripts allow-same-origin" layout="intrinsic" class="amp-wp-enforced-sizes"></amp-iframe>',
),
);
}
Expand Down Expand Up @@ -160,7 +160,7 @@ public function test_get_scripts__did_convert() {

public function test__args__placeholder() {
$source = '<iframe src="https://example.com/video/132886713" width="500" height="281"></iframe>';
$expected = '<amp-iframe style="max-width:100%" src="https://example.com/video/132886713" width="500" height="281" sandbox="allow-scripts allow-same-origin" sizes="(min-width: 500px) 500px, 100vw" class="amp-wp-enforced-sizes"><div placeholder="" class="amp-wp-iframe-placeholder"></div></amp-iframe>';
$expected = '<amp-iframe src="https://example.com/video/132886713" width="500" height="281" sandbox="allow-scripts allow-same-origin" layout="intrinsic" class="amp-wp-enforced-sizes"><div placeholder="" class="amp-wp-iframe-placeholder"></div></amp-iframe>';

$dom = AMP_DOM_Utils::get_dom_from_content( $source );
$sanitizer = new AMP_Iframe_Sanitizer( $dom, array(
Expand Down
Loading