Skip to content

Commit

Permalink
Merge pull request #6578 from ampproject/fix/6571-video-with-unknown-…
Browse files Browse the repository at this point in the history 
…dimension-2.1

[2.1] Set `amp-wp-unknown-size` class and `object-fit=contain` for videos with unknown dimensions
  • Loading branch information
@westonruter
westonruter authored Aug 30, 2021
2 parents 6f10e8a + 807cf9b commit 5c635f4
Show file tree
Hide file tree
Showing 5 changed files with 16 additions and 9 deletions.
3 changes: 2 additions & 1 deletion assets/css/src/amp-default.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@
* width such as in the post content so that the contents do not get stretched or cropped.
* See <https://github.com/ampproject/amphtml/issues/21371#issuecomment-475443219>.
*/
.amp-wp-enforced-sizes {
.amp-wp-enforced-sizes,
.amp-wp-unknown-size {
object-fit: contain;
}

Expand Down
1 change: 0 additions & 1 deletion includes/sanitizers/class-amp-img-sanitizer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -261,7 +261,6 @@ private function determine_dimensions( $need_dimensions ) {
$class = '';
}
if ( ! $dimensions ) {
$node->setAttribute( Attribute::OBJECT_FIT, 'contain' );
$class .= ' amp-wp-unknown-size';
}

Expand Down
7 changes: 7 additions & 0 deletions includes/sanitizers/class-amp-video-sanitizer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
* @package AMP
*/

use AmpProject\Attribute;
use AmpProject\DevMode;

/**
Expand Down Expand Up @@ -134,6 +135,12 @@ public function sanitize() {
$child_nodes[] = $fallback;
}

if ( empty( $new_attributes['width'] ) && empty( $new_attributes['height'] ) ) {
$new_attributes[ Attribute::CLASS_ ] = isset( $new_attributes[ Attribute::CLASS_ ] )
? $new_attributes[ Attribute::CLASS_ ] . ' amp-wp-unknown-size'
: 'amp-wp-unknown-size';
}

$new_attributes = $this->filter_attachment_layout_attributes( $node, $new_attributes, $layout );
if ( empty( $new_attributes['layout'] ) && ! empty( $new_attributes['width'] ) && ! empty( $new_attributes['height'] ) ) {
$new_attributes['layout'] = 'responsive';
Expand Down
2 changes: 1 addition & 1 deletion tests/php/test-amp-img-sanitizer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -206,7 +206,7 @@ public function get_data() {

'image_with_bad_src_url_get_fallback_dims' => [
'<img src="https://example.com/404.png" />',
'<amp-img src="https://example.com/404.png" object-fit="contain" width="' . AMP_Img_Sanitizer::FALLBACK_WIDTH . '" height="' . AMP_Img_Sanitizer::FALLBACK_HEIGHT . '" class="amp-wp-unknown-size amp-wp-unknown-width amp-wp-unknown-height amp-wp-enforced-sizes" layout="intrinsic"><noscript><img src="https://example.com/404.png" width="' . AMP_Img_Sanitizer::FALLBACK_WIDTH . '" height="' . AMP_Img_Sanitizer::FALLBACK_HEIGHT . '"></noscript></amp-img>',
'<amp-img src="https://example.com/404.png" width="' . AMP_Img_Sanitizer::FALLBACK_WIDTH . '" height="' . AMP_Img_Sanitizer::FALLBACK_HEIGHT . '" class="amp-wp-unknown-size amp-wp-unknown-width amp-wp-unknown-height amp-wp-enforced-sizes" layout="intrinsic"><noscript><img src="https://example.com/404.png" width="' . AMP_Img_Sanitizer::FALLBACK_WIDTH . '" height="' . AMP_Img_Sanitizer::FALLBACK_HEIGHT . '"></noscript></amp-img>',
],

'gif_image_conversion' => [
Expand Down
12 changes: 6 additions & 6 deletions tests/php/test-amp-video-sanitizer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ public function get_data() {

'video_without_dimensions' => [
'<video src="https://example.com/file.mp4"></video>',
'<amp-video src="https://example.com/file.mp4" height="400" layout="fixed-height" width="auto"><a href="https://example.com/file.mp4" fallback="">https://example.com/file.mp4</a><noscript><video src="https://example.com/file.mp4"></video></noscript></amp-video>',
'<amp-video src="https://example.com/file.mp4" class="amp-wp-unknown-size" height="400" layout="fixed-height" width="auto"><a href="https://example.com/file.mp4" fallback="">https://example.com/file.mp4</a><noscript><video src="https://example.com/file.mp4"></video></noscript></amp-video>',
],

'local_video_without_dimensions' => [
Expand All @@ -78,23 +78,23 @@ public function get_data() {
],

'layout_fill_video_without_dimensions' => [
'<video src="https://example.com/file.mp4" layout="fill"></video>',
'<amp-video src="https://example.com/file.mp4" layout="fill"><a href="https://example.com/file.mp4" fallback="">https://example.com/file.mp4</a><noscript><video src="https://example.com/file.mp4"></video></noscript></amp-video>',
'<video src="https://example.com/file.mp4" layout="fill" class="some-file"></video>',
'<amp-video src="https://example.com/file.mp4" layout="fill" class="some-file amp-wp-unknown-size"><a href="https://example.com/file.mp4" fallback="">https://example.com/file.mp4</a><noscript><video src="https://example.com/file.mp4"></video></noscript></amp-video>',
],

'data_layout_fill_video_without_dimensions' => [
'<video src="https://example.com/file.mp4" data-amp-layout="fill"></video>',
'<amp-video src="https://example.com/file.mp4" layout="fill"><a href="https://example.com/file.mp4" fallback="">https://example.com/file.mp4</a><noscript><video src="https://example.com/file.mp4"></video></noscript></amp-video>',
'<amp-video src="https://example.com/file.mp4" layout="fill" class="amp-wp-unknown-size"><a href="https://example.com/file.mp4" fallback="">https://example.com/file.mp4</a><noscript><video src="https://example.com/file.mp4"></video></noscript></amp-video>',
],

'layout_nodisplay_video_without_dimensions' => [
'<video src="https://example.com/file.mp4" layout="nodisplay"></video>',
'<amp-video src="https://example.com/file.mp4" layout="nodisplay"><a href="https://example.com/file.mp4" fallback="">https://example.com/file.mp4</a><noscript><video src="https://example.com/file.mp4"></video></noscript></amp-video>',
'<amp-video src="https://example.com/file.mp4" layout="nodisplay" class="amp-wp-unknown-size"><a href="https://example.com/file.mp4" fallback="">https://example.com/file.mp4</a><noscript><video src="https://example.com/file.mp4"></video></noscript></amp-video>',
],

'layout_fixed_video_without_dimensions' => [
'<video src="https://example.com/file.mp4" layout="nodisplay"></video>',
'<amp-video src="https://example.com/file.mp4" layout="nodisplay"><a href="https://example.com/file.mp4" fallback="">https://example.com/file.mp4</a><noscript><video src="https://example.com/file.mp4"></video></noscript></amp-video>',
'<amp-video src="https://example.com/file.mp4" layout="nodisplay" class="amp-wp-unknown-size"><a href="https://example.com/file.mp4" fallback="">https://example.com/file.mp4</a><noscript><video src="https://example.com/file.mp4"></video></noscript></amp-video>',
],

'autoplay_attribute' => [
Expand Down

0 comments on commit 5c635f4

Please sign in to comment.