✨Make "layout=intrinsic" compatible with SSR (#23831)

* Make "layout=intrinsic" compatible with SSR Handles resize events by setting intrinsic layout's img src to ''. This does not include validator updates to support the intrinsic sizer. Fixes #17686 * change variable name
ampproject · Aug 9, 2019 · 1c42daa · 1c42daa
1 parent 5970a1e
commit 1c42daa
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 4 deletions.
diff --git a/src/custom-element.js b/src/custom-element.js
@@ -653,14 +653,36 @@ function createBaseCustomElementClass(win) {
     getSizer_() {
       if (
         this.sizerElement === undefined &&
-        this.layout_ === Layout.RESPONSIVE
+        (this.layout_ === Layout.RESPONSIVE ||
+          this.layout_ === Layout.INTRINSIC)
       ) {
         // Expect sizer to exist, just not yet discovered.
         this.sizerElement = this.querySelector('i-amphtml-sizer');
       }
       return this.sizerElement || null;
     }
 
+    /**
+     * @param {Element} sizer
+     * @private
+     */
+    resetSizer_(sizer) {
+      if (this.layout_ === Layout.RESPONSIVE) {
+        setStyle(sizer, 'paddingTop', '0');
+        return;
+      }
+      if (this.layout_ === Layout.INTRINSIC) {
+        const intrinsicSizerImg = sizer.querySelector(
+          '.i-amphtml-intrinsic-sizer'
+        );
+        if (!intrinsicSizerImg) {
+          return;
+        }
+        intrinsicSizerImg.setAttribute('src', '');
+        return;
+      }
+    }
+
     /**
      * If the element has a media attribute, evaluates the value as a media
      * query and based on the result adds or removes the class
@@ -742,7 +764,7 @@ function createBaseCustomElementClass(win) {
         // responsible for managing its height. Aspect ratio is no longer
         // preserved.
         this.sizerElement = null;
-        setStyle(sizer, 'paddingTop', '0');
+        this.resetSizer_(sizer);
         this.mutateOrInvoke_(() => {
           dom.removeElement(sizer);
         });

diff --git a/test/unit/test-custom-element.js b/test/unit/test-custom-element.js
@@ -1307,8 +1307,6 @@ describes.realWin('CustomElement', {amp: true}, env => {
         const sizer = doc.createElement('div');
         element.sizerElement = sizer;
         element.changeSize(111, 222, {top: 1, right: 2, bottom: 3, left: 4});
-        expect(parseInt(sizer.style.paddingTop, 10)).to.equal(0);
-        expect(element.sizerElement).to.be.null;
         expect(element.style.height).to.equal('111px');
         expect(element.style.width).to.equal('222px');
         expect(element.style.marginTop).to.equal('1px');
@@ -1317,6 +1315,32 @@ describes.realWin('CustomElement', {amp: true}, env => {
         expect(element.style.marginLeft).to.equal('4px');
       });
 
+      it('should reset sizer for responsive layout', () => {
+        const element = new ElementClass();
+        element.layout_ = Layout.RESPONSIVE;
+        const sizer = doc.createElement('div');
+        element.sizerElement = sizer;
+        element.changeSize(111, 222, {top: 1, right: 2, bottom: 3, left: 4});
+        expect(sizer.style.paddingTop).to.equal('0px');
+        expect(element.sizerElement).to.be.null;
+      });
+
+      it('should reset sizer for intrinsic layout', () => {
+        const element = new ElementClass();
+        element.layout_ = Layout.INTRINSIC;
+        const sizer = doc.createElement('i-amphtml-sizer');
+        const intrinsicSizer = doc.createElement('img');
+        intrinsicSizer.classList.add('i-amphtml-intrinsic-sizer');
+        intrinsicSizer.setAttribute(
+          'src',
+          'data:image/svg+xml;charset=utf-8,<svg height=&quot;610&quot; width=&quot;1080&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; version=&quot;1.1&quot;/>'
+        );
+        sizer.appendChild(intrinsicSizer);
+        element.appendChild(sizer);
+        element.changeSize(111);
+        expect(intrinsicSizer.getAttribute('src')).to.equal('');
+      });
+
       it('should NOT apply media condition in template', () => {
         const element1 = new ElementClass();
         element1.setAttribute('media', '(min-width: 1px)');