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,' + ); + 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)');