From 599b2313dd4b8ba5b278cbdc2ee19b388cd2c717 Mon Sep 17 00:00:00 2001
From: Sebastian Benz <sbenz@google.com>
Date: Thu, 8 Aug 2019 23:07:00 +0200
Subject: [PATCH] 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
---
 src/custom-element.js            | 24 ++++++++++++++++++++++--
 test/unit/test-custom-element.js | 28 ++++++++++++++++++++++++++--
 2 files changed, 48 insertions(+), 4 deletions(-)

diff --git a/src/custom-element.js b/src/custom-element.js
index 36da460cc275..0c851fdb3eb5 100644
--- a/src/custom-element.js
+++ b/src/custom-element.js
@@ -653,7 +653,8 @@ 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');
@@ -661,6 +662,25 @@ function createBaseCustomElementClass(win) {
       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 sizerElement = sizer.querySelector('.i-amphtml-intrinsic-sizer');
+        if (!sizerElement) {
+          return;
+        }
+        sizerElement.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 +762,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
index 9aa0bcbdbb75..d1a371751f38 100644
--- 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)');