🚀 [Story performance] Add css to show story from beginning (ampprojec…

…t#36333)

* Added css to show story from beginning

* Fixed vertical rendering

* Organize css

* Simplify css

* Added second page to splitcss example

* Changed selector to having distance

* Added specificity to distance=1

* Increase specificity further

* Remove unused extra specificity

* Changing chrome version for local testing (draft)

* Added distance=2 specificity

* Rvert chromium version

* Increased specificity on distance

examples/amp-story/performance/splitcss.html

@@ -6,8 +6,8 @@
   <link rel="canonical" href="lcp.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <title>Boilerplate test</title>
-  <!-- <script async src="https://cdn.ampproject.org/v0.js"></script>
-  <script async custom-element="amp-story" src ="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script> -->
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <script async custom-element="amp-story" src ="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
   <!-- Fonts -->
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -72,6 +72,51 @@ <h1 class="hello-world">Story Prestyle + JS</h1>
           <p style="color: dimgray">This text is positioned with an aspect-ratio layer</p>
         </amp-story-grid-layer>
       </amp-story-page>
+
+      <amp-story-page id="second">
+        <amp-story-grid-layer template="fill">
+          <amp-img
+            id="img1"
+            width="400"
+            height="750"
+            src="https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?fit=crop&w=720&h=1280&q=30&fm=webp"
+            layout="fill">
+          </amp-img>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer template="vertical">
+          <h1 class="hello-world" style="color: white">This page should not be visible</h1>
+        </amp-story-grid-layer>
+      </amp-story-page>
+
+      <amp-story-page id="third">
+        <amp-story-grid-layer template="fill">
+          <amp-img
+            id="img1"
+            width="400"
+            height="750"
+            src="https://images.unsplash.com/photo-1634295912158-9c847b6b3a40?fit=crop&w=720&h=1280&q=30&fm=webp"
+            layout="fill">
+          </amp-img>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer template="vertical">
+          <h1 class="hello-world" style="color: white">This page should not be visible</h1>
+        </amp-story-grid-layer>
+      </amp-story-page>
+
+      <amp-story-page id="forth">
+        <amp-story-grid-layer template="fill">
+          <amp-img
+            id="img1"
+            width="400"
+            height="750"
+            src="https://images.unsplash.com/photo-1634154369165-cadcd9af7100?fit=crop&w=720&h=1280&q=30&fm=webp"
+            layout="fill">
+          </amp-img>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer template="vertical">
+          <h1 class="hello-world" style="color: white">This page should not be visible and should not load</h1>
+        </amp-story-grid-layer>
+      </amp-story-page>
     </amp-story>
   </body>
 </html>

extensions/amp-story/1.0/amp-story.css

@@ -17,6 +17,14 @@
   --story-page-vmax: max(var(--story-page-vw), var(--story-page-vh)) !important;
   font-size: calc(2.5 * var(--story-page-vh, 8px));
 }
+
+body {
+  animation:none !important;
+  -webkit-animation: none !important;
+  -moz-animation: none !important;
+  -ms-animation: none !important;
+}
+
 amp-story, amp-story-page, amp-story-cta-layer {
   contain: strict !important;
   overflow: hidden !important;
@@ -224,7 +232,7 @@ amp-story-page:not(:first-of-type):not([distance]):not([active]) {
   transform: translateY(1000vh) !important;
 }
 
-amp-story-page:not([active]) {
+amp-story-page[distance]:not([active]) {
   transform: translateY(1000vh) !important;
 }
 
@@ -233,14 +241,14 @@ amp-story-page:not([active]) {
  * update them in the ampdoc.css file.
  */
 amp-story-page[active],
-amp-story-page[distance="0"],
-amp-story-page[distance="1"] {
+amp-story-page[distance="0"][distance],
+amp-story-page[distance="1"][distance] {
   transform: translateY(0) !important;
 }
 
 amp-story.i-amphtml-experiment-story-load-inactive-outside-viewport:not([desktop])
   amp-story-page[distance="1"]:not(.i-amphtml-story-page-loaded):not(.i-amphtml-visited),
-amp-story-page[distance="2"] {
+amp-story-page[distance="2"][distance] {
   transform: translateY(100vh) !important;
 }
 
@@ -279,6 +287,13 @@ amp-story-grid-layer {
   pointer-events: none !important;
 }
 
+/* Make the story element fullpage. */
+:root:not(.i-amphtml-story-vertical) amp-story {
+  position: absolute !important;
+  top: 0;
+  left: 0;
+}
+
 amp-story-grid-layer[anchor*="left"] {
   margin-left: 0 !important;
 }