🏗📖 Fix some example files that do not validate

build-system/tasks/validate-html-fixtures.js

@@ -113,7 +113,20 @@ async function runCheck(filesToCheck) {
     }
   }
   if (foundValidationErrors) {
-    throw new Error('Please address the errors listed above.');
+    log('Please address the errors listed above.');
+    log(
+      '⤷ If a failing fixture is a',
+      cyan('Bento'),
+      'document, it is not meant to be valid AMP.'
+    );
+    log(
+      '⤷ Place it under any directory named',
+      cyan('bento'),
+      'like',
+      cyan('examples/bento/'),
+      'so that it is not validated.'
+    );
+    throw new Error('Validation failed.');
   }
   log(green('SUCCESS:'), 'All HTML fixtures are valid.');
 }

build-system/test-configs/config.js

@@ -200,6 +200,13 @@ const htmlFixtureGlobs = [
   'examples/**/*.html',
   'test/fixtures/e2e/**/*.html',
 
+  // The following are not AMP documents and are not meant to validate.
+  '!**/bento/**/*.html',
+  '!examples/amp-video-iframe/frame*.html',
+  '!examples/viewer-iframe-poll.html',
+  '!examples/viewer-webview.html',
+  '!examples/viewer.html',
+
   // TODO(#25149): Fix these invalid files and remove them from this list.
   '!examples/accordion.amp.html',
   '!examples/ad-lightbox.amp.html',
@@ -252,7 +259,6 @@ const htmlFixtureGlobs = [
   '!examples/amp-redbull-player.amp.html',
   '!examples/amp-script/example.amp.html',
   '!examples/amp-script/example.sandboxed.amp.html',
-  '!examples/amp-script/hello-world.html',
   '!examples/amp-script/todomvc.amp.html',
   '!examples/amp-script/vue-todomvc.amp.html',
   '!examples/amp-skimlinks.html',
@@ -306,13 +312,6 @@ const htmlFixtureGlobs = [
   '!examples/amp-subscriptions-google/amp-subscriptions.amp.html',
   '!examples/amp-subscriptions-rtp.amp.html',
   '!examples/amp-tiktok.amp.html',
-  '!examples/amp-video-iframe/consent.html',
-  '!examples/amp-video-iframe/frame-consent-es2015.html',
-  '!examples/amp-video-iframe/frame-consent.html',
-  '!examples/amp-video-iframe/frame-es2015.html',
-  '!examples/amp-video-iframe/frame-videojs.html',
-  '!examples/amp-video-iframe/frame.html',
-  '!examples/amp-video/multi-bitrate/multi-bitrate.html',
   '!examples/ampcontext-creative-json.html',
   '!examples/ampcontext-creative.html',
   '!examples/amphtml-ads/adchoices-1.a4a.html',
@@ -342,7 +341,6 @@ const htmlFixtureGlobs = [
   '!examples/article-super-short.amp.html',
   '!examples/article.amp.html',
   '!examples/auto-ads.amp.html',
-  '!examples/bento.amp.html',
   '!examples/beopinion.amp.html',
   '!examples/beopinion.article.amp.html',
   '!examples/bind/carousels.amp.html',
@@ -354,7 +352,6 @@ const htmlFixtureGlobs = [
   '!examples/bind/sandbox.amp.html',
   '!examples/bind/svgimage.amp.html',
   '!examples/bodymovin-animation.amp.html',
-  '!examples/brightcove.amp.html',
   '!examples/csa.amp.html',
   '!examples/csp.amp.html',
   '!examples/date-picker.amp.html',
@@ -366,10 +363,8 @@ const htmlFixtureGlobs = [
   '!examples/forms.amp.html',
   '!examples/gfk-sensic-analytics.amp.html',
   '!examples/gwd.amp.html',
-  '!examples/ima-video.amp.html',
   '!examples/image-lightbox.amp.html',
   '!examples/img.amp.html',
-  '!examples/jwplayer.amp.html',
   '!examples/linkers.html',
   '!examples/live-blog-non-floating-button.amp.html',
   '!examples/live-list.amp.html',
@@ -384,10 +379,6 @@ const htmlFixtureGlobs = [
   '!examples/metadata-examples/video-json-ld.amp.html',
   '!examples/mraid/inabox-mraid.html',
   '!examples/multiple-docs.html',
-  '!examples/old-boilerplate.amp.html',
-  '!examples/ooyalaplayer.amp.html',
-  '!examples/playbuzz.amp.html',
-  '!examples/powr-player.amp.html',
   '!examples/pwa-multidoc-loader.html',
   '!examples/pwa/pwa-sd-polyfill.html',
   '!examples/pwa/pwa.html',
@@ -405,11 +396,6 @@ const htmlFixtureGlobs = [
   '!examples/user-notification.amp.html',
   '!examples/valueimpression.amp.html',
   '!examples/video-animation-sync.html',
-  '!examples/viewer-iframe-poll.html',
-  '!examples/viewer-webview.html',
-  '!examples/viewer.html',
-  '!examples/vimeo.amp.html',
-  '!examples/viqeo.amp.html',
   '!examples/visual-tests/amp-accordion/amp-accordion.html',
   '!examples/visual-tests/amp-date-picker/amp-date-picker.amp.html',
   '!examples/visual-tests/amp-inabox/amp-inabox-gpt.html',
@@ -505,8 +491,6 @@ const htmlFixtureGlobs = [
   '!test/fixtures/e2e/amp-story-player/pre-rendering.html',
   '!test/fixtures/e2e/amp-story/amp-story.amp.html',
   '!test/fixtures/e2e/amp-subscriptions-google/swg.amp.html',
-  '!test/fixtures/e2e/amp-video/analytics-triggers.html',
-  '!test/fixtures/e2e/amp-video/autoplay.html',
   '!test/fixtures/e2e/amp-video/videos-cdn.html',
   '!test/fixtures/e2e/amp-viewer-integration/viewer.html',
   '!test/fixtures/e2e/amp4email/element-size-race.html',

examples/amp-video-iframe/consent.html

@@ -8,6 +8,7 @@
       name="viewport"
       content="width=device-width,minimum-scale=1,initial-scale=1"
     />
+    <meta name="amp-consent-blocking" content="amp-video-iframe" />
     <script
       async
       custom-element="amp-consent"
@@ -46,7 +47,7 @@
         layout="fill"
         placeholder
       ></amp-img>
-      <amp-layout type="fill" fallback>
+      <amp-layout layout="fill" fallback>
         Consent rejected
       </amp-layout>
     </amp-video-iframe>

examples/amp-video/multi-bitrate/multi-bitrate.html

@@ -1,54 +1,54 @@
-<!doctype html>
+<!DOCTYPE html>
 <html ⚡ lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Multi bitrate</title>
-  <link rel="canonical" href="amps.html" >
-  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
-  <style amp-custom>
-    body {
-      max-width: 527px;
-      font-family: 'Questrial', Arial;
-    }
-    [fallback] {
-      display: block;
-      /* @alternative */ display: flex;
-      flex-direction: column;
-      flex-wrap: nowrap;
-      justify-content: center;
-      align-items: center;
-      background: rgba(0, 0, 0, 0.5);
-      color: #fff;
-    }
-    .spacer {
-      height: 100vh;
-    }
-    p, h1, h2, h3 {
-      padding: 10px;
-    }
-  </style>
-  <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>
-</head>
-<body>
-  <h1>amp-video</h1>
+  <head>
+    <meta charset="utf-8">
+    <title>Multi bitrate</title>
+    <link rel="canonical" href="amps.html" >
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+    <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
+    <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
+    <style amp-custom>
+      body {
+        max-width: 527px;
+        font-family: 'Questrial', Arial;
+      }
+      [fallback] {
+        display: block;
+        /* @alternative */ display: flex;
+        flex-direction: column;
+        flex-wrap: nowrap;
+        justify-content: center;
+        align-items: center;
+        background: rgba(0, 0, 0, 0.5);
+        color: #fff;
+      }
+      .spacer {
+        height: 100vh;
+      }
+      p, h1, h2, h3 {
+        padding: 10px;
+      }
+    </style>
+    <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>
+  </head>
+  <body>
+    <h1>amp-video</h1>
 
-  <amp-video
+    <amp-video
       width="608"
       height="1080"
       layout="fixed"
       controls
       autoplay
       muted
       loop
-      multi-bitrate>
-    <source src="./223.mp4" data-bitrate="223">
-    <source src="./320.mp4" data-bitrate="320">
-    <source src="./611.mp4" data-bitrate="611">
-    <source src="./1000.mp4" data-bitrate="1000">
-    <source src="./2000.mp4" data-bitrate="2000">
-  </amp-video>
-</body>
+    >
+      <source src="./223.mp4" data-bitrate="223" />
+      <source src="./320.mp4" data-bitrate="320" />
+      <source src="./611.mp4" data-bitrate="611" />
+      <source src="./1000.mp4" data-bitrate="1000" />
+      <source src="./2000.mp4" data-bitrate="2000" />
+    </amp-video>
+  </body>
 </html>

examples/brightcove.amp.html

@@ -1,61 +1,73 @@
-<!doctype html>
+<!DOCTYPE html>
 <html ⚡ lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Brightcove Player Example</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'>
-  <script async custom-element="amp-brightcove" src="https://cdn.ampproject.org/v0/amp-brightcove-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>
-  <style amp-custom>
-    body {
-      max-width: 527px;
-      font-family: Arial;
-    }
-    .spacer {
-      height: 100vh;
-    }
-  </style>
-</head>
-<body>
-  <h2>Brightcove Player</h2>
-  <amp-brightcove
-    id="myPlayer"
-    data-referrer="EXTERNAL_REFERRER"
-    data-account="1290862519001"
-    data-video-id="ref:amp-docs-sample"
-    data-player-id="SyIOV8yWM"
-    layout="responsive" width="480" height="270">
-  </amp-brightcove>
-  <h2>Actions</h2>
-  <button on="tap:myPlayer.play">Play</button>
-  <button on="tap:myPlayer.pause">Pause</button>
-  <button on="tap:myPlayer.mute">Mute</button>
-  <button on="tap:myPlayer.unmute">Unmute</button>
-  <button on="tap:myPlayer.fullscreen">Fullscreen</button>
-
-  <p>Autoplay</p>
-  <amp-brightcove
-    id="myPlayer"
-    autoplay
-    data-account="1290862519001"
-    data-video-id="ref:amp-docs-sample"
-    data-player-id="SyIOV8yWM"
-    layout="responsive" width="480" height="270">
-  </amp-brightcove>
+  <head>
+    <meta charset="utf-8">
+    <title>Brightcove Player Example</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'>
+    <script async custom-element="amp-brightcove" src="https://cdn.ampproject.org/v0/amp-brightcove-0.1.js"></script>
+    <script async custom-element="amp-video-docking" src="https://cdn.ampproject.org/v0/amp-video-docking-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>
+    <style amp-custom>
+      body {
+        max-width: 527px;
+        font-family: Arial;
+      }
+      .spacer {
+        height: 100vh;
+      }
+    </style>
+  </head>
+  <body>
+    <h2>Brightcove Player</h2>
+    <amp-brightcove
+      id="myPlayer"
+      data-referrer="EXTERNAL_REFERRER"
+      data-account="1290862519001"
+      data-video-id="ref:amp-docs-sample"
+      data-player-id="SyIOV8yWM"
+      layout="responsive"
+      width="480"
+      height="270"
+    >
+    </amp-brightcove>
+    <h2>Actions</h2>
+    <button on="tap:myPlayer.play">Play</button>
+    <button on="tap:myPlayer.pause">Pause</button>
+    <button on="tap:myPlayer.mute">Mute</button>
+    <button on="tap:myPlayer.unmute">Unmute</button>
+    <button on="tap:myPlayer.fullscreen">Fullscreen</button>
 
-  <p>Dock<p>
+    <p>Autoplay</p>
     <amp-brightcove
       id="myPlayer"
-      dock
+      autoplay
       data-account="1290862519001"
       data-video-id="ref:amp-docs-sample"
       data-player-id="SyIOV8yWM"
-      layout="responsive" width="480" height="270">
+      layout="responsive"
+      width="480"
+      height="270"
+    >
     </amp-brightcove>
 
-  <div class="spacer"></div>
-</body>
+    <p>Dock</p>
+    <p>
+      <amp-brightcove
+        id="myPlayer"
+        dock
+        data-account="1290862519001"
+        data-video-id="ref:amp-docs-sample"
+        data-player-id="SyIOV8yWM"
+        layout="responsive"
+        width="480"
+        height="270"
+      >
+      </amp-brightcove>
+    </p>
+
+    <div class="spacer"></div>
+  </body>
 </html>