diff --git a/bin/build-plugin-zip.sh b/bin/build-plugin-zip.sh
index 8f87aa70d2a..6703ef07da3 100755
--- a/bin/build-plugin-zip.sh
+++ b/bin/build-plugin-zip.sh
@@ -40,7 +40,7 @@ cd "$BUILD_DIR"
 
 # Run the build.
 status "Installing dependencies... 📦"
-composer install
+composer install -o
 PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true npm install
 
 status "Generating build... ⚙️"
diff --git a/composer.json b/composer.json
index a4cd8e02ad4..80792fd8b1c 100644
--- a/composer.json
+++ b/composer.json
@@ -44,5 +44,10 @@
         "PHP-CSS-Parser: Fix parsing CSS selectors which contain commas <https://github.com/sabberworm/PHP-CSS-Parser/pull/138>": "https://github.com/sabberworm/PHP-CSS-Parser/commit/fa139f65c5b098ae652c970b25e6eb03fc495eb4.diff"
       }
     }
+  },
+  "autoload": {
+    "psr-4": {
+      "Amp\\AmpWP\\": "src/"
+    }
   }
 }
diff --git a/contributing/engineering.md b/contributing/engineering.md
index bf5a478d818..55e4f5de576 100644
--- a/contributing/engineering.md
+++ b/contributing/engineering.md
@@ -308,7 +308,7 @@ This will create an `amp.zip` in the plugin directory which you can install. The
 1. Create changelog draft on [Wiki page](https://github.com/ampproject/amp-wp/wiki/Release-Changelog-Draft).
 1. Check out the branch intended for release (`develop` for major, `x.y` for minor) and pull latest commits.
 1. Bump plugin versions in `amp.php` (×2: the metadata block in the header and also the `AMP__VERSION` constant).
-1. Do `npm install && composer selfupdate && composer install`.
+1. Do `npm install && composer selfupdate && composer install -o`.
 1. Do `npm run build` and install the `amp.zip` onto a normal WordPress install running a stable release build; do smoke test to ensure it works.
 1. [Draft new release](https://github.com/ampproject/amp-wp/releases/new) on GitHub targeting the required branch (`develop` for major, `x.y` for minor).
     1. Use the new plugin version as the tag (e.g. `1.2-beta3` or `1.2.1-RC1`)
@@ -334,7 +334,7 @@ Contributors who want to make a new release, follow these steps:
 1. For major release, draft blog post about the new release.
 1. For minor releases, make sure all merged commits in `develop` have been also merged onto release branch.
 1. Check out the branch intended for release (`develop` for major, `x.y` for minor) and pull latest commits.
-1. Do `npm install && composer selfupdate && composer install`.
+1. Do `npm install && composer selfupdate && composer install -o`.
 1. Bump plugin versions in `amp.php` (×2: the metadata block in the header and also the `AMP__VERSION` constant). Verify via `npx grunt shell:verify_matching_versions`. Ensure patch version number is supplied for major releases, so `1.2-RC1` should bump to `1.2.0`.
 1. Do `npm run build` and install the `amp.zip` onto a normal WordPress install running a stable release build; do smoke test to ensure it works.
 1. Optionally do sanity check by comparing the `build` directory with the previously-deployed plugin on WordPress.org for example: `svn export https://plugins.svn.wordpress.org/amp/trunk /tmp/amp-trunk; diff /tmp/amp-trunk/ ./build/` (instead of straight `diff`, it's best to use a GUI like `idea diff`, `phpstorm diff`, or `opendiff`).
diff --git a/includes/embeds/class-amp-gallery-embed.php b/includes/embeds/class-amp-gallery-embed.php
index 86ae86909ef..5ef93120495 100644
--- a/includes/embeds/class-amp-gallery-embed.php
+++ b/includes/embeds/class-amp-gallery-embed.php
@@ -5,6 +5,9 @@
  * @package AMP
  */
 
+use Amp\AmpWP\Component\DOMElementList;
+use Amp\AmpWP\Component\Carousel;
+
 /**
  * Class AMP_Gallery_Embed_Handler
  *
@@ -129,25 +132,14 @@ public function shortcode( $attr ) {
 				'width'  => $width,
 				'height' => $height,
 				'alt'    => trim( wp_strip_all_tags( get_post_meta( $attachment_id, '_wp_attachment_image_alt', true ) ) ), // Logic from wp_get_attachment_image().
+				'id'     => $attachment_id,
 			];
 		}
 
 		$args = [
-			'images' => $urls,
+			'images'   => $urls,
+			'lightbox' => ! empty( $atts['lightbox'] ),
 		];
-		if ( ! empty( $atts['lightbox'] ) ) {
-			$args['lightbox'] = true;
-			$lightbox_tag     = AMP_HTML_Utils::build_tag(
-				'amp-image-lightbox',
-				[
-					'id'                           => AMP_Base_Sanitizer::AMP_IMAGE_LIGHTBOX_ID,
-					'layout'                       => 'nodisplay',
-					'data-close-button-aria-label' => __( 'Close', 'amp' ),
-				]
-			);
-			/* We need to add lightbox tag, too. @todo Could there be a better alternative for this? */
-			return $this->render( $args ) . $lightbox_tag;
-		}
 
 		return $this->render( $args );
 	}
@@ -211,6 +203,7 @@ public function maybe_override_gallery( $html, $attributes ) {
 	 * @return string Rendered.
 	 */
 	public function render( $args ) {
+		$dom                        = new DOMDocument();
 		$this->did_convert_elements = true;
 
 		$args = wp_parse_args(
@@ -224,11 +217,7 @@ public function render( $args ) {
 			return '';
 		}
 
-		$max_aspect_ratio = 0;
-		$carousel_width   = 0;
-		$carousel_height  = 0;
-
-		$images = [];
+		$images = new DOMElementList();
 		foreach ( $args['images'] as $props ) {
 			$image_atts = [
 				'src'    => $props['url'],
@@ -241,47 +230,38 @@ public function render( $args ) {
 				$image_atts['srcset'] = $props['srcset'];
 			}
 
-			$this_aspect_ratio = $props['width'] / $props['height'];
-			if ( $this_aspect_ratio > $max_aspect_ratio ) {
-				$max_aspect_ratio = $this_aspect_ratio;
-				$carousel_width   = $props['width'];
-				$carousel_height  = $props['height'];
-			}
-
 			if ( ! empty( $args['lightbox'] ) ) {
 				$image_atts['lightbox'] = '';
-				$image_atts['on']       = 'tap:' . AMP_Img_Sanitizer::AMP_IMAGE_LIGHTBOX_ID;
-				$image_atts['role']     = 'button';
-				$image_atts['tabindex'] = 0;
 			}
-			$image = AMP_HTML_Utils::build_tag(
+			$image = AMP_DOM_Utils::create_node(
+				$dom,
 				'amp-img',
 				$image_atts
 			);
 
 			if ( ! empty( $props['href'] ) ) {
-				$image = AMP_HTML_Utils::build_tag(
+				$previous_image = $image;
+				$image          = AMP_DOM_Utils::create_node(
+					$dom,
 					'a',
 					[
 						'href' => $props['href'],
-					],
-					$image
+					]
 				);
+				$image->appendChild( $previous_image );
 			}
 
-			$images[] = $image;
+			$caption = isset( $props['id'] ) ? wp_get_attachment_caption( $props['id'] ) : '';
+			$images  = $images->add( $image, $caption );
 		}
 
-		return AMP_HTML_Utils::build_tag(
-			'amp-carousel',
-			[
-				'width'  => $carousel_width,
-				'height' => $carousel_height,
-				'type'   => 'slides',
-				'layout' => 'responsive',
-			],
-			implode( PHP_EOL, $images )
-		);
+		$amp_carousel  = new Carousel( $dom, $images );
+		$carousel_node = $amp_carousel->get_dom_element();
+
+		// Prevent an error in get_content_from_dom_node() when it calls $node->parentNode->insertBefore().
+		$dom->appendChild( $carousel_node );
+
+		return AMP_DOM_Utils::get_content_from_dom_node( $dom, $carousel_node );
 	}
 
 	/**
diff --git a/includes/sanitizers/class-amp-gallery-block-sanitizer.php b/includes/sanitizers/class-amp-gallery-block-sanitizer.php
index 25779386fb6..8d08a986cc7 100644
--- a/includes/sanitizers/class-amp-gallery-block-sanitizer.php
+++ b/includes/sanitizers/class-amp-gallery-block-sanitizer.php
@@ -5,6 +5,9 @@
  * @package AMP
  */
 
+use Amp\AmpWP\Component\DOMElementList;
+use Amp\AmpWP\Component\Carousel;
+
 /**
  * Class AMP_Gallery_Block_Sanitizer
  *
@@ -12,24 +15,6 @@
  */
 class AMP_Gallery_Block_Sanitizer extends AMP_Base_Sanitizer {
 
-	/**
-	 * Value used for width of amp-carousel.
-	 *
-	 * @since 1.0
-	 *
-	 * @const int
-	 */
-	const FALLBACK_WIDTH = 600;
-
-	/**
-	 * Value used for height of amp-carousel.
-	 *
-	 * @since 1.0
-	 *
-	 * @const int
-	 */
-	const FALLBACK_HEIGHT = 480;
-
 	/**
 	 * Tag.
 	 *
@@ -93,12 +78,6 @@ public function sanitize() {
 		}
 
 		foreach ( $nodes as $node ) {
-			/**
-			 * Element
-			 *
-			 * @var DOMElement $node
-			 */
-
 			// In WordPress 5.3, the Gallery block's <ul> is wrapped in a <figure class="wp-block-gallery">, so look for that node also.
 			$gallery_node = isset( $node->parentNode ) && AMP_DOM_Utils::has_class( $node->parentNode, self::$class ) ? $node->parentNode : $node;
 			$attributes   = AMP_DOM_Utils::get_node_attributes_as_assoc_array( $gallery_node );
@@ -128,128 +107,33 @@ public function sanitize() {
 				continue;
 			}
 
-			$images = [];
+			$images = new DOMElementList();
 
 			// If it's not AMP lightbox, look for links first.
 			if ( ! $is_amp_lightbox ) {
 				foreach ( $node->getElementsByTagName( 'a' ) as $element ) {
-					$images[] = $element;
+					$images = $images->add( $element, $this->possibly_get_caption_text( $element ) );
 				}
 			}
 
 			// If not linking to anything then look for <amp-img>.
-			if ( empty( $images ) ) {
+			if ( 0 === count( $images ) ) {
 				foreach ( $node->getElementsByTagName( 'amp-img' ) as $element ) {
-					$images[] = $element;
+					$images = $images->add( $element, $this->possibly_get_caption_text( $element ) );
 				}
 			}
 
 			// Skip if no images found.
-			if ( empty( $images ) ) {
+			if ( 0 === count( $images ) ) {
 				continue;
 			}
 
-			list( $width, $height ) = $this->get_carousel_dimensions( $node );
-
-			$amp_carousel = AMP_DOM_Utils::create_node(
-				$this->dom,
-				'amp-carousel',
-				[
-					'width'  => $width,
-					'height' => $height,
-					'type'   => 'slides',
-					'layout' => 'responsive',
-				]
-			);
-
-			foreach ( $images as $image ) {
-				$slide = AMP_DOM_Utils::create_node(
-					$this->dom,
-					'div',
-					[ 'class' => 'slide' ]
-				);
-
-				// Ensure the image fills the entire <amp-carousel>, so the possible caption looks right.
-				if ( 'amp-img' === $image->tagName ) {
-					$image->setAttribute( 'layout', 'fill' );
-					$image->setAttribute( 'object-fit', 'cover' );
-				} elseif ( isset( $image->firstChild->tagName ) && 'amp-img' === $image->firstChild->tagName ) {
-					// If the <amp-img> is wrapped in an <a>.
-					$image->firstChild->setAttribute( 'layout', 'fill' );
-					$image->firstChild->setAttribute( 'object-fit', 'cover' );
-				}
-
-				$possible_caption_text = $this->possibly_get_caption_text( $image );
-				$slide->appendChild( $image );
-
-				// Wrap the caption in a <div> and <span>, and append it to the slide.
-				if ( $possible_caption_text ) {
-					$caption_wrapper = AMP_DOM_Utils::create_node(
-						$this->dom,
-						'div',
-						[ 'class' => 'amp-wp-gallery-caption' ]
-					);
-					$caption_span    = AMP_DOM_Utils::create_node( $this->dom, 'span', [] );
-					$text_node       = $this->dom->createTextNode( $possible_caption_text );
-
-					$caption_span->appendChild( $text_node );
-					$caption_wrapper->appendChild( $caption_span );
-					$slide->appendChild( $caption_wrapper );
-				}
-
-				$amp_carousel->appendChild( $slide );
-			}
-
-			$gallery_node->parentNode->replaceChild( $amp_carousel, $gallery_node );
+			$amp_carousel = new Carousel( $this->dom, $images );
+			$gallery_node->parentNode->replaceChild( $amp_carousel->get_dom_element(), $gallery_node );
 		}
 		$this->did_convert_elements = true;
 	}
 
-	/**
-	 * Get carousel height by containing images.
-	 *
-	 * @param DOMElement $element The UL element.
-	 * @return array {
-	 *     Dimensions.
-	 *
-	 *     @type int $width  Width.
-	 *     @type int $height Height.
-	 * }
-	 */
-	protected function get_carousel_dimensions( $element ) {
-		/**
-		 * Elements.
-		 *
-		 * @var DOMElement $image
-		 */
-		$images     = $element->getElementsByTagName( 'amp-img' );
-		$num_images = $images->length;
-
-		$max_aspect_ratio = 0;
-		$carousel_width   = 0;
-		$carousel_height  = 0;
-
-		if ( 0 === $num_images ) {
-			return [ self::FALLBACK_WIDTH, self::FALLBACK_HEIGHT ];
-		}
-		foreach ( $images as $image ) {
-			if ( ! is_numeric( $image->getAttribute( 'width' ) ) || ! is_numeric( $image->getAttribute( 'height' ) ) ) {
-				continue;
-			}
-			$width  = (float) $image->getAttribute( 'width' );
-			$height = (float) $image->getAttribute( 'height' );
-
-			$this_aspect_ratio = $width / $height;
-			if ( $this_aspect_ratio > $max_aspect_ratio ) {
-				$max_aspect_ratio = $this_aspect_ratio;
-				$carousel_width   = $width;
-				$carousel_height  = $height;
-			}
-		}
-
-		return [ $carousel_width, $carousel_height ];
-	}
-
 	/**
 	 * Set lightbox related attributes to <amp-img> within gallery.
 	 *
@@ -280,7 +164,7 @@ protected function add_lightbox_attributes_to_image_nodes( $element ) {
 	 * Gets the caption of an image, if it exists.
 	 *
 	 * @param DOMElement $element The element for which to search for a caption.
-	 * @return string|null The caption for the image, or null.
+	 * @return string The caption for the image, or ''.
 	 */
 	public function possibly_get_caption_text( $element ) {
 		$caption_tag = 'figcaption';
@@ -293,6 +177,6 @@ public function possibly_get_caption_text( $element ) {
 			return $element->parentNode->nextSibling->textContent;
 		}
 
-		return null;
+		return '';
 	}
 }
diff --git a/phpcs.xml b/phpcs.xml
index f9275a3c446..66dcd57d70c 100644
--- a/phpcs.xml
+++ b/phpcs.xml
@@ -22,6 +22,7 @@
 
 	<rule ref="WordPress.Files.FileName.InvalidClassFileName">
 		<exclude-pattern>tests/*</exclude-pattern>
+		<exclude-pattern>src/*</exclude-pattern>
 		<exclude-pattern>includes/admin/class-amp-customizer.php</exclude-pattern>
 		<exclude-pattern>includes/embeds/class-amp-dailymotion-embed.php</exclude-pattern>
 		<exclude-pattern>includes/embeds/class-amp-facebook-embed.php</exclude-pattern>
@@ -46,6 +47,7 @@
 		<exclude-pattern>includes/actions/class-amp-paired-post-actions.php</exclude-pattern>
 	</rule>
 	<rule ref="WordPress.Files.FileName.NotHyphenatedLowercase">
+		<exclude-pattern>src/*</exclude-pattern>
 		<exclude-pattern>includes/templates/single-amp_story.php</exclude-pattern>
 	</rule>
 	<rule ref="WordPress.NamingConventions.ValidVariableName">
@@ -79,6 +81,11 @@
 		</properties>
 	</rule>
 
+	<!-- Enforce PascalCase file names in src/ only. -->
+	<rule ref="Squiz.Classes.ClassFileName">
+		<include-pattern>src/*</include-pattern>
+	</rule>
+
 	<!-- Include sniffs for PHP cross-version compatibility. -->
 	<config name="testVersion" value="5.4-"/>
 	<rule ref="PHPCompatibilityWP">
diff --git a/src/Component/CaptionedSlide.php b/src/Component/CaptionedSlide.php
new file mode 100644
index 00000000000..a31de727100
--- /dev/null
+++ b/src/Component/CaptionedSlide.php
@@ -0,0 +1,62 @@
+<?php
+/**
+ * Class CaptionedSlide
+ *
+ * @package Amp\AmpWP
+ */
+
+namespace Amp\AmpWP\Component;
+
+use DOMNode;
+
+/**
+ * Class CaptionedSlide
+ *
+ * @internal
+ * @since 1.5.0
+ */
+final class CaptionedSlide implements HasCaption {
+
+	/**
+	 * The slide node, possibly an image.
+	 *
+	 * @var DOMNode
+	 */
+	private $slide_node;
+
+	/**
+	 * The caption text.
+	 *
+	 * @var string
+	 */
+	private $caption;
+
+	/**
+	 * Constructs the class.
+	 *
+	 * @param DOMNode $slide_node The slide node, possibly an image.
+	 * @param string  $caption    The caption text.
+	 */
+	public function __construct( DOMNode $slide_node, $caption ) {
+		$this->slide_node = $slide_node;
+		$this->caption    = $caption;
+	}
+
+	/**
+	 * Gets the caption text.
+	 *
+	 * @return string The caption text.
+	 */
+	public function get_caption() {
+		return $this->caption;
+	}
+
+	/**
+	 * Gets the slide node.
+	 *
+	 * @return DOMNode
+	 */
+	public function get_slide_node() {
+		return $this->slide_node;
+	}
+}
diff --git a/src/Component/Carousel.php b/src/Component/Carousel.php
new file mode 100644
index 00000000000..ce6b2184647
--- /dev/null
+++ b/src/Component/Carousel.php
@@ -0,0 +1,177 @@
+<?php
+/**
+ * Class Carousel.
+ *
+ * @package Amp\AmpWP
+ */
+
+namespace Amp\AmpWP\Component;
+
+use DOMDocument;
+use DOMElement;
+use AMP_DOM_Utils;
+
+/**
+ * Class Carousel
+ *
+ * Gets the markup for an <amp-carousel>.
+ *
+ * @internal
+ * @since 1.5.0
+ */
+final class Carousel {
+
+	/**
+	 * Value used for width of amp-carousel.
+	 *
+	 * @var int
+	 */
+	const FALLBACK_WIDTH = 600;
+
+	/**
+	 * Value used for height of amp-carousel.
+	 *
+	 * @var int
+	 */
+	const FALLBACK_HEIGHT = 480;
+
+	/**
+	 * An object representation of the DOM.
+	 *
+	 * @var DOMDocument
+	 */
+	private $dom;
+
+	/**
+	 * The slides to add to the carousel, possibly images.
+	 *
+	 * @var DOMElementList
+	 */
+	private $slides;
+
+	/**
+	 * Instantiates the class.
+	 *
+	 * @param DOMDocument    $dom    The dom to use to create a carousel.
+	 * @param DOMElementList $slides The slides from which to create a carousel.
+	 */
+	public function __construct( $dom, DOMElementList $slides ) {
+		$this->dom    = $dom;
+		$this->slides = $slides;
+	}
+
+	/**
+	 * Gets the carousel element.
+	 *
+	 * @return DOMElement An <amp-carousel> with the slides.
+	 */
+	public function get_dom_element() {
+		list( $width, $height ) = $this->get_dimensions();
+		$amp_carousel           = AMP_DOM_Utils::create_node(
+			$this->dom,
+			'amp-carousel',
+			[
+				'width'  => $width,
+				'height' => $height,
+				'type'   => 'slides',
+				'layout' => 'responsive',
+			]
+		);
+
+		foreach ( $this->slides as $slide ) {
+			$slide_node      = $slide instanceof HasCaption ? $slide->get_slide_node() : $slide;
+			$caption         = $slide instanceof HasCaption ? $slide->get_caption() : null;
+			$slide_container = AMP_DOM_Utils::create_node(
+				$this->dom,
+				'div',
+				[ 'class' => 'slide' ]
+			);
+
+			// Ensure an image fills the entire <amp-carousel>, so the possible caption looks right.
+			if ( 'amp-img' === $slide_node->tagName ) {
+				$slide_node->setAttribute( 'layout', 'fill' );
+				$slide_node->setAttribute( 'object-fit', 'cover' );
+			} elseif ( isset( $slide_node->firstChild->tagName ) && 'amp-img' === $slide_node->firstChild->tagName ) {
+				// If the <amp-img> is wrapped in an <a>.
+				$slide_node->firstChild->setAttribute( 'layout', 'fill' );
+				$slide_node->firstChild->setAttribute( 'object-fit', 'cover' );
+			}
+
+			$slide_container->appendChild( $slide_node );
+
+			// If there's a caption, wrap it in a <div> and <span>, and append it to the slide.
+			if ( $caption ) {
+				$caption_wrapper = AMP_DOM_Utils::create_node(
+					$this->dom,
+					'div',
+					[ 'class' => 'amp-wp-gallery-caption' ]
+				);
+				$caption_span    = AMP_DOM_Utils::create_node( $this->dom, 'span', [] );
+				$text_node       = $this->dom->createTextNode( $caption );
+
+				$caption_span->appendChild( $text_node );
+				$caption_wrapper->appendChild( $caption_span );
+				$slide_container->appendChild( $caption_wrapper );
+			}
+
+			$amp_carousel->appendChild( $slide_container );
+		}
+
+		return $amp_carousel;
+	}
+
+	/**
+	 * Gets the carousel's width and height, based on its elements.
+	 *
+	 * This will return the width and height of the slide (possibly image) with the widest aspect ratio,
+	 * not necessarily that with the biggest absolute width.
+	 *
+	 * @return array {
+	 *     The carousel dimensions.
+	 *
+	 *     @type int $width  The width of the carousel, at index 0.
+	 *     @type int $height The height of the carousel, at index 1.
+	 * }
+	 */
+	private function get_dimensions() {
+		if ( 0 === count( $this->slides ) ) {
+			return [ self::FALLBACK_WIDTH, self::FALLBACK_HEIGHT ];
+		}
+
+		$max_aspect_ratio = 0;
+		$carousel_width   = 0;
+		$carousel_height  = 0;
+
+		foreach ( $this->slides as $slide ) {
+			$slide_node = $slide instanceof HasCaption ? $slide->get_slide_node() : $slide;
+			// Account for an <amp-img> that's wrapped in an <a>.
+			if ( 'amp-img' !== $slide_node->tagName && isset( $slide_node->firstChild->tagName ) && 'amp-img' === $slide_node->firstChild->tagName ) {
+				$slide_node = $slide_node->firstChild;
+			}
+
+			if ( ! is_numeric( $slide_node->getAttribute( 'width' ) ) || ! is_numeric( $slide_node->getAttribute( 'height' ) ) ) {
+				continue;
+			}
+
+			$width  = (float) $slide_node->getAttribute( 'width' );
+			$height = (float) $slide_node->getAttribute( 'height' );
+
+			if ( empty( $width ) || empty( $height ) ) {
+				continue;
+			}
+
+			$this_aspect_ratio = $width / $height;
+			if ( $this_aspect_ratio > $max_aspect_ratio ) {
+				$max_aspect_ratio = $this_aspect_ratio;
+				$carousel_width   = $width;
+				$carousel_height  = $height;
+			}
+		}
+
+		if ( empty( $carousel_width ) && empty( $carousel_height ) ) {
+			return [ self::FALLBACK_WIDTH, self::FALLBACK_HEIGHT ];
+		}
+
+		return [ $carousel_width, $carousel_height ];
+	}
+}
diff --git a/src/Component/DOMElementList.php b/src/Component/DOMElementList.php
new file mode 100644
index 00000000000..0694a6ee237
--- /dev/null
+++ b/src/Component/DOMElementList.php
@@ -0,0 +1,63 @@
+<?php
+/**
+ * Class DOMElementList
+ *
+ * @package Amp\AmpWP
+ */
+
+namespace Amp\AmpWP\Component;
+
+use IteratorAggregate;
+use Countable;
+use DOMElement;
+use ArrayIterator;
+
+/**
+ * Class DOMElementList
+ *
+ * @internal
+ * @since 1.5.0
+ */
+final class DOMElementList implements IteratorAggregate, Countable {
+
+	/**
+	 * The elements, possibly with captions.
+	 *
+	 * @var array
+	 */
+	private $elements = [];
+
+	/**
+	 * Adds an element to the list, possibly with a caption.
+	 *
+	 * @param DOMElement $element The element to add, possibly an image.
+	 * @param string     $caption The caption to add, if any.
+	 * @return DOMElementList A clone of this list, with the new element added.
+	 */
+	public function add( DOMElement $element, $caption = '' ) {
+		$cloned_list             = clone $this;
+		$cloned_list->elements[] = empty( $caption ) ? $element : new CaptionedSlide( $element, $caption );
+		return $cloned_list;
+	}
+
+	/**
+	 * Gets an iterator with the elements.
+	 *
+	 * This together with the IteratorAggregate turns the object into a "Traversable",
+	 * so you can just foreach over it and receive its elements in the correct type.
+	 *
+	 * @return ArrayIterator An iterator with the elements.
+	 */
+	public function getIterator() {
+		return new ArrayIterator( $this->elements );
+	}
+
+	/**
+	 * Gets the count of the elements.
+	 *
+	 * @return int The number of elements.
+	 */
+	public function count() {
+		return count( $this->elements );
+	}
+}
diff --git a/src/Component/HasCaption.php b/src/Component/HasCaption.php
new file mode 100644
index 00000000000..6f22ffde47d
--- /dev/null
+++ b/src/Component/HasCaption.php
@@ -0,0 +1,23 @@
+<?php
+/**
+ * Interface HasCaption
+ *
+ * @package Amp\AmpWP
+ */
+
+namespace Amp\AmpWP\Component;
+
+/**
+ * Interface HasCaption
+ *
+ * @internal
+ * @since 1.5.0
+ */
+interface HasCaption {
+	/**
+	 * Gets the caption.
+	 *
+	 * @return string The caption text.
+	 */
+	public function get_caption();
+}
diff --git a/tests/php/test-amp-carousel.php b/tests/php/test-amp-carousel.php
new file mode 100644
index 00000000000..1aa0c7474d9
--- /dev/null
+++ b/tests/php/test-amp-carousel.php
@@ -0,0 +1,162 @@
+<?php
+/**
+ * Tests for Carousel class.
+ *
+ * @package AMP
+ */
+
+use Amp\AmpWP\Component\Carousel;
+use Amp\AmpWP\Component\DOMElementList;
+
+/**
+ * Tests for Carousel class.
+ *
+ * @covers \Amp\AmpWP\Component\Carousel
+ */
+class Test_Carousel extends \WP_UnitTestCase {
+
+	/**
+	 * Gets the data to test the carousel.
+	 *
+	 * @return array[] An associative array, including the slides and captions, the DOM, and the expected markup.
+	 */
+	public function get_carousel_data() {
+		$dom     = new DOMDocument();
+		$src     = 'https://example.com/img.png';
+		$width   = '1200';
+		$height  = '800';
+		$image   = AMP_DOM_Utils::create_node(
+			$dom,
+			'amp-img',
+			compact( 'src', 'width', 'height' )
+		);
+		$caption = 'Example caption';
+
+		return [
+			'image_without_caption' => [
+				( new DOMElementList() )->add( $image, '' ),
+				$dom,
+				'<amp-carousel width="' . $width . '" height="' . $height . '" type="slides" layout="responsive"><div class="slide"><amp-img src="' . $src . '" width="' . $width . '" height="' . $height . '" layout="fill" object-fit="cover"></amp-img></div></amp-carousel>',
+			],
+			'image_with_caption'    => [
+				( new DOMElementList() )->add( $image, $caption ),
+				$dom,
+				'<amp-carousel width="' . $width . '" height="' . $height . '" type="slides" layout="responsive"><div class="slide"><amp-img src="' . $src . '" width="' . $width . '" height="' . $height . '" layout="fill" object-fit="cover"></amp-img><div class="amp-wp-gallery-caption"><span>' . $caption . '</span></div></div></amp-carousel>',
+			],
+		];
+	}
+
+	/**
+	 * Test getting the amp-carousel.
+	 *
+	 * @dataProvider get_carousel_data
+	 * @covers \Amp\AmpWP\Component\Carousel::get_dom_element()
+	 *
+	 * @param DOMElementList $slides   An array of arrays, with images and their captions (if any).
+	 * @param DOMDocument    $dom      The representation of the DOM.
+	 * @param string         $expected The expected return value of the tested function.
+	 */
+	public function test_get_dom_element( $slides, $dom, $expected ) {
+		$amp_carousel        = new Carousel( $dom, $slides );
+		$actual_amp_carousel = $amp_carousel->get_dom_element();
+
+		// Prevent an error in get_content_from_dom_node().
+		$dom->appendChild( $actual_amp_carousel );
+
+		$this->assertEquals(
+			$expected,
+			AMP_DOM_Utils::get_content_from_dom_node( $dom, $actual_amp_carousel )
+		);
+	}
+
+	/**
+	 * Gets the testing data for test_get_dimensions.
+	 *
+	 * @return array[] An associative array, including the DOMElementList and the expected return value.
+	 */
+	public function get_data_carousel_dimensions() {
+		$dom                 = new DOMDocument();
+		$narrow_image_width  = '300';
+		$narrow_image_height = '600';
+		$narrow_image        = AMP_DOM_Utils::create_node(
+			$dom,
+			'amp-img',
+			[
+				'width'  => $narrow_image_width,
+				'height' => $narrow_image_height,
+			]
+		);
+
+		$wide_image_width  = 1400;
+		$wide_image_height = 1000;
+		$wide_image        = AMP_DOM_Utils::create_node(
+			$dom,
+			'amp-img',
+			[
+				'width'  => $wide_image_width,
+				'height' => $wide_image_height,
+			]
+		);
+
+		$image_with_0_height = AMP_DOM_Utils::create_node(
+			$dom,
+			'amp-img',
+			[
+				'width'  => 1000,
+				'height' => 0,
+			]
+		);
+
+		return [
+			'empty_dom_element_list_as_argument'          => [
+				( new DOMElementList() ),
+				[ Carousel::FALLBACK_WIDTH, Carousel::FALLBACK_HEIGHT ],
+			],
+			'element_no_width_or_height'                  => [
+				( new DOMElementList() )->add( AMP_DOM_Utils::create_node( $dom, 'div', [] ) ),
+				[ Carousel::FALLBACK_WIDTH, Carousel::FALLBACK_HEIGHT ],
+			],
+			'single_small_image_passed_as_argument'       => [
+				( new DOMElementList() )->add( $narrow_image ),
+				[ $narrow_image_width, $narrow_image_height ],
+			],
+			'single_large_image_passed_as_argument'       => [
+				( new DOMElementList() )->add( $wide_image ),
+				[ $wide_image_width, $wide_image_height ],
+			],
+			'image_with_0_height_should_not_affect_ratio' => [
+				( new DOMElementList() )->add( $image_with_0_height )->add( $wide_image, '' ),
+				[ $wide_image_width, $wide_image_height ],
+			],
+			'two_images'                                  => [
+				( new DOMElementList() )->add( $narrow_image )->add( $wide_image, '' ),
+				[ $wide_image_width, $wide_image_height ],
+			],
+			'two_images_order_changed'                    => [
+				( new DOMElementList() )->add( $wide_image )->add( $narrow_image, '' ),
+				[ $wide_image_width, $wide_image_height ],
+			],
+		];
+	}
+
+	/**
+	 * Test get_dimensions.
+	 *
+	 * @dataProvider get_data_carousel_dimensions
+	 * @covers \Amp\AmpWP\Component\Carousel::get_dimensions()
+	 *
+	 * @param DOMElementList $slides   The slides to get the dimensions from.
+	 * @param array          $expected The expected return value of the tested function.
+	 * @throws ReflectionException If invoking the method reflection fails.
+	 */
+	public function test_get_dimensions( $slides, $expected ) {
+		$carousel       = new Carousel( new DOMDocument(), $slides );
+		$get_dimensions = new ReflectionMethod( $carousel, 'get_dimensions' );
+		$get_dimensions->setAccessible( true );
+
+		$this->assertEquals(
+			$expected,
+			$get_dimensions->invoke( $carousel )
+		);
+	}
+}
diff --git a/tests/php/test-amp-gallery-embed.php b/tests/php/test-amp-gallery-embed.php
index 23afa991b29..785fd6bf3c5 100644
--- a/tests/php/test-amp-gallery-embed.php
+++ b/tests/php/test-amp-gallery-embed.php
@@ -10,6 +10,13 @@
  */
 class AMP_Gallery_Embed_Test extends WP_UnitTestCase {
 
+	/**
+	 * Mock caption text.
+	 *
+	 * @var string
+	 */
+	const CAPTION_TEXT = 'Example caption';
+
 	/**
 	 * Replacements.
 	 *
@@ -23,6 +30,8 @@ class AMP_Gallery_Embed_Test extends WP_UnitTestCase {
 	 * @return array[]
 	 */
 	public function get_conversion_data() {
+		$amp_carousel_caption = '<div class="amp-wp-gallery-caption"><span>' . self::CAPTION_TEXT . '</span></div>';
+
 		return [
 			'shortcode_with_invalid_id'               => [
 				'[gallery ids=1]',
@@ -30,38 +39,38 @@ public function get_conversion_data() {
 			],
 			'shortcode_with_valid_id'                 => [
 				'[gallery ids={{id1}}]',
-				'<amp-carousel width="50" height="50" type="slides" layout="responsive"><amp-img src="{{file1}}.jpg" width="50" height="50" layout="responsive" alt="Alt text"></amp-img></amp-carousel>',
+				'<amp-carousel width="50" height="50" type="slides" layout="responsive"><div class="slide"><amp-img src="{{file1}}.jpg" width="50" height="50" layout="fill" alt="Alt text" object-fit="cover"></amp-img>' . $amp_carousel_caption . '</div></amp-carousel>',
 			],
 			'shortcode_with_multiple_ids'             => [
 				'[gallery ids={{id1}},{{id2}},{{id3}}]',
 				'<amp-carousel width="600" height="450" type="slides" layout="responsive">' .
-					'<amp-img src="{{file1}}.jpg" width="50" height="50" layout="responsive" alt="Alt text"></amp-img>' .
-					'<amp-img src="{{file2}}.jpg" width="600" height="450" layout="responsive" alt="Alt text" srcset="{{file2}}.jpg 640w, {{file2}}-300x225.jpg 300w"></amp-img>' .
-					'<amp-img src="{{file3}}.jpg" width="100" height="100" layout="responsive" alt="Alt text"></amp-img>' .
+					'<div class="slide"><amp-img src="{{file1}}.jpg" width="50" height="50" layout="fill" alt="Alt text" object-fit="cover"></amp-img>' . $amp_carousel_caption . '</div>' .
+					'<div class="slide"><amp-img src="{{file2}}.jpg" width="600" height="450" layout="fill" alt="Alt text" srcset="{{file2}}.jpg 640w, {{file2}}-300x225.jpg 300w" object-fit="cover"></amp-img></div>' .
+					'<div class="slide"><amp-img src="{{file3}}.jpg" width="100" height="100" layout="fill" alt="Alt text" object-fit="cover"></amp-img></div>' .
 				'</amp-carousel>',
 			],
 			'shortcode_linking_to_file'               => [
 				'[gallery link="file" ids={{id1}},{{id2}},{{id3}}]',
 				'<amp-carousel width="600" height="450" type="slides" layout="responsive">' .
-					'<a href="{{file1}}.jpg"><amp-img src="{{file1}}.jpg" width="50" height="50" layout="responsive" alt="Alt text"></amp-img></a>' .
-					'<a href="{{file2}}.jpg"><amp-img src="{{file2}}.jpg" width="600" height="450" layout="responsive" alt="Alt text" srcset="{{file2}}.jpg 640w, {{file2}}-300x225.jpg 300w"></amp-img></a>' .
-					'<a href="{{file3}}.jpg"><amp-img src="{{file3}}.jpg" width="100" height="100" layout="responsive" alt="Alt text"></amp-img></a>' .
+					'<div class="slide"><a href="{{file1}}.jpg"><amp-img src="{{file1}}.jpg" width="50" height="50" layout="fill" alt="Alt text" object-fit="cover"></amp-img></a>' . $amp_carousel_caption . '</div>' .
+					'<div class="slide"><a href="{{file2}}.jpg"><amp-img src="{{file2}}.jpg" width="600" height="450" layout="fill" alt="Alt text" srcset="{{file2}}.jpg 640w, {{file2}}-300x225.jpg 300w" object-fit="cover"></amp-img></a></div>' .
+					'<div class="slide"><a href="{{file3}}.jpg"><amp-img src="{{file3}}.jpg" width="100" height="100" layout="fill" alt="Alt text" object-fit="cover"></amp-img></a></div>' .
 				'</amp-carousel>',
 			],
 			'shortcode_with_carousel'                 => [
 				'[gallery amp-lightbox=false amp-carousel=true ids={{id1}},{{id2}},{{id3}}]',
 				'<amp-carousel width="600" height="450" type="slides" layout="responsive">' .
-					'<amp-img src="{{file1}}.jpg" width="50" height="50" layout="responsive" alt="Alt text"></amp-img>' .
-					'<amp-img src="{{file2}}.jpg" width="600" height="450" layout="responsive" alt="Alt text" srcset="{{file2}}.jpg 640w, {{file2}}-300x225.jpg 300w"></amp-img>' .
-					'<amp-img src="{{file3}}.jpg" width="100" height="100" layout="responsive" alt="Alt text"></amp-img>' .
+					'<div class="slide"><amp-img src="{{file1}}.jpg" width="50" height="50" layout="fill" alt="Alt text" object-fit="cover"></amp-img>' . $amp_carousel_caption . '</div>' .
+					'<div class="slide"><amp-img src="{{file2}}.jpg" width="600" height="450" layout="fill" alt="Alt text" srcset="{{file2}}.jpg 640w, {{file2}}-300x225.jpg 300w" object-fit="cover"></amp-img></div>' .
+					'<div class="slide"><amp-img src="{{file3}}.jpg" width="100" height="100" layout="fill" alt="Alt text" object-fit="cover"></amp-img></div>' .
 				'</amp-carousel>',
 			],
 			'shortcode_with_carousel_linking_to_file' => [
 				'[gallery amp-lightbox=false amp-carousel=true link="file" ids={{id1}},{{id2}},{{id3}}]',
 				'<amp-carousel width="600" height="450" type="slides" layout="responsive">' .
-					'<a href="{{file1}}.jpg"><amp-img src="{{file1}}.jpg" width="50" height="50" layout="responsive" alt="Alt text"></amp-img></a>' .
-					'<a href="{{file2}}.jpg"><amp-img src="{{file2}}.jpg" width="600" height="450" layout="responsive" alt="Alt text" srcset="{{file2}}.jpg 640w, {{file2}}-300x225.jpg 300w"></amp-img></a>' .
-					'<a href="{{file3}}.jpg"><amp-img src="{{file3}}.jpg" width="100" height="100" layout="responsive" alt="Alt text"></amp-img></a>' .
+					'<div class="slide"><a href="{{file1}}.jpg"><amp-img src="{{file1}}.jpg" width="50" height="50" layout="fill" alt="Alt text" object-fit="cover"></amp-img></a>' . $amp_carousel_caption . '</div>' .
+					'<div class="slide"><a href="{{file2}}.jpg"><amp-img src="{{file2}}.jpg" width="600" height="450" layout="fill" alt="Alt text" srcset="{{file2}}.jpg 640w, {{file2}}-300x225.jpg 300w" object-fit="cover"></amp-img></a></div>' .
+					'<div class="slide"><a href="{{file3}}.jpg"><amp-img src="{{file3}}.jpg" width="100" height="100" layout="fill" alt="Alt text" object-fit="cover"></amp-img></a></div>' .
 				'</amp-carousel>',
 			],
 			'shortcode_with_lightbox'                 => [
@@ -69,8 +78,8 @@ public function get_conversion_data() {
 				'<style type=\'text/css\'> #gallery-8 { margin: auto; } #gallery-8 .gallery-item { float: left; margin-top: 10px; text-align: center; width: 33%; } #gallery-8 img { border: 2px solid #cfcfcf; } #gallery-8 .gallery-caption { margin-left: 0; } /* see gallery_shortcode() in wp-includes/media.php */ </style>
 				<div id=\'gallery-8\' class=\'gallery galleryid-0 gallery-columns-3 gallery-size-thumbnail\'>
 					<dl class=\'gallery-item\'><dt class=\'gallery-icon landscape\'>
-						<img width="50" height="50" src="{{file1}}.jpg" class="attachment-thumbnail size-thumbnail" alt="Alt text" lightbox="" />
-					</dt></dl>
+						<img width="50" height="50" src="{{file1}}.jpg" class="attachment-thumbnail size-thumbnail" alt="Alt text" aria-describedby="gallery-8-{{id1}}" lightbox="" />
+					</dt><dd class=\'wp-caption-text gallery-caption\' id=\'gallery-8-{{id1}}\'> ' . self::CAPTION_TEXT . ' </dd></dl>
 					<dl class=\'gallery-item\'><dt class=\'gallery-icon landscape\'>
 						<img width="150" height="150" src="{{file2}}-150x150.jpg" class="attachment-thumbnail size-thumbnail" alt="Alt text" lightbox="" />
 					</dt></dl>
@@ -85,8 +94,8 @@ public function get_conversion_data() {
 				'<style type=\'text/css\'> #gallery-10 { margin: auto; } #gallery-10 .gallery-item { float: left; margin-top: 10px; text-align: center; width: 33%; } #gallery-10 img { border: 2px solid #cfcfcf; } #gallery-10 .gallery-caption { margin-left: 0; } /* see gallery_shortcode() in wp-includes/media.php */ </style>
 				<div id=\'gallery-10\' class=\'gallery galleryid-0 gallery-columns-3 gallery-size-thumbnail\'>
 					<dl class=\'gallery-item\'><dt class=\'gallery-icon landscape\'>
-						<img width="50" height="50" src="{{file1}}.jpg" class="attachment-thumbnail size-thumbnail" alt="Alt text" lightbox="" />
-					</dt></dl>
+						<img width="50" height="50" src="{{file1}}.jpg" class="attachment-thumbnail size-thumbnail" alt="Alt text" aria-describedby="gallery-10-{{id1}}" lightbox="" />
+					</dt><dd class=\'wp-caption-text gallery-caption\' id=\'gallery-10-{{id1}}\'> ' . self::CAPTION_TEXT . ' </dd></dl>
 					<dl class=\'gallery-item\'><dt class=\'gallery-icon landscape\'>
 						<img width="150" height="150" src="{{file2}}-150x150.jpg" class="attachment-thumbnail size-thumbnail" alt="Alt text" lightbox="" />
 					</dt></dl>
@@ -99,18 +108,18 @@ public function get_conversion_data() {
 			'shortcode_with_lightbox_and_carousel'    => [
 				'[gallery amp-lightbox=true amp-carousel=true ids={{id1}},{{id2}},{{id3}}]',
 				'<amp-carousel width="600" height="450" type="slides" layout="responsive">' .
-					'<amp-img src="{{file1}}.jpg" width="50" height="50" layout="responsive" alt="Alt text" lightbox on="tap:amp-image-lightbox" role="button" tabindex="0"></amp-img>' .
-					'<amp-img src="{{file2}}.jpg" width="600" height="450" layout="responsive" alt="Alt text" srcset="{{file2}}.jpg 640w, {{file2}}-300x225.jpg 300w" lightbox on="tap:amp-image-lightbox" role="button" tabindex="0"></amp-img>' .
-					'<amp-img src="{{file3}}.jpg" width="100" height="100" layout="responsive" alt="Alt text" lightbox on="tap:amp-image-lightbox" role="button" tabindex="0"></amp-img>' .
-				'</amp-carousel><amp-image-lightbox id="amp-image-lightbox" layout="nodisplay" data-close-button-aria-label="Close"></amp-image-lightbox>',
+					'<div class="slide"><amp-img src="{{file1}}.jpg" width="50" height="50" layout="fill" alt="Alt text" lightbox="" object-fit="cover"></amp-img>' . $amp_carousel_caption . '</div>' .
+					'<div class="slide"><amp-img src="{{file2}}.jpg" width="600" height="450" layout="fill" alt="Alt text" srcset="{{file2}}.jpg 640w, {{file2}}-300x225.jpg 300w" lightbox="" object-fit="cover"></amp-img></div>' .
+					'<div class="slide"><amp-img src="{{file3}}.jpg" width="100" height="100" layout="fill" alt="Alt text" lightbox="" object-fit="cover"></amp-img></div>' .
+				'</amp-carousel>',
 			],
 			'shortcode_with_lightbox_and_carousel_linking_to_file' => [
 				'[gallery amp-lightbox=true amp-carousel=true link="file" ids={{id1}},{{id2}},{{id3}}]',
 				'<amp-carousel width="600" height="450" type="slides" layout="responsive">' .
-					'<amp-img src="{{file1}}.jpg" width="50" height="50" layout="responsive" alt="Alt text" lightbox on="tap:amp-image-lightbox" role="button" tabindex="0"></amp-img>' .
-					'<amp-img src="{{file2}}.jpg" width="600" height="450" layout="responsive" alt="Alt text" srcset="{{file2}}.jpg 640w, {{file2}}-300x225.jpg 300w" lightbox on="tap:amp-image-lightbox" role="button" tabindex="0"></amp-img>' .
-					'<amp-img src="{{file3}}.jpg" width="100" height="100" layout="responsive" alt="Alt text" lightbox on="tap:amp-image-lightbox" role="button" tabindex="0"></amp-img>' .
-				'</amp-carousel><amp-image-lightbox id="amp-image-lightbox" layout="nodisplay" data-close-button-aria-label="Close"></amp-image-lightbox>',
+					'<div class="slide"><amp-img src="{{file1}}.jpg" width="50" height="50" layout="fill" alt="Alt text" lightbox="" object-fit="cover"></amp-img>' . $amp_carousel_caption . '</div>' .
+					'<div class="slide"><amp-img src="{{file2}}.jpg" width="600" height="450" layout="fill" alt="Alt text" srcset="{{file2}}.jpg 640w, {{file2}}-300x225.jpg 300w" lightbox="" object-fit="cover"></amp-img></div>' .
+					'<div class="slide"><amp-img src="{{file3}}.jpg" width="100" height="100" layout="fill" alt="Alt text" lightbox="" object-fit="cover"></amp-img></div>' .
+				'</amp-carousel>',
 			],
 		];
 	}
@@ -152,6 +161,16 @@ public function test__conversion( $source, $expected ) {
 				'_wp_attachment_image_alt',
 				'Alt text'
 			);
+
+			// Add a caption to the first image.
+			if ( 0 === $index ) {
+				wp_update_post(
+					[
+						'ID'           => $ids[ $index ],
+						'post_excerpt' => self::CAPTION_TEXT,
+					]
+				);
+			}
 		}
 
 		$this->initialize_replacements( $ids, $files );
diff --git a/tests/php/test-class-amp-gallery-block-sanitizer.php b/tests/php/test-class-amp-gallery-block-sanitizer.php
index b2b8cfabfa4..617dd530c6c 100644
--- a/tests/php/test-class-amp-gallery-block-sanitizer.php
+++ b/tests/php/test-class-amp-gallery-block-sanitizer.php
@@ -176,12 +176,12 @@ public function get_caption_text_data() {
 		return [
 			'no_amp_img_or_anchor'       => [
 				'<div><img src="https://example.com/image.jpg"></div>',
-				null,
+				'',
 				'img',
 			],
 			'amp_img_with_empty_caption' => [
 				'<amp-img src="https://example.com/image.jpg"></amp-img><figcaption></figcaption>',
-				null,
+				'',
 				'amp-img',
 			],
 			'amp_img_with_caption'       => [
@@ -191,7 +191,7 @@ public function get_caption_text_data() {
 			],
 			'amp_img_wrapped_in_anchor_with_caption_in_div' => [
 				'<a href="https://example.com"><amp-img src="https://example.com/image.jpg"></amp-img></a><div>This is a caption</div>',
-				null,
+				'',
 				'a',
 			],
 			'amp_img_wrapped_in_anchor_with_caption_in_figcaption' => [
diff --git a/tests/php/test-dom-element-list.php b/tests/php/test-dom-element-list.php
new file mode 100644
index 00000000000..c555416fb83
--- /dev/null
+++ b/tests/php/test-dom-element-list.php
@@ -0,0 +1,113 @@
+<?php
+/**
+ * Tests for DOMElementList, CaptionedSlide, and Image classes.
+ *
+ * @package AMP
+ */
+
+use Amp\AmpWP\Component\DOMElementList;
+use Amp\AmpWP\Component\Image;
+use Amp\AmpWP\Component\CaptionedSlide;
+
+/**
+ * Tests for AMP carousel and slide classes.
+ *
+ * @covers Amp\AmpWP\Component\DOMElementList, Amp\AmpWP\Component\CaptionedSlide, Amp\AmpWP\Component\Image
+ */
+class Test_DOM_Element_List extends \WP_UnitTestCase {
+
+	/**
+	 * Gets the data to test adding images.
+	 *
+	 * @return array[] An associative array, including the images and the expected count.
+	 */
+	public function get_dom_element_list_data() {
+		$dom = new DOMDocument();
+		return [
+			'no_image' => [
+				[],
+				0,
+			],
+			'1_image'  => [
+				[ AMP_DOM_Utils::create_node( $dom, 'amp-img', [] ) ],
+				1,
+			],
+			'4_images' => [
+				[
+					AMP_DOM_Utils::create_node( $dom, 'amp-img', [] ),
+					AMP_DOM_Utils::create_node( $dom, 'amp-img', [] ),
+					AMP_DOM_Utils::create_node( $dom, 'amp-img', [] ),
+					AMP_DOM_Utils::create_node( $dom, 'amp-img', [] ),
+				],
+				4,
+			],
+		];
+	}
+
+	/**
+	 * Test adding images and counting them.
+	 *
+	 * @dataProvider get_dom_element_list_data
+	 * @covers \Amp\AmpWP\Component\DOMElementList::add()
+	 * @covers \Amp\AmpWP\Component\DOMElementList::count()
+	 *
+	 * @param DOMElement[] $images         The images to add.
+	 * @param string       $expected_count The expected count after adding the images.
+	 */
+	public function test_dom_element_list_add( $images, $expected_count ) {
+		$dom_element_list = new DOMElementList();
+		foreach ( $images as $image ) {
+			$dom_element_list = $dom_element_list->add( $image, '' );
+		}
+
+		$this->assertEquals( $expected_count, $dom_element_list->count() );
+	}
+
+	/**
+	 * Test the iteration of the images.
+	 *
+	 * @dataProvider get_dom_element_list_data
+	 * @covers \Amp\AmpWP\Component\DOMElementList::add()
+	 * @covers \Amp\AmpWP\Component\DOMElementList::getIterator()
+	 *
+	 * @param DOMElement[] $images         The images to add.
+	 * @param string       $expected_count The expected count after adding the images.
+	 */
+	public function test_dom_element_list_get_iterator( $images, $expected_count ) {
+		$dom_element_list = new DOMElementList();
+		foreach ( $images as $image ) {
+			$dom_element_list = $dom_element_list->add( $image, '' );
+		}
+
+		$iteration_count = 0;
+		foreach ( $dom_element_list as $dom_element_list_image ) {
+			unset( $dom_element_list_image );
+			$iteration_count++;
+		}
+
+		$this->assertEquals( $expected_count, $iteration_count );
+	}
+
+	/**
+	 * Test get_caption.
+	 *
+	 * @covers \Amp\AmpWP\Component\CaptionedSlide::get_caption()
+	 */
+	public function test_get_caption() {
+		$image_node      = AMP_DOM_Utils::create_node( new DOMDocument(), 'amp-img', [] );
+		$caption         = 'This is a caption';
+		$captioned_image = new CaptionedSlide( $image_node, $caption );
+		$this->assertEquals( $caption, $captioned_image->get_caption() );
+	}
+
+	/**
+	 * Test get_slide_node.
+	 *
+	 * @covers \Amp\AmpWP\Component\Image::get_slide_node()
+	 */
+	public function test_get_slide_node() {
+		$image_node = AMP_DOM_Utils::create_node( new DOMDocument(), 'amp-img', [] );
+		$amp_image  = new CaptionedSlide( $image_node, '' );
+		$this->assertEquals( $image_node, $amp_image->get_slide_node() );
+	}
+}