close
Skip to content

✨Allow link[rel=stylesheet] which points to the amp-story-1.0.css in a transformed amp document #36844

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
erwinmombay merged 7 commits into from
Nov 10, 2021
Merged

✨Allow link[rel=stylesheet] which points to the amp-story-1.0.css in a transformed amp document #36844

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
4d5383e
Allow link[rel=stylesheet] which points to the amp-story-1.0.css in a…
erwinmombay Nov 8, 2021
f1e71e4
allow rtv urls
erwinmombay Nov 8, 2021
8b2e2a1
remove allowing rtv url for the css link
erwinmombay Nov 8, 2021
59841f4
remove the rtv link
erwinmombay Nov 8, 2021
3c2448c
Update validator/validator-main.protoascii
erwinmombay Nov 8, 2021
c88d890
allow for amp-extension=amp-story to easily identify/query for story …
erwinmombay Nov 8, 2021
f427a98
make the amp-extension attribute required
erwinmombay Nov 8, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 33 additions & 0 deletions validator/testdata/transformed_feature_tests/amp-story-css-link.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<!doctype html><html data-story-supports-landscape i-amphtml-layout transformed="google;v=1" ⚡><head><meta charset=utf-8><style amp-runtime i-amphtml-version=latest></style><link amp-extension=amp-story href=https://cdn.ampproject.org/v0/amp-story-1.0.css rel=stylesheet><link amp-extension=amp-story href=https://cdn.ampproject.org/lts/v0/amp-story-1.0.css rel=stylesheet><meta content="Get started with amp-story" name=description><meta content="width=device-width,minimum-scale=1,initial-scale=1" name=viewport><link as=script href=https://cdn.ampproject.org/v0.js rel=preload><script async src=https://cdn.ampproject.org/v0.js></script><link as=script href=https://cdn.ampproject.org/v0/amp-story-1.0.js rel=preload><script async custom-element=amp-story src=https://cdn.ampproject.org/v0/amp-story-1.0.js></script><style amp-custom>
body {
font-family: 'Roboto', sans-serif;
}
amp-story-page {
background: white;
}
.button {
font: bold 20px Arial;
text-decoration: none;
background-color: rgba(0, 240, 248, 0.63);
color: #333333;
padding: 2px 6px 2px 6px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
width: 100%;
height: 100%;
position: absolute;
}
</style><title>My Story</title><link href=https://amp-story-css-link_source.html.com/grid-layer-templates.html rel=canonical><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 class=i-amphtml-layout-container i-amphtml-layout=container poster-portrait-src=http://me.com/poster.jpg publisher=Me publisher-logo-src=http://me.com/logo.png standalone title="My Story">
<amp-story-page class=i-amphtml-layout-container i-amphtml-layout=container id=fill-template-title>
<amp-story-grid-layer class=i-amphtml-layout-container i-amphtml-layout=container template=vertical>
<h1>fill</h1>
<amp-img class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" height=30 i-amphtml-layout=responsive layout=responsive src=https://amp--story--css--link_source-html-com.cdn.ampproject.org/i/s/amp-story-css-link_source.html.com/lemur.jpg width=40><i-amphtml-sizer style=display:block;padding-top:75.0000%;></i-amphtml-sizer></amp-img>
</amp-story-grid-layer>
</amp-story-page>
</amp-story>


</body></html>
34 changes: 34 additions & 0 deletions validator/testdata/transformed_feature_tests/amp-story-css-link.out
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
PASS
| <!doctype html><html data-story-supports-landscape i-amphtml-layout transformed="google;v=1" ⚡><head><meta charset=utf-8><style amp-runtime i-amphtml-version=latest></style><link amp-extension=amp-story href=https://cdn.ampproject.org/v0/amp-story-1.0.css rel=stylesheet><link amp-extension=amp-story href=https://cdn.ampproject.org/lts/v0/amp-story-1.0.css rel=stylesheet><meta content="Get started with amp-story" name=description><meta content="width=device-width,minimum-scale=1,initial-scale=1" name=viewport><link as=script href=https://cdn.ampproject.org/v0.js rel=preload><script async src=https://cdn.ampproject.org/v0.js></script><link as=script href=https://cdn.ampproject.org/v0/amp-story-1.0.js rel=preload><script async custom-element=amp-story src=https://cdn.ampproject.org/v0/amp-story-1.0.js></script><style amp-custom>
| body {
| font-family: 'Roboto', sans-serif;
| }
| amp-story-page {
| background: white;
| }
| .button {
| font: bold 20px Arial;
| text-decoration: none;
| background-color: rgba(0, 240, 248, 0.63);
| color: #333333;
| padding: 2px 6px 2px 6px;
| border-top: 1px solid #CCCCCC;
| border-right: 1px solid #333333;
| border-bottom: 1px solid #333333;
| border-left: 1px solid #CCCCCC;
| width: 100%;
| height: 100%;
| position: absolute;
| }
| </style><title>My Story</title><link href=https://amp-story-css-link_source.html.com/grid-layer-templates.html rel=canonical><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 class=i-amphtml-layout-container i-amphtml-layout=container poster-portrait-src=http://me.com/poster.jpg publisher=Me publisher-logo-src=http://me.com/logo.png standalone title="My Story">
| <amp-story-page class=i-amphtml-layout-container i-amphtml-layout=container id=fill-template-title>
| <amp-story-grid-layer class=i-amphtml-layout-container i-amphtml-layout=container template=vertical>
| <h1>fill</h1>
| <amp-img class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" height=30 i-amphtml-layout=responsive layout=responsive src=https://amp--story--css--link_source-html-com.cdn.ampproject.org/i/s/amp-story-css-link_source.html.com/lemur.jpg width=40><i-amphtml-sizer style=display:block;padding-top:75.0000%;></i-amphtml-sizer></amp-img>
| </amp-story-grid-layer>
| </amp-story-page>
| </amp-story>
|
|
| </body></html>
34 changes: 34 additions & 0 deletions validator/validator-main.protoascii
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -313,6 +313,40 @@ tags: {
attr_lists: "common-link-attrs"
spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#html-tags"
}
# Allowlisted CSS provider
tags: {
html_format: AMP
enabled_by: "transformed"
tag_name: "LINK"
spec_name: "link rel=stylesheet for amp-story-1.0 css"
descriptive_name: "link rel=stylesheet for amp-story-1.0 css"
mandatory_parent: "HEAD"
attr_lists: "nonce-attr"
Comment thread
erwinmombay marked this conversation as resolved.
attrs: { name: "crossorigin" } # SRI attribute (https://www.w3.org/TR/SRI/)
attrs: {
name: "href"
mandatory: true
value: "https://cdn.ampproject.org/v0/amp-story-1.0.css"
value: "https://cdn.ampproject.org/lts/v0/amp-story-1.0.css"
}
attrs: { name: "integrity" } # SRI attribute (https://www.w3.org/TR/SRI/)
attrs: { name: "media" }
attrs: {
name: "rel"
mandatory: true
value_casei: "stylesheet"
dispatch_key: NAME_VALUE_DISPATCH
}
attrs: {
name: "type"
value_casei: "text/css"
}
attrs: {
Comment thread
erwinmombay marked this conversation as resolved.
name: "amp-extension"
mandatory: true
value_casei: "amp-story"
}
}
# Allowlisted font providers
tags: {
html_format: AMP
Expand Down