update validator to allow script[amp-story-dvh-polyfill] for transfor…

…med documents (#36980) * update validator to allow script[amp-story-dvh-fix] for transformed documents * update validator_test to allow for [script amp-story-dvh-polyfill]
ampproject · Dec 1, 2021 · 6d1060a · 6d1060a
1 parent 2939a5c
commit 6d1060a
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 4 deletions.
diff --git a/validator/js/engine/validator_test.js b/validator/js/engine/validator_test.js
@@ -1834,6 +1834,7 @@ describe('ValidatorRulesMakeSense', () => {
         let hasOctetStream = false;
         let hasCiphertext = false;
         let hasAmpOnerror = false;
+        let hasAmpStoryDvhPolyfill = false;
         for (const attrSpecId of tagSpec.attrs) {
           if (attrSpecId < 0) {
             continue;
@@ -1862,13 +1863,17 @@ describe('ValidatorRulesMakeSense', () => {
           if (attrSpec.name === 'amp-onerror') {
             hasAmpOnerror = true;
           }
+          if (attrSpec.name === 'amp-story-dvh-polyfill') {
+            hasAmpStoryDvhPolyfill = true;
+          }
         }
         it('script tags must have either a src attribute or type json, ' +
                'octet-stream (during SwG encryption), or text/plain',
            () => {
              expect(
                  hasSrc || hasJson || hasTextPlain ||
-                 (hasOctetStream && hasCiphertext) || hasAmpOnerror)
+                 (hasOctetStream && hasCiphertext) || hasAmpOnerror ||
+                  hasAmpStoryDvhPolyfill)
                  .toBe(true);
            });
       }

diff --git a/validator/testdata/transformed_feature_tests/amp-story-css-link.html b/validator/testdata/transformed_feature_tests/amp-story-css-link.html
@@ -19,7 +19,9 @@
       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>
+  </style><title>My Story</title><link href=https://amp-story-css-link_source.html.com/grid-layer-templates.html rel=canonical>
+  <script amp-story-dvh-polyfill>"use strict";if(!self.CSS||!CSS.supports||!CSS.supports("height:1dvh")){function e(){document.documentElement.style.setProperty("--story-dvh",innerHeight/100+"px","important")}addEventListener("resize",e,{passive:!0}),e()}</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></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>

diff --git a/validator/testdata/transformed_feature_tests/amp-story-css-link.out b/validator/testdata/transformed_feature_tests/amp-story-css-link.out
@@ -20,7 +20,9 @@ PASS
 |        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>
+|    </style><title>My Story</title><link href=https://amp-story-css-link_source.html.com/grid-layer-templates.html rel=canonical>
+|    <script amp-story-dvh-polyfill>"use strict";if(!self.CSS||!CSS.supports||!CSS.supports("height:1dvh")){function e(){document.documentElement.style.setProperty("--story-dvh",innerHeight/100+"px","important")}addEventListener("resize",e,{passive:!0}),e()}</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></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>
@@ -31,4 +33,4 @@ PASS
 |    </amp-story>
 |
 |
-|  </body></html>
+|  </body></html>
diff --git a/validator/validator-main.protoascii b/validator/validator-main.protoascii
@@ -3492,6 +3492,28 @@ tags: {
   }
 }
 
+# Dynamic Viewport (dvh) Polyfill when amp-story-1.0.css is Server Side Rendered.
+tags: {
+  html_format: AMP
+  enabled_by: "transformed"
+  tag_name: "SCRIPT"
+  spec_name: "script amp-story-dvh-polyfill"
+  descriptive_name: "script amp-story-dvh-polyfill"
+  unique: true
+  mandatory_parent: "HEAD"
+  attrs: {
+    name: "amp-story-dvh-polyfill"
+    value: ""
+    mandatory: true
+    dispatch_key: NAME_VALUE_DISPATCH
+  }
+  cdata: {
+    # Only valid if contents are exactly either of these:
+    # "use strict";if(!self.CSS||!CSS.supports||!CSS.supports("height:1dvh")){function e(){document.documentElement.style.setProperty("--story-dvh",innerHeight/100+"px","important")}addEventListener("resize",e,{passive:!0}),e()}
+    cdata_regex: "\"use strict\";if\\(!self\\.CSS\\|\\|!CSS\\.supports\\|\\|!CSS\\.supports\\(\"height:1dvh\"\\)\\)\\{function e\\(\\)\\{document\\.documentElement\\.style\\.setProperty\\(\"--story-dvh\",innerHeight/100\\+\"px\",\"important\"\\)\\}addEventListener\\(\"resize\",e,\\{passive:!0\\}\\),e\\(\\)\\}"
+  }
+}
+
 # Enables early styling on fast failure to load v0.js. See GitHub #22543.
 tags: {
   html_format: AMP