Skip to content

Commit

Permalink
Issue #864: Add layout="responsive" to <amp-iframe>.
Browse files Browse the repository at this point in the history 
Iframes from WordPress embeds usually have width and height.
In AMP, the inferred value layout for this is fixed.
This means that even if you apply max-width:100%,
The height won't adjust to the new ratio.
Setting the 'layout' to 'responsive' seems to be
the only way to ensure the same aspect ratio.
Of course, this has a risk that iframes will
expand to fill their container,
where they didn't before.
  • Loading branch information
Ryan Kienstra committed Feb 15, 2018
1 parent 6bd4326 commit 613f16f
Show file tree
Hide file tree
Showing 4 changed files with 37 additions and 25 deletions.
4 changes: 3 additions & 1 deletion includes/sanitizers/class-amp-base-sanitizer.php
View file
Expand Up @@ -208,7 +208,9 @@ public function set_layout( $attributes ) {
unset( $attributes['width'] );
$attributes['height'] = self::FALLBACK_HEIGHT;
}
if ( empty( $attributes['width'] ) ) {
if ( ! empty( $attributes['width'] ) && ! empty( $attributes['height'] ) ) {
$attributes['layout'] = 'responsive';
} elseif ( empty( $attributes['width'] ) ) {
$attributes['layout'] = 'fixed-height';
}

Expand Down
4 changes: 1 addition & 3 deletions includes/sanitizers/class-amp-iframe-sanitizer.php
View file
Expand Up @@ -79,9 +79,7 @@ public function sanitize() {
}

$this->did_convert_elements = true;

$new_attributes = $this->set_layout( $new_attributes );
$new_attributes['style'] = 'max-width:100%'; // AMP_Style_Sanitizer will move this to the amp-custom style.
$new_attributes = $this->set_layout( $new_attributes );
if ( isset( $new_attributes['width'] ) && isset( $new_attributes['height'] ) ) {
$this->add_or_append_attribute( $new_attributes, 'class', 'amp-wp-enforced-sizes' );
}
Expand Down
34 changes: 17 additions & 17 deletions tests/test-amp-iframe-sanitizer.php
View file
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 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" style="max-width:100%"></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="responsive"></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 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" style="max-width:100%"></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="responsive"></amp-iframe>',
),

'iframe_without_dimensions' => array(
'<iframe src="https://example.com/video/132886713"></iframe>',
'<amp-iframe src="https://example.com/video/132886713" sandbox="allow-scripts allow-same-origin" height="400" layout="fixed-height" style="max-width:100%"></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 src="https://example.com/video/132886713" height="400" sandbox="allow-scripts allow-same-origin" layout="fixed-height" style="max-width:100%"></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 src="https://example.com/video/132886713" sandbox="allow-scripts allow-same-origin" height="400" layout="fixed-height" style="max-width:100%"></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 src="https://example.com/embed/132886713" width="500" height="281" frameborder="0" sandbox="allow-scripts allow-same-origin" style="max-width:100%" 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="responsive" 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 src="https://example.com/embed/132886713" width="500" height="281" frameborder="1" sandbox="allow-scripts allow-same-origin" style="max-width:100%" 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="responsive" 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 src="https://example.com/embed/132886713" width="500" height="281" sandbox="allow-same-origin" style="max-width:100%" class="amp-wp-enforced-sizes"></amp-iframe>',
'<amp-iframe src="https://example.com/embed/132886713" width="500" height="281" sandbox="allow-same-origin" layout="responsive" 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 src="https://example.com/embed/132886713" width="500" height="281" sandbox="allow-scripts allow-same-origin" style="max-width:100%" 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="responsive" class="amp-wp-enforced-sizes"></amp-iframe>',
),

'iframe_with_sizes_attribute_is_overridden' => array(
'<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" style="max-width:100%" class="amp-wp-enforced-sizes"></amp-iframe>',
'<amp-iframe src="https://example.com/iframe" width="500" height="281" sandbox="allow-scripts allow-same-origin" layout="responsive" class="amp-wp-enforced-sizes"></amp-iframe>',
),

'iframe_with_protocol_relative_url' => array(
'<iframe src="//example.com/video/132886713"></iframe>',
'<amp-iframe src="https://example.com/video/132886713" sandbox="allow-scripts allow-same-origin" height="400" layout="fixed-height" style="max-width:100%"></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 src="https://example.com/embed/132886713" width="500" height="281" sandbox="allow-scripts allow-same-origin" style="max-width:100%" 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" style="max-width:100%" 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" style="max-width:100%" 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="responsive" 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="responsive" 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="responsive" 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 src="https://example.com/embed/12345" width="500" height="281" sandbox="allow-scripts allow-same-origin" style="max-width:100%" 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" style="max-width:100%" 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" style="max-width:100%" 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="responsive" 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="responsive" 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="responsive" 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 src="https://example.com/video/132886713" width="500" height="281" sandbox="allow-scripts allow-same-origin" style="max-width:100%" 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="responsive" 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 src="https://example.com/video/132886713" width="500" height="281" sandbox="allow-scripts allow-same-origin" style="max-width:100%" 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" style="max-width:100%" 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="responsive" 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="responsive" 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 src="https://example.com/video/132886713" width="500" height="281" sandbox="allow-scripts allow-same-origin" style="max-width:100%" 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" style="max-width:100%" 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="responsive" 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="responsive" 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 src="https://example.com/video/132886713" width="500" height="281" sandbox="allow-scripts allow-same-origin" style="max-width:100%" 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="responsive" 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
20 changes: 16 additions & 4 deletions tests/test-class-amp-base-sanitizer.php
View file
Expand Up @@ -16,15 +16,15 @@ public function get_data() {
),
),

'both_dimensions_missing' => array(
'both_dimensions_missing' => array(
array(),
array(
'height' => 400,
'layout' => 'fixed-height',
),
),

'both_dimensions_empty' => array(
'both_dimensions_empty' => array(
array(
'width' => '',
'height' => '',
Expand All @@ -35,7 +35,7 @@ public function get_data() {
),
),

'no_width' => array(
'no_width' => array(
array(
'height' => 100,
),
Expand All @@ -45,7 +45,7 @@ public function get_data() {
),
),

'no_height' => array(
'no_height' => array(
array(
'width' => 200,
),
Expand All @@ -54,6 +54,18 @@ public function get_data() {
'layout' => 'fixed-height',
),
),

'no_layout_specified' => array(
array(
'width' => 100,
'height' => 100,
),
array(
'width' => 100,
'height' => 100,
'layout' => 'responsive',
),
),
);
}

Expand Down

0 comments on commit 613f16f

Please sign in to comment.