validator/testdata/feature_tests/article.out - main - githubmirror/amphtml

validator/testdata/feature_tests/article.out
487 строк17 KB
Daniel Rozenberg
Replace URLs of sample videos from soon-to-be-shutdown Google Cloud storage bucket to Netlify (#40486)
25 фев 2026, 21:15
25 фев 2026, 21:15f45b5ec
FAIL
|  <!doctype html>
|  <html ⚡>
|  <head>
|    <meta charset="utf-8">
|    <title>Lorem Ipsum | PublisherName</title>
|    <link rel="canonical" href="https://medium.com/p/cb7f223fad86" >
|    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
|    <script async src="https://cdn.ampproject.org/v0.js"></script>
|
|    <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;
|      }
|
|      /* In the shadow-doc mode, the parent shell already has header and nav. */
|      .amp-shadow header {
|        display: none;
|      }
|
|      .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;
|        margin-bottom: 20px;
|      }
|
|      hr {
|        margin: 0;
|      }
|
|      amp-app-banner {
|        padding: 10px;
|      }
|
|      amp-app-banner .content {
|        display: flex;
|        align-items: center;
|        justify-content: center;
|      }
|
|      amp-img {
|        background-color: #f4f4f4;
|      }
|
|      .slot-fallback {
|        padding: 16px;
|        background: yellow;
|      }
|
|      amp-app-banner amp-img {
|        background-color: transparent;
|        margin-right: 15px
|      }
|
|      amp-app-banner .description {
|        margin-right: 20px;
|      }
|
|      amp-app-banner h5 {
|        margin: 0;
|      }
|
|      amp-app-banner p {
|        font-size: 10px;
|        margin: 3px 0;
|      }
|
|      amp-app-banner .actions button {
|        padding: 5px;
|        width: 70px;
|        border: 1px solid #aaa;
|        font-size: 8px;
|        background: #fff;
|      }
|
|      amp-app-banner .actions {
|        text-align: right;
|        font-size: 14px;
|      }
|
|      amp-sidebar {
|        width: 150px;
|      }
|
|      nav li {
|        list-style: none;
|        margin-bottom: 10px;
|      }
|
|      nav li a {
|        text-decoration: none;
|        color: #666666;
|      }
|
|    </style>
|    <link href='https://fonts.googleapis.com/css?family=Georgia|Open+Sans|Roboto' rel='stylesheet' type='text/css'>
|    <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
|    <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
|    <script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
|    <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
|    <script async custom-element="amp-app-banner" src="https://cdn.ampproject.org/v0/amp-app-banner-0.1.js" data-amp-report-test="amp-app-banner.js"></script>
|    <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-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>
|    <meta name="apple-itunes-app" content="app-id=828256236, app-argument=medium://p/cb7f223fad86">
|    <link rel="manifest" href="medium-manifest.json">
|  </head>
|  <body>
|    <amp-sidebar id="sidebar" layout="nodisplay">
|      <nav>
|        <ul>
|          <li>
|            <a href="#">
|              Home
|              <amp-img src="img/ampicon.png" width="15" height="15"></amp-img>
|            </a>
|          </li>
|          <li><a href="#">Link 1</a></li>
|          <li><a href="#">Link 2</a></li>
|          <li><a href="#">Link 3</a></li>
|          <li><a href="#">Link 4</a></li>
|          <li><a href="#section1">Section 1</a></li>
|          <li><a href="#section2">Section 2</a></li>
|          <li><a href="#section3">Section 3</a></li>
|        </ul>
|      </nav>
|    </amp-sidebar>
|    <amp-app-banner layout="nodisplay" id="demo-app-banner-2134">
|      <div class="content">
|        <amp-img src="https://cdn-images-1.medium.com/max/800/1*JLegdtjFMNgqHgnxdd04fg.png"
|                 width="40" height="34"></amp-img>
|        <div class="description">
|          <h5>Medium App</h5>
|          <p>Experience a richer experience on our mobile app!</p>
|        </div>
|        <div class="actions">
|          <button open-button>Open In App</button>
|        </div>
|      </div>
|    </amp-app-banner>
|
|    <header>
|      <button on="tap:sidebar.toggle" class="menu" title="Toggle Sidebar" >
|        ☰
|      </button>
|      <span class="brand-logo">
|        PublisherLogo
|      </span>
|    </header>
|
|    <!--
|    Slots spec is not implemented yet by any browser. Will use an older version via `<content>` tag.
|    <slot name="slot1"></slot>
|    -->
|    <content>
>>   ^~~~~~~~~
feature_tests/article.html:273:2 The tag 'content' is disallowed.
|      <div class="slot-fallback">
|        This is a slot fallback.
|      </div>
|    </content>
|
|    <main role="main">
|      <article>
|        <figure>
|          <amp-img id="hero-img"
|              src="img/hero@1x.jpg"
|              srcset="img/hero@1x.jpg 1x, img/hero@2x.jpg 2x"
|              layout="responsive" width="360" placeholder
|              alt="Picture of two chairs on a lake shore with big pine trees"
|              title="Opens image in a lightbox"
|              role="button" on="tap:headline-img-lightbox"
|              height="216" tabindex="0">
|          </amp-img>
|        </figure>
|
|        <amp-lightbox id="headline-img-lightbox" class="lightbox"
|            layout="nodisplay">
|
|          <div class="lightbox-content">
|            <amp-img id="floating-headline-img"
|                src="img/hero@1x.jpg"
|                srcset="img/hero@1x.jpg 1x, img/hero@2x.jpg 2x"
|                alt="Two chairs on a lake shore with big pine trees"
|                placeholder
|                width="360" height="216" layout="responsive">
|            </amp-img>
|            <p>
|              Fusce pretium tempor justo, vitae consequat dolor maximus eget.
|            </p>
|          </div>
|        </amp-lightbox>
|
|        <div class="content-container">
|          <ul>
|            <li><a href="#section1">Section 1</a></li>
|            <li><a href="#section2">Section 2</a></li>
|          </ul>
|          <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>
|
|            <div class="ad-container">
|              <amp-ad width=300 height=250
|                  type="a9"
|                  data-aax_size="300x250"
|                  data-aax_pubname="abc123"
|                  data-aax_src="302">
|              </amp-ad>
|            </div>
|
|            <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>
|
|            <figure>
|              <amp-video
|                autoplay
|                src="https://amp-sample-videos.netlify.app/ForBiggerJoyrides.mp4"
|                width="720"
|                height="405"
|                layout="responsive"
|                controls>
|              </amp-video>
|              <figcaption>
|                Fusce pretium tempor justo, vitae consequat dolor maximus eget.
|              </figcaption>
|            </figure>
|
|            <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 id="section1">
|              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/sea@1x.jpg"
|                  srcset="img/sea@1x.jpg 1x, img/sea@2x.jpg 2x"
|                  layout="responsive" width="320"
|                  alt="Fusce pretium tempor justo, vitae consequat dolor maximus eget."
|                  height="180">
|              </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>
|
|            <div class="ad-container">
|              <amp-ad width=300 height=200
|                  type="adsense"
|                  data-ad-client="ca-pub-9350112648257122">
|              </amp-ad>
|            </div>
|
|            <p id="section2">
|              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>