Bugfix: Update adRendering.js styling for iframe in case of insterstitial ads (prebid#12975)

* update styling for frame in case of instl ads

* Revert "update styling for frame in case of instl ads"

This reverts commit 0470efc.

* AdRendering file update for interstitial iframe handling

* Revert "AdRendering file update for interstitial iframe handling"

This reverts commit 6473929.

* adding style without relying on frame id and display:block

* Update style.width/height in direct rendering

* Core: set instl flag on bid responses

* Core: do not resize remote creative frames for interstitials

* Core: include instl flag in cross-frame messages

* Revert "adding style without relying on frame id and display:block"

This reverts commit d957586.

* iframe handling for missing safeframes

* core: resize interstitials' inner iframe

---------

Co-authored-by: ubaid <ubaid@advergic.com>
Co-authored-by: Demetrio Girardi <dgirardi@prebid.org>

Author: 3 people

creative/renderers/display/renderer.js

@@ -1,6 +1,6 @@
 import {ERROR_NO_AD} from './constants.js';
 
-export function render({ad, adUrl, width, height}, {mkFrame}, win) {
+export function render({ad, adUrl, width, height, instl}, {mkFrame}, win) {
   if (!ad && !adUrl) {
     throw {
       reason: ERROR_NO_AD,
@@ -19,6 +19,12 @@ export function render({ad, adUrl, width, height}, {mkFrame}, win) {
       attrs.srcdoc = ad;
     }
     doc.body.appendChild(mkFrame(doc, attrs));
+    if (instl && win.frameElement) {
+      // interstitials are rendered in a nested iframe that needs to be sized
+      const style = win.frameElement.style;
+      style.width = width ? `${width}px` : '100vw';
+      style.height = height ? `${height}px` : '100vh';
+    }
   }
 }
 

libraries/creative-renderer-display/renderer.js

@@ -127,7 +127,7 @@ function creativeMessageHandler(deps) {
 }
 
 export const getRenderingData = hook('sync', function (bidResponse, options) {
-  const {ad, adUrl, cpm, originalCpm, width, height} = bidResponse
+  const {ad, adUrl, cpm, originalCpm, width, height, instl} = bidResponse
   const repl = {
     AUCTION_PRICE: originalCpm || cpm,
     CLICKTHROUGH: options?.clickUrl || ''
@@ -136,7 +136,8 @@ export const getRenderingData = hook('sync', function (bidResponse, options) {
     ad: replaceMacros(ad, repl),
     adUrl: replaceMacros(adUrl, repl),
     width,
-    height
+    height,
+    instl
   };
 })
 
@@ -256,9 +257,16 @@ export function renderAdDirect(doc, adId, options) {
     emitAdRenderFail(Object.assign({id: adId, bid}, {reason, message}));
   }
   function resizeFn(width, height) {
-    if (doc.defaultView && doc.defaultView.frameElement) {
-      width && (doc.defaultView.frameElement.width = width);
-      height && (doc.defaultView.frameElement.height = height);
+    const frame = doc.defaultView?.frameElement;
+    if (frame) {
+      if (width) {
+        frame.width = width;
+        frame.style.width && (frame.style.width = `${width}px`);
+      }
+      if (height) {
+        frame.height = height;
+        frame.style.height && (frame.style.height = `${height}px`);
+      }
     }
   }
   const messageHandler = creativeMessageHandler({resizeFn});

src/adRendering.js

@@ -636,8 +636,11 @@ function getPreparedBidForAuction(bid, {index = auctionManager.index} = {}) {
   // but others to not be set yet (like priceStrings). See #1372 and #1389.
   events.emit(EVENTS.BID_ADJUSTMENT, bid);
 
+  const adUnit = index.getAdUnit(bid);
+  bid.instl = adUnit?.ortb2Imp?.instl === 1;
+
   // a publisher-defined renderer can be used to render bids
-  const bidRenderer = index.getBidRequest(bid)?.renderer || index.getAdUnit(bid).renderer;
+  const bidRenderer = index.getBidRequest(bid)?.renderer || adUnit.renderer;
 
   // a publisher can also define a renderer for a mediaType
   const bidObjectMediaType = bid.mediaType;

src/auction.js

@@ -135,7 +135,10 @@ function handleEventRequest(reply, data, adObject) {
   return handleCreativeEvent(data, adObject);
 }
 
-export function resizeRemoteCreative({adId, adUnitCode, width, height}) {
+export function resizeRemoteCreative({instl, adId, adUnitCode, width, height}) {
+  // do not resize interstitials - the creative frame takes the full screen and sizing of the ad should
+  // be handled within it.
+  if (instl) return;
   function getDimension(value) {
     return value ? value + 'px' : '100%';
   }

src/secureCreatives.js

@@ -1266,6 +1266,31 @@ describe('auctionmanager.js', function () {
         auction.callBids();
         expect(auction.getBidsReceived()[0].ttlBuffer).to.eql(0);
       });
+
+      [
+        {
+          request: 1,
+          response: true
+        },
+        {
+          request: 0,
+          response: false
+        },
+        {
+          request: 2,
+          response: false
+        },
+        {
+          request: undefined,
+          response: false
+        }
+      ].forEach(({request, response}) => {
+        it(`sets bidResponse.instl to ${response} if adUnit.ortb2Imp.instl is ${request}`, () => {
+          adUnits[0].ortb2Imp = {instl: request};
+          auction.callBids();
+          expect(auction.getBidsReceived()[0].instl).to.equal(response);
+        })
+      })
     });
 
     describe('when auction timeout is 20', function () {

test/spec/auctionmanager_spec.js

@@ -75,5 +75,28 @@ describe('Creative renderer - display', () => {
     runRenderer({ad: 'mock'});
     expect(doc.body.style.height).to.eql('100%');
     expect(doc.body.parentElement.style.height).to.eql('100%');
+  });
+
+  it('sizes frame element if instl = true', () => {
+    win.frameElement = { style: {}};
+    runRenderer({
+      ad: 'mock',
+      width: 123,
+      height: 321,
+      instl: true
+    });
+    expect(win.frameElement.style).to.eql({
+      width: '123px',
+      height: '321px'
+    })
+  });
+
+  it('does not choke if no frame element can be found', () => {
+    runRenderer({
+      ad: 'mock',
+      width: 123,
+      height: 321,
+      instl: true
+    });
   })
 })

test/spec/creative/displayRenderer_spec.js

@@ -63,6 +63,12 @@ describe('adRendering', () => {
       bidResponse = {};
     });
 
+    it('should carry over instl', () => {
+      bidResponse.instl = true;
+      const result = getRenderingData(bidResponse);
+      expect(result.instl).to.be.true;
+    });
+
     ['ad', 'adUrl'].forEach((prop) => {
       describe(`on ${prop}`, () => {
         it('replaces AUCTION_PRICE macro', () => {

test/spec/unit/adRendering_spec.js

@@ -579,5 +579,15 @@ describe('secureCreatives', () => {
       sinon.assert.called(slots[1].getSlotElementId);
       sinon.assert.calledWith(document.getElementById, 'div2');
     });
+
+    it('should not resize interstitials', () => {
+      resizeRemoteCreative({
+        instl: true,
+        adId: 'adId',
+        width: 300,
+        height: 250,
+      });
+      sinon.assert.notCalled(document.getElementById);
+    })
   })
 });