Don't separate keyframes for AMP Stories (#653)

Fixes #652
ampproject · Mar 20, 2020 · 443d80c · 443d80c
1 parent 701d7a6
commit 443d80c
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 1 deletion.
diff --git a/packages/optimizer/lib/transformers/SeparateKeyframes.js b/packages/optimizer/lib/transformers/SeparateKeyframes.js
@@ -61,6 +61,9 @@ class SeparateKeyframes {
     const head = firstChildByTag(html, 'head');
     if (!head) return;
     const body = firstChildByTag(html, 'body') || head;
+    if (this.isAmpStory(body)) {
+      return;
+    }
     let stylesCustomTag;
     let stylesKeyframesTag;
 
@@ -197,6 +200,10 @@ class SeparateKeyframes {
     this.log_.warn(`Found invalid keyframe property '${
       property}' in '${name}' not moving to style[amp-keyframes]`);
   }
+
+  isAmpStory(body) {
+    return body.children.some((child) => child.tagName === 'amp-story');
+  }
 }
 
 module.exports = SeparateKeyframes;
diff --git a/...imizer/spec/transformers/valid/SeparateKeyframes/ignores_amp_stories/expected_output.html b/...imizer/spec/transformers/valid/SeparateKeyframes/ignores_amp_stories/expected_output.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html amp lang="en">
+<head>
+  <meta charset="utf-8">
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <title>My Story</title>
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <link rel="canonical" href="helloworld.html">
+  <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>
+  <style amp-custom>
+    .another{display:block}@keyframes anim1{from{opacity:0}top{opacity:1}}.foo{height:0}@keyframes anim2{from{opacity:1;}to{opacity:0;}}
+  </style>
+</head>
+
+<body>
+  <amp-story standalone>
+
+    <amp-story-page id="cover">
+      <amp-story-grid-layer template="vertical">
+        <h1>Hello World</h1>
+        <p>This is the cover page of this story.</p>
+      </amp-story-grid-layer>
+    </amp-story-page>
+
+    <amp-story-page id="page-1">
+      <amp-story-grid-layer template="vertical">
+        <h1>First Page</h1>
+        <p>This is the first page of this story.</p>
+      </amp-story-grid-layer>
+    </amp-story-page>
+
+    <amp-story-page id="page-2">
+      <amp-story-grid-layer template="vertical">
+        <h1>Second Page</h1>
+        <p>This is the second page of this story.</p>
+      </amp-story-grid-layer>
+    </amp-story-page>
+  </amp-story>
+</body>
+</html>
diff --git a/packages/optimizer/spec/transformers/valid/SeparateKeyframes/ignores_amp_stories/input.html b/packages/optimizer/spec/transformers/valid/SeparateKeyframes/ignores_amp_stories/input.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html amp lang="en">
+  <head>
+    <meta charset="utf-8">
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+    <title>My Story</title>
+    <meta name="viewport"
+          content="width=device-width,minimum-scale=1,initial-scale=1">
+    <link rel="canonical" href="helloworld.html">
+    <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>
+  <style amp-custom>
+    .another{display:block}@keyframes anim1{from{opacity:0}top{opacity:1}}.foo{height:0}@keyframes anim2{from{opacity:1;}to{opacity:0;}}
+  </style>
+  </head>
+
+  <body>
+    <amp-story standalone>
+
+      <amp-story-page id="cover">
+        <amp-story-grid-layer template="vertical">
+          <h1>Hello World</h1>
+          <p>This is the cover page of this story.</p>
+        </amp-story-grid-layer>
+      </amp-story-page>
+
+      <amp-story-page id="page-1">
+        <amp-story-grid-layer template="vertical">
+          <h1>First Page</h1>
+          <p>This is the first page of this story.</p>
+        </amp-story-grid-layer>
+      </amp-story-page>
+
+      <amp-story-page id="page-2">
+        <amp-story-grid-layer template="vertical">
+          <h1>Second Page</h1>
+          <p>This is the second page of this story.</p>
+        </amp-story-grid-layer>
+      </amp-story-page>
+    </amp-story>
+  </body>
+</html>
diff --git a/packages/optimizer/spec/transformers/valid/SeparateKeyframes/moves_keyframes/input.html b/packages/optimizer/spec/transformers/valid/SeparateKeyframes/moves_keyframes/input.html
@@ -13,4 +13,4 @@
 <body>
   <p>I should come before style[amp-keyframes]</p>
 </body>
-</html>
+</html>
-Original file line number
+Diff line change
@@ Expand Up / @@ -13,4 +13,4 @@ @@
     <body>
       <p>I should come before style[amp-keyframes]</p>
     </body>
-    </html>
+    </html>