Animations: hardening to prevent animations on first page (#14404)

Author: swissspidy

includes/AMP/Story_Sanitizer.php

@@ -55,6 +55,7 @@ public function sanitize(): void {
 		$this->add_poster_images( $this->dom, $this->args['poster_images'] );
 		// This needs to be called before use_semantic_heading_tags() because it relies on the style attribute.
 		$this->deduplicate_inline_styles( $this->dom );
+		$this->disable_first_page_animations( $this->dom );
 		$this->add_video_cache( $this->dom, $this->args['video_cache'] );
 		$this->remove_blob_urls( $this->dom );
 		$this->sanitize_srcset( $this->dom );

includes/AMP/Traits/Sanitization_Utils.php

@@ -470,6 +470,39 @@ private function deduplicate_inline_styles( $document ): void {
 		}
 	}
 
+	/**
+	 * Adds CSS to reset animations for elements on the first page.
+	 *
+	 * Animations on the first page of a story are not allowed,
+	 * and removed at both the creation & serialization level (in the output package),
+	 * as well as the renderer (in AMP itself).
+	 *
+	 * This inline CSS adds another layer of defense, especially for older stories
+	 * that might still have some animation data on the first page.
+	 *
+	 * @since 1.43.0
+	 *
+	 * @param Document|AMP_Document $document Document instance.
+	 */
+	private function disable_first_page_animations( $document ): void {
+		$animated_elements = $document->xpath->query( './/div[ contains( @class, "animation-wrapper" ) ]' );
+
+		if ( ! $animated_elements || 0 === $animated_elements->length ) {
+			return;
+		}
+
+		$style_element = $document->createElement( 'style' );
+
+		if ( ! $style_element ) {
+			return;
+		}
+
+		$style_rule = $document->createTextNode( 'amp-story-page:first-of-type .animation-wrapper { --initial-opacity: 1; --initial-transform: none; }' );
+		$style_element->appendChild( $style_rule );
+
+		$document->head->appendChild( $style_element );
+	}
+
 	/**
 	 * Enables using video cache by adding the necessary attribute to `<amp-video>`
 	 *

packages/output/src/story.tsx

@@ -102,10 +102,10 @@ function OutputStory({
           poster-portrait-src={featuredMediaUrl}
           background-audio={backgroundAudio?.resource?.src ?? undefined}
         >
-          {pages.map((page) => (
+          {pages.map((page, index) => (
             <OutputPage
               key={page.id}
-              page={page}
+              page={index === 0 ? { ...page, animations: undefined } : page}
               defaultAutoAdvance={autoAdvance}
               defaultPageDuration={defaultPageDuration}
               flags={flags}

packages/output/src/utils/test/getStoryMarkup.ts

@@ -119,6 +119,54 @@ describe('getStoryMarkup', () => {
           } as TextElement,
         ],
       },
+      {
+        id: '2',
+        backgroundColor: { color: { r: 255, g: 255, b: 255 } },
+        animations: [
+          {
+            id: '1',
+            targets: ['2'],
+            type: AnimationType.Bounce,
+            duration: 1000,
+          },
+          { id: '2', targets: ['2'], type: AnimationType.Spin, duration: 1000 },
+        ],
+        elements: [
+          {
+            id: '2',
+            type: ElementType.Text,
+            x: 0,
+            y: 0,
+            width: 211,
+            height: 221,
+            rotationAngle: 1,
+            content: 'Hello World',
+            font: {
+              family: 'Roboto',
+              service: FontService.GoogleFonts,
+              fallbacks: ['Arial', 'sans-serif'],
+            },
+            color: {
+              color: {
+                r: 255,
+                g: 255,
+                b: 255,
+                a: 0.5,
+              },
+            },
+            padding: {
+              locked: false,
+              vertical: 0,
+              horizontal: 0,
+            },
+            marginOffset: 0,
+            fontSize: 10,
+            lineHeight: 1,
+            textAlign: 'center',
+            backgroundColor: { color: { r: 255, g: 255, b: 255 } },
+          } as TextElement,
+        ],
+      },
     ];
     const markup = getStoryMarkup(story, pages, metadata);
     expect(markup).toContain('Hello World');