Skip to content

Commit

Permalink
πŸ—πŸ“– Fix some example files that do not validate (#34835)
Browse files Browse the repository at this point in the history
Partial for #25149.

1. Fixes a set of documents.
2. Removes unused example files that do not validate.
3. Categorizes some ignore rules that cannot be removed.
4. Adds a general rule for `bento/` directories, for documents which are not meant to be valid.
  • Loading branch information
alanorozco committed Jun 15, 2021
1 parent c228856 commit 0311689
Show file tree
Hide file tree
Showing 17 changed files with 529 additions and 488 deletions.
15 changes: 14 additions & 1 deletion build-system/tasks/validate-html-fixtures.js
Original file line number Diff line number Diff line change
Expand Up @@ -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.');
}
Expand Down
30 changes: 7 additions & 23 deletions build-system/test-configs/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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',
Expand All @@ -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',
Expand All @@ -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',
Expand All @@ -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',
Expand All @@ -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',
Expand Down Expand Up @@ -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',
Expand Down
8 changes: 0 additions & 8 deletions examples/amp-script/hello-world.html

This file was deleted.

3 changes: 2 additions & 1 deletion examples/amp-video-iframe/consent.html
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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>
Expand Down
88 changes: 44 additions & 44 deletions examples/amp-video/multi-bitrate/multi-bitrate.html
Original file line number Diff line number Diff line change
@@ -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>
File renamed without changes.
114 changes: 63 additions & 51 deletions examples/brightcove.amp.html
Original file line number Diff line number Diff line change
@@ -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>
Loading

0 comments on commit 0311689

Please sign in to comment.