Skip to content

Commit

Permalink
Issue #864: Remove layout="responsive" from <amp-iframe>.
Browse files Browse the repository at this point in the history 
This could lead to unexpected results.
If the intended width or height is less than the container,
This will increase it to fill the container.
This fixed the issue of overflowing <ampiframe>
in widgets.
But it could create an issue in other places.
  • Loading branch information
Ryan Kienstra committed Feb 14, 2018
1 parent 9348ed3 commit 11405b3
Show file tree
Hide file tree
Showing 5 changed files with 31 additions and 33 deletions.
3 changes: 0 additions & 3 deletions includes/sanitizers/class-amp-base-sanitizer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -211,9 +211,6 @@ public function set_layout( $attributes ) {
if ( empty( $attributes['width'] ) ) {
$attributes['layout'] = 'fixed-height';
}
if ( ! empty( $attributes['width'] ) && ! empty( $attributes['height'] ) ) {
$attributes['layout'] = 'responsive';
}

return $attributes;
}
Expand Down
3 changes: 2 additions & 1 deletion includes/sanitizers/class-amp-iframe-sanitizer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,8 @@ public function sanitize() {

$this->did_convert_elements = true;

$new_attributes = $this->set_layout( $new_attributes );
$new_attributes = $this->set_layout( $new_attributes );
$new_attributes['style'] = 'max-width:100%';
if ( isset( $new_attributes['width'] ) && isset( $new_attributes['height'] ) ) {
$this->add_or_append_attribute( $new_attributes, 'class', 'amp-wp-enforced-sizes' );
}
Expand Down
2 changes: 1 addition & 1 deletion includes/sanitizers/class-amp-video-sanitizer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ public function sanitize() {

$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' );
$new_attributes['layout'] = 'responsive';
}

$new_node = AMP_DOM_Utils::create_node( $this->dom, 'amp-video', $new_attributes );
Expand Down
34 changes: 17 additions & 17 deletions tests/test-amp-iframe-sanitizer.php
View file
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 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>',
'<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>',
),

'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" layout="responsive"></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" style="max-width:100%"></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"></amp-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>',
),

'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"></amp-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>',
),

'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"></amp-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>',
),

'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" layout="responsive" 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" style="max-width:100%" 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" layout="responsive" 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" style="max-width:100%" 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" layout="responsive" class="amp-wp-enforced-sizes"></amp-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>',
),

'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" 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" style="max-width:100%" 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" layout="responsive" class="amp-wp-enforced-sizes"></amp-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>',
),

'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"></amp-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>',
),

'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" 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>',
'<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>',
),

'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" 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>',
'<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>',
),
'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" layout="responsive" 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" style="max-width:100%" 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" 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>',
'<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>',
),
'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" 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>',
'<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>',
),
);
}
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" layout="responsive" 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" style="max-width:100%" 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
22 changes: 11 additions & 11 deletions tests/test-amp-video-sanitizer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ public function get_data() {

'simple_video' => array(
'<video width="300" height="300" src="https://example.com/video.mp4"></video>',
'<amp-video width="300" height="300" src="https://example.com/video.mp4" layout="responsive" class="amp-wp-enforced-sizes"></amp-video>',
'<amp-video width="300" height="300" src="https://example.com/video.mp4" layout="responsive"></amp-video>',
),

'video_without_dimensions' => array(
Expand All @@ -20,60 +20,60 @@ public function get_data() {

'autoplay_attribute' => array(
'<video width="300" height="300" src="https://example.com/video.mp4" autoplay></video>',
'<amp-video width="300" height="300" src="https://example.com/video.mp4" autoplay="" layout="responsive" class="amp-wp-enforced-sizes"></amp-video>',
'<amp-video width="300" height="300" src="https://example.com/video.mp4" autoplay="" layout="responsive"></amp-video>',
),

'autoplay_attribute__false' => array(
'<video width="300" height="300" src="https://example.com/video.mp4" autoplay="false"></video>',
'<amp-video width="300" height="300" src="https://example.com/video.mp4" layout="responsive" class="amp-wp-enforced-sizes"></amp-video>',
'<amp-video width="300" height="300" src="https://example.com/video.mp4" layout="responsive"></amp-video>',
),

'video_with_whitelisted_attributes__enabled' => array(
'<video width="300" height="300" src="https://example.com/video.mp4" controls loop="true" muted="muted"></video>',
'<amp-video width="300" height="300" src="https://example.com/video.mp4" controls="" loop="" muted="" layout="responsive" class="amp-wp-enforced-sizes"></amp-video>',
'<amp-video width="300" height="300" src="https://example.com/video.mp4" controls="" loop="" muted="" layout="responsive"></amp-video>',
),

'video_with_whitelisted_attributes__disabled' => array(
'<video width="300" height="300" src="https://example.com/video.mp4" controls="false" loop="false" muted="false"></video>',
'<amp-video width="300" height="300" src="https://example.com/video.mp4" layout="responsive" class="amp-wp-enforced-sizes"></amp-video>',
'<amp-video width="300" height="300" src="https://example.com/video.mp4" layout="responsive"></amp-video>',
),

'video_with_blacklisted_attribute' => array(
'<video width="300" height="300" src="https://example.com/video.mp4" style="border-color: red;"></video>',
'<amp-video width="300" height="300" src="https://example.com/video.mp4" layout="responsive" class="amp-wp-enforced-sizes"></amp-video>',
'<amp-video width="300" height="300" src="https://example.com/video.mp4" layout="responsive"></amp-video>',
),

'video_with_sizes_attribute_is_overridden' => array(
'<video width="300" height="200" src="https://example.com/file.mp4"></video>',
'<amp-video width="300" height="200" src="https://example.com/file.mp4" layout="responsive" class="amp-wp-enforced-sizes"></amp-video>',
'<amp-video width="300" height="200" src="https://example.com/file.mp4" layout="responsive"></amp-video>',
),

'video_with_children' => array(
'<video width="480" height="300" poster="https://example.com/video-image.gif">
<source src="https://example.com/video.mp4" type="video/mp4">
<source src="https://example.com/video.ogv" type="video/ogg">
</video>',
'<amp-video width="480" height="300" poster="https://example.com/video-image.gif" layout="responsive" class="amp-wp-enforced-sizes"><source src="https://example.com/video.mp4" type="video/mp4"><source src="https://example.com/video.ogv" type="video/ogg"></amp-video>',
'<amp-video width="480" height="300" poster="https://example.com/video-image.gif" layout="responsive"><source src="https://example.com/video.mp4" type="video/mp4"><source src="https://example.com/video.ogv" type="video/ogg"></amp-video>',
),

'multiple_same_video' => array(
'<video src="https://example.com/video.mp4" width="480" height="300"></video>
<video src="https://example.com/video.mp4" width="480" height="300"></video>
<video src="https://example.com/video.mp4" width="480" height="300"></video>
<video src="https://example.com/video.mp4" width="480" height="300"></video>',
'<amp-video src="https://example.com/video.mp4" width="480" height="300" layout="responsive" class="amp-wp-enforced-sizes"></amp-video><amp-video src="https://example.com/video.mp4" width="480" height="300" layout="responsive" class="amp-wp-enforced-sizes"></amp-video><amp-video src="https://example.com/video.mp4" width="480" height="300" layout="responsive" class="amp-wp-enforced-sizes"></amp-video><amp-video src="https://example.com/video.mp4" width="480" height="300" layout="responsive" class="amp-wp-enforced-sizes"></amp-video>',
'<amp-video src="https://example.com/video.mp4" width="480" height="300" layout="responsive"></amp-video><amp-video src="https://example.com/video.mp4" width="480" height="300" layout="responsive"></amp-video><amp-video src="https://example.com/video.mp4" width="480" height="300" layout="responsive"></amp-video><amp-video src="https://example.com/video.mp4" width="480" height="300" layout="responsive"></amp-video>',
),

'multiple_different_videos' => array(
'<video src="https://example.com/video1.mp4" width="480" height="300"></video>
<video src="https://example.com/video2.ogv" width="300" height="480"></video>
<video src="https://example.com/video3.webm" height="100" width="200"></video>',
'<amp-video src="https://example.com/video1.mp4" width="480" height="300" layout="responsive" class="amp-wp-enforced-sizes"></amp-video><amp-video src="https://example.com/video2.ogv" width="300" height="480" layout="responsive" class="amp-wp-enforced-sizes"></amp-video><amp-video src="https://example.com/video3.webm" height="100" width="200" layout="responsive" class="amp-wp-enforced-sizes"></amp-video>',
'<amp-video src="https://example.com/video1.mp4" width="480" height="300" layout="responsive"></amp-video><amp-video src="https://example.com/video2.ogv" width="300" height="480" layout="responsive"></amp-video><amp-video src="https://example.com/video3.webm" height="100" width="200" layout="responsive"></amp-video>',
),

'https_not_required' => array(
'<video width="300" height="300" src="http://example.com/video.mp4"></video>',
'<amp-video width="300" height="300" src="http://example.com/video.mp4" layout="responsive" class="amp-wp-enforced-sizes"></amp-video>',
'<amp-video width="300" height="300" src="http://example.com/video.mp4" layout="responsive"></amp-video>',
),
);
}
Expand Down

0 comments on commit 11405b3

Please sign in to comment.