examples/amp-story/attachment.html - main - githubmirror/amphtml

examples/amp-story/attachment.html
473 строки30 KB
Ya-Chen Hsieh
Fix issue where amp-img are not rendered inside amp-list in story page attachment (#39806)
13 фев 2024, 20:22
13 фев 2024, 20:22f49932e
<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.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-story-page-attachment" src="https://cdn.ampproject.org/v0/amp-story-page-attachment-0.1.js"></script>
    <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
    <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-latest.js"></script>
    <link href='https://fonts.googleapis.com/css?family=Georgia|Open+Sans|Roboto' rel='stylesheet' type='text/css'>
    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
    <title>Attachments</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <link rel="canonical" href="index.html">
    <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>
    <style amp-custom>
      body {
        font-family: 'Roboto', sans-serif;
        color: #fff;
      }

      amp-story-page {
        background-color: #000;
      }

      p span {
        padding: 0 96px 0 20px;
        align-items: center;
        font-size: 18px;
        line-height: 1.5em;
        margin-bottom: 10px;
      }

      amp-story-page-attachment {
        color: rgba(0, 0, 0, 0.93);
      }

      .attachment-content {
        background-color: #F8EDD5;
        box-sizing: border-box;
        padding: 20px;
      }

      .attachment-content p {
        font-size: 18px;
        margin-top: 0;
        margin-bottom: 16px;
      }

      form input {
        display: block;
        height: 60px;
        margin-bottom: 30px;
        width: 100%;
      }

      form input[type="submit"] {
        background-color: black;
        color: white;
        margin-bottom: 0px;
      }
    </style>
  </head>

  <body>
    <amp-story
        standalone
        publisher="The AMP team"
        publisher-logo-src="/examples/visual-tests/amp-story/img/AMP-Brand-White-Icon.svg"
        poster-portrait-src="/examples/visual-tests/amp-story/img/overview.jpg"
        title="Attachment Story">
      <amp-story-page id="inline-default">
        <amp-story-grid-layer template="fill">
          <amp-img layout="fill" src="/examples/visual-tests/amp-story/img/cat1.jpg"></amp-img>
        </amp-story-grid-layer>
        <amp-story-grid-layer template="vertical">
          <p>
            <span data-text-background-color="#00A3DB">Default amp-story-page-attachment.</span></br></br>
          </p>
        </amp-story-grid-layer>
        <amp-story-page-attachment title="Lorem ipsum" layout="nodisplay">
          <a href="https://google.com">Left link</a>
          <div style="text-align: center;"><a href="https://google.com">Center link</a></div>
          <div style="text-align: right;"><a href="https://google.com">Right link</a></div>
          <p>Lots of content. Opens to max of 80% then scrolls.</p>

          <p>In nisl nisi scelerisque eu ultrices vitae auctor eu. Tristique magna sit amet purus gravida. Tincidunt id aliquet risus feugiat in ante metus dictum. Mattis nunc sed blandit libero volutpat sed. Imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Sit amet mattis vulputate enim nulla aliquet porttitor lacus luctus. Proin sagittis nisl rhoncus mattis rhoncus. Pulvinar neque laoreet suspendisse interdum consectetur libero. Nibh tellus molestie nunc non blandit massa enim nec dui. Sagittis eu volutpat odio facilisis. Tristique senectus et netus et malesuada fames ac. Molestie a iaculis at erat. Sit amet cursus sit amet. Suscipit tellus mauris a diam maecenas sed enim ut. Gravida quis blandit turpis cursus in. Tincidunt vitae semper quis lectus nulla at volutpat diam ut. Morbi tempus iaculis urna id. Faucibus et molestie ac feugiat sed lectus vestibulum. Mauris augue neque gravida in. Ac turpis egestas sed tempus.</p>

          <p>In nisl nisi scelerisque eu ultrices vitae auctor eu. Tristique magna sit amet purus gravida. Tincidunt id aliquet risus feugiat in ante metus dictum. Mattis nunc sed blandit libero volutpat sed. Imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Sit amet mattis vulputate enim nulla aliquet porttitor lacus luctus. Proin sagittis nisl rhoncus mattis rhoncus. Pulvinar neque laoreet suspendisse interdum consectetur libero. Nibh tellus molestie nunc non blandit massa enim nec dui. Sagittis eu volutpat odio facilisis. Tristique senectus et netus et malesuada fames ac. Molestie a iaculis at erat. Sit amet cursus sit amet. Suscipit tellus mauris a diam maecenas sed enim ut. Gravida quis blandit turpis cursus in. Tincidunt vitae semper quis lectus nulla at volutpat diam ut. Morbi tempus iaculis urna id. Faucibus et molestie ac feugiat sed lectus vestibulum. Mauris augue neque gravida in. Ac turpis egestas sed tempus.</p>

          <p>Ut tristique et egestas quis ipsum. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. Elementum curabitur vitae nunc sed velit dignissim. Tristique et egestas quis ipsum suspendisse ultrices gravida dictum fusce. At elementum eu facilisis sed odio morbi. Imperdiet proin fermentum leo vel orci porta non. Quam lacus suspendisse faucibus interdum. Eu non diam phasellus vestibulum lorem sed risus. Commodo viverra maecenas accumsan lacus vel facilisis volutpat est velit. Sagittis aliquam malesuada bibendum arcu vitae elementum. Ut sem viverra aliquet eget sit amet. Nulla facilisi morbi tempus iaculis. Sed odio morbi quis commodo odio aenean sed adipiscing diam. Donec ultrices tincidunt arcu non sodales. Amet venenatis urna cursus eget. Sapien et ligula ullamcorper malesuada proin. Tristique sollicitudin nibh sit amet commodo nulla facilisi. Venenatis tellus in metus vulputate eu scelerisque felis.</p>
          <a href="https://linkinattachment.com">Link in page attachment</a>
        </amp-story-page-attachment>
      </amp-story-page>
      <amp-story-page id="inline-default-dark-theme">
        <amp-story-grid-layer template="fill">
          <amp-img layout="fill" src="/examples/visual-tests/amp-story/img/cat1.jpg"></amp-img>
        </amp-story-grid-layer>
        <amp-story-grid-layer template="vertical">
          <p>
            <span data-text-background-color="#00A3DB">amp-story-page-attachment: dark theme.</span></br></br>
          </p>
        </amp-story-grid-layer>
        <amp-story-page-attachment
          title="Lorem ipsum"
          layout="nodisplay"
          theme="dark"
        >
          <p> A little content. Opens to max of content.</p>
        </amp-story-page-attachment>
      </amp-story-page>

      <amp-story-page id="inline-one-image">
        <amp-story-grid-layer template="fill">
          <amp-img layout="fill" src="/examples/visual-tests/amp-story/img/cat1.jpg"></amp-img>
        </amp-story-grid-layer>
        <amp-story-grid-layer template="vertical">
          <p>
            <span data-text-background-color="#00A3DB">amp-story-page-attachment: one image.</span></br></br>
          </p>
        </amp-story-grid-layer>
        <amp-story-page-attachment
          title="Lorem ipsum"
          layout="nodisplay"
          cta-text="Buy a Sweater"
          cta-image="img/sweater.jpg"
          >
          <div class="attachment-content">
            <p> Lots of content. Opens to max of 80% then scrolls.</p>

            <p>In nisl nisi scelerisque eu ultrices vitae auctor eu. Tristique magna sit amet purus gravida. Tincidunt id aliquet risus feugiat in ante metus dictum. Mattis nunc sed blandit libero volutpat sed. Imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Sit amet mattis vulputate enim nulla aliquet porttitor lacus luctus. Proin sagittis nisl rhoncus mattis rhoncus. Pulvinar neque laoreet suspendisse interdum consectetur libero. Nibh tellus molestie nunc non blandit massa enim nec dui. Sagittis eu volutpat odio facilisis. Tristique senectus et netus et malesuada fames ac. Molestie a iaculis at erat. Sit amet cursus sit amet. Suscipit tellus mauris a diam maecenas sed enim ut. Gravida quis blandit turpis cursus in. Tincidunt vitae semper quis lectus nulla at volutpat diam ut. Morbi tempus iaculis urna id. Faucibus et molestie ac feugiat sed lectus vestibulum. Mauris augue neque gravida in. Ac turpis egestas sed tempus.</p>

            <p>In nisl nisi scelerisque eu ultrices vitae auctor eu. Tristique magna sit amet purus gravida. Tincidunt id aliquet risus feugiat in ante metus dictum. Mattis nunc sed blandit libero volutpat sed. Imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Sit amet mattis vulputate enim nulla aliquet porttitor lacus luctus. Proin sagittis nisl rhoncus mattis rhoncus. Pulvinar neque laoreet suspendisse interdum consectetur libero. Nibh tellus molestie nunc non blandit massa enim nec dui. Sagittis eu volutpat odio facilisis. Tristique senectus et netus et malesuada fames ac. Molestie a iaculis at erat. Sit amet cursus sit amet. Suscipit tellus mauris a diam maecenas sed enim ut. Gravida quis blandit turpis cursus in. Tincidunt vitae semper quis lectus nulla at volutpat diam ut. Morbi tempus iaculis urna id. Faucibus et molestie ac feugiat sed lectus vestibulum. Mauris augue neque gravida in. Ac turpis egestas sed tempus.</p>

            <p>Ut tristique et egestas quis ipsum. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. Elementum curabitur vitae nunc sed velit dignissim. Tristique et egestas quis ipsum suspendisse ultrices gravida dictum fusce. At elementum eu facilisis sed odio morbi. Imperdiet proin fermentum leo vel orci porta non. Quam lacus suspendisse faucibus interdum. Eu non diam phasellus vestibulum lorem sed risus. Commodo viverra maecenas accumsan lacus vel facilisis volutpat est velit. Sagittis aliquam malesuada bibendum arcu vitae elementum. Ut sem viverra aliquet eget sit amet. Nulla facilisi morbi tempus iaculis. Sed odio morbi quis commodo odio aenean sed adipiscing diam. Donec ultrices tincidunt arcu non sodales. Amet venenatis urna cursus eget. Sapien et ligula ullamcorper malesuada proin. Tristique sollicitudin nibh sit amet commodo nulla facilisi. Venenatis tellus in metus vulputate eu scelerisque felis.</p>
            <a href="https://linkinattachment.com">Link in page attachment</a>
          </div>
        </amp-story-page-attachment>
      </amp-story-page>

      <amp-story-page id="inline-two-images-dark-theme">
        <amp-story-grid-layer template="fill">
          <amp-img layout="fill" src="/examples/visual-tests/amp-story/img/cat1.jpg"></amp-img>
        </amp-story-grid-layer>
        <amp-story-grid-layer template="vertical">
          <p>
            <span data-text-background-color="#00A3DB">amp-story-page-attachment: two images & dark theme.</span></br></br>
          </p>
        </amp-story-grid-layer>
        <amp-story-page-attachment
          title="Lorem ipsum"
          layout="nodisplay"
          cta-text="Buy a Sweater"
          cta-image="img/sweater.jpg"
          cta-image-2="img/boot.jpg"
          theme="dark"
          >
          <p> Lots of content. Opens to max of 80% then scrolls.</p>

          <p>In nisl nisi scelerisque eu ultrices vitae auctor eu. Tristique magna sit amet purus gravida. Tincidunt id aliquet risus feugiat in ante metus dictum. Mattis nunc sed blandit libero volutpat sed. Imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Sit amet mattis vulputate enim nulla aliquet porttitor lacus luctus. Proin sagittis nisl rhoncus mattis rhoncus. Pulvinar neque laoreet suspendisse interdum consectetur libero. Nibh tellus molestie nunc non blandit massa enim nec dui. Sagittis eu volutpat odio facilisis. Tristique senectus et netus et malesuada fames ac. Molestie a iaculis at erat. Sit amet cursus sit amet. Suscipit tellus mauris a diam maecenas sed enim ut. Gravida quis blandit turpis cursus in. Tincidunt vitae semper quis lectus nulla at volutpat diam ut. Morbi tempus iaculis urna id. Faucibus et molestie ac feugiat sed lectus vestibulum. Mauris augue neque gravida in. Ac turpis egestas sed tempus.</p>

          <p>In nisl nisi scelerisque eu ultrices vitae auctor eu. Tristique magna sit amet purus gravida. Tincidunt id aliquet risus feugiat in ante metus dictum. Mattis nunc sed blandit libero volutpat sed. Imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Sit amet mattis vulputate enim nulla aliquet porttitor lacus luctus. Proin sagittis nisl rhoncus mattis rhoncus. Pulvinar neque laoreet suspendisse interdum consectetur libero. Nibh tellus molestie nunc non blandit massa enim nec dui. Sagittis eu volutpat odio facilisis. Tristique senectus et netus et malesuada fames ac. Molestie a iaculis at erat. Sit amet cursus sit amet. Suscipit tellus mauris a diam maecenas sed enim ut. Gravida quis blandit turpis cursus in. Tincidunt vitae semper quis lectus nulla at volutpat diam ut. Morbi tempus iaculis urna id. Faucibus et molestie ac feugiat sed lectus vestibulum. Mauris augue neque gravida in. Ac turpis egestas sed tempus.</p>

          <p>Ut tristique et egestas quis ipsum. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. Elementum curabitur vitae nunc sed velit dignissim. Tristique et egestas quis ipsum suspendisse ultrices gravida dictum fusce. At elementum eu facilisis sed odio morbi. Imperdiet proin fermentum leo vel orci porta non. Quam lacus suspendisse faucibus interdum. Eu non diam phasellus vestibulum lorem sed risus. Commodo viverra maecenas accumsan lacus vel facilisis volutpat est velit. Sagittis aliquam malesuada bibendum arcu vitae elementum. Ut sem viverra aliquet eget sit amet. Nulla facilisi morbi tempus iaculis. Sed odio morbi quis commodo odio aenean sed adipiscing diam. Donec ultrices tincidunt arcu non sodales. Amet venenatis urna cursus eget. Sapien et ligula ullamcorper malesuada proin. Tristique sollicitudin nibh sit amet commodo nulla facilisi. Venenatis tellus in metus vulputate eu scelerisque felis.</p>
          <a href="https://linkinattachment.com">Link in page attachment</a>
        </amp-story-page-attachment>
      </amp-story-page>

      <amp-story-page id="short-inline-containing-form">
        <amp-story-grid-layer template="fill">
          <amp-img layout="fill" src="/examples/visual-tests/amp-story/img/cat1.jpg"></amp-img>
        </amp-story-grid-layer>
        <amp-story-grid-layer template="vertical">
          <p>
            <span data-text-background-color="#00A3DB">amp-story-page-attachment: one form within small attachment.</span></br></br>
          </p>
        </amp-story-grid-layer>
        <amp-story-page-attachment
          title="Subscribe"
          layout="nodisplay"
          cta-text="Subscribe">
          <div class="attachment-content">
            <p>Form within a small attachment:</p>
            <form
              method="POST"
              action-xhr="https://www.example.com"
              target="_top"
              >
              <input type="tel" name="phone" placeholder="Phone" required>
              <input type="email" name="email" placeholder="Email" required>
              <input type="text" name="name" placeholder="Your name" required>
              <input type="submit" value="Subscribe">
            </form>
          </div>
        </amp-story-page-attachment>
      </amp-story-page>

      <amp-story-page id="long-inline-containing-forms">
        <amp-story-grid-layer template="fill">
          <amp-img layout="fill" src="/examples/visual-tests/amp-story/img/cat1.jpg"></amp-img>
        </amp-story-grid-layer>
        <amp-story-grid-layer template="vertical">
          <p>
            <span data-text-background-color="#00A3DB">amp-story-page-attachment: two forms within large attachment.</span></br></br>
          </p>
        </amp-story-grid-layer>
        <amp-story-page-attachment
          title="Subscribe"
          layout="nodisplay"
          cta-text="Subscribe">
          <div class="attachment-content">
            <p>Forms within a large attachment:</p>
            <form
              method="POST"
              action-xhr="https://www.example.com"
              target="_top"
              >
              <input type="email" name="email" placeholder="Email" required>
              <input type="submit" value="Subscribe">
            </form>
            <p>In nisl nisi scelerisque eu ultrices vitae auctor eu. Tristique magna sit amet purus gravida. Tincidunt id aliquet risus feugiat in ante metus dictum. Mattis nunc sed blandit libero volutpat sed. Imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Sit amet mattis vulputate enim nulla aliquet porttitor lacus luctus. Proin sagittis nisl rhoncus mattis rhoncus. Pulvinar neque laoreet suspendisse interdum consectetur libero. Nibh tellus molestie nunc non blandit massa enim nec dui. Sagittis eu volutpat odio facilisis. Tristique senectus et netus et malesuada fames ac. Molestie a iaculis at erat. Sit amet cursus sit amet. Suscipit tellus mauris a diam maecenas sed enim ut. Gravida quis blandit turpis cursus in. Tincidunt vitae semper quis lectus nulla at volutpat diam ut. Morbi tempus iaculis urna id. Faucibus et molestie ac feugiat sed lectus vestibulum. Mauris augue neque gravida in. Ac turpis egestas sed tempus.</p>
            <p>In nisl nisi scelerisque eu ultrices vitae auctor eu. Tristique magna sit amet purus gravida. Tincidunt id aliquet risus feugiat in ante metus dictum. Mattis nunc sed blandit libero volutpat sed. Imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Sit amet mattis vulputate enim nulla aliquet porttitor lacus luctus. Proin sagittis nisl rhoncus mattis rhoncus. Pulvinar neque laoreet suspendisse interdum consectetur libero. Nibh tellus molestie nunc non blandit massa enim nec dui. Sagittis eu volutpat odio facilisis. Tristique senectus et netus et malesuada fames ac. Molestie a iaculis at erat. Sit amet cursus sit amet. Suscipit tellus mauris a diam maecenas sed enim ut. Gravida quis blandit turpis cursus in. Tincidunt vitae semper quis lectus nulla at volutpat diam ut. Morbi tempus iaculis urna id. Faucibus et molestie ac feugiat sed lectus vestibulum. Mauris augue neque gravida in. Ac turpis egestas sed tempus.</p>
            <p>Ut tristique et egestas quis ipsum. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. Elementum curabitur vitae nunc sed velit dignissim. Tristique et egestas quis ipsum suspendisse ultrices gravida dictum fusce. At elementum eu facilisis sed odio morbi. Imperdiet proin fermentum leo vel orci porta non. Quam lacus suspendisse faucibus interdum. Eu non diam phasellus vestibulum lorem sed risus. Commodo viverra maecenas accumsan lacus vel facilisis volutpat est velit. Sagittis aliquam malesuada bibendum arcu vitae elementum. Ut sem viverra aliquet eget sit amet. Nulla facilisi morbi tempus iaculis. Sed odio morbi quis commodo odio aenean sed adipiscing diam. Donec ultrices tincidunt arcu non sodales. Amet venenatis urna cursus eget. Sapien et ligula ullamcorper malesuada proin. Tristique sollicitudin nibh sit amet commodo nulla facilisi. Venenatis tellus in metus vulputate eu scelerisque felis.</p>
            <form
              method="POST"
              action-xhr="https://www.example.com"
              target="_top"
              >
              <input type="text" name="feedback" placeholder="Feedback">
              <input type="submit" value="Submit">
            </form>
          </div>
        </amp-story-page-attachment>
      </amp-story-page>

      <amp-story-page id="amp-list-of-amp-img">
        <amp-story-grid-layer template="fill">
          <amp-img layout="fill" src="/examples/visual-tests/amp-story/img/cat1.jpg"></amp-img>
        </amp-story-grid-layer>
        <amp-story-grid-layer template="vertical">
          <p>
            <span data-text-background-color="#00A3DB">amp-story-page-attachment: amp-list of amp-img.</span></br></br>
          </p>
        </amp-story-grid-layer>
        <amp-story-page-attachment
          title="Lorem ipsum"
          layout="nodisplay"
        >
          <amp-list src="https://afdsi.com/164189302300000061/data.json" width="auto" height="100" layout="fixed-height">
            <template type="amp-mustache">
              <amp-img src="{{imageUrl}}" width="160" height="160"></amp-img>
            </template>
          </amp-list>
        </amp-story-page-attachment>
      </amp-story-page>

      <amp-story-page id="outlink-default">
        <amp-story-grid-layer template="fill">
          <amp-img layout="fill" src="/examples/visual-tests/amp-story/img/cat2.jpg"></amp-img>
        </amp-story-grid-layer>
        <amp-story-grid-layer template="center">
          <p>
            <span data-text-background-color="crimson">Default amp-story-page-outlink.</span></br></br>
          </p>
        </amp-story-grid-layer>
        <amp-story-page-outlink
          layout="nodisplay">
          <a href="https://www.google.com" title="Link Description"></a>
        </amp-story-page-outlink>
      </amp-story-page>

      <amp-story-page id="outlink-default-hash-navigation">
        <amp-story-grid-layer template="fill">
          <amp-img layout="fill" src="/examples/visual-tests/amp-story/img/cat2.jpg"></amp-img>
        </amp-story-grid-layer>
        <amp-story-grid-layer template="center">
          <p>
            <span data-text-background-color="crimson">Outlink linking to another page in the same story.</span></br></br>
          </p>
        </amp-story-grid-layer>
        <amp-story-page-outlink
          layout="nodisplay">
          <a href="http://localhost:8000/examples/amp-story/attachment.html#page=outlink-default" title="Link Description"></a>
        </amp-story-page-outlink>
      </amp-story-page>

      <amp-story-page id="outlink-custom-icon-custom-text">
        <amp-story-grid-layer template="fill">
          <amp-img layout="fill" src="/examples/visual-tests/amp-story/img/cat2.jpg"></amp-img>
        </amp-story-grid-layer>
        <amp-story-grid-layer template="center">
          <p>
            <span data-text-background-color="crimson">amp-story-page-outlink: logo & custom text.</span></br></br>
          </p>
        </amp-story-grid-layer>
        <amp-story-page-outlink
          layout="nodisplay"
          cta-image="img/logo.jpg">
          <a href="https://www.google.com" title="Link Description">Shop at Forbes</a>
        </amp-story-page-outlink>
      </amp-story-page>

      <amp-story-page id="outlink-no-image">
        <amp-story-grid-layer template="fill">
          <amp-img layout="fill" src="/examples/visual-tests/amp-story/img/cat2.jpg"></amp-img>
        </amp-story-grid-layer>
        <amp-story-grid-layer template="center">
          <p>
            <span data-text-background-color="crimson">amp-story-page-outlink: no image.</span></br></br>
          </p>
        </amp-story-grid-layer>
        <amp-story-page-outlink
          layout="nodisplay"
          cta-image="none">
          <a href="https://www.google.com" title="Link Description"></a>
        </amp-story-page-outlink>
      </amp-story-page>

      <amp-story-page id="outlink-dark-theme">
        <amp-story-grid-layer template="fill">
          <amp-img layout="fill" src="/examples/visual-tests/amp-story/img/cat2.jpg"></amp-img>
        </amp-story-grid-layer>
        <amp-story-grid-layer template="center">
          <p>
            <span data-text-background-color="crimson">amp-story-page-outlink: dark theme.</span></br></br>
          </p>
        </amp-story-grid-layer>
        <amp-story-page-outlink
          layout="nodisplay"
          theme="dark">
          <a href="https://www.google.com" title="Link Description"></a>
        </amp-story-page-outlink>
      </amp-story-page>

      <amp-story-page id="outlink-custom-background-color-pink">
        <amp-story-grid-layer template="fill">
          <amp-img layout="fill" src="/examples/visual-tests/amp-story/img/cat2.jpg"></amp-img>
        </amp-story-grid-layer>
        <amp-story-grid-layer template="center">
          <p>
            <span data-text-background-color="crimson">amp-story-page-outlink: custom pink background.</span></br></br>
          </p>
        </amp-story-grid-layer>
        <amp-story-page-outlink
          layout="nodisplay"
          theme="custom"
          cta-accent-color="pink"
          cta-accent-element="background">
          <a href="https://www.google.com" title="Link Description"></a>
        </amp-story-page-outlink>
      </amp-story-page>

      <amp-story-page id="outlink-custom-text-color-pink">
        <amp-story-grid-layer template="fill">
          <amp-img layout="fill" src="/examples/visual-tests/amp-story/img/cat2.jpg"></amp-img>
        </amp-story-grid-layer>
        <amp-story-grid-layer template="center">
          <p>
            <span data-text-background-color="crimson">amp-story-page-outlink: custom pink text.</span></br></br>
          </p>
        </amp-story-grid-layer>
        <amp-story-page-outlink
          layout="nodisplay"
          theme="custom"
          cta-accent-color="pink"
          cta-accent-element="text">
          <a href="https://www.google.com" title="Link Description"></a>
        </amp-story-page-outlink>
      </amp-story-page>

      <amp-story-page id="outlink-custom-background-color-navy">
        <amp-story-grid-layer template="fill">
          <amp-img layout="fill" src="/examples/visual-tests/amp-story/img/cat2.jpg"></amp-img>
        </amp-story-grid-layer>
        <amp-story-grid-layer template="center">
          <p>
            <span data-text-background-color="crimson">amp-story-page-outlink: custom navy background.</span></br></br>
          </p>
        </amp-story-grid-layer>
        <amp-story-page-outlink
          layout="nodisplay"
          theme="custom"
          cta-accent-color="navy"
          cta-accent-element="background">
            <a href="https://www.google.com" title="Link Description"></a>
        </amp-story-page-outlink>
      </amp-story-page>

      <amp-story-page id="outlink-custom-text-color-navy">
        <amp-story-grid-layer template="fill">
          <amp-img layout="fill" src="/examples/visual-tests/amp-story/img/cat2.jpg"></amp-img>
        </amp-story-grid-layer>
        <amp-story-grid-layer template="center">
          <p>
            <span data-text-background-color="crimson">amp-story-page-outlink: custom navy text.</span></br></br>
          </p>
        </amp-story-grid-layer>
        <amp-story-page-outlink
          layout="nodisplay"
          theme="custom"
          cta-accent-color="navy"
          cta-accent-element="text">
          <a href="https://www.google.com/search?q=why+do+cats+purr+so+loud" title="Link Description"></a>
        </amp-story-page-outlink>
      </amp-story-page>

      <amp-story-page id="legacy-attachment">
        <amp-story-grid-layer template="fill">
          <amp-img layout="fill" src="/examples/visual-tests/amp-story/img/cat2.jpg"></amp-img>
        </amp-story-grid-layer>
        <amp-story-grid-layer template="center">
          <p>
            <span data-text-background-color="crimson">Legacy outlink (amp-story-page-attachment with an href) using title, data-title, cta-text, and data-cta-text attributes.</span></br></br>
          </p>
        </amp-story-grid-layer>
        <amp-story-page-attachment
          title="Link Description"
          data-title="Data-Title"
          href="https://www.google.com"
          cta-text="Shop at Forbes"
          data-cta-text="Data-CTA-Text"
          layout="nodisplay">
        </amp-story-page-attachment>
      </amp-story-page>

      <amp-story-page id="legacy-attachment-hash-navigation">
        <amp-story-grid-layer template="fill">
          <amp-img layout="fill" src="/examples/visual-tests/amp-story/img/cat2.jpg"></amp-img>
        </amp-story-grid-layer>
        <amp-story-grid-layer template="center">
          <p>
            <span data-text-background-color="crimson">Page attachment linking to another page in the same story.</span></br></br>
          </p>
        </amp-story-grid-layer>
        <amp-story-page-attachment
          title="Link Description"
          data-title="Data-Title"
          href="http://localhost:8000/examples/amp-story/attachment.html#page=legacy-attachment"
          cta-text="Shop at Forbes"
          data-cta-text="Data-CTA-Text"
          layout="nodisplay">
        </amp-story-page-attachment>
      </amp-story-page>

      <amp-story-page id="last-page-no-cta">
        <amp-story-grid-layer template="fill">
          <amp-img layout="fill" src="/examples/visual-tests/amp-story/img/cat1.jpg"></amp-img>
        </amp-story-grid-layer>
        <amp-story-grid-layer template="vertical">
          <p>
            <span data-text-background-color="#00A3DB">No CTA page.</span>
          </p>
        </amp-story-grid-layer>
      </amp-story-page>

      <amp-story-social-share layout="nodisplay">
        <script type="application/json">
          {
            "shareProviders": [
              "email",
              {"provider": "facebook", "app_id": "254325784911610"},
              {"provider": "twitter", "text": "This is custom share text that I would like for the Twitter platform"},
              "whatsapp",
              "pinterest",
              "line"
            ]
          }
        </script>
      </amp-story-social-share>
    </amp-story>
  </body>
</html>