diff --git a/3p/3p.js b/3p/3p.js index f49ac18a9fa5..dbba876e5084 100644 --- a/3p/3p.js +++ b/3p/3p.js @@ -271,6 +271,7 @@ function validateAllowedFields(data, allowedFields) { mode: true, consentNotificationId: true, ampSlotIndex: true, + adHolderText: true, }; for (const field in data) { diff --git a/extensions/amp-ad/0.1/amp-ad-ui.js b/extensions/amp-ad/0.1/amp-ad-ui.js index 67c2e988829f..98773bd7f3ab 100644 --- a/extensions/amp-ad/0.1/amp-ad-ui.js +++ b/extensions/amp-ad/0.1/amp-ad-ui.js @@ -95,6 +95,8 @@ export class AmpAdUIHandler { if (isExperimentOn(this.baseInstance_.win, 'ad-loader-v2')) { content.setAttribute('experiment2', ''); } + // TODO(aghassemi, #4146) i18n + content.setAttribute('data-ad-holder-text', 'Ad'); uiComponent.appendChild(content); this.baseInstance_.element.appendChild(uiComponent); diff --git a/extensions/amp-ad/0.1/amp-ad.css b/extensions/amp-ad/0.1/amp-ad.css index 032180e28bfd..2b9cc29e2921 100644 --- a/extensions/amp-ad/0.1/amp-ad.css +++ b/extensions/amp-ad/0.1/amp-ad.css @@ -47,6 +47,7 @@ amp-embed iframe { .i-amphtml-ad-default-holder:after { content: "Ad"; + content: attr(data-ad-holder-text); background-color: rgba(0, 0, 0, 0.5); border-radius: 2px; color: #fff; 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 6a0ce1e04aba..316bd8cad917 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 @@ -104,7 +104,10 @@ describes.realWin('amp-ad-ui handler', { sandbox.stub(adImpl, 'toggleFallback', () => {}); uiHandler.applyNoContentUI(); return promise.then(() => { - expect(adImpl.element.querySelector('[fallback]')).to.be.ok; + const el = adImpl.element.querySelector('[fallback]'); + expect(el).to.be.ok; + expect(el.children[0]).to.have.class('i-amphtml-ad-default-holder'); + expect(el.children[0]).to.have.attribute('data-ad-holder-text'); }); });