Apply slot="i-amphtml-svc" to sizer elements.

caroqliu · caroqliu · commit c5489076531c · 2021-08-13T16:43:43.000-04:00
diff --git a/packages/optimizer/lib/transformers/ApplyLayout.js b/packages/optimizer/lib/transformers/ApplyLayout.js
@@ -124,6 +124,7 @@ function maybeAddSizerInto(node, layout, width, height) {
 function createResponsiveSizer(width, height) {
   const padding = (height.numeral / width.numeral) * 100;
   const sizer = createElement('i-amphtml-sizer', {
+    slot: 'i-amphtml-svc',
     style: `display:block;padding-top:${parseFloat(padding.toFixed(4))}%`,
   });
   return sizer;
@@ -134,6 +135,7 @@ function createIntrinsicSizer(width, height) {
   // trick Note a naked svg won't work because other things expect the
   // i-amphtml-sizer element
   const sizer = createElement('i-amphtml-sizer', {
+    slot: 'i-amphtml-svc',
     class: 'i-amphtml-sizer',
   });
   const sizerImg = createElement('img', {
diff --git a/packages/optimizer/spec/end-to-end/body-only/expected_output.full.html b/packages/optimizer/spec/end-to-end/body-only/expected_output.full.html
@@ -8,7 +8,7 @@
 <body>
   <h1>Hello, AMP world!</h1>
   <amp-video width="480" height="270" src="https://amp.dev/static/samples/video/tokyo.mp4" poster="https://amp.dev/static/samples/img/tokyo.jpg" layout="responsive" controls class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive">
-    <i-amphtml-sizer style="display:block;padding-top:56.25%"></i-amphtml-sizer>
+    <i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:56.25%"></i-amphtml-sizer>
   </amp-video>
 </body>
 </html>
diff --git a/packages/optimizer/spec/end-to-end/body-only/expected_output.lts.html b/packages/optimizer/spec/end-to-end/body-only/expected_output.lts.html
@@ -8,7 +8,7 @@
 <body>
   <h1>Hello, AMP world!</h1>
   <amp-video width="480" height="270" src="https://amp.dev/static/samples/video/tokyo.mp4" poster="https://amp.dev/static/samples/img/tokyo.jpg" layout="responsive" controls class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive">
-    <i-amphtml-sizer style="display:block;padding-top:56.25%"></i-amphtml-sizer>
+    <i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:56.25%"></i-amphtml-sizer>
   </amp-video>
 </body>
 </html>
diff --git a/packages/optimizer/spec/end-to-end/hello-world/expected_output.fast.html b/packages/optimizer/spec/end-to-end/hello-world/expected_output.fast.html
@@ -8,10 +8,10 @@
 <body>
   <h1>Hello, AMP world!</h1>
   <amp-img src="https://amp.dev/static/samples/img/amp.jpg" width="1080" height="610" layout="responsive" i-amphtml-ssr data-hero class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive">
-    <i-amphtml-sizer style="display:block;padding-top:56.4815%"></i-amphtml-sizer><img class="i-amphtml-fill-content i-amphtml-replaced-content" decoding="async" loading="lazy" src="https://amp.dev/static/samples/img/amp.jpg">
+    <i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:56.4815%"></i-amphtml-sizer><img class="i-amphtml-fill-content i-amphtml-replaced-content" decoding="async" loading="lazy" src="https://amp.dev/static/samples/img/amp.jpg">
   </amp-img>
   <amp-video width="480" height="270" src="https://amp.dev/static/samples/video/tokyo.mp4" poster="https://amp.dev/static/samples/img/tokyo.jpg" layout="responsive" controls class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive">
-    <i-amphtml-sizer style="display:block;padding-top:56.25%"></i-amphtml-sizer>
+    <i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:56.25%"></i-amphtml-sizer>
     <div fallback>
       <p>Your browser doesn't support HTML5 video.</p>
     </div>
diff --git a/packages/optimizer/spec/end-to-end/hello-world/expected_output.full.html b/packages/optimizer/spec/end-to-end/hello-world/expected_output.full.html
@@ -8,10 +8,10 @@
 <body>
   <h1>Hello, AMP world!</h1>
   <amp-img src="https://amp.dev/static/samples/img/amp.jpg" width="1080" height="610" layout="responsive" i-amphtml-ssr data-hero class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive">
-    <i-amphtml-sizer style="display:block;padding-top:56.4815%"></i-amphtml-sizer><img class="i-amphtml-fill-content i-amphtml-replaced-content" decoding="async" loading="lazy" src="https://amp.dev/static/samples/img/amp.jpg">
+    <i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:56.4815%"></i-amphtml-sizer><img class="i-amphtml-fill-content i-amphtml-replaced-content" decoding="async" loading="lazy" src="https://amp.dev/static/samples/img/amp.jpg">
   </amp-img>
   <amp-video width="480" height="270" src="https://amp.dev/static/samples/video/tokyo.mp4" poster="https://amp.dev/static/samples/img/tokyo.jpg" layout="responsive" controls class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive">
-    <i-amphtml-sizer style="display:block;padding-top:56.25%"></i-amphtml-sizer>
+    <i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:56.25%"></i-amphtml-sizer>
     <div fallback>
       <p>Your browser doesn't support HTML5 video.</p>
     </div>
diff --git a/packages/optimizer/spec/end-to-end/hello-world/expected_output.lts.html b/packages/optimizer/spec/end-to-end/hello-world/expected_output.lts.html
@@ -8,10 +8,10 @@
 <body>
   <h1>Hello, AMP world!</h1>
   <amp-img src="https://amp.dev/static/samples/img/amp.jpg" width="1080" height="610" layout="responsive" i-amphtml-ssr data-hero class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive">
-    <i-amphtml-sizer style="display:block;padding-top:56.4815%"></i-amphtml-sizer><img class="i-amphtml-fill-content i-amphtml-replaced-content" decoding="async" loading="lazy" src="https://amp.dev/static/samples/img/amp.jpg">
+    <i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:56.4815%"></i-amphtml-sizer><img class="i-amphtml-fill-content i-amphtml-replaced-content" decoding="async" loading="lazy" src="https://amp.dev/static/samples/img/amp.jpg">
   </amp-img>
   <amp-video width="480" height="270" src="https://amp.dev/static/samples/video/tokyo.mp4" poster="https://amp.dev/static/samples/img/tokyo.jpg" layout="responsive" controls class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive">
-    <i-amphtml-sizer style="display:block;padding-top:56.25%"></i-amphtml-sizer>
+    <i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:56.25%"></i-amphtml-sizer>
     <div fallback>
       <p>Your browser doesn't support HTML5 video.</p>
     </div>
diff --git a/packages/optimizer/spec/end-to-end/hello-world/expected_output.paired.html b/packages/optimizer/spec/end-to-end/hello-world/expected_output.paired.html
@@ -11,10 +11,10 @@
 <body>
   <h1>Hello, AMP world!</h1>
   <amp-img src="https://amp.dev/static/samples/img/amp.jpg" width="1080" height="610" layout="responsive" i-amphtml-ssr data-hero class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive">
-    <i-amphtml-sizer style="display:block;padding-top:56.4815%"></i-amphtml-sizer><img class="i-amphtml-fill-content i-amphtml-replaced-content" decoding="async" loading="lazy" src="https://amp.dev/static/samples/img/amp.jpg">
+    <i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:56.4815%"></i-amphtml-sizer><img class="i-amphtml-fill-content i-amphtml-replaced-content" decoding="async" loading="lazy" src="https://amp.dev/static/samples/img/amp.jpg">
   </amp-img>
   <amp-video width="480" height="270" src="https://amp.dev/static/samples/video/tokyo.mp4" poster="https://amp.dev/static/samples/img/tokyo.jpg" layout="responsive" controls class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive">
-    <i-amphtml-sizer style="display:block;padding-top:56.25%"></i-amphtml-sizer>
+    <i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:56.25%"></i-amphtml-sizer>
     <div fallback>
       <p>Your browser doesn't support HTML5 video.</p>
     </div>
diff --git a/packages/optimizer/spec/end-to-end/markdown/expected_output.full.html b/packages/optimizer/spec/end-to-end/markdown/expected_output.full.html
@@ -161,16 +161,16 @@ <h2>Links</h2>
   <h2>Images</h2>
   <p>
     <amp-img src="https://octodex.github.com/images/minion.png" alt="Minion" width="896" height="896" layout="intrinsic" class="i-amphtml-layout-intrinsic i-amphtml-layout-size-defined" i-amphtml-layout="intrinsic">
-      <i-amphtml-sizer class="i-amphtml-sizer"><img alt aria-hidden="true" class="i-amphtml-intrinsic-sizer" role="presentation" src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9Ijg5NiIgd2lkdGg9Ijg5NiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4="></i-amphtml-sizer>
+      <i-amphtml-sizer slot="i-amphtml-svc" class="i-amphtml-sizer"><img alt aria-hidden="true" class="i-amphtml-intrinsic-sizer" role="presentation" src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9Ijg5NiIgd2lkdGg9Ijg5NiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4="></i-amphtml-sizer>
     </amp-img>
     <amp-img src="https://octodex.github.com/images/stormtroopocat.jpg" alt="Stormtroopocat" title="The Stormtroopocat" width="704" height="676" layout="intrinsic" class="i-amphtml-layout-intrinsic i-amphtml-layout-size-defined" i-amphtml-layout="intrinsic">
-      <i-amphtml-sizer class="i-amphtml-sizer"><img alt aria-hidden="true" class="i-amphtml-intrinsic-sizer" role="presentation" src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjY3NiIgd2lkdGg9IjcwNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4="></i-amphtml-sizer>
+      <i-amphtml-sizer slot="i-amphtml-svc" class="i-amphtml-sizer"><img alt aria-hidden="true" class="i-amphtml-intrinsic-sizer" role="presentation" src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjY3NiIgd2lkdGg9IjcwNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4="></i-amphtml-sizer>
     </amp-img>
   </p>
   <p>Like links, Images also have a footnote style syntax</p>
   <p>
     <amp-img src="https://octodex.github.com/images/dojocat.jpg" alt="Alt text" title="The Dojocat" width="896" height="896" layout="intrinsic" class="i-amphtml-layout-intrinsic i-amphtml-layout-size-defined" i-amphtml-layout="intrinsic">
-      <i-amphtml-sizer class="i-amphtml-sizer"><img alt aria-hidden="true" class="i-amphtml-intrinsic-sizer" role="presentation" src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9Ijg5NiIgd2lkdGg9Ijg5NiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4="></i-amphtml-sizer>
+      <i-amphtml-sizer slot="i-amphtml-svc" class="i-amphtml-sizer"><img alt aria-hidden="true" class="i-amphtml-intrinsic-sizer" role="presentation" src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9Ijg5NiIgd2lkdGg9Ijg5NiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4="></i-amphtml-sizer>
     </amp-img>
   </p>
   <p>With a reference later in the document defining the URL location:</p>
diff --git a/packages/optimizer/spec/end-to-end/markdown/expected_output.lts.html b/packages/optimizer/spec/end-to-end/markdown/expected_output.lts.html
@@ -161,16 +161,16 @@ <h2>Links</h2>
   <h2>Images</h2>
   <p>
     <amp-img src="https://octodex.github.com/images/minion.png" alt="Minion" width="896" height="896" layout="intrinsic" class="i-amphtml-layout-intrinsic i-amphtml-layout-size-defined" i-amphtml-layout="intrinsic">
-      <i-amphtml-sizer class="i-amphtml-sizer"><img alt aria-hidden="true" class="i-amphtml-intrinsic-sizer" role="presentation" src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9Ijg5NiIgd2lkdGg9Ijg5NiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4="></i-amphtml-sizer>
+      <i-amphtml-sizer slot="i-amphtml-svc" class="i-amphtml-sizer"><img alt aria-hidden="true" class="i-amphtml-intrinsic-sizer" role="presentation" src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9Ijg5NiIgd2lkdGg9Ijg5NiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4="></i-amphtml-sizer>
     </amp-img>
     <amp-img src="https://octodex.github.com/images/stormtroopocat.jpg" alt="Stormtroopocat" title="The Stormtroopocat" width="704" height="676" layout="intrinsic" class="i-amphtml-layout-intrinsic i-amphtml-layout-size-defined" i-amphtml-layout="intrinsic">
-      <i-amphtml-sizer class="i-amphtml-sizer"><img alt aria-hidden="true" class="i-amphtml-intrinsic-sizer" role="presentation" src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjY3NiIgd2lkdGg9IjcwNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4="></i-amphtml-sizer>
+      <i-amphtml-sizer slot="i-amphtml-svc" class="i-amphtml-sizer"><img alt aria-hidden="true" class="i-amphtml-intrinsic-sizer" role="presentation" src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjY3NiIgd2lkdGg9IjcwNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4="></i-amphtml-sizer>
     </amp-img>
   </p>
   <p>Like links, Images also have a footnote style syntax</p>
   <p>
     <amp-img src="https://octodex.github.com/images/dojocat.jpg" alt="Alt text" title="The Dojocat" width="896" height="896" layout="intrinsic" class="i-amphtml-layout-intrinsic i-amphtml-layout-size-defined" i-amphtml-layout="intrinsic">
-      <i-amphtml-sizer class="i-amphtml-sizer"><img alt aria-hidden="true" class="i-amphtml-intrinsic-sizer" role="presentation" src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9Ijg5NiIgd2lkdGg9Ijg5NiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4="></i-amphtml-sizer>
+      <i-amphtml-sizer slot="i-amphtml-svc" class="i-amphtml-sizer"><img alt aria-hidden="true" class="i-amphtml-intrinsic-sizer" role="presentation" src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9Ijg5NiIgd2lkdGg9Ijg5NiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4="></i-amphtml-sizer>
     </amp-img>
   </p>
   <p>With a reference later in the document defining the URL location:</p>
diff --git a/packages/optimizer/spec/end-to-end/story/expected_output.fast.html b/packages/optimizer/spec/end-to-end/story/expected_output.fast.html
@@ -29,7 +29,7 @@
         <h1>Hello World</h1>
         <p>This is the cover page of this story.</p>
         <amp-img data-hero src="https://amp.dev/static/samples/img/story_dog2.jpg" width="300" height="300" layout="responsive" alt class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive">
-          <i-amphtml-sizer style="display:block;padding-top:100%"></i-amphtml-sizer>
+          <i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:100%"></i-amphtml-sizer>
         </amp-img>
       </amp-story-grid-layer>
     </amp-story-page>
diff --git a/packages/optimizer/spec/end-to-end/story/expected_output.full.html b/packages/optimizer/spec/end-to-end/story/expected_output.full.html
@@ -25,7 +25,7 @@
         <h1>Hello World</h1>
         <p>This is the cover page of this story.</p>
         <amp-img data-hero src="https://amp.dev/static/samples/img/story_dog2.jpg" width="300" height="300" layout="responsive" alt class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive">
-          <i-amphtml-sizer style="display:block;padding-top:100%"></i-amphtml-sizer>
+          <i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:100%"></i-amphtml-sizer>
         </amp-img>
       </amp-story-grid-layer>
     </amp-story-page>
diff --git a/packages/optimizer/spec/end-to-end/story/expected_output.lts.html b/packages/optimizer/spec/end-to-end/story/expected_output.lts.html
@@ -25,7 +25,7 @@
         <h1>Hello World</h1>
         <p>This is the cover page of this story.</p>
         <amp-img data-hero src="https://amp.dev/static/samples/img/story_dog2.jpg" width="300" height="300" layout="responsive" alt class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive">
-          <i-amphtml-sizer style="display:block;padding-top:100%"></i-amphtml-sizer>
+          <i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:100%"></i-amphtml-sizer>
         </amp-img>
       </amp-story-grid-layer>
     </amp-story-page>
diff --git a/packages/optimizer/spec/end-to-end/story/expected_output.paired.html b/packages/optimizer/spec/end-to-end/story/expected_output.paired.html
@@ -26,7 +26,7 @@
         <h1>Hello World</h1>
         <p>This is the cover page of this story.</p>
         <amp-img data-hero src="https://amp.dev/static/samples/img/story_dog2.jpg" width="300" height="300" layout="responsive" alt class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive">
-          <i-amphtml-sizer style="display:block;padding-top:100%"></i-amphtml-sizer>
+          <i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:100%"></i-amphtml-sizer>
         </amp-img>
       </amp-story-grid-layer>
     </amp-story-page>
diff --git a/packages/optimizer/spec/transformers/valid/ServerSideRendering/converts_heights_attribute_to_css/expected_output.html b/packages/optimizer/spec/transformers/valid/ServerSideRendering/converts_heights_attribute_to_css/expected_output.html
@@ -9,7 +9,7 @@
 <body>
   <!-- converts heights to css -->
   <amp-img height="256" layout="responsive" src="https://acme.org/image1.png" width="320" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive" id="i-amp-0">
-    <i-amphtml-sizer style="display:block;padding-top:80%"></i-amphtml-sizer>
+    <i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:80%"></i-amphtml-sizer>
   </amp-img>
 </body>
 </html>
diff --git a/packages/optimizer/spec/transformers/valid/ServerSideRendering/converts_sizes_attribute_to_css/expected_output.html b/packages/optimizer/spec/transformers/valid/ServerSideRendering/converts_sizes_attribute_to_css/expected_output.html
@@ -10,11 +10,11 @@
 <body>
   <!-- requires srcset attribute -->
   <amp-img height="300" layout="responsive" src="https://acme.org/image1.png" width="400" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive">
-    <i-amphtml-sizer style="display:block;padding-top:75%"></i-amphtml-sizer>
+    <i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:75%"></i-amphtml-sizer>
   </amp-img>
   <!-- sizes -->
   <amp-img height="300" layout="responsive" srcset="img-480w.jpg 480w,img-800w.jpg 800w" src="https://acme.org/image1.png" width="400" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive" id="i-amp-0">
-    <i-amphtml-sizer style="display:block;padding-top:75%"></i-amphtml-sizer>
+    <i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:75%"></i-amphtml-sizer>
   </amp-img>
 </body>
 </html>
diff --git a/packages/optimizer/spec/transformers/valid/ServerSideRendering/does_not_change_content_in_templates/expected_output.html b/packages/optimizer/spec/transformers/valid/ServerSideRendering/does_not_change_content_in_templates/expected_output.html
@@ -9,7 +9,7 @@
       <amp-img height="42" layout="responsive" width="42"></amp-img>
     </script>
   <amp-img height="42" layout="responsive" width="42" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive">
-    <i-amphtml-sizer style="display:block;padding-top:100%"></i-amphtml-sizer>
+    <i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:100%"></i-amphtml-sizer>
   </amp-img>
 </body>
 </html>
diff --git a/packages/optimizer/spec/transformers/valid/ServerSideRendering/does_not_convert_invalid_heights_attribute/expected_output.html b/packages/optimizer/spec/transformers/valid/ServerSideRendering/does_not_convert_invalid_heights_attribute/expected_output.html
@@ -8,7 +8,7 @@
 </head>
 <body>
   <amp-img height="300" layout="responsive" heights="(min-width: 320px), 100vw" src="https://acme.org/image1.png" width="400" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive">
-    <i-amphtml-sizer style="display:block;padding-top:75%"></i-amphtml-sizer>
+    <i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:75%"></i-amphtml-sizer>
   </amp-img>
 </body>
 </html>
diff --git a/packages/optimizer/spec/transformers/valid/ServerSideRendering/does_not_convert_invalid_sizes_attribute/expected_output.html b/packages/optimizer/spec/transformers/valid/ServerSideRendering/does_not_convert_invalid_sizes_attribute/expected_output.html
@@ -8,7 +8,7 @@
 </head>
 <body>
   <amp-img height="300" layout="responsive" sizes="(min-width: 320px), 100vw" srcset="img-480w.jpg 480w,img-800w.jpg 800w" src="https://acme.org/image1.png" width="400" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive">
-    <i-amphtml-sizer style="display:block;padding-top:75%"></i-amphtml-sizer>
+    <i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:75%"></i-amphtml-sizer>
   </amp-img>
 </body>
 </html>
diff --git a/packages/optimizer/spec/transformers/valid/ServerSideRendering/transforms_layout_intrinsic/expected_output.html b/packages/optimizer/spec/transformers/valid/ServerSideRendering/transforms_layout_intrinsic/expected_output.html
@@ -4,7 +4,7 @@
 </head>
 <body>
   <amp-img height="100" width="300" layout="intrinsic" class="i-amphtml-layout-intrinsic i-amphtml-layout-size-defined" i-amphtml-layout="intrinsic">
-    <i-amphtml-sizer class="i-amphtml-sizer"><img alt aria-hidden="true" class="i-amphtml-intrinsic-sizer" role="presentation" src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMCIgd2lkdGg9IjMwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4="></i-amphtml-sizer>
+    <i-amphtml-sizer slot="i-amphtml-svc" class="i-amphtml-sizer"><img alt aria-hidden="true" class="i-amphtml-intrinsic-sizer" role="presentation" src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMCIgd2lkdGg9IjMwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4="></i-amphtml-sizer>
   </amp-img>
 </body>
 </html>
diff --git a/packages/optimizer/spec/transformers/valid/ServerSideRendering/transforms_layout_responsive/expected_output.html b/packages/optimizer/spec/transformers/valid/ServerSideRendering/transforms_layout_responsive/expected_output.html
