✨ Landscape ad support for amp-story-auto-ads (#40264)

* Landscape ad support for amp-story-auto-ads

* Made `getAdAspectRatio_` a private function. Extended functionality to text content. Updated unit tests.

* Prevent division by 0

* Created experiment `story-ad-allow-fullbleed`. If enabled and AMP is in fullbleed mode, the ads will be shown in fullbleed.

Author: qwang-mlb

extensions/amp-story-auto-ads/0.1/amp-story-auto-ads.css

@@ -42,3 +42,26 @@ amp-story-page amp-ad[type='adsense'] {
   max-width: calc(3 / 5 * 75vh) !important;
   transform: translateX(-50%) !important;
 }
+
+/* If experiment `story-ad-allow-fullbleed` is enabled, show fullbleed ads  */
+.i-amphtml-story-desktop-fullbleed
+  .i-amphtml-fullbleed-ad
+  amp-story-grid-layer[template="fill"]
+  > amp-ad {
+  min-width: 100% !important;
+  max-width: 100% !important;
+  min-height: 100% !important;
+  max-height: 100% !important;
+}
+
+.i-amphtml-story-desktop-fullbleed .i-amphtml-fullbleed-ad iframe {
+  width: 100% !important;
+  height: 100% !important;
+}
+
+.i-amphtml-story-desktop-fullbleed
+  .i-amphtml-fullbleed-ad
+  .i-amphtml-cta-container {
+    bottom: 0 !important;
+    top: 0 !important;
+}

extensions/amp-story-auto-ads/0.1/amp-story-auto-ads.js

@@ -1,6 +1,6 @@
 import {CommonSignals_Enum} from '#core/constants/common-signals';
 
-import {forceExperimentBranch} from '#experiments';
+import {forceExperimentBranch, isExperimentOn} from '#experiments';
 import {divertStoryAdPlacements} from '#experiments/story-ad-placements';
 import {StoryAdSegmentExp} from '#experiments/story-ad-progress-segment';
 
@@ -91,6 +91,12 @@ export class AmpStoryAutoAds extends AMP.BaseElement {
 
     /** @private {?StoryAdPageManager} */
     this.adPageManager_ = null;
+
+    /** @private {boolean} */
+    this.fullbleedAdExpEnabled_ = isExperimentOn(
+      this.win,
+      'story-ad-allow-fullbleed'
+    );
   }
 
   /** @override */
@@ -339,7 +345,11 @@ export class AmpStoryAutoAds extends AMP.BaseElement {
       this.adBadgeContainer_.removeAttribute(DESKTOP_FULLBLEED);
       this.adBadgeContainer_.removeAttribute(DESKTOP_ONE_PANEL);
 
-      if (uiState === UIType_Enum.DESKTOP_FULLBLEED) {
+      if (
+        uiState === UIType_Enum.DESKTOP_FULLBLEED &&
+        !this.fullbleedAdExpEnabled_
+      ) {
+        // Proper landscape ads in DESKTOP_FULLBLEED do not need the attribute
         this.adBadgeContainer_.setAttribute(DESKTOP_FULLBLEED, '');
       }
       if (uiState === UIType_Enum.DESKTOP_ONE_PANEL) {
@@ -466,6 +476,10 @@ export class AmpStoryAutoAds extends AMP.BaseElement {
     this.mutateElement(() => {
       adPage.toggleVisibility();
       this.visibleAdPage_ = adPage;
+      if (this.fullbleedAdExpEnabled_) {
+        // Proper landscape ads in DESKTOP_FULLBLEED do not need the attribute
+        this.adBadgeContainer_.removeAttribute(Attributes.DESKTOP_FULLBLEED);
+      }
     });
   }
 

extensions/amp-story-auto-ads/0.1/story-ad-page.js

@@ -9,7 +9,7 @@ import {setStyle} from '#core/dom/style';
 import {map} from '#core/types/object';
 import {parseJson} from '#core/types/object/json';
 
-import {getExperimentBranch} from '#experiments';
+import {getExperimentBranch, isExperimentOn} from '#experiments';
 import {StoryAdSegmentExp} from '#experiments/story-ad-progress-segment';
 
 import {getData, listen} from '#utils/event-helper';
@@ -54,6 +54,9 @@ const GLASS_PANE_CLASS = 'i-amphtml-glass-pane';
 /** @const {string} */
 const DESKTOP_FULLBLEED_CLASS = 'i-amphtml-story-ad-fullbleed';
 
+/** @const {string} */
+const FULLBLEED_AD_CLASS = 'i-amphtml-fullbleed-ad';
+
 /** @enum {string} */
 const PageAttributes = {
   LOADING: 'i-amphtml-loading',
@@ -428,6 +431,10 @@ export class StoryAdPage {
       );
     }
 
+    if (isExperimentOn(this.win_, 'story-ad-allow-fullbleed')) {
+      this.pageElement_.classList.add(FULLBLEED_AD_CLASS);
+    }
+
     this.loaded_ = true;
 
     this.loadCallbacks_.forEach((cb) => cb());

extensions/amp-story-auto-ads/0.1/test/test-amp-story-auto-ads.js

@@ -419,6 +419,34 @@ describes.realWin(
         storeService.dispatch(Action.TOGGLE_RTL, true);
         expect(adBadgeContainer).to.have.attribute(Attributes.DIR, 'rtl');
       });
+
+      it('should propagate the desktop-fullbleed attribute to ad badge', () => {
+        const adBadgeContainer = doc.querySelector(
+          '.i-amphtml-ad-overlay-container'
+        );
+        expect(adBadgeContainer).not.to.have.attribute(
+          Attributes.DESKTOP_FULLBLEED
+        );
+        storeService.dispatch(Action.TOGGLE_UI, UIType_Enum.DESKTOP_FULLBLEED);
+        expect(adBadgeContainer).to.have.attribute(
+          Attributes.DESKTOP_FULLBLEED
+        );
+      });
+
+      it('should not propagate the desktop-fullbleed attribute to ad badge for landscape ads', () => {
+        autoAds.fullbleedAdExpEnabled_ = true;
+        const adBadgeContainer = doc.querySelector(
+          '.i-amphtml-ad-overlay-container'
+        );
+        expect(adBadgeContainer).not.to.have.attribute(
+          Attributes.DESKTOP_FULLBLEED
+        );
+        storeService.dispatch(Action.TOGGLE_UI, UIType_Enum.DESKTOP_FULLBLEED);
+        expect(adBadgeContainer).not.to.have.attribute(
+          Attributes.DESKTOP_FULLBLEED
+        );
+        autoAds.fullbleedAdExpEnabled_ = false;
+      });
     });
 
     describe('analytics triggers', () => {

extensions/amp-story-auto-ads/0.1/test/test-story-ad-page.js

@@ -1,5 +1,7 @@
 import {CommonSignals_Enum} from '#core/constants/common-signals';
 
+import {toggleExperiment} from '#experiments';
+
 import {macroTask} from '#testing/helpers';
 
 import {Gestures} from '../../../../src/gesture';
@@ -457,6 +459,27 @@ describes.realWin('story-ad-page', {amp: true}, (env) => {
     });
   });
 
+  describe('fullbleed ads', () => {
+    it('should set fullbleed ad class', async () => {
+      const fullbleedAdClass = 'i-amphtml-fullbleed-ad';
+      const iframe = doc.createElement('iframe');
+      const video = doc.createElement('video');
+      const pageElement = storyAdPage.build();
+
+      toggleExperiment(env.win, 'story-ad-allow-fullbleed', true);
+      doc.body.appendChild(pageElement);
+      pageElement.getImpl = () => Promise.resolve(pageImplMock);
+
+      const ampAdElement = doc.querySelector('amp-ad');
+      ampAdElement.appendChild(iframe);
+      iframe.contentDocument.body.appendChild(video);
+      await ampAdElement.signals().signal(CommonSignals_Enum.INI_LOAD);
+
+      expect(pageElement).to.have.class(fullbleedAdClass);
+      toggleExperiment(env.win, 'story-ad-allow-fullbleed', false);
+    });
+  });
+
   describe('page level analytics', () => {
     let fireEventStub;
 

tools/experiments/experiments-config.js

@@ -203,4 +203,9 @@ export const EXPERIMENTS = [
     name: 'Enable new INP metrics reporting on amp-analytics',
     spec: 'https://github.com/ampproject/amphtml/issues/38470',
   },
+  {
+    id: 'story-ad-allow-fullbleed',
+    name: 'Allows story ads in AMP fullbleed mode to fill the whole screen.',
+    spec: 'https://github.com/ampproject/amphtml/pull/40264',
+  },
 ];