Skip to content

Commit

Permalink
Merge pull request #5403 from ampproject/fix/bind-class-name-extraction
Browse files Browse the repository at this point in the history 
Fix extraction of class names from string literals in [class] attributes
  • Loading branch information
@westonruter
westonruter authored Sep 18, 2020
2 parents 4cc0990 + 8c5ca67 commit af2bc00
Show file tree
Hide file tree
Showing 3 changed files with 29 additions and 11 deletions.
5 changes: 4 additions & 1 deletion includes/sanitizers/class-amp-style-sanitizer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -538,7 +538,10 @@ private function get_used_class_names() {
// Find all [class] attributes and capture the contents of any single- or double-quoted strings.
foreach ( $this->dom->xpath->query( '//*/@' . Document::AMP_BIND_DATA_ATTR_PREFIX . 'class' ) as $bound_class_attribute ) {
if ( preg_match_all( '/([\'"])([^\1]*?)\1/', $bound_class_attribute->nodeValue, $matches ) ) {
$classes = array_merge( $classes, $matches[2] );
$classes = array_merge(
$classes,
preg_split( '/\s+/', trim( implode( ' ', $matches[2] ) ) )
);
}
}

Expand Down
31 changes: 23 additions & 8 deletions tests/php/test-amp-style-sanitizer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1596,8 +1596,11 @@ public function test_class_amp_bind_preservation() {
<meta charset="utf-8">
<style>.sidebar1 { display:none }</style>
<style>.sidebar1.expanded { display:block }</style>
<style>.sidebar1.hidden { visibility:hidden }</style>
<style>.sidebar2{ visibility:hidden }</style>
<style>.sidebar2.visible { display:block }</style>
<style>.sidebar2.visible, .sidebar2.displayed, .sidebar2.shown { display:block }</style>
<style>.sidebar3.open, .sidebar3.abierto { display:block }</style>
<style>.sidebar3.cerrado { display:none }</style>
<style>.nothing { visibility:hidden; }</style>
</head>
<body>
Expand All @@ -1608,8 +1611,12 @@ public function test_class_amp_bind_preservation() {
}
</script>
</amp-state>
<aside class="sidebar1" [class]="! mySidebar.expanded ? '' : 'expanded'">...</aside>
<aside class="sidebar2" [class]='mySidebar.expanded ? "visible" : ""'>...</aside>
<aside class="sidebar1" [class]="! mySidebar.expanded ? 'hidden' : ' expanded '">...</aside>
<aside class="sidebar2" [class]='mySidebar.expanded ? "visible shown" : ""'>...</aside>
<aside class="sidebar3" [class]='mySidebar.expanded ? " open abierto " : "
closed
cerrado
"'>...</aside>
</body>
</html>
<?php
Expand All @@ -1628,11 +1635,19 @@ public function test_class_amp_bind_preservation() {
$sanitizer->sanitize();
$this->assertEquals( [], $error_codes );
$actual_stylesheets = array_values( $sanitizer->get_stylesheets() );
$this->assertEquals( '.sidebar1{display:none}', $actual_stylesheets[0] );
$this->assertEquals( '.sidebar1.expanded{display:block}', $actual_stylesheets[1] );
$this->assertEquals( '.sidebar2{visibility:hidden}', $actual_stylesheets[2] );
$this->assertEquals( '.sidebar2.visible{display:block}', $actual_stylesheets[3] );
$this->assertEmpty( $actual_stylesheets[4] );
$this->assertEquals(
[
'.sidebar1{display:none}',
'.sidebar1.expanded{display:block}',
'.sidebar1.hidden{visibility:hidden}',
'.sidebar2{visibility:hidden}',
'.sidebar2.visible,.sidebar2.shown{display:block}',
'.sidebar3.open,.sidebar3.abierto{display:block}',
'.sidebar3.cerrado{display:none}',
'',
],
$actual_stylesheets
);
}

/**
Expand Down
4 changes: 2 additions & 2 deletions tests/php/test-class-amp-tiktok-embed-handler.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ public function mock_http_request( $pre, $r, $url ) {
return $pre;
}

$body = '{"version":"1.0","type":"video","title":"Scramble up ur name & I’ll try to guess it😍❤️ #foryoupage #PetsOfTikTok #aesthetic","author_url":"https://www.tiktok.com/@scout2015","author_name":"Scout & Suki","width":"100%","height":"100%","html":"<blockquote class=\"tiktok-embed\" cite=\"https://www.tiktok.com/@scout2015/video/6718335390845095173\" data-video-id=\"6718335390845095173\" style=\"max-width: 605px;min-width: 325px;\" > <section> <a target=\"_blank\" title=\"@scout2015\" href=\"https://www.tiktok.com/@scout2015\">@scout2015</a> <p>Scramble up ur name & I’ll try to guess it😍❤️ <a title=\"foryoupage\" target=\"_blank\" href=\"https://www.tiktok.com/tag/foryoupage\">#foryoupage</a> <a title=\"PetsOfTikTok\" target=\"_blank\" href=\"https://www.tiktok.com/tag/PetsOfTikTok\">#petsoftiktok</a> <a title=\"aesthetic\" target=\"_blank\" href=\"https://www.tiktok.com/tag/aesthetic\">#aesthetic</a></p> <a target=\"_blank\" title=\"♬ original sound - 𝐇𝐚𝐰𝐚𝐢𝐢𓆉\" href=\"https://www.tiktok.com/music/original-sound-6689804660171082501\">♬ original sound - 𝐇𝐚𝐰𝐚𝐢𝐢𓆉</a> </section> </blockquote> <script async src=\"https://www.tiktok.com/embed.js\"></script>","thumbnail_width":720,"thumbnail_height":1280,"thumbnail_url":"https://p16.muscdn.com/obj/tos-maliva-p-0068/06kv6rfcesljdjr45ukb0000d844090v0200000a05","provider_url":"https://www.tiktok.com","provider_name":"TikTok"}'; // phpcs:ignore WordPress.WP.EnqueuedResources.NonEnqueuedScript
$body = '{"version":"1.0","type":"video","title":"Scramble up ur name & I’ll try to guess it😍❤️ #foryoupage #petsoftiktok #aesthetic","author_url":"https://www.tiktok.com/@scout2015","author_name":"Scout and Suki","width":"100%","height":"100%","html":"<blockquote class=\"tiktok-embed\" cite=\"https://www.tiktok.com/@scout2015/video/6718335390845095173\" data-video-id=\"6718335390845095173\" style=\"max-width: 605px;min-width: 325px;\" > <section> <a target=\"_blank\" title=\"@scout2015\" href=\"https://www.tiktok.com/@scout2015\">@scout2015</a> <p>Scramble up ur name & I’ll try to guess it😍❤️ <a title=\"foryoupage\" target=\"_blank\" href=\"https://www.tiktok.com/tag/foryoupage\">#foryoupage</a> <a title=\"PetsOfTikTok\" target=\"_blank\" href=\"https://www.tiktok.com/tag/PetsOfTikTok\">#petsoftiktok</a> <a title=\"aesthetic\" target=\"_blank\" href=\"https://www.tiktok.com/tag/aesthetic\">#aesthetic</a></p> <a target=\"_blank\" title=\"♬ original sound - tiff\" href=\"https://www.tiktok.com/music/original-sound-6689804660171082501\">♬ original sound - tiff</a> </section> </blockquote> <script async src=\"https://www.tiktok.com/embed.js\"></script>","thumbnail_width":720,"thumbnail_height":1280,"thumbnail_url":"https://p16-sign-va.tiktokcdn.com/obj/tos-maliva-p-0068/06kv6rfcesljdjr45ukb0000d844090v0200000a05?x-expires=1600473600&x-signature=UYga2liJB%2Bb8auK8ejCI%2FFRLTX0%3D","provider_url":"https://www.tiktok.com","provider_name":"TikTok"}'; // phpcs:ignore WordPress.WP.EnqueuedResources.NonEnqueuedScript

return [
'body' => $body,
Expand Down Expand Up @@ -79,7 +79,7 @@ public function get_conversion_data() {

'<amp-embedly-card layout="responsive" height="700" width="340" data-card-controls="0" data-url="https://www.tiktok.com/@scout2015/video/6718335390845095173"><section placeholder=""> <a target="_blank" title="@scout2015" href="https://www.tiktok.com/@scout2015">@scout2015</a> ' . PHP_EOL .
'<p>Scramble up ur name &amp; I’ll try to guess it😍❤️ <a title="foryoupage" target="_blank" href="https://www.tiktok.com/tag/foryoupage">#foryoupage</a> <a title="PetsOfTikTok" target="_blank" href="https://www.tiktok.com/tag/PetsOfTikTok">#petsoftiktok</a> <a title="aesthetic" target="_blank" href="https://www.tiktok.com/tag/aesthetic">#aesthetic</a></p>' . PHP_EOL .
'<p> <a target="_blank" title="♬ original sound - 𝐇𝐚𝐰𝐚𝐢𝐢𓆉" href="https://www.tiktok.com/music/original-sound-6689804660171082501">♬ original sound – 𝐇𝐚𝐰𝐚𝐢𝐢𓆉</a> </p></section></amp-embedly-card>' . PHP_EOL . PHP_EOL,
'<p> <a target="_blank" title="♬ original sound - tiff" href="https://www.tiktok.com/music/original-sound-6689804660171082501">♬ original sound – tiff</a> </p></section></amp-embedly-card>' . PHP_EOL . PHP_EOL,
],
];
}
Expand Down

0 comments on commit af2bc00

Please sign in to comment.