+ + This notification should ALSO ALWAYS show. + Learn more. + + + + + +
diff --git a/extensions/amp-a4a/0.1/amp-a4a.js b/extensions/amp-a4a/0.1/amp-a4a.js index 46361344fa027..4299b897ecae6 100644 --- a/extensions/amp-a4a/0.1/amp-a4a.js +++ b/extensions/amp-a4a/0.1/amp-a4a.js @@ -1714,7 +1714,6 @@ export class AmpA4A extends AMP.BaseElement { height, width ); - this.applyFillContent(this.iframe); let body = ''; // If srcdoc is not supported, streaming is also not supported so we @@ -1789,7 +1788,6 @@ export class AmpA4A extends AMP.BaseElement { 'title': this.getIframeTitle(), }) )); - this.applyFillContent(this.iframe); const fontsArray = []; if (creativeMetaData.customStylesheets) { creativeMetaData.customStylesheets.forEach((s) => { diff --git a/extensions/amp-ad/0.1/amp-ad-ui.js b/extensions/amp-ad/0.1/amp-ad-ui.js index 12868d1d1ef5b..cbca1db3b36d0 100644 --- a/extensions/amp-ad/0.1/amp-ad-ui.js +++ b/extensions/amp-ad/0.1/amp-ad-ui.js @@ -20,6 +20,7 @@ import { createElementWithAttributes, removeElement, } from '../../../src/dom'; +import {devAssert} from '../../../src/log'; import {dict} from '../../../src/utils/object'; import {getAdContainer} from '../../../src/ad-helper'; @@ -207,6 +208,17 @@ export class AmpAdUIHandler { maybeInitStickyAd() { if (this.isStickyAd()) { setStyle(this.element_, 'visibility', 'visible'); + + if (this.stickyAdPosition_ == StickyAdPositions.BOTTOM) { + const paddingBar = this.doc_.createElement('amp-ad-sticky-padding'); + this.element_.insertBefore( + paddingBar, + devAssert( + this.element_.firstChild, + 'amp-ad should have been expanded.' + ) + ); + } } } @@ -312,10 +324,10 @@ export class AmpAdUIHandler { } // Special case: for sticky ads, we enforce 20% size limit and 50% height limit - if (this.element_.hasAttribute('sticky')) { + if (this.isStickyAd()) { const viewport = this.baseInstance_.getViewport(); if ( - newHeight * newWidth > + height * width > STICKY_AD_MAX_SIZE_LIMIT * viewport.getHeight() * viewport.getWidth() || @@ -328,7 +340,10 @@ export class AmpAdUIHandler { return this.baseInstance_ .attemptChangeSize(newHeight, newWidth, event) .then( - () => resizeInfo, + () => { + this.setSize_(this.element_.querySelector('iframe'), height, width); + return resizeInfo; + }, () => { resizeInfo.success = false; return resizeInfo; @@ -336,6 +351,21 @@ export class AmpAdUIHandler { ); } + /** + * Force set the dimensions for an element + * @param {Any} element + * @param {number} newHeight + * @param {number} newWidth + */ + setSize_(element, newHeight, newWidth) { + if (newHeight) { + setStyle(element, 'height', newHeight, 'px'); + } + if (newWidth) { + setStyle(element, 'width', newWidth, 'px'); + } + } + /** * Clean up the listeners */ diff --git a/extensions/amp-ad/0.1/amp-ad-xorigin-iframe-handler.js b/extensions/amp-ad/0.1/amp-ad-xorigin-iframe-handler.js index c422194fe3f6a..0a83cb72c0438 100644 --- a/extensions/amp-ad/0.1/amp-ad-xorigin-iframe-handler.js +++ b/extensions/amp-ad/0.1/amp-ad-xorigin-iframe-handler.js @@ -100,7 +100,6 @@ export class AmpAdXOriginIframeHandler { devAssert(!this.iframe, 'multiple invocations of init without destroy!'); this.iframe = iframe; this.iframe.setAttribute('scrolling', 'no'); - this.baseInstance_.applyFillContent(this.iframe); const timer = Services.timerFor(this.baseInstance_.win); // Init the legacy observeInterection API service. diff --git a/extensions/amp-ad/0.1/amp-ad.css b/extensions/amp-ad/0.1/amp-ad.css index 5e0564756edaa..d265717186fa2 100644 --- a/extensions/amp-ad/0.1/amp-ad.css +++ b/extensions/amp-ad/0.1/amp-ad.css @@ -52,6 +52,12 @@ amp-embed iframe { amp-ad[sticky] { visibility: hidden; + align-items: center; +} + +amp-ad[amp-story] iframe { + width: 100%; + height: 100%; } amp-ad[type='adsense'], @@ -116,12 +122,26 @@ amp-ad .amp-ad-close-button:before { left: 0; } +amp-ad-sticky-padding { + display: block; + width: 100% !important; + background: #fff; + height: 4px; + max-height: 5px !important; + overflow-x: hidden; + overflow-y: hidden; + /** Must be above the dismiss button to cover bottom shadow */ + z-index: 12; +} + amp-ad[sticky] { z-index: 11; position: fixed; overflow: visible !important; padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2) !important; + display: flex; + flex-direction: column; } amp-ad[sticky='top'] { diff --git a/extensions/amp-ad/0.1/test/test-amp-ad-ui.js b/extensions/amp-ad/0.1/test/test-amp-ad-ui.js index bed0b6a4c560b..2bf13c45f10d8 100644 --- a/extensions/amp-ad/0.1/test/test-amp-ad-ui.js +++ b/extensions/amp-ad/0.1/test/test-amp-ad-ui.js @@ -245,6 +245,7 @@ describes.realWin( height: '50px', }); env.win.document.body.appendChild(adElement); + env.sandbox.stub(uiHandler, 'setSize_'); env.sandbox .stub(adImpl, 'attemptChangeSize') .callsFake((height, width) => { @@ -262,6 +263,7 @@ describes.realWin( }); it('should tolerate string input', () => { + env.sandbox.stub(uiHandler, 'setSize_'); env.sandbox .stub(adImpl, 'attemptChangeSize') .callsFake((height, width) => { diff --git a/extensions/amp-story-auto-ads/0.1/amp-story-auto-ads.css b/extensions/amp-story-auto-ads/0.1/amp-story-auto-ads.css index f994386f174cd..9c6fe8323872a 100644 --- a/extensions/amp-story-auto-ads/0.1/amp-story-auto-ads.css +++ b/extensions/amp-story-auto-ads/0.1/amp-story-auto-ads.css @@ -14,9 +14,9 @@ * limitations under the License. */ - .i-amphtml-story-desktop-panels amp-story-page[i-amphtml-loading][ad] { +.i-amphtml-story-desktop-panels amp-story-page[i-amphtml-loading][ad] { /* Move below viewport so that ad preloads */ - transform: scale(1.0) translateX(-100%) translateY(200%) !important; + transform: scale(1) translateX(-100%) translateY(200%) !important; } .i-amphtml-cta-container { @@ -43,21 +43,23 @@ amp-story-page[xdomain-ad] .i-amphtml-glass-pane { } /* TODO(ccordry): refactor centering logic in amp-ad.css and remove this hack. */ -amp-story-page amp-ad[data-a4a-upgrade-type="amp-ad-network-doubleclick-impl"] > iframe, -amp-story-page amp-ad[type="adsense"] > iframe { +amp-story-page amp-ad[data-a4a-upgrade-type='amp-ad-network-doubleclick-impl'], +amp-story-page amp-ad[type='adsense'] { top: 0 !important; left: 0 !important; transform: translate(0) !important; } /* TODO(ccordry) allow advertisers to opt-in to fullscreen ads. */ -.i-amphtml-story-desktop-fullbleed .i-amphtml-story-grid-template-fill > amp-ad > iframe { +.i-amphtml-story-desktop-fullbleed + .i-amphtml-story-grid-template-fill + > amp-ad { left: 50% !important; right: auto !important; margin: auto !important; min-height: 75vh !important; max-height: 75vh !important; - min-width: calc(3/5 * 75vh) !important; - max-width: calc(3/5 * 75vh) !important; + min-width: calc(3 / 5 * 75vh) !important; + max-width: calc(3 / 5 * 75vh) !important; transform: translateX(-50%) !important; }