✨ 📖 [AMP Story Audio Sticker] Documentation and validator tests

examples/amp-story/amp-story-audio-sticker.html

@@ -7,7 +7,6 @@
   <script async src="https://cdn.ampproject.org/v0.js"></script>
   <title>Key Highlights of AMP Conf 2018</title>
 
-  <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-latest.js"></script>
   <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
   <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
   <script async custom-element="amp-story-audio-sticker" src="https://cdn.ampproject.org/v0/amp-story-audio-sticker-0.1.js"></script>
@@ -127,7 +126,7 @@
           <h1 class="bold">Key Highlights of AMP Conf 2018</h1>
           <p class="byline">By The AMP team</p>
         </amp-story-grid-layer>
-        <amp-story-grid-layer>
+        <amp-story-grid-layer template="vertical">
           <amp-story-audio-sticker sticker="audio-cloud"></amp-story-audio-sticker>
         </amp-story-grid-layer>>
       </amp-story-page>
@@ -147,8 +146,8 @@ <h1 class="bold">Key Highlights of AMP Conf 2018</h1>
           <h1 class="bold">Key Highlights of AMP Conf 2018</h1>
           <p class="byline">By The AMP team</p>
         </amp-story-grid-layer>
-        <amp-story-grid-layer>
-          <amp-story-audio-sticker size="large" sticker="cat-sticker"></amp-story-audio-sticker>
+        <amp-story-grid-layer template="vertical">
+          <amp-story-audio-sticker size="large" sticker="headphone-cat"></amp-story-audio-sticker>
         </amp-story-grid-layer>>
       </amp-story-page>
 
@@ -167,9 +166,9 @@ <h1 class="bold">Key Highlights of AMP Conf 2018</h1>
           <h1 class="bold">Key Highlights of AMP Conf 2018</h1>
           <p class="byline">By The AMP team</p>
         </amp-story-grid-layer>
-        <amp-story-grid-layer>
+        <amp-story-grid-layer template="vertical">
           <amp-story-audio-sticker sticker="loud-speaker"></amp-story-audio-sticker>
-        </amp-story-grid-layer>>
+        </amp-story-grid-layer>
       </amp-story-page>
 
       <amp-story-page id="page-4" title="Lorem ipsum dolor sit amet">
@@ -187,9 +186,9 @@ <h1 class="bold">Key Highlights of AMP Conf 2018</h1>
           <h1 class="bold">Key Highlights of AMP Conf 2018</h1>
           <p class="byline">By The AMP team</p>
         </amp-story-grid-layer>
-        <amp-story-grid-layer>
+        <amp-story-grid-layer template="vertical">
           <amp-story-audio-sticker size="large" sticker="tape-player"></amp-story-audio-sticker>
-        </amp-story-grid-layer>>
+        </amp-story-grid-layer>
       </amp-story-page>
 
       <amp-story-page id="page-5" title="Lorem ipsum dolor sit amet">
@@ -207,7 +206,7 @@ <h1 class="bold">Key Highlights of AMP Conf 2018</h1>
           <h1 class="bold">Key Highlights of AMP Conf 2018</h1>
           <p class="byline">By The AMP team</p>
         </amp-story-grid-layer>
-        <amp-story-grid-layer>
+        <amp-story-grid-layer template="vertical">
           <amp-story-audio-sticker sticker-style="outline">
             <amp-story-audio-sticker-pretap>
               <amp-img width="100" height="100" layout="responsive" src="https://d1k5j68ob7clqb.cloudfront.net/thumb/480/processed/thumb/5zK5d91jK0gLkv1AMa.png"></amp-img>
@@ -234,7 +233,7 @@ <h1 class="bold">Key Highlights of AMP Conf 2018</h1>
           <h1 class="bold">Key Highlights of AMP Conf 2018</h1>
           <p class="byline">By The AMP team</p>
         </amp-story-grid-layer>
-        <amp-story-grid-layer>
+        <amp-story-grid-layer template="vertical">
           <amp-story-audio-sticker size="large" sticker-style="dropshadow">
             <amp-story-audio-sticker-pretap>
               <amp-img width="100" height="100" layout="responsive" src="https://d1k5j68ob7clqb.cloudfront.net/thumb/480/processed/thumb/5zK5d91jK0gLkv1AMa.png"></amp-img>

extensions/amp-story-audio-sticker/0.1/amp-story-audio-sticker.js

@@ -39,7 +39,7 @@ const DEFAULT_STICKERS = {
     pretapUrl: ASSET_URL_PREFIX + 'audio-cloud-pretap.png',
     posttapUrl: ASSET_URL_PREFIX + 'audio-cloud-posttap.png',
   },
-  'cat-sticker': {
+  'headphone-cat': {
     width: '282',
     height: '226',
     pretapUrl: ASSET_URL_PREFIX + 'cat-sticker-pretap.png',
@@ -64,7 +64,7 @@ const DEFAULT_STICKERS = {
  * 2) the custom sticker data is not provided completely.
  * @const {string}
  */
-const FALLBACK_DEFAULT_STICKER = 'cat-sticker';
+const FALLBACK_DEFAULT_STICKER = 'headphone-cat';
 
 export class AmpStoryAudioSticker extends AMP.BaseElement {
   /** @param {!AmpElement} element */

extensions/amp-story-audio-sticker/0.1/test/validator-amp-story-audio-sticker-no-grid-layer.html

@@ -0,0 +1,26 @@
+<!doctype html>
+<html ⚡ lang="en">
+<head>
+  <meta charset="utf-8">
+  <link rel="canonical" href="ampconf.html">
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <title>Key Highlights of AMP Conf 2018</title>
+
+  <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
+  <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
+  <script async custom-element="amp-story-audio-sticker" src="https://cdn.ampproject.org/v0/amp-story-audio-sticker-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>
+</head>
+  <body>
+    <amp-story standalone id="cats"
+        title="Key Highlights of AMP Conf 2018" publisher="The AMP team"
+        publisher-logo-src="./img/amplogo.png"
+        poster-portrait-src="./img/overview.jpg">
+      <amp-story-page id="page-1" title="Lorem ipsum dolor sit amet">
+        <amp-story-audio-sticker sticker="audio-cloud"></amp-story-audio-sticker>
+      </amp-story-page>
+    </amp-story>
+  </body>
+</html>

extensions/amp-story-audio-sticker/0.1/test/validator-amp-story-audio-sticker-no-grid-layer.out

@@ -0,0 +1,31 @@
+FAIL
+|  <!doctype html>
+|  <html ⚡ lang="en">
+|  <head>
+|    <meta charset="utf-8">
+|    <link rel="canonical" href="ampconf.html">
+|    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+|    <script async src="https://cdn.ampproject.org/v0.js"></script>
+|    <title>Key Highlights of AMP Conf 2018</title>
+|
+|    <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
+|    <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
+|    <script async custom-element="amp-story-audio-sticker" src="https://cdn.ampproject.org/v0/amp-story-audio-sticker-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>
+|  </head>
+|    <body>
+|      <amp-story standalone id="cats"
+|          title="Key Highlights of AMP Conf 2018" publisher="The AMP team"
+|          publisher-logo-src="./img/amplogo.png"
+|          poster-portrait-src="./img/overview.jpg">
+|        <amp-story-page id="page-1" title="Lorem ipsum dolor sit amet">
+|          <amp-story-audio-sticker sticker="audio-cloud"></amp-story-audio-sticker>
+>>         ^~~~~~~~~
+amp-story-audio-sticker/0.1/test/validator-amp-story-audio-sticker-no-grid-layer.html:22:8 The parent tag of tag 'amp-story-audio-sticker' is 'amp-story-page', but it can only be 'amp-story-grid-layer'. (see https://amp.dev/documentation/components/amp-story-audio-sticker)
+>>         ^~~~~~~~~
+amp-story-audio-sticker/0.1/test/validator-amp-story-audio-sticker-no-grid-layer.html:22:8 Tag 'amp-story-audio-sticker' is disallowed as child of tag 'amp-story-page'. Child tag must be one of ['amp-analytics', 'amp-pixel', 'amp-story-animation', 'amp-story-auto-analytics', 'amp-story-cta-layer', 'amp-story-grid-layer', 'amp-story-page-attachment', 'amp-story-page-outlink', 'amp-story-shopping-attachment']. (see https://amp.dev/documentation/components/amp-story)
+|        </amp-story-page>
+|      </amp-story>
+|    </body>
+|  </html>

extensions/amp-story-audio-sticker/0.1/test/validator-amp-story-audio-sticker.html

@@ -0,0 +1,73 @@
+<!doctype html>
+<html ⚡ lang="en">
+<head>
+  <meta charset="utf-8">
+  <link rel="canonical" href="ampconf.html">
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <title>Key Highlights of AMP Conf 2018</title>
+
+  <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
+  <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
+  <script async custom-element="amp-story-audio-sticker" src="https://cdn.ampproject.org/v0/amp-story-audio-sticker-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>
+</head>
+  <body>
+    <amp-story standalone id="cats"
+        title="Key Highlights of AMP Conf 2018" publisher="The AMP team"
+        publisher-logo-src="./img/amplogo.png"
+        poster-portrait-src="./img/overview.jpg">
+
+      <amp-story-page id="page-1" title="Lorem ipsum dolor sit amet">
+        <amp-story-grid-layer template="vertical">
+          <amp-story-audio-sticker sticker="audio-cloud"></amp-story-audio-sticker>
+        </amp-story-grid-layer>>
+      </amp-story-page>
+
+      <amp-story-page id="page-2" title="Lorem ipsum dolor sit amet">
+        <amp-story-grid-layer template="vertical">
+          <amp-story-audio-sticker size="large" sticker="headphone-cat"></amp-story-audio-sticker>
+        </amp-story-grid-layer>>
+      </amp-story-page>
+
+      <amp-story-page id="page-3" title="Lorem ipsum dolor sit amet">
+        <amp-story-grid-layer template="vertical">
+          <amp-story-audio-sticker sticker="loud-speaker"></amp-story-audio-sticker>
+        </amp-story-grid-layer>
+      </amp-story-page>
+
+      <amp-story-page id="page-4" title="Lorem ipsum dolor sit amet">
+        <amp-story-grid-layer template="vertical">
+          <amp-story-audio-sticker size="large" sticker="tape-player"></amp-story-audio-sticker>
+        </amp-story-grid-layer>
+      </amp-story-page>
+
+      <amp-story-page id="page-5" title="Lorem ipsum dolor sit amet">
+        <amp-story-grid-layer template="vertical">
+          <amp-story-audio-sticker sticker-style="outline">
+            <amp-story-audio-sticker-pretap>
+              <amp-img width="100" height="100" layout="responsive" src="https://d1k5j68ob7clqb.cloudfront.net/thumb/480/processed/thumb/5zK5d91jK0gLkv1AMa.png"></amp-img>
+            </amp-story-audio-sticker-pretap>
+            <amp-story-audio-sticker-posttap>
+              <amp-img width="100" height="100" layout="responsive" src="https://d1k5j68ob7clqb.cloudfront.net/thumb/480/processed/thumb/5zK5d91jK0gLkv1AMa.png"></amp-img>
+            </amp-story-audio-sticker-posttap>
+          </amp-story-audio-sticker>
+        </amp-story-grid-layer>
+      </amp-story-page>
+
+      <amp-story-page id="page-6" title="Lorem ipsum dolor sit amet">
+        <amp-story-grid-layer template="vertical">
+          <amp-story-audio-sticker size="large" sticker-style="dropshadow">
+            <amp-story-audio-sticker-pretap>
+              <amp-img width="100" height="100" layout="responsive" src="https://d1k5j68ob7clqb.cloudfront.net/thumb/480/processed/thumb/5zK5d91jK0gLkv1AMa.png"></amp-img>
+            </amp-story-audio-sticker-pretap>
+            <amp-story-audio-sticker-posttap>
+              <amp-img width="100" height="100" layout="responsive" src="https://d1k5j68ob7clqb.cloudfront.net/thumb/480/processed/thumb/5zK5d91jK0gLkv1AMa.png"></amp-img>
+            </amp-story-audio-sticker-posttap>
+          </amp-story-audio-sticker>
+        </amp-story-grid-layer>
+      </amp-story-page>
+    </amp-story>
+  </body>
+</html>

extensions/amp-story-audio-sticker/0.1/test/validator-amp-story-audio-sticker.out

@@ -0,0 +1,74 @@
+PASS
+|  <!doctype html>
+|  <html ⚡ lang="en">
+|  <head>
+|    <meta charset="utf-8">
+|    <link rel="canonical" href="ampconf.html">
+|    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+|    <script async src="https://cdn.ampproject.org/v0.js"></script>
+|    <title>Key Highlights of AMP Conf 2018</title>
+|
+|    <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
+|    <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
+|    <script async custom-element="amp-story-audio-sticker" src="https://cdn.ampproject.org/v0/amp-story-audio-sticker-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>
+|  </head>
+|    <body>
+|      <amp-story standalone id="cats"
+|          title="Key Highlights of AMP Conf 2018" publisher="The AMP team"
+|          publisher-logo-src="./img/amplogo.png"
+|          poster-portrait-src="./img/overview.jpg">
+|
+|        <amp-story-page id="page-1" title="Lorem ipsum dolor sit amet">
+|          <amp-story-grid-layer template="vertical">
+|            <amp-story-audio-sticker sticker="audio-cloud"></amp-story-audio-sticker>
+|          </amp-story-grid-layer>>
+|        </amp-story-page>
+|
+|        <amp-story-page id="page-2" title="Lorem ipsum dolor sit amet">
+|          <amp-story-grid-layer template="vertical">
+|            <amp-story-audio-sticker size="large" sticker="headphone-cat"></amp-story-audio-sticker>
+|          </amp-story-grid-layer>>
+|        </amp-story-page>
+|
+|        <amp-story-page id="page-3" title="Lorem ipsum dolor sit amet">
+|          <amp-story-grid-layer template="vertical">
+|            <amp-story-audio-sticker sticker="loud-speaker"></amp-story-audio-sticker>
+|          </amp-story-grid-layer>
+|        </amp-story-page>
+|
+|        <amp-story-page id="page-4" title="Lorem ipsum dolor sit amet">
+|          <amp-story-grid-layer template="vertical">
+|            <amp-story-audio-sticker size="large" sticker="tape-player"></amp-story-audio-sticker>
+|          </amp-story-grid-layer>
+|        </amp-story-page>
+|
+|        <amp-story-page id="page-5" title="Lorem ipsum dolor sit amet">
+|          <amp-story-grid-layer template="vertical">
+|            <amp-story-audio-sticker sticker-style="outline">
+|              <amp-story-audio-sticker-pretap>
+|                <amp-img width="100" height="100" layout="responsive" src="https://d1k5j68ob7clqb.cloudfront.net/thumb/480/processed/thumb/5zK5d91jK0gLkv1AMa.png"></amp-img>
+|              </amp-story-audio-sticker-pretap>
+|              <amp-story-audio-sticker-posttap>
+|                <amp-img width="100" height="100" layout="responsive" src="https://d1k5j68ob7clqb.cloudfront.net/thumb/480/processed/thumb/5zK5d91jK0gLkv1AMa.png"></amp-img>
+|              </amp-story-audio-sticker-posttap>
+|            </amp-story-audio-sticker>
+|          </amp-story-grid-layer>
+|        </amp-story-page>
+|
+|        <amp-story-page id="page-6" title="Lorem ipsum dolor sit amet">
+|          <amp-story-grid-layer template="vertical">
+|            <amp-story-audio-sticker size="large" sticker-style="dropshadow">
+|              <amp-story-audio-sticker-pretap>
+|                <amp-img width="100" height="100" layout="responsive" src="https://d1k5j68ob7clqb.cloudfront.net/thumb/480/processed/thumb/5zK5d91jK0gLkv1AMa.png"></amp-img>
+|              </amp-story-audio-sticker-pretap>
+|              <amp-story-audio-sticker-posttap>
+|                <amp-img width="100" height="100" layout="responsive" src="https://d1k5j68ob7clqb.cloudfront.net/thumb/480/processed/thumb/5zK5d91jK0gLkv1AMa.png"></amp-img>
+|              </amp-story-audio-sticker-posttap>
+|            </amp-story-audio-sticker>
+|          </amp-story-grid-layer>
+|        </amp-story-page>
+|      </amp-story>
+|    </body>
+|  </html>