make changes to sticky-ad 1.0, fix tests (#5984)

* force opacity, remove amp-sticky-ad-loaded * remove padding-top
ampproject · Nov 2, 2016 · e9c309c · e9c309c
1 parent c034657
commit e9c309c
Show file tree

Hide file tree

Showing 7 changed files with 310 additions and 32 deletions.
diff --git a/examples/sticky.ads.0.1.amp.html b/examples/sticky.ads.0.1.amp.html
@@ -0,0 +1,296 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>Sticky Ad Test</title>
+  <link rel="canonical" href="amps.html" >
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <link href='https://fonts.googleapis.com/css?family=Georgia|Open+Sans|Roboto' rel='stylesheet' type='text/css'>
+  <style amp-custom>
+    body {
+      margin: 0;
+      font-family: 'Georgia', Serif;
+    }
+
+    .brand-logo {
+      font-family: 'Open Sans';
+    }
+
+    .ad-container {
+      display: flex;
+      justify-content: center;
+    }
+
+    .content-container p {
+      line-height: 24px;
+    }
+
+    header,
+    .article-body {
+      padding: 15px;
+    }
+
+    .lightbox {
+      background: #222;
+    }
+
+    .full-bleed {
+      margin: 0 -15px;
+    }
+
+    .lightbox-content {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+
+      display: flex;
+      flex-direction: column;
+      flex-wrap: nowrap;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .lightbox-content p {
+      color: #fff;
+      padding: 15px;
+    }
+
+    .lightbox amp-img {
+      width: 100%;
+    }
+
+    figure {
+      margin: 0;
+    }
+
+    figcaption {
+      color: #6f757a;
+      padding: 15px 0;
+      font-size: .9em;
+    }
+
+    .author {
+      display: flex;
+      align-items: center;
+
+      background: #f4f4f4;
+      padding: 0 15px;
+
+      font-size: .8em;
+
+      border: solid #dcdcdc;
+      border-width: 1px 0;
+    }
+
+    .header-time {
+      color: #a8a3ae;
+      font-family: 'Roboto';
+      font-size: 12px;
+    }
+
+    .author p {
+      margin: 5px;
+    }
+
+    .byline {
+      font-family: 'Roboto';
+      display: inline-block;
+    }
+
+    .byline p {
+      line-height: normal;
+    }
+
+    .byline .brand {
+      color: #6f757a;
+    }
+
+    .standfirst {
+      color: #6f757a;
+    }
+
+    .mailto {
+      text-decoration: none;
+    }
+
+    #author-avatar {
+      margin: 10px;
+      border: 5px solid #fff;
+      width: 50px;
+      height: 50px;
+      border-radius: 50%;
+    }
+
+    h1 {
+      margin: 5px 0;
+      font-weight: normal;
+    }
+
+    footer {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 226px;
+      background: #f4f4f4;
+    }
+
+    hr {
+      margin: 0;
+    }
+
+    amp-img {
+      background-color: #f4f4f4;
+    }
+
+  </style>
+  <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
+  <script async custom-element="amp-sticky-ad" src="https://cdn.ampproject.org/v0/amp-sticky-ad-0.1.js"></script>
+  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <script async src="./viewer-integr.js" data-amp-report-test="viewer-integr.js"></script>
+</head>
+<body>
+  <header>
+    <div class="brand-logo">
+      PublisherLogo
+    </div>
+  </header>
+  <main role="main">
+  <amp-sticky-ad layout="nodisplay">
+    <amp-ad width="320" height="50"
+      type="adstir"
+      data-app-id="MEDIA-343ded3e"
+      data-ad-spot="1">
+    <div placeholder></div>
+    <div fallback></div>
+  </amp-ad>
+
+  </amp-sticky-ad>
+    <article>
+
+
+      <div class="content-container">
+        <header>
+          <h1 itemprop="headline">Lorem Ipsum</h1>
+          <time class="header-time" itemprop="datePublished"
+              datetime="2015-09-14 13:00">September 14, 2015</time>
+          <p class="standfirst">
+            Fusce pretium tempor justo, vitae consequat dolor maximus eget.
+          </p>
+        </header>
+
+        <div class="author">
+          <amp-img src="img/sample.jpg" id="author-avatar" placeholder
+              height="50" width="50">
+          </amp-img>
+          <div class="byline">
+            <p>
+              by <span itemscope itemtype="http://schema.org/Person"
+              itemprop="author"><b>Lorem Ipsum</b>
+              <a class="mailto" href="mailto:lorem.ipsum@">
+              lorem.ipsum@</a></span>
+            </p>
+            <p class="brand">PublisherName News Reporter<p>
+          </div>
+        </div>
+        <div class="article-body" itemprop="articleBody">
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            Curabitur ullamcorper turpis vel commodo scelerisque. Phasellus
+            luctus nunc ut elit cursus, et imperdiet diam vehicula.
+            Duis et nisi sed urna blandit bibendum et sit amet erat.
+            Suspendisse potenti. Curabitur consequat volutpat arcu nec
+            elementum. Etiam a turpis ac libero varius condimentum.
+            Maecenas sollicitudin felis aliquam tortor vulputate,
+            ac posuere velit semper.
+          </p>
+          <p>
+            Fusce pretium tempor justo, vitae consequat dolor maximus eget.
+            Aliquam iaculis tincidunt quam sed maximus. Suspendisse faucibus
+            ornare sodales. Nullam id dolor vitae arcu consequat ornare a
+            et lectus. Sed tempus eget enim eget lobortis.
+            Mauris sem est, accumsan sed tincidunt ut, sagittis vel arcu.
+            Nullam in libero nisi.
+          </p>
+
+          <p>
+            Sed pharetra semper fringilla. Nulla fringilla, neque eget
+            varius suscipit, mi turpis congue odio, quis dignissim nisi
+            nulla at erat. Duis non nibh vel erat vehicula hendrerit eget
+            vel velit. Donec congue augue magna, nec eleifend dui porttitor
+            sed. Cras orci quam, dignissim nec elementum ac, bibendum et purus.
+            Ut elementum mi eget felis ultrices tempus. Maecenas nec sodales
+            ex. Phasellus ultrices, purus non egestas ullamcorper, felis
+            lorem ultrices nibh, in tristique mauris justo sed ante.
+            Nunc commodo purus feugiat metus bibendum consequat. Duis
+            finibus urna ut ligula auctor, sed vehicula ex aliquam.
+            Sed sed augue auctor, porta turpis ultrices, cursus diam.
+            In venenatis aliquet porta. Sed volutpat fermentum quam,
+            ac molestie nulla porttitor ac. Donec porta risus ut enim
+            pellentesque, id placerat elit ornare.
+          </p>
+          <p>
+            Curabitur convallis, urna quis pulvinar feugiat, purus diam
+            posuere turpis, sit amet tincidunt purus justo et mi. Donec
+            sapien urna, aliquam ut lacinia quis, varius vitae ex.
+            Maecenas efficitur iaculis lorem, at imperdiet orci viverra
+            in. Nullam eu erat eu metus ultrices viverra a sit amet leo.
+            Pellentesque est felis, pulvinar mollis sollicitudin et,
+            suscipit eget massa. Nunc bibendum non nunc et consequat.
+            Quisque auctor est vel leo faucibus, non faucibus magna ultricies.
+            Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
+            posuere cubilia Curae; Vestibulum tortor lacus, bibendum et
+            enim eu, vehicula placerat erat. Nullam gravida rhoncus accumsan.
+            Integer suscipit iaculis elit nec mollis. Vestibulum eget arcu
+            nec lectus finibus rutrum vel sed orci.
+          </p>
+
+          <figure>
+            <amp-img class="full-bleed" placeholder
+                src="img/[email protected]"
+                srcset="img/[email protected] 1x, img/[email protected] 2x"
+                layout="responsive" width="360"
+                alt="Fusce pretium tempor justo, vitae consequat dolor maximus eget."
+                height="216">
+            </amp-img>
+            <figcaption>
+              Fusce pretium tempor justo, vitae consequat dolor maximus eget.
+            </figcaption>
+          </figure>
+          <hr>
+
+          <p>
+            Cum sociis natoque penatibus et magnis dis parturient montes,
+            nascetur ridiculus mus. Nulla et viverra turpis. Fusce
+            viverra enim eget elit blandit, in finibus enim blandit. Integer
+            fermentum eleifend felis non posuere. In vulputate et metus at
+            aliquam. Praesent a varius est. Quisque et tincidunt nisi.
+            Nam porta urna at turpis lacinia, sit amet mattis eros elementum.
+            Etiam vel mauris mattis, dignissim tortor in, pulvinar arcu.
+            In molestie sem elit, tincidunt venenatis tortor aliquet sodales.
+            Ut elementum velit fermentum felis volutpat sodales in non libero.
+            Aliquam erat volutpat.
+          </p>
+
+          <p>
+            Morbi at velit vitae eros congue congue venenatis non dui.
+            Sed lacus sem, feugiat sed elementum sed, maximus sed lacus.
+            Integer accumsan magna in sagittis pharetra. Class aptent taciti
+            sociosqu ad litora torquent per conubia nostra, per inceptos
+            himenaeos. Suspendisse ac nisl efficitur ligula aliquam lacinia
+            eu in magna. Vestibulum non felis odio. Ut consectetur venenatis
+            felis aliquet maximus. Class aptent taciti sociosqu ad litora
+            torquent per conubia nostra, per inceptos himenaeos.
+          </p>
+        </div>
+      </div>
+    </article>
+  </main>
+
+  <footer>
+    <div class="brand-logo">PublisherLogo</div>
+  </footer>
+</body>
+</html>
diff --git a/extensions/amp-sticky-ad/0.1/amp-sticky-ad.js b/extensions/amp-sticky-ad/0.1/amp-sticky-ad.js
@@ -238,6 +238,6 @@ class AmpStickyAd extends AMP.BaseElement {
   }
 }
 
-AMP.extension('amp-sticky-ad', AMP => {
+AMP.extension('amp-sticky-ad:0.1', AMP => {
   AMP.registerElement('amp-sticky-ad', AmpStickyAd, CSS);
 });
diff --git a/extensions/amp-sticky-ad/0.1/test/test-amp-sticky-ad.js b/extensions/amp-sticky-ad/0.1/test/test-amp-sticky-ad.js
@@ -18,14 +18,14 @@ import {toggleExperiment} from '../../../../src/experiments';
 import '../amp-sticky-ad';
 import '../../../amp-ad/0.1/amp-ad';
 
-describes.realWin('amp-sticky-ad container 0.1', {
+describes.realWin('amp-sticky-ad 0.1 version', {
   win: { /* window spec */
     location: '...',
     historyOff: false,
   },
   amp: { /* amp spec */
     runtimeOn: false,
-    extensions: ['amp-sticky-ad'],
+    extensions: ['amp-sticky-ad:0.1'],
   },
 }, env => {
   let win;
@@ -293,7 +293,7 @@ describes.realWin('amp-sticky-ad 0.1 with real ad child', {
   },
   amp: { /* amp spec */
     runtimeOn: false,
-    extensions: ['amp-sticky-ad', 'amp-ad'],
+    extensions: ['amp-sticky-ad:0.1', 'amp-ad'],
   },
 }, env => {
   let win;

diff --git a/extensions/amp-sticky-ad/1.0/amp-sticky-ad.css b/extensions/amp-sticky-ad/1.0/amp-sticky-ad.css
@@ -23,6 +23,9 @@ amp-sticky-ad {
   z-index: 11;
   max-height: 100px !important;
   box-sizing: border-box;
+  opacity: 1 !important;
+  background-image: none !important;
+  background-color: #fff;
 }
 
 .-amp-sticky-ad-layout {
@@ -39,10 +42,6 @@ amp-sticky-ad[visible] {
   visibility: visible !important;
 }
 
-.amp-sticky-ad-loaded {
-  background-color: #fff;
-}
-
 .-amp-sticky-ad-layout > amp-ad {
   display: block;
 }