Fixed css styles for banners with multiple contents

68publishers · Nov 22, 2023 · 254970a · 254970a
1 parent f7089ca
commit 254970a
Show file tree

Hide file tree

Showing 18 changed files with 34 additions and 30 deletions.
diff --git a/src/Renderer/BreakpointStyle/BreakpointStyle.php b/src/Renderer/BreakpointStyle/BreakpointStyle.php
@@ -25,8 +25,9 @@ final class BreakpointStyle
     public function __construct(Position $position, Banner $banner)
     {
         $selectorMask = sprintf(
-            '[data-amp-banner="%s"] [data-amp-content-breakpoint="%s"]',
+            '[data-amp-banner="%s"] [data-amp-banner-id="%s"] [data-amp-content-breakpoint="%s"]',
             Helpers::escapeHtmlAttr($position->getCode()),
+            Helpers::escapeHtmlAttr($banner->getId()),
             '%s',
         );
 

diff --git a/src/Renderer/Phtml/Templates/multiple.phtml b/src/Renderer/Phtml/Templates/multiple.phtml
@@ -12,13 +12,14 @@ use SixtyEightPublishers\AmpClient\Renderer\Fingerprint;
 /** @var array<int, Banner> $banners */
 ?>
 <div data-amp-banner="<?= Helpers::escapeHtmlAttr($position->getCode()) ?>" data-amp-attached>
-    <?php $banners = array_filter($banners, static fn (Banner $banner): bool => 0 < count($banner->getContents())) ?>
+    <?php $banners = array_filter($banners, static fn(Banner $banner): bool => 0 < count($banner->getContents())) ?>
     <?php if (0 < count($banners)): ?>
         <div class="amp-banner amp-banner--multiple">
             <div class="amp-banner__list">
                 <?php foreach ($banners as $banner): ?>
                     <div class="amp-banner__item"
-                         data-amp-banner-fingerprint="<?= Helpers::escapeHtmlAttr(Fingerprint::create($position, $banner)) ?>">
+                         data-amp-banner-fingerprint="<?= Helpers::escapeHtmlAttr(Fingerprint::create($position, $banner)) ?>"
+                         data-amp-banner-id="<?= Helpers::escapeHtmlAttr($banner->getId()) ?>">
                         <?php include __DIR__ . '/contents.fragment.phtml' ?>
                     </div>
                 <?php endforeach ?>

diff --git a/src/Renderer/Phtml/Templates/random.phtml b/src/Renderer/Phtml/Templates/random.phtml
@@ -14,7 +14,8 @@ use SixtyEightPublishers\AmpClient\Renderer\Fingerprint;
 <div data-amp-banner="<?= Helpers::escapeHtmlAttr($position->getCode()) ?>" data-amp-attached>
     <?php if (NULL !== $banner && 0 < count($banner->getContents())): ?>
         <div class="amp-banner amp-banner--random"
-             data-amp-banner-fingerprint="<?= Helpers::escapeHtmlAttr(Fingerprint::create($position, $banner)) ?>">
+             data-amp-banner-fingerprint="<?= Helpers::escapeHtmlAttr(Fingerprint::create($position, $banner)) ?>"
+             data-amp-banner-id="<?= Helpers::escapeHtmlAttr($banner->getId()) ?>">
             <?php include __DIR__ . '/contents.fragment.phtml' ?>
         </div>
     <?php endif ?>

diff --git a/src/Renderer/Phtml/Templates/single.phtml b/src/Renderer/Phtml/Templates/single.phtml
@@ -14,7 +14,8 @@ use SixtyEightPublishers\AmpClient\Renderer\Fingerprint;
 <div data-amp-banner="<?= Helpers::escapeHtmlAttr($position->getCode()) ?>" data-amp-attached>
     <?php if (NULL !== $banner && 0 < count($banner->getContents())): ?>
         <div class="amp-banner amp-banner--single"
-             data-amp-banner-fingerprint="<?= Helpers::escapeHtmlAttr(Fingerprint::create($position, $banner)) ?>">
+             data-amp-banner-fingerprint="<?= Helpers::escapeHtmlAttr(Fingerprint::create($position, $banner)) ?>"
+             data-amp-banner-id="<?= Helpers::escapeHtmlAttr($banner->getId()) ?>">
             <?php include __DIR__ . '/contents.fragment.phtml' ?>
         </div>
     <?php endif ?>

diff --git a/tests/Renderer/BreakpointStyle/BreakpointStyleTest.php b/tests/Renderer/BreakpointStyle/BreakpointStyleTest.php
@@ -58,7 +58,7 @@ public function testStylesOutputInMinModeWhenOnlyContentWithNumericBreakpointDef
         ]);
 
         $expected = <<<HTML
-<style>[data-amp-banner="homepage.top"] [data-amp-content-breakpoint="500"]{display:none}@media(min-width: 500px){[data-amp-banner="homepage.top"] [data-amp-content-breakpoint="500"]{display:block}}</style>
+<style>[data-amp-banner="homepage.top"] [data-amp-banner-id="12344"] [data-amp-content-breakpoint="500"]{display:none}@media(min-width: 500px){[data-amp-banner="homepage.top"] [data-amp-banner-id="12344"] [data-amp-content-breakpoint="500"]{display:block}}</style>
 HTML;
 
         Assert::same($expected, $style->getCss());
@@ -72,7 +72,7 @@ public function testStylesOutputInMaxModeWhenOnlyContentWithNumericBreakpointDef
         ]);
 
         $expected = <<<HTML
-<style>[data-amp-banner="homepage.top"] [data-amp-content-breakpoint="500"]{display:none}@media(max-width: 500px){[data-amp-banner="homepage.top"] [data-amp-content-breakpoint="500"]{display:block}}</style>
+<style>[data-amp-banner="homepage.top"] [data-amp-banner-id="12344"] [data-amp-content-breakpoint="500"]{display:none}@media(max-width: 500px){[data-amp-banner="homepage.top"] [data-amp-banner-id="12344"] [data-amp-content-breakpoint="500"]{display:block}}</style>
 HTML;
 
         Assert::same($expected, $style->getCss());
@@ -88,7 +88,7 @@ public function testStylesOutputInMinModeWhenMultipleContentsDefined(): void
         ]);
 
         $expected = <<<HTML
-<style>[data-amp-banner="homepage.top"] [data-amp-content-breakpoint="500"]{display:none}[data-amp-banner="homepage.top"] [data-amp-content-breakpoint="900"]{display:none}@media(min-width: 500px){[data-amp-banner="homepage.top"] [data-amp-content-breakpoint="default"]{display:none}[data-amp-banner="homepage.top"] [data-amp-content-breakpoint="500"]{display:block}[data-amp-banner="homepage.top"] [data-amp-content-breakpoint="900"]{display:none}}@media(min-width: 900px){[data-amp-banner="homepage.top"] [data-amp-content-breakpoint="default"]{display:none}[data-amp-banner="homepage.top"] [data-amp-content-breakpoint="500"]{display:none}[data-amp-banner="homepage.top"] [data-amp-content-breakpoint="900"]{display:block}}</style>
+<style>[data-amp-banner="homepage.top"] [data-amp-banner-id="12344"] [data-amp-content-breakpoint="500"]{display:none}[data-amp-banner="homepage.top"] [data-amp-banner-id="12344"] [data-amp-content-breakpoint="900"]{display:none}@media(min-width: 500px){[data-amp-banner="homepage.top"] [data-amp-banner-id="12344"] [data-amp-content-breakpoint="default"]{display:none}[data-amp-banner="homepage.top"] [data-amp-banner-id="12344"] [data-amp-content-breakpoint="500"]{display:block}[data-amp-banner="homepage.top"] [data-amp-banner-id="12344"] [data-amp-content-breakpoint="900"]{display:none}}@media(min-width: 900px){[data-amp-banner="homepage.top"] [data-amp-banner-id="12344"] [data-amp-content-breakpoint="default"]{display:none}[data-amp-banner="homepage.top"] [data-amp-banner-id="12344"] [data-amp-content-breakpoint="500"]{display:none}[data-amp-banner="homepage.top"] [data-amp-banner-id="12344"] [data-amp-content-breakpoint="900"]{display:block}}</style>
 HTML;
 
         Assert::same($expected, $style->getCss());
@@ -104,7 +104,7 @@ public function testStylesOutputInMaxModeWhenMultipleContentsDefined(): void
         ]);
 
         $expected = <<<HTML
-<style>[data-amp-banner="homepage.top"] [data-amp-content-breakpoint="900"]{display:none}[data-amp-banner="homepage.top"] [data-amp-content-breakpoint="500"]{display:none}@media(max-width: 900px){[data-amp-banner="homepage.top"] [data-amp-content-breakpoint="default"]{display:none}[data-amp-banner="homepage.top"] [data-amp-content-breakpoint="900"]{display:block}[data-amp-banner="homepage.top"] [data-amp-content-breakpoint="500"]{display:none}}@media(max-width: 500px){[data-amp-banner="homepage.top"] [data-amp-content-breakpoint="default"]{display:none}[data-amp-banner="homepage.top"] [data-amp-content-breakpoint="900"]{display:none}[data-amp-banner="homepage.top"] [data-amp-content-breakpoint="500"]{display:block}}</style>
+<style>[data-amp-banner="homepage.top"] [data-amp-banner-id="12344"] [data-amp-content-breakpoint="900"]{display:none}[data-amp-banner="homepage.top"] [data-amp-banner-id="12344"] [data-amp-content-breakpoint="500"]{display:none}@media(max-width: 900px){[data-amp-banner="homepage.top"] [data-amp-banner-id="12344"] [data-amp-content-breakpoint="default"]{display:none}[data-amp-banner="homepage.top"] [data-amp-banner-id="12344"] [data-amp-content-breakpoint="900"]{display:block}[data-amp-banner="homepage.top"] [data-amp-banner-id="12344"] [data-amp-content-breakpoint="500"]{display:none}}@media(max-width: 500px){[data-amp-banner="homepage.top"] [data-amp-banner-id="12344"] [data-amp-content-breakpoint="default"]{display:none}[data-amp-banner="homepage.top"] [data-amp-banner-id="12344"] [data-amp-content-breakpoint="900"]{display:none}[data-amp-banner="homepage.top"] [data-amp-banner-id="12344"] [data-amp-content-breakpoint="500"]{display:block}}</style>
 HTML;
 
         Assert::same($expected, $style->getCss());

diff --git a/tests/resources/renderer/multiple/multipleBannersFullFeatured.html b/tests/resources/renderer/multiple/multipleBannersFullFeatured.html
@@ -1,7 +1,7 @@
 <div data-amp-banner="homepage.top" data-amp-attached>
     <div class="amp-banner amp-banner--multiple">
         <div class="amp-banner__list">
-            <div class="amp-banner__item" data-amp-banner-fingerprint="JTdCJTIyYmFubmVySWQlMjIlM0ElMjIxMjM0JTIyJTJDJTIyYmFubmVyTmFtZSUyMiUzQSUyMk1haW4lMjIlMkMlMjJwb3NpdGlvbklkJTIyJTNBJTIyMTIzNCUyMiUyQyUyMnBvc2l0aW9uQ29kZSUyMiUzQSUyMmhvbWVwYWdlLnRvcCUyMiUyQyUyMnBvc2l0aW9uTmFtZSUyMiUzQSUyMkhvbWVwYWdlJTIwdG9wJTIyJTJDJTIyY2FtcGFpZ25JZCUyMiUzQW51bGwlMkMlMjJjYW1wYWlnbkNvZGUlMjIlM0FudWxsJTJDJTIyY2FtcGFpZ25OYW1lJTIyJTNBbnVsbCU3RA">
+            <div class="amp-banner__item" data-amp-banner-fingerprint="JTdCJTIyYmFubmVySWQlMjIlM0ElMjIxMjM0JTIyJTJDJTIyYmFubmVyTmFtZSUyMiUzQSUyMk1haW4lMjIlMkMlMjJwb3NpdGlvbklkJTIyJTNBJTIyMTIzNCUyMiUyQyUyMnBvc2l0aW9uQ29kZSUyMiUzQSUyMmhvbWVwYWdlLnRvcCUyMiUyQyUyMnBvc2l0aW9uTmFtZSUyMiUzQSUyMkhvbWVwYWdlJTIwdG9wJTIyJTJDJTIyY2FtcGFpZ25JZCUyMiUzQW51bGwlMkMlMjJjYW1wYWlnbkNvZGUlMjIlM0FudWxsJTJDJTIyY2FtcGFpZ25OYW1lJTIyJTNBbnVsbCU3RA" data-amp-banner-id="1234">
                 <div data-amp-content-breakpoint="default" class="amp-banner__content amp-banner__content--html">
                     <p>Small content</p>
                 </div>
@@ -19,9 +19,9 @@
                         <img srcset="https://img.example.com/600/main2.png 600w" src="https://img.example.com/600/main2.png" sizes="100vw" alt="Main 2" title="Main 2">
                     </picture>
                 </a>
-                <style>[data-amp-banner="homepage.top"] [data-amp-content-breakpoint="400"]{display:none}[data-amp-banner="homepage.top"] [data-amp-content-breakpoint="600"]{display:none}@media(min-width: 400px){[data-amp-banner="homepage.top"] [data-amp-content-breakpoint="default"]{display:none}[data-amp-banner="homepage.top"] [data-amp-content-breakpoint="400"]{display:block}[data-amp-banner="homepage.top"] [data-amp-content-breakpoint="600"]{display:none}}@media(min-width: 600px){[data-amp-banner="homepage.top"] [data-amp-content-breakpoint="default"]{display:none}[data-amp-banner="homepage.top"] [data-amp-content-breakpoint="400"]{display:none}[data-amp-banner="homepage.top"] [data-amp-content-breakpoint="600"]{display:block}}</style>
+                <style>[data-amp-banner="homepage.top"] [data-amp-banner-id="1234"] [data-amp-content-breakpoint="400"]{display:none}[data-amp-banner="homepage.top"] [data-amp-banner-id="1234"] [data-amp-content-breakpoint="600"]{display:none}@media(min-width: 400px){[data-amp-banner="homepage.top"] [data-amp-banner-id="1234"] [data-amp-content-breakpoint="default"]{display:none}[data-amp-banner="homepage.top"] [data-amp-banner-id="1234"] [data-amp-content-breakpoint="400"]{display:block}[data-amp-banner="homepage.top"] [data-amp-banner-id="1234"] [data-amp-content-breakpoint="600"]{display:none}}@media(min-width: 600px){[data-amp-banner="homepage.top"] [data-amp-banner-id="1234"] [data-amp-content-breakpoint="default"]{display:none}[data-amp-banner="homepage.top"] [data-amp-banner-id="1234"] [data-amp-content-breakpoint="400"]{display:none}[data-amp-banner="homepage.top"] [data-amp-banner-id="1234"] [data-amp-content-breakpoint="600"]{display:block}}</style>
             </div>
-            <div class="amp-banner__item" data-amp-banner-fingerprint="JTdCJTIyYmFubmVySWQlMjIlM0ElMjIxMjM1JTIyJTJDJTIyYmFubmVyTmFtZSUyMiUzQSUyMlNlY29uZGFyeSUyMiUyQyUyMnBvc2l0aW9uSWQlMjIlM0ElMjIxMjM0JTIyJTJDJTIycG9zaXRpb25Db2RlJTIyJTNBJTIyaG9tZXBhZ2UudG9wJTIyJTJDJTIycG9zaXRpb25OYW1lJTIyJTNBJTIySG9tZXBhZ2UlMjB0b3AlMjIlMkMlMjJjYW1wYWlnbklkJTIyJTNBbnVsbCUyQyUyMmNhbXBhaWduQ29kZSUyMiUzQW51bGwlMkMlMjJjYW1wYWlnbk5hbWUlMjIlM0FudWxsJTdE">
+            <div class="amp-banner__item" data-amp-banner-fingerprint="JTdCJTIyYmFubmVySWQlMjIlM0ElMjIxMjM1JTIyJTJDJTIyYmFubmVyTmFtZSUyMiUzQSUyMlNlY29uZGFyeSUyMiUyQyUyMnBvc2l0aW9uSWQlMjIlM0ElMjIxMjM0JTIyJTJDJTIycG9zaXRpb25Db2RlJTIyJTNBJTIyaG9tZXBhZ2UudG9wJTIyJTJDJTIycG9zaXRpb25OYW1lJTIyJTNBJTIySG9tZXBhZ2UlMjB0b3AlMjIlMkMlMjJjYW1wYWlnbklkJTIyJTNBbnVsbCUyQyUyMmNhbXBhaWduQ29kZSUyMiUzQW51bGwlMkMlMjJjYW1wYWlnbk5hbWUlMjIlM0FudWxsJTdE" data-amp-banner-id="1235">
                 <a data-amp-content-breakpoint="default" class="amp-banner__content amp-banner__content--img" href="https://www.example.com/secondary1">
                     <picture>
                         <img srcset="https://img.example.com/800/secondary1.png 800w, https://img.example.com/1000/secondary1.png 1000w" src="https://img.example.com/1000/secondary1.png" sizes="(min-width: 1000px) 1000px, 100vw" alt="Secondary 1" title="Secondary 1">

diff --git a/tests/resources/renderer/random/bannerWithBreakpointHtmlContentOnly.html b/tests/resources/renderer/random/bannerWithBreakpointHtmlContentOnly.html
@@ -1,8 +1,8 @@
 <div data-amp-banner="homepage.top" data-amp-attached>
-    <div class="amp-banner amp-banner--random" data-amp-banner-fingerprint="JTdCJTIyYmFubmVySWQlMjIlM0ElMjIxMjM0JTIyJTJDJTIyYmFubmVyTmFtZSUyMiUzQSUyMk1haW4lMjIlMkMlMjJwb3NpdGlvbklkJTIyJTNBJTIyMTIzNCUyMiUyQyUyMnBvc2l0aW9uQ29kZSUyMiUzQSUyMmhvbWVwYWdlLnRvcCUyMiUyQyUyMnBvc2l0aW9uTmFtZSUyMiUzQSUyMkhvbWVwYWdlJTIwdG9wJTIyJTJDJTIyY2FtcGFpZ25JZCUyMiUzQW51bGwlMkMlMjJjYW1wYWlnbkNvZGUlMjIlM0FudWxsJTJDJTIyY2FtcGFpZ25OYW1lJTIyJTNBbnVsbCU3RA">
+    <div class="amp-banner amp-banner--random" data-amp-banner-fingerprint="JTdCJTIyYmFubmVySWQlMjIlM0ElMjIxMjM0JTIyJTJDJTIyYmFubmVyTmFtZSUyMiUzQSUyMk1haW4lMjIlMkMlMjJwb3NpdGlvbklkJTIyJTNBJTIyMTIzNCUyMiUyQyUyMnBvc2l0aW9uQ29kZSUyMiUzQSUyMmhvbWVwYWdlLnRvcCUyMiUyQyUyMnBvc2l0aW9uTmFtZSUyMiUzQSUyMkhvbWVwYWdlJTIwdG9wJTIyJTJDJTIyY2FtcGFpZ25JZCUyMiUzQW51bGwlMkMlMjJjYW1wYWlnbkNvZGUlMjIlM0FudWxsJTJDJTIyY2FtcGFpZ25OYW1lJTIyJTNBbnVsbCU3RA" data-amp-banner-id="1234">
         <div data-amp-content-breakpoint="500" class="amp-banner__content amp-banner__content--html">
             <p>My <span style="color:red;">Awesome</span> content!</p>
         </div>
-        <style>[data-amp-banner="homepage.top"] [data-amp-content-breakpoint="500"]{display:none}@media(min-width: 500px){[data-amp-banner="homepage.top"] [data-amp-content-breakpoint="500"]{display:block}}</style>
+        <style>[data-amp-banner="homepage.top"] [data-amp-banner-id="1234"] [data-amp-content-breakpoint="500"]{display:none}@media(min-width: 500px){[data-amp-banner="homepage.top"] [data-amp-banner-id="1234"] [data-amp-content-breakpoint="500"]{display:block}}</style>
     </div>
 </div>
diff --git a/tests/resources/renderer/random/bannerWithBreakpointImageContentOnly.html b/tests/resources/renderer/random/bannerWithBreakpointImageContentOnly.html
@@ -1,10 +1,10 @@
 <div data-amp-banner="homepage.top" data-amp-attached>
-    <div class="amp-banner amp-banner--random" data-amp-banner-fingerprint="JTdCJTIyYmFubmVySWQlMjIlM0ElMjIxMjM0JTIyJTJDJTIyYmFubmVyTmFtZSUyMiUzQSUyMk1haW4lMjIlMkMlMjJwb3NpdGlvbklkJTIyJTNBJTIyMTIzNCUyMiUyQyUyMnBvc2l0aW9uQ29kZSUyMiUzQSUyMmhvbWVwYWdlLnRvcCUyMiUyQyUyMnBvc2l0aW9uTmFtZSUyMiUzQSUyMkhvbWVwYWdlJTIwdG9wJTIyJTJDJTIyY2FtcGFpZ25JZCUyMiUzQW51bGwlMkMlMjJjYW1wYWlnbkNvZGUlMjIlM0FudWxsJTJDJTIyY2FtcGFpZ25OYW1lJTIyJTNBbnVsbCU3RA">
+    <div class="amp-banner amp-banner--random" data-amp-banner-fingerprint="JTdCJTIyYmFubmVySWQlMjIlM0ElMjIxMjM0JTIyJTJDJTIyYmFubmVyTmFtZSUyMiUzQSUyMk1haW4lMjIlMkMlMjJwb3NpdGlvbklkJTIyJTNBJTIyMTIzNCUyMiUyQyUyMnBvc2l0aW9uQ29kZSUyMiUzQSUyMmhvbWVwYWdlLnRvcCUyMiUyQyUyMnBvc2l0aW9uTmFtZSUyMiUzQSUyMkhvbWVwYWdlJTIwdG9wJTIyJTJDJTIyY2FtcGFpZ25JZCUyMiUzQW51bGwlMkMlMjJjYW1wYWlnbkNvZGUlMjIlM0FudWxsJTJDJTIyY2FtcGFpZ25OYW1lJTIyJTNBbnVsbCU3RA" data-amp-banner-id="1234">
         <a data-amp-content-breakpoint="500" class="amp-banner__content amp-banner__content--img" href="https://www.example.com/main1">
             <picture>
                 <img srcset="https://img.example.com/500/main1.png 500w, https://img.example.com/1000/main1.png 1000w" src="https://img.example.com/1000/main1.png" sizes="(min-width: 1000px) calc(1000px - 2 * 16px), (min-width: 600px) calc(100vw - 2 * 16px), 100vw" alt="Main 1" title="Main 1">
             </picture>
         </a>
-        <style>[data-amp-banner="homepage.top"] [data-amp-content-breakpoint="500"]{display:none}@media(min-width: 500px){[data-amp-banner="homepage.top"] [data-amp-content-breakpoint="500"]{display:block}}</style>
+        <style>[data-amp-banner="homepage.top"] [data-amp-banner-id="1234"] [data-amp-content-breakpoint="500"]{display:none}@media(min-width: 500px){[data-amp-banner="homepage.top"] [data-amp-banner-id="1234"] [data-amp-content-breakpoint="500"]{display:block}}</style>
     </div>
 </div>
diff --git a/tests/resources/renderer/random/bannerWithDefaultHtmlContentOnly.html b/tests/resources/renderer/random/bannerWithDefaultHtmlContentOnly.html
@@ -1,5 +1,5 @@
 <div data-amp-banner="homepage.top" data-amp-attached>
-    <div class="amp-banner amp-banner--random" data-amp-banner-fingerprint="JTdCJTIyYmFubmVySWQlMjIlM0ElMjIxMjM0JTIyJTJDJTIyYmFubmVyTmFtZSUyMiUzQSUyMk1haW4lMjIlMkMlMjJwb3NpdGlvbklkJTIyJTNBJTIyMTIzNCUyMiUyQyUyMnBvc2l0aW9uQ29kZSUyMiUzQSUyMmhvbWVwYWdlLnRvcCUyMiUyQyUyMnBvc2l0aW9uTmFtZSUyMiUzQSUyMkhvbWVwYWdlJTIwdG9wJTIyJTJDJTIyY2FtcGFpZ25JZCUyMiUzQW51bGwlMkMlMjJjYW1wYWlnbkNvZGUlMjIlM0FudWxsJTJDJTIyY2FtcGFpZ25OYW1lJTIyJTNBbnVsbCU3RA">
+    <div class="amp-banner amp-banner--random" data-amp-banner-fingerprint="JTdCJTIyYmFubmVySWQlMjIlM0ElMjIxMjM0JTIyJTJDJTIyYmFubmVyTmFtZSUyMiUzQSUyMk1haW4lMjIlMkMlMjJwb3NpdGlvbklkJTIyJTNBJTIyMTIzNCUyMiUyQyUyMnBvc2l0aW9uQ29kZSUyMiUzQSUyMmhvbWVwYWdlLnRvcCUyMiUyQyUyMnBvc2l0aW9uTmFtZSUyMiUzQSUyMkhvbWVwYWdlJTIwdG9wJTIyJTJDJTIyY2FtcGFpZ25JZCUyMiUzQW51bGwlMkMlMjJjYW1wYWlnbkNvZGUlMjIlM0FudWxsJTJDJTIyY2FtcGFpZ25OYW1lJTIyJTNBbnVsbCU3RA" data-amp-banner-id="1234">
         <div data-amp-content-breakpoint="default" class="amp-banner__content amp-banner__content--html">
             <p>My <span style="color:red;">Awesome</span> content!</p>
         </div>

diff --git a/tests/resources/renderer/random/bannerWithDefaultImageContentOnly.withOptionalValues.html b/tests/resources/renderer/random/bannerWithDefaultImageContentOnly.withOptionalValues.html
@@ -1,5 +1,5 @@
 <div data-amp-banner="homepage.top" data-amp-attached>
-    <div class="amp-banner amp-banner--random" data-amp-banner-fingerprint="JTdCJTIyYmFubmVySWQlMjIlM0ElMjIxMjM0JTIyJTJDJTIyYmFubmVyTmFtZSUyMiUzQSUyMk1haW4lMjIlMkMlMjJwb3NpdGlvbklkJTIyJTNBJTIyMTIzNCUyMiUyQyUyMnBvc2l0aW9uQ29kZSUyMiUzQSUyMmhvbWVwYWdlLnRvcCUyMiUyQyUyMnBvc2l0aW9uTmFtZSUyMiUzQSUyMkhvbWVwYWdlJTIwdG9wJTIyJTJDJTIyY2FtcGFpZ25JZCUyMiUzQW51bGwlMkMlMjJjYW1wYWlnbkNvZGUlMjIlM0FudWxsJTJDJTIyY2FtcGFpZ25OYW1lJTIyJTNBbnVsbCU3RA">
+    <div class="amp-banner amp-banner--random" data-amp-banner-fingerprint="JTdCJTIyYmFubmVySWQlMjIlM0ElMjIxMjM0JTIyJTJDJTIyYmFubmVyTmFtZSUyMiUzQSUyMk1haW4lMjIlMkMlMjJwb3NpdGlvbklkJTIyJTNBJTIyMTIzNCUyMiUyQyUyMnBvc2l0aW9uQ29kZSUyMiUzQSUyMmhvbWVwYWdlLnRvcCUyMiUyQyUyMnBvc2l0aW9uTmFtZSUyMiUzQSUyMkhvbWVwYWdlJTIwdG9wJTIyJTJDJTIyY2FtcGFpZ25JZCUyMiUzQW51bGwlMkMlMjJjYW1wYWlnbkNvZGUlMjIlM0FudWxsJTJDJTIyY2FtcGFpZ25OYW1lJTIyJTNBbnVsbCU3RA" data-amp-banner-id="1234">
         <a data-amp-content-breakpoint="default" class="amp-banner__content amp-banner__content--img" href="https://www.example.com/main1" target="_blank">
             <picture>
                 <source type="image/avif" srcset="https://img.example.com/500/main1.avif 500w, https://img.example.com/1000/main1.avif 1000w" sizes="(min-width: 1000px) calc(1000px - 2 * 16px), (min-width: 600px) calc(100vw - 2 * 16px), 100vw">

diff --git a/tests/resources/renderer/random/bannerWithDefaultImageContentOnly.withoutOptionalValues.html b/tests/resources/renderer/random/bannerWithDefaultImageContentOnly.withoutOptionalValues.html
@@ -1,5 +1,5 @@
 <div data-amp-banner="homepage.top" data-amp-attached>
-    <div class="amp-banner amp-banner--random" data-amp-banner-fingerprint="JTdCJTIyYmFubmVySWQlMjIlM0ElMjIxMjM0JTIyJTJDJTIyYmFubmVyTmFtZSUyMiUzQSUyMk1haW4lMjIlMkMlMjJwb3NpdGlvbklkJTIyJTNBJTIyMTIzNCUyMiUyQyUyMnBvc2l0aW9uQ29kZSUyMiUzQSUyMmhvbWVwYWdlLnRvcCUyMiUyQyUyMnBvc2l0aW9uTmFtZSUyMiUzQSUyMkhvbWVwYWdlJTIwdG9wJTIyJTJDJTIyY2FtcGFpZ25JZCUyMiUzQW51bGwlMkMlMjJjYW1wYWlnbkNvZGUlMjIlM0FudWxsJTJDJTIyY2FtcGFpZ25OYW1lJTIyJTNBbnVsbCU3RA">
+    <div class="amp-banner amp-banner--random" data-amp-banner-fingerprint="JTdCJTIyYmFubmVySWQlMjIlM0ElMjIxMjM0JTIyJTJDJTIyYmFubmVyTmFtZSUyMiUzQSUyMk1haW4lMjIlMkMlMjJwb3NpdGlvbklkJTIyJTNBJTIyMTIzNCUyMiUyQyUyMnBvc2l0aW9uQ29kZSUyMiUzQSUyMmhvbWVwYWdlLnRvcCUyMiUyQyUyMnBvc2l0aW9uTmFtZSUyMiUzQSUyMkhvbWVwYWdlJTIwdG9wJTIyJTJDJTIyY2FtcGFpZ25JZCUyMiUzQW51bGwlMkMlMjJjYW1wYWlnbkNvZGUlMjIlM0FudWxsJTJDJTIyY2FtcGFpZ25OYW1lJTIyJTNBbnVsbCU3RA" data-amp-banner-id="1234">
         <a data-amp-content-breakpoint="default" class="amp-banner__content amp-banner__content--img" href="https://www.example.com/main1">
             <picture>
                 <img srcset="https://img.example.com/500/main1.png 500w, https://img.example.com/1000/main1.png 1000w" src="https://img.example.com/1000/main1.png" sizes="(min-width: 1000px) calc(1000px - 2 * 16px), (min-width: 600px) calc(100vw - 2 * 16px), 100vw" alt="Main 1" title="Main 1">