Skip to content

Commit

Permalink
Use intrinsic layout for video instead of responsive
Browse files Browse the repository at this point in the history
  • Loading branch information
@westonruter
westonruter committed Dec 4, 2021
1 parent eacd6cf commit 1a12630
Show file tree
Hide file tree
Showing 3 changed files with 25 additions and 25 deletions.
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 @@ -156,7 +156,7 @@ public function sanitize() {

$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';
$new_attributes['layout'] = 'intrinsic';
}
$new_attributes = $this->set_layout( $new_attributes );

Expand Down
46 changes: 23 additions & 23 deletions tests/php/test-amp-video-sanitizer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,15 +68,15 @@ public function get_data() {

'simple_video' => [
'<video id="vid" width="300" height="300" src="https://example.com/video.mp4" playsinline webkit-playsinline></video>',
'<amp-video id="vid" width="300" height="300" src="https://example.com/video.mp4" layout="responsive"><a href="https://example.com/video.mp4" fallback="">https://example.com/video.mp4</a><noscript><video width="300" height="300" src="https://example.com/video.mp4" playsinline></video></noscript></amp-video>',
'<amp-video id="vid" width="300" height="300" src="https://example.com/video.mp4" layout="intrinsic"><a href="https://example.com/video.mp4" fallback="">https://example.com/video.mp4</a><noscript><video width="300" height="300" src="https://example.com/video.mp4" playsinline></video></noscript></amp-video>',
[
'add_noscript_fallback' => true,
],
],

'simple_video_without_noscript' => [
'<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"><a href="https://example.com/video.mp4" fallback="">https://example.com/video.mp4</a></amp-video>',
'<amp-video width="300" height="300" src="https://example.com/video.mp4" layout="intrinsic"><a href="https://example.com/video.mp4" fallback="">https://example.com/video.mp4</a></amp-video>',
[
'add_noscript_fallback' => false,
],
Expand All @@ -89,12 +89,12 @@ public function get_data() {

'video_with_autoplay' => [
'<video src="https://example.com/file.mp4" autoplay muted width="160" height="80"></video>',
'<amp-video src="https://example.com/file.mp4" autoplay width="160" height="80" layout="responsive"><a href="https://example.com/file.mp4" fallback="">https://example.com/file.mp4</a><noscript><video src="https://example.com/file.mp4" autoplay width="160" height="80"></video></noscript></amp-video>',
'<amp-video src="https://example.com/file.mp4" autoplay width="160" height="80" layout="intrinsic"><a href="https://example.com/file.mp4" fallback="">https://example.com/file.mp4</a><noscript><video src="https://example.com/file.mp4" autoplay width="160" height="80"></video></noscript></amp-video>',
],

'local_video_without_dimensions' => [
sprintf( '<video src="%s"></video>', '{{video_url}}' ),
sprintf( '<amp-video src="%1$s" width="560" height="320" layout="responsive"><a href="%1$s" fallback="">%1$s</a><noscript><video src="%1$s"></video></noscript></amp-video>', '{{video_url}}' ),
sprintf( '<amp-video src="%1$s" width="560" height="320" layout="intrinsic"><a href="%1$s" fallback="">%1$s</a><noscript><video src="%1$s"></video></noscript></amp-video>', '{{video_url}}' ),
],

'local_video_without_dimensions_and_native' => [
Expand Down Expand Up @@ -137,32 +137,32 @@ public function get_data() {

'autoplay_attribute' => [
'<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"><a href="https://example.com/video.mp4" fallback="">https://example.com/video.mp4</a><noscript><video width="300" height="300" src="https://example.com/video.mp4" autoplay></video></noscript></amp-video>',
'<amp-video width="300" height="300" src="https://example.com/video.mp4" autoplay="" layout="intrinsic"><a href="https://example.com/video.mp4" fallback="">https://example.com/video.mp4</a><noscript><video width="300" height="300" src="https://example.com/video.mp4" autoplay></video></noscript></amp-video>',
],

'autoplay_attribute__false' => [
'<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"><a href="https://example.com/video.mp4" fallback="">https://example.com/video.mp4</a><noscript><video width="300" height="300" src="https://example.com/video.mp4" autoplay="false"></video></noscript></amp-video>',
'<amp-video width="300" height="300" src="https://example.com/video.mp4" layout="intrinsic"><a href="https://example.com/video.mp4" fallback="">https://example.com/video.mp4</a><noscript><video width="300" height="300" src="https://example.com/video.mp4" autoplay="false"></video></noscript></amp-video>',
],

'video_with_allowlisted_attributes__enabled' => [
'<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"><a href="https://example.com/video.mp4" fallback="">https://example.com/video.mp4</a><noscript><video width="300" height="300" src="https://example.com/video.mp4" controls loop="true"></video></noscript></amp-video>',
'<amp-video width="300" height="300" src="https://example.com/video.mp4" controls="" loop="" muted="" layout="intrinsic"><a href="https://example.com/video.mp4" fallback="">https://example.com/video.mp4</a><noscript><video width="300" height="300" src="https://example.com/video.mp4" controls loop="true"></video></noscript></amp-video>',
],

'video_with_allowlisted_attributes__disabled' => [
'<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"><a href="https://example.com/video.mp4" fallback="">https://example.com/video.mp4</a><noscript><video width="300" height="300" src="https://example.com/video.mp4" controls="false" loop="false"></video></noscript></amp-video>',
'<amp-video width="300" height="300" src="https://example.com/video.mp4" layout="intrinsic"><a href="https://example.com/video.mp4" fallback="">https://example.com/video.mp4</a><noscript><video width="300" height="300" src="https://example.com/video.mp4" controls="false" loop="false"></video></noscript></amp-video>',
],

'video_with_custom_attribute' => [
'<video width="300" height="300" src="https://example.com/video.mp4" onclick="foo()" data-foo="bar"></video>',
'<amp-video width="300" height="300" src="https://example.com/video.mp4" data-foo="bar" layout="responsive"><a href="https://example.com/video.mp4" fallback="">https://example.com/video.mp4</a><noscript><video width="300" height="300" src="https://example.com/video.mp4"></video></noscript></amp-video>',
'<amp-video width="300" height="300" src="https://example.com/video.mp4" data-foo="bar" layout="intrinsic"><a href="https://example.com/video.mp4" fallback="">https://example.com/video.mp4</a><noscript><video width="300" height="300" src="https://example.com/video.mp4"></video></noscript></amp-video>',
],

'video_with_sizes_attribute_is_overridden' => [
'<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"><a href="https://example.com/file.mp4" fallback="">https://example.com/file.mp4</a><noscript><video width="300" height="200" src="https://example.com/file.mp4"></video></noscript></amp-video>',
'<amp-video width="300" height="200" src="https://example.com/file.mp4" layout="intrinsic"><a href="https://example.com/file.mp4" fallback="">https://example.com/file.mp4</a><noscript><video width="300" height="200" src="https://example.com/file.mp4"></video></noscript></amp-video>',
],

'video_with_children' => [
Expand All @@ -173,7 +173,7 @@ public function get_data() {
</video>
',
'
<amp-video width="480" height="300" poster="https://example.com/video-image.gif" layout="responsive">
<amp-video width="480" height="300" poster="https://example.com/video-image.gif" layout="intrinsic">
<source src="https://example.com/video.mp4" type="video/mp4">
<source src="https://example.com/video.ogv" type="video/ogg">
<a href="https://example.com/video.mp4" fallback="">https://example.com/video.mp4</a>
Expand All @@ -199,7 +199,7 @@ public function get_data() {

'video_with_noloading_from_editor' => [
'<figure data-amp-noloading="true"><video src="https://example.com/file.mp4" height="100" width="100"></video></figure>',
'<figure data-amp-noloading="true"><amp-video src="https://example.com/file.mp4" height="100" width="100" noloading="" layout="responsive"><a href="https://example.com/file.mp4" fallback="">https://example.com/file.mp4</a><noscript><video src="https://example.com/file.mp4" height="100" width="100"></video></noscript></amp-video></figure>',
'<figure data-amp-noloading="true"><amp-video src="https://example.com/file.mp4" height="100" width="100" noloading="" layout="intrinsic"><a href="https://example.com/file.mp4" fallback="">https://example.com/file.mp4</a><noscript><video src="https://example.com/file.mp4" height="100" width="100"></video></noscript></amp-video></figure>',
],

'multiple_same_video' => [
Expand All @@ -210,10 +210,10 @@ public function get_data() {
<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"><a href="https://example.com/video.mp4" fallback="">https://example.com/video.mp4</a><noscript><video src="https://example.com/video.mp4" width="480" height="300"></video></noscript></amp-video>
<amp-video src="https://example.com/video.mp4" width="480" height="300" layout="responsive"><a href="https://example.com/video.mp4" fallback="">https://example.com/video.mp4</a><noscript><video src="https://example.com/video.mp4" width="480" height="300"></video></noscript></amp-video>
<amp-video src="https://example.com/video.mp4" width="480" height="300" layout="responsive"><a href="https://example.com/video.mp4" fallback="">https://example.com/video.mp4</a><noscript><video src="https://example.com/video.mp4" width="480" height="300"></video></noscript></amp-video>
<amp-video src="https://example.com/video.mp4" width="480" height="300" layout="responsive"><a href="https://example.com/video.mp4" fallback="">https://example.com/video.mp4</a><noscript><video src="https://example.com/video.mp4" width="480" height="300"></video></noscript></amp-video>
<amp-video src="https://example.com/video.mp4" width="480" height="300" layout="intrinsic"><a href="https://example.com/video.mp4" fallback="">https://example.com/video.mp4</a><noscript><video src="https://example.com/video.mp4" width="480" height="300"></video></noscript></amp-video>
<amp-video src="https://example.com/video.mp4" width="480" height="300" layout="intrinsic"><a href="https://example.com/video.mp4" fallback="">https://example.com/video.mp4</a><noscript><video src="https://example.com/video.mp4" width="480" height="300"></video></noscript></amp-video>
<amp-video src="https://example.com/video.mp4" width="480" height="300" layout="intrinsic"><a href="https://example.com/video.mp4" fallback="">https://example.com/video.mp4</a><noscript><video src="https://example.com/video.mp4" width="480" height="300"></video></noscript></amp-video>
<amp-video src="https://example.com/video.mp4" width="480" height="300" layout="intrinsic"><a href="https://example.com/video.mp4" fallback="">https://example.com/video.mp4</a><noscript><video src="https://example.com/video.mp4" width="480" height="300"></video></noscript></amp-video>
',
],

Expand All @@ -224,15 +224,15 @@ public function get_data() {
<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"><a href="https://example.com/video1.mp4" fallback="">https://example.com/video1.mp4</a><noscript><video src="https://example.com/video1.mp4" width="480" height="300"></video></noscript></amp-video>
<amp-video src="https://example.com/video2.ogv" width="300" height="480" layout="responsive"><a href="https://example.com/video2.ogv" fallback="">https://example.com/video2.ogv</a><noscript><video src="https://example.com/video2.ogv" width="300" height="480"></video></noscript></amp-video>
<amp-video src="https://example.com/video3.webm" height="100" width="200" layout="responsive"><a href="https://example.com/video3.webm" fallback="">https://example.com/video3.webm</a><noscript><video src="https://example.com/video3.webm" height="100" width="200"></video></noscript></amp-video>
<amp-video src="https://example.com/video1.mp4" width="480" height="300" layout="intrinsic"><a href="https://example.com/video1.mp4" fallback="">https://example.com/video1.mp4</a><noscript><video src="https://example.com/video1.mp4" width="480" height="300"></video></noscript></amp-video>
<amp-video src="https://example.com/video2.ogv" width="300" height="480" layout="intrinsic"><a href="https://example.com/video2.ogv" fallback="">https://example.com/video2.ogv</a><noscript><video src="https://example.com/video2.ogv" width="300" height="480"></video></noscript></amp-video>
<amp-video src="https://example.com/video3.webm" height="100" width="200" layout="intrinsic"><a href="https://example.com/video3.webm" fallback="">https://example.com/video3.webm</a><noscript><video src="https://example.com/video3.webm" height="100" width="200"></video></noscript></amp-video>
',
],

'https_not_required' => [
'<video width="300" height="300" src="http://example.com/video.mp4"></video>',
'<amp-video width="300" height="300" src="https://example.com/video.mp4" layout="responsive"><a href="https://example.com/video.mp4" fallback="">https://example.com/video.mp4</a><noscript><video width="300" height="300" src="https://example.com/video.mp4"></video></noscript></amp-video>',
'<amp-video width="300" height="300" src="https://example.com/video.mp4" layout="intrinsic"><a href="https://example.com/video.mp4" fallback="">https://example.com/video.mp4</a><noscript><video width="300" height="300" src="https://example.com/video.mp4"></video></noscript></amp-video>',
],

'http_video_with_children' => [
Expand All @@ -245,7 +245,7 @@ public function get_data() {
</video>
',
'
<amp-video width="480" height="300" poster="https://example.com/poster.jpeg" layout="responsive">
<amp-video width="480" height="300" poster="https://example.com/poster.jpeg" layout="intrinsic">
<source src="https://example.com/video.mp4" type="video/mp4">
<source src="https://example.com/video.ogv" type="video/ogg">
<track srclang="en" label="English" kind="subtitles" src="https://example.com/test-en.vtt">
Expand All @@ -262,13 +262,13 @@ public function get_data() {
],

'amp_video_with_fallback' => [
'<amp-video width="300" height="300" src="https://example.com/video.mp4" layout="responsive"><noscript><video width="300" height="300" src="https://example.com/video.mp4"></video></noscript></amp-video>',
'<amp-video width="300" height="300" src="https://example.com/video.mp4" layout="intrinsic"><noscript><video width="300" height="300" src="https://example.com/video.mp4"></video></noscript></amp-video>',
null,
],

'video_with_fallback' => [
'<div id="player"><noscript><video width="300" height="300" src="https://example.com/video.mp4"></video></noscript></div>',
'<div id="player"><!--noscript--><amp-video width="300" height="300" src="https://example.com/video.mp4" layout="responsive"><a href="https://example.com/video.mp4" fallback="">https://example.com/video.mp4</a><noscript><video width="300" height="300" src="https://example.com/video.mp4"></video></noscript></amp-video><!--/noscript--></div>',
'<div id="player"><!--noscript--><amp-video width="300" height="300" src="https://example.com/video.mp4" layout="intrinsic"><a href="https://example.com/video.mp4" fallback="">https://example.com/video.mp4</a><noscript><video width="300" height="300" src="https://example.com/video.mp4"></video></noscript></amp-video><!--/noscript--></div>',
],

'test_with_dev_mode' => [
Expand Down
2 changes: 1 addition & 1 deletion tests/php/test-class-amp-content-sanitizer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ public function test_sanitize_noop() {
public function test_sanitize_all() {
$source_html = '<video style="outline: solid 1px red;" src="https://example.com/foo.mp4" width="100" height="200"></video>';
$expected_return = [
'<amp-video src="https://example.com/foo.mp4" width="100" height="200" layout="responsive" data-amp-original-style="outline: solid 1px red;" class="amp-wp-9f6e771"><a href="https://example.com/foo.mp4" fallback="">https://example.com/foo.mp4</a><noscript><video src="https://example.com/foo.mp4" width="100" height="200"></video></noscript></amp-video>',
'<amp-video src="https://example.com/foo.mp4" width="100" height="200" layout="intrinsic" data-amp-original-style="outline: solid 1px red;" class="amp-wp-9f6e771"><a href="https://example.com/foo.mp4" fallback="">https://example.com/foo.mp4</a><noscript><video src="https://example.com/foo.mp4" width="100" height="200"></video></noscript></amp-video>',
[ 'amp-video' => true ],
[ ':root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-9f6e771{outline:solid 1px red}' ],
];
Expand Down

0 comments on commit 1a12630

Please sign in to comment.