amp-sticky-ad: Force background-color alpha to be 1

extensions/amp-sticky-ad/0.1/amp-sticky-ad.css

@@ -23,7 +23,7 @@ amp-sticky-ad {
   z-index: 11;
   max-height: 100px !important;
   box-sizing: border-box;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: #fff;
 }
 
 .-amp-sticky-ad-layout {

extensions/amp-sticky-ad/0.1/amp-sticky-ad.js

@@ -20,7 +20,12 @@ import {dev,user} from '../../../src/log';
 import {removeElement} from '../../../src/dom';
 import {toggle} from '../../../src/style';
 import {listenOnce} from '../../../src/event-helper';
+import {startsWith} from '../../../src/string';
+import {setStyle} from '../../../src/style';
+import {isExperimentOn} from '../../../src/experiments';
 
+/** @private @const {string} */
+const TAG = 'amp-sticky-ad-v1';
 
 class AmpStickyAd extends AMP.BaseElement {
   /** @param {!AmpElement} element */
@@ -169,6 +174,7 @@ class AmpStickyAd extends AMP.BaseElement {
         // Set sticky-ad to visible and change container style
         this.element.setAttribute('visible', '');
         this.element.classList.add('amp-sticky-ad-loaded');
+        this.forceOpacity_();
       });
     });
   }
@@ -201,6 +207,28 @@ class AmpStickyAd extends AMP.BaseElement {
       this.viewport_.updatePaddingBottom(0);
     });
   }
+
+  /**
+   * To check for background-color alpha and force it to be 1.
+   * Whoever call this needs to make sure it's in a vsync.
+   * @private
+   */
+  forceOpacity_() {
+    if (!isExperimentOn(this.win, TAG)) {
+      return;
+    }
+    const background = this.win.getComputedStyle(this.element)
+        .getPropertyValue('background-color');
+    if (!startsWith(background, 'rgba')) {
+      return;
+    }
+    user().warn('AMP-STICKY-AD', 'Do not allow container to be transparent');
+    const backgroundColor = background.substring(
+        background.indexOf('(') + 1,
+        background.lastIndexOf(','));
+    console.log('set styles');
+    setStyle(this.element, 'background-color', 'rgb(' + backgroundColor + ')');
+  }
 }
 
 AMP.registerElement('amp-sticky-ad', AmpStickyAd, CSS);

extensions/amp-sticky-ad/0.1/test/test-amp-sticky-ad.js

@@ -15,6 +15,7 @@
  */
 
 import {createIframePromise} from '../../../../testing/iframe';
+import {toggleExperiment} from '../../../../src/experiments';
 import * as sinon from 'sinon';
 import '../amp-sticky-ad';
 import '../../../amp-ad/0.1/amp-ad';
@@ -30,10 +31,13 @@ describe('amp-sticky-ad', () => {
     sandbox.restore();
   });
 
-  function getAmpStickyAd() {
+  function getAmpStickyAd(opt_attributes) {
     return createIframePromise().then(iframe => {
       const ampStickyAd = iframe.doc.createElement('amp-sticky-ad');
       ampStickyAd.setAttribute('layout', 'nodisplay');
+      for (const attr in opt_attributes) {
+        ampStickyAd.setAttribute(attr, opt_attributes[attr]);
+      }
       const ampAd = iframe.doc.createElement('amp-ad');
       ampAd.setAttribute('width', '300');
       ampAd.setAttribute('height', '50');
@@ -377,4 +381,23 @@ describe('amp-sticky-ad', () => {
           .to.be.true;
     });
   });
+
+  it('should not allow container to be set transparent', () => {
+    toggleExperiment(window, 'amp-sticky-ad-v1', true);
+    return getAmpStickyAd({
+      'style': 'background-color: rgba(55, 55, 55, 0.55) !important',
+    }).then(obj => {
+      console.log(obj.ampStickyAd);
+      const stickyAdElement = obj.ampStickyAd;
+      const impl = stickyAdElement.implementation_;
+      impl.vsync_.mutate = function(callback) {
+        callback();
+      };
+      impl.scheduleLayoutForAd_();
+      impl.ad_.dispatchEvent(new Event('amp:built'));
+      impl.ad_.dispatchEvent(new Event('amp:load:end'));
+      expect(window.getComputedStyle(stickyAdElement)
+          .getPropertyValue('background-color')).to.equal('rgb(55, 55, 55)');
+    });
+  });
 });

tools/experiments/experiments.js

@@ -218,6 +218,11 @@ const EXPERIMENTS = [
     name: 'Split AMP\'s loading phase into chunks',
     cleanupIssue: 'https://github.com/ampproject/amphtml/issues/5535',
   },
+  {
+    id: 'amp-sticky-ad-v1',
+    name: 'New breaking UX changes make to amp-sticky-ad',
+    cleanupIssue: 'https://github.com/ampproject/amphtml/issues/5432',
+  },
 ];
 
 if (getMode().localDev) {