From e530045a6e8daae4406213b6e51436f549b0a7cf Mon Sep 17 00:00:00 2001
From: Miina Sikk <miina.sikk@gmail.com>
Date: Fri, 25 May 2018 15:49:23 +0300
Subject: [PATCH 01/12] Initial take on CSS selector conversions according to
 AMP.

---
 .../sanitizers/class-amp-style-sanitizer.php  | 132 +++++++++++++-----
 1 file changed, 97 insertions(+), 35 deletions(-)

diff --git a/includes/sanitizers/class-amp-style-sanitizer.php b/includes/sanitizers/class-amp-style-sanitizer.php
index f99ad2bceb2..bd2300abfd7 100644
--- a/includes/sanitizers/class-amp-style-sanitizer.php
+++ b/includes/sanitizers/class-amp-style-sanitizer.php
@@ -1408,6 +1408,88 @@ private function finalize_styles() {
 		}
 	}
 
+	/**
+	 * Check if CSS selector should be included to style.
+	 *
+	 * @param string $dynamic_selector_pattern Selector pattern.
+	 * @param array  $parsed_selector Array of tag and classes.
+	 * @param string $selector CSS selector.
+	 * @return bool If should include CSS selector.
+	 */
+	private function should_include_selector( $dynamic_selector_pattern, $parsed_selector, $selector ) {
+		$dom = $this->dom;
+		return (
+			( $dynamic_selector_pattern && preg_match( $dynamic_selector_pattern, $selector ) )
+			||
+			(
+				// If all class names are used in the doc.
+				(
+					empty( $parsed_selector['classes'] )
+					||
+					0 === count( array_diff( $parsed_selector['classes'], $this->get_used_class_names() ) )
+				)
+				&&
+				// If all IDs are used in the doc.
+				(
+					empty( $parsed_selector['ids'] )
+					||
+					0 === count( array_filter( $parsed_selector['ids'], function( $id ) use ( $dom ) {
+						return ! $dom->getElementById( $id );
+					} ) )
+				)
+				&&
+				// If tag names are present in the doc.
+				(
+					empty( $parsed_selector['tags'] )
+					||
+					0 === count( array_diff( $parsed_selector['tags'], $this->get_used_tag_names() ) )
+				)
+			)
+		);
+	}
+
+	/**
+	 * Ampify CSS selectors.
+	 *
+	 * @param array  $parsed_selector Array of tag and classes.
+	 * @param string $selector CSS selector.
+	 * @return array|bool False if not ampification needed, ampified selector otherwise.
+	 */
+	private function get_ampified_selectors_parsed( $parsed_selector, $selector ) {
+
+		// @todo Add mappings.
+		$mappings          = array(
+			'img' => 'amp-img',
+		);
+		$ampified_selector = $selector;
+		$tags              = array();
+		if ( ! empty( $parsed_selector['tags'] ) ) {
+			foreach ( $parsed_selector['tags'] as $tag ) {
+				if ( ! array_key_exists( $tag, $mappings ) ) {
+					$tags[] = $tag;
+					continue;
+				} else {
+					$tags[]            = $mappings[ $tag ];
+					$replace_from      = '/(^|>|~|\s)' . $tag . '\b/';
+					$replace_to        = '\1' . $mappings[ $tag ];
+					$ampified_selector = preg_replace( $replace_from, $replace_to, $ampified_selector );
+				}
+			}
+		}
+		if ( $selector === $ampified_selector ) {
+			return false;
+		}
+
+		return array(
+			'selector'        => $ampified_selector,
+			'parsed_selector' => array(
+				'classes' => isset( $parsed_selector['classes'] ) ? $parsed_selector['classes'] : array(),
+				'tags'    => $tags,
+				'ids'     => isset( $parsed_selector['ids'] ) ? $parsed_selector['ids'] : array(),
+			),
+		);
+	}
+
 	/**
 	 * Finalize a stylesheet set (amp-custom or amp-keyframes).
 	 *
@@ -1446,7 +1528,6 @@ function( $selector ) {
 		$stylesheet_set['processed_nodes'] = array();
 
 		$final_size = 0;
-		$dom        = $this->dom;
 		foreach ( $stylesheet_set['pending_stylesheets'] as &$pending_stylesheet ) {
 			$stylesheet = '';
 			foreach ( $pending_stylesheet['stylesheet'] as $stylesheet_part ) {
@@ -1454,43 +1535,24 @@ function( $selector ) {
 					$stylesheet .= $stylesheet_part;
 				} else {
 					list( $selectors_parsed, $declaration_block ) = $stylesheet_part;
-					if ( $should_tree_shake ) {
-						$selectors = array();
-						foreach ( $selectors_parsed as $selector => $parsed_selector ) {
-							$should_include = (
-								( $dynamic_selector_pattern && preg_match( $dynamic_selector_pattern, $selector ) )
-								||
-								(
-									// If all class names are used in the doc.
-									(
-										empty( $parsed_selector['classes'] )
-										||
-										0 === count( array_diff( $parsed_selector['classes'], $this->get_used_class_names() ) )
-									)
-									&&
-									// If all IDs are used in the doc.
-									(
-										empty( $parsed_selector['ids'] )
-										||
-										0 === count( array_filter( $parsed_selector['ids'], function( $id ) use ( $dom ) {
-											return ! $dom->getElementById( $id );
-										} ) )
-									)
-									&&
-									// If tag names are present in the doc.
-									(
-										empty( $parsed_selector['tags'] )
-										||
-										0 === count( array_diff( $parsed_selector['tags'], $this->get_used_tag_names() ) )
-									)
-								)
-							);
-							if ( $should_include ) {
+					$selectors                                    = array();
+					foreach ( $selectors_parsed as $selector => $parsed_selector ) {
+						if ( $should_tree_shake ) {
+							if ( $this->should_include_selector( $dynamic_selector_pattern, $parsed_selector, $selector ) ) {
 								$selectors[] = $selector;
 							}
+						} else {
+
+							// Lets map the amp elements and replace the correct one and then check if we should include the replacement.
+							$amp_selectors_parsed = $this->get_ampified_selectors_parsed( $parsed_selector, $selector );
+							if ( is_array( $amp_selectors_parsed ) && $this->should_include_selector( $dynamic_selector_pattern, $amp_selectors_parsed['parsed_selector'], $amp_selectors_parsed['selector'] ) ) {
+
+								// @todo Check if there could be selector's array?
+								$selectors[] = $amp_selectors_parsed['selector'];
+							} else {
+								$selectors = array_keys( $selectors_parsed );
+							}
 						}
-					} else {
-						$selectors = array_keys( $selectors_parsed );
 					}
 					if ( ! empty( $selectors ) ) {
 						$stylesheet .= implode( ',', $selectors ) . $declaration_block;

From f2395ee0ffc109b3cb826b35c4badad184c3ba08 Mon Sep 17 00:00:00 2001
From: Miina Sikk <miina.sikk@gmail.com>
Date: Fri, 25 May 2018 15:53:01 +0300
Subject: [PATCH 02/12] Add @todo note.

---
 includes/sanitizers/class-amp-style-sanitizer.php | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/includes/sanitizers/class-amp-style-sanitizer.php b/includes/sanitizers/class-amp-style-sanitizer.php
index bd2300abfd7..8e8a660f775 100644
--- a/includes/sanitizers/class-amp-style-sanitizer.php
+++ b/includes/sanitizers/class-amp-style-sanitizer.php
@@ -1545,6 +1545,8 @@ function( $selector ) {
 
 							// Lets map the amp elements and replace the correct one and then check if we should include the replacement.
 							$amp_selectors_parsed = $this->get_ampified_selectors_parsed( $parsed_selector, $selector );
+
+							// @todo Maybe we should also make sure here that the original selector is not needed?
 							if ( is_array( $amp_selectors_parsed ) && $this->should_include_selector( $dynamic_selector_pattern, $amp_selectors_parsed['parsed_selector'], $amp_selectors_parsed['selector'] ) ) {
 
 								// @todo Check if there could be selector's array?

From 958fd48196f95e2b60ec34b0ba8a92d136993ee8 Mon Sep 17 00:00:00 2001
From: Miina Sikk <miina.sikk@gmail.com>
Date: Fri, 25 May 2018 16:00:22 +0300
Subject: [PATCH 03/12] Add @todo note.

---
 includes/sanitizers/class-amp-style-sanitizer.php | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/includes/sanitizers/class-amp-style-sanitizer.php b/includes/sanitizers/class-amp-style-sanitizer.php
index 8e8a660f775..c3e74ace5af 100644
--- a/includes/sanitizers/class-amp-style-sanitizer.php
+++ b/includes/sanitizers/class-amp-style-sanitizer.php
@@ -1537,6 +1537,8 @@ function( $selector ) {
 					list( $selectors_parsed, $declaration_block ) = $stylesheet_part;
 					$selectors                                    = array();
 					foreach ( $selectors_parsed as $selector => $parsed_selector ) {
+
+						// @todo Replacing with AMP component selectors should happen if $should_tree_shake as well.
 						if ( $should_tree_shake ) {
 							if ( $this->should_include_selector( $dynamic_selector_pattern, $parsed_selector, $selector ) ) {
 								$selectors[] = $selector;

From 077a0945f90a40da16411d18cb01bbfc3f11131e Mon Sep 17 00:00:00 2001
From: Miina Sikk <miina.sikk@gmail.com>
Date: Mon, 28 May 2018 14:05:35 +0300
Subject: [PATCH 04/12] Add additional mappings.

---
 assets/css/amp-default.css                    |   2 +-
 .../sanitizers/class-amp-style-sanitizer.php  | 151 +++++++-----------
 2 files changed, 61 insertions(+), 92 deletions(-)

diff --git a/assets/css/amp-default.css b/assets/css/amp-default.css
index c06e0895dbe..15766aa182e 100644
--- a/assets/css/amp-default.css
+++ b/assets/css/amp-default.css
@@ -1,4 +1,4 @@
-.amp-wp-unknown-size img {
+.amp-wp-unknown-size .i-amphtml-replaced-content {
 	/** Worst case scenario when we can't figure out dimensions for an image. **/
 	/** Force the image into a box of fixed dimensions and use object-fit to scale. **/
 	object-fit: contain;
diff --git a/includes/sanitizers/class-amp-style-sanitizer.php b/includes/sanitizers/class-amp-style-sanitizer.php
index c6500dc4b31..64a243647e7 100644
--- a/includes/sanitizers/class-amp-style-sanitizer.php
+++ b/includes/sanitizers/class-amp-style-sanitizer.php
@@ -942,6 +942,12 @@ private function real_path_urls( $urls, $stylesheet_url ) {
 	private function process_css_declaration_block( RuleSet $ruleset, CSSList $css_list, $options ) {
 		$validation_errors = array();
 
+		if ( method_exists( $ruleset, 'getSelectors' ) ) {
+			foreach ( $ruleset->getSelectors() as $selector ) {
+				$this->ampify_selector( $selector );
+			}
+		}
+
 		// Remove disallowed properties.
 		if ( ! empty( $options['property_whitelist'] ) ) {
 			$properties = $ruleset->getRules();
@@ -1435,86 +1441,33 @@ private function finalize_styles() {
 		}
 	}
 
-	/**
-	 * Check if CSS selector should be included to style.
-	 *
-	 * @param string $dynamic_selector_pattern Selector pattern.
-	 * @param array  $parsed_selector Array of tag and classes.
-	 * @param string $selector CSS selector.
-	 * @return bool If should include CSS selector.
-	 */
-	private function should_include_selector( $dynamic_selector_pattern, $parsed_selector, $selector ) {
-		$dom = $this->dom;
-		return (
-			( $dynamic_selector_pattern && preg_match( $dynamic_selector_pattern, $selector ) )
-			||
-			(
-				// If all class names are used in the doc.
-				(
-					empty( $parsed_selector['classes'] )
-					||
-					0 === count( array_diff( $parsed_selector['classes'], $this->get_used_class_names() ) )
-				)
-				&&
-				// If all IDs are used in the doc.
-				(
-					empty( $parsed_selector['ids'] )
-					||
-					0 === count( array_filter( $parsed_selector['ids'], function( $id ) use ( $dom ) {
-						return ! $dom->getElementById( $id );
-					} ) )
-				)
-				&&
-				// If tag names are present in the doc.
-				(
-					empty( $parsed_selector['tags'] )
-					||
-					0 === count( array_diff( $parsed_selector['tags'], $this->get_used_tag_names() ) )
-				)
-			)
-		);
-	}
-
 	/**
 	 * Ampify CSS selectors.
 	 *
-	 * @param array  $parsed_selector Array of tag and classes.
-	 * @param string $selector CSS selector.
-	 * @return array|bool False if not ampification needed, ampified selector otherwise.
+	 * @param Selector $selector CSS Selector.
 	 */
-	private function get_ampified_selectors_parsed( $parsed_selector, $selector ) {
-
-		// @todo Add mappings.
-		$mappings          = array(
-			'img' => 'amp-img',
+	private function ampify_selector( $selector ) {
+		// @todo What about amp-anim, amp-playbuzz?
+		$mappings = array(
+			'audio'  => 'amp-audio',
+			'iframe' => 'amp-iframe',
+			'img'    => 'amp-img',
+			'video'  => 'amp-video',
 		);
-		$ampified_selector = $selector;
-		$tags              = array();
-		if ( ! empty( $parsed_selector['tags'] ) ) {
-			foreach ( $parsed_selector['tags'] as $tag ) {
-				if ( ! array_key_exists( $tag, $mappings ) ) {
-					$tags[] = $tag;
-					continue;
-				} else {
-					$tags[]            = $mappings[ $tag ];
-					$replace_from      = '/(^|>|~|\s)' . $tag . '\b/';
-					$replace_to        = '\1' . $mappings[ $tag ];
-					$ampified_selector = preg_replace( $replace_from, $replace_to, $ampified_selector );
-				}
+
+		$new_selector = $selector->getSelector();
+		foreach ( $mappings as $tag => $amp_tag ) {
+			if ( 0 === strpos( $selector->getSelector(), $tag ) ) {
+				$new_selector = substr_replace( $new_selector, $amp_tag, 0, strlen( $tag ) );
+			}
+			if ( false !== strpos( $selector->getSelector(), ' ' . $tag ) ) {
+				$new_selector = str_replace( ' ' . $tag, ' ' . $amp_tag, $new_selector );
 			}
-		}
-		if ( $selector === $ampified_selector ) {
-			return false;
 		}
 
-		return array(
-			'selector'        => $ampified_selector,
-			'parsed_selector' => array(
-				'classes' => isset( $parsed_selector['classes'] ) ? $parsed_selector['classes'] : array(),
-				'tags'    => $tags,
-				'ids'     => isset( $parsed_selector['ids'] ) ? $parsed_selector['ids'] : array(),
-			),
-		);
+		if ( $selector->getSelector() !== $new_selector ) {
+			$selector->setSelector( $new_selector );
+		}
 	}
 
 	/**
@@ -1555,6 +1508,7 @@ function( $selector ) {
 		$stylesheet_set['processed_nodes'] = array();
 
 		$final_size = 0;
+		$dom        = $this->dom;
 		foreach ( $stylesheet_set['pending_stylesheets'] as &$pending_stylesheet ) {
 			$stylesheet = '';
 			foreach ( $pending_stylesheet['stylesheet'] as $stylesheet_part ) {
@@ -1562,28 +1516,43 @@ function( $selector ) {
 					$stylesheet .= $stylesheet_part;
 				} else {
 					list( $selectors_parsed, $declaration_block ) = $stylesheet_part;
-					$selectors                                    = array();
-					foreach ( $selectors_parsed as $selector => $parsed_selector ) {
-
-						// @todo Replacing with AMP component selectors should happen if $should_tree_shake as well.
-						if ( $should_tree_shake ) {
-							if ( $this->should_include_selector( $dynamic_selector_pattern, $parsed_selector, $selector ) ) {
+					if ( $should_tree_shake ) {
+						$selectors = array();
+						foreach ( $selectors_parsed as $selector => $parsed_selector ) {
+							$should_include = (
+								( $dynamic_selector_pattern && preg_match( $dynamic_selector_pattern, $selector ) )
+								||
+								(
+									// If all class names are used in the doc.
+									(
+										empty( $parsed_selector['classes'] )
+										||
+										0 === count( array_diff( $parsed_selector['classes'], $this->get_used_class_names() ) )
+									)
+									&&
+									// If all IDs are used in the doc.
+									(
+										empty( $parsed_selector['ids'] )
+										||
+										0 === count( array_filter( $parsed_selector['ids'], function( $id ) use ( $dom ) {
+											return ! $dom->getElementById( $id );
+										} ) )
+									)
+									&&
+									// If tag names are present in the doc.
+									(
+										empty( $parsed_selector['tags'] )
+										||
+										0 === count( array_diff( $parsed_selector['tags'], $this->get_used_tag_names() ) )
+									)
+								)
+							);
+							if ( $should_include ) {
 								$selectors[] = $selector;
 							}
-						} else {
-
-							// Lets map the amp elements and replace the correct one and then check if we should include the replacement.
-							$amp_selectors_parsed = $this->get_ampified_selectors_parsed( $parsed_selector, $selector );
-
-							// @todo Maybe we should also make sure here that the original selector is not needed?
-							if ( is_array( $amp_selectors_parsed ) && $this->should_include_selector( $dynamic_selector_pattern, $amp_selectors_parsed['parsed_selector'], $amp_selectors_parsed['selector'] ) ) {
-
-								// @todo Check if there could be selector's array?
-								$selectors[] = $amp_selectors_parsed['selector'];
-							} else {
-								$selectors = array_keys( $selectors_parsed );
-							}
 						}
+					} else {
+						$selectors = array_keys( $selectors_parsed );
 					}
 					if ( ! empty( $selectors ) ) {
 						$stylesheet .= implode( ',', $selectors ) . $declaration_block;

From 7a218aa0bae195988dfbe7a9d00f37cc0fcb3e49 Mon Sep 17 00:00:00 2001
From: Weston Ruter <weston@xwp.co>
Date: Wed, 30 May 2018 23:54:47 -0700
Subject: [PATCH 05/12] Add get_selector_conversion_mapping method to all
 sanitizers and utilize for selector conversion

---
 assets/js/amp-editor-blocks.js                |  2 +-
 .../sanitizers/class-amp-audio-sanitizer.php  | 11 +++
 .../sanitizers/class-amp-base-sanitizer.php   | 36 ++++++++
 .../sanitizers/class-amp-iframe-sanitizer.php | 15 +++-
 .../sanitizers/class-amp-img-sanitizer.php    | 14 ++++
 .../class-amp-playbuzz-sanitizer.php          | 12 +++
 .../sanitizers/class-amp-style-sanitizer.php  | 84 +++++++++++++------
 .../sanitizers/class-amp-video-sanitizer.php  | 11 +++
 .../templates/class-amp-content-sanitizer.php | 27 +++++-
 includes/utils/class-amp-dom-utils.php        |  2 +-
 tests/test-amp-style-sanitizer.php            | 48 +++++++++++
 11 files changed, 233 insertions(+), 29 deletions(-)

diff --git a/assets/js/amp-editor-blocks.js b/assets/js/amp-editor-blocks.js
index 7b9128f5d3f..2f40feb1a96 100644
--- a/assets/js/amp-editor-blocks.js
+++ b/assets/js/amp-editor-blocks.js
@@ -731,7 +731,7 @@ var ampEditorBlocks = ( function() { // eslint-disable-line no-unused-vars
 					return element;
 				}
 			} else if ( ! component.hasGalleryShortcodeCarouselAttribute( attributes.text || '' ) ) {
-				// Add amp-carousel=false attribut to the shortcode.
+				// Add amp-carousel=false attribute to the shortcode.
 				text = attributes.text.replace( '[gallery', '[gallery amp-carousel=false' );
 			} else {
 				text = attributes.text;
diff --git a/includes/sanitizers/class-amp-audio-sanitizer.php b/includes/sanitizers/class-amp-audio-sanitizer.php
index 4c593a2e124..3622ccb2208 100644
--- a/includes/sanitizers/class-amp-audio-sanitizer.php
+++ b/includes/sanitizers/class-amp-audio-sanitizer.php
@@ -20,6 +20,17 @@ class AMP_Audio_Sanitizer extends AMP_Base_Sanitizer {
 	 */
 	public static $tag = 'audio';
 
+	/**
+	 * Get mapping of HTML selectors to the AMP component selectors which they may be converted into.
+	 *
+	 * @return array Mapping.
+	 */
+	public function get_selector_conversion_mapping() {
+		return array(
+			'audio' => array( 'amp-audio' ),
+		);
+	}
+
 	/**
 	 * Sanitize the <audio> elements from the HTML contained in this instance's DOMDocument.
 	 *
diff --git a/includes/sanitizers/class-amp-base-sanitizer.php b/includes/sanitizers/class-amp-base-sanitizer.php
index 61f3128f6a5..75c8e4247b8 100644
--- a/includes/sanitizers/class-amp-base-sanitizer.php
+++ b/includes/sanitizers/class-amp-base-sanitizer.php
@@ -23,6 +23,7 @@ abstract class AMP_Base_Sanitizer {
 	 * Value for <amp-image-lightbox> ID.
 	 *
 	 * @since 1.0
+	 * @todo Move to AMP_Img_Sanitizer?
 	 *
 	 * @const string
 	 */
@@ -121,11 +122,41 @@ public function __construct( $dom, $args = array() ) {
 		}
 	}
 
+	/**
+	 * Get mapping of HTML selectors to the AMP component selectors which they may be converted into.
+	 *
+	 * @return array Mapping.
+	 */
+	public function get_selector_conversion_mapping() {
+		return array();
+	}
+
+	/**
+	 * Run logic before any sanitizers are run.
+	 *
+	 * After the sanitizers are instantiated but before calling sanitize on each of them, this
+	 * method is called with list of all the instantiated sanitizers.
+	 *
+	 * @todo Call this init?
+	 *
+	 * @param AMP_Base_Sanitizer[] $sanitizers Sanitizers.
+	 */
+	public function before_sanitize( $sanitizers ) {}
+
 	/**
 	 * Sanitize the HTML contained in the DOMDocument received by the constructor
 	 */
 	abstract public function sanitize();
 
+	/**
+	 * Run logic after all sanitizers are finished.
+	 *
+	 * @todo Do we even need this?
+	 *
+	 * @param AMP_Base_Sanitizer[] $sanitizers Sanitizers.
+	 */
+	public function after_sanitize( $sanitizers ) {}
+
 	/**
 	 * Return array of values that would be valid as an HTML `script` element.
 	 *
@@ -444,6 +475,8 @@ public function get_data_amp_attributes( $node ) {
 			if ( isset( $parent_attributes['data-amp-noloading'] ) && true === filter_var( $parent_attributes['data-amp-noloading'], FILTER_VALIDATE_BOOLEAN ) ) {
 				$attributes['noloading'] = $parent_attributes['data-amp-noloading'];
 			}
+
+			// @todo Move to AMP_Img_Sanitizer subclassed method?
 			if ( isset( $parent_attributes['data-amp-lightbox'] ) && true === filter_var( $parent_attributes['data-amp-lightbox'], FILTER_VALIDATE_BOOLEAN ) ) {
 				$attributes['lightbox'] = true;
 			}
@@ -466,6 +499,7 @@ public function filter_data_amp_attributes( $attributes, $amp_data ) {
 		if ( isset( $amp_data['noloading'] ) ) {
 			$attributes['data-amp-noloading'] = '';
 		}
+		// @todo Move lightbox condition to subclassed method of AMP_Img_Sanitizer.
 		if ( isset( $amp_data['lightbox'] ) ) {
 			$attributes['data-amp-lightbox'] = '';
 			$attributes['on']                = 'tap:' . self::AMP_IMAGE_LIGHTBOX_ID;
@@ -514,6 +548,8 @@ public function filter_attachment_layout_attributes( $node, $new_attributes, $la
 
 	/**
 	 * Add <amp-image-lightbox> element to body tag if it doesn't exist yet.
+	 *
+	 * @todo Move this to AMP_Img_Sanitizer?
 	 */
 	public function maybe_add_amp_image_lightbox_node() {
 
diff --git a/includes/sanitizers/class-amp-iframe-sanitizer.php b/includes/sanitizers/class-amp-iframe-sanitizer.php
index 07c07875f72..9919783939d 100644
--- a/includes/sanitizers/class-amp-iframe-sanitizer.php
+++ b/includes/sanitizers/class-amp-iframe-sanitizer.php
@@ -48,6 +48,19 @@ class AMP_Iframe_Sanitizer extends AMP_Base_Sanitizer {
 		'add_placeholder' => false,
 	);
 
+	/**
+	 * Get mapping of HTML selectors to the AMP component selectors which they may be converted into.
+	 *
+	 * @return array Mapping.
+	 */
+	public function get_selector_conversion_mapping() {
+		return array(
+			'iframe' => array(
+				'amp-iframe',
+			),
+		);
+	}
+
 	/**
 	 * Sanitize the <iframe> elements from the HTML contained in this instance's DOMDocument.
 	 *
@@ -189,7 +202,7 @@ private function filter_attributes( $attributes ) {
 	private function build_placeholder( $parent_attributes ) {
 		$placeholder_node = AMP_DOM_Utils::create_node( $this->dom, 'div', array(
 			'placeholder' => '',
-			'class' => 'amp-wp-iframe-placeholder',
+			'class'       => 'amp-wp-iframe-placeholder',
 		) );
 
 		return $placeholder_node;
diff --git a/includes/sanitizers/class-amp-img-sanitizer.php b/includes/sanitizers/class-amp-img-sanitizer.php
index 121837d97b8..35f1d02e517 100644
--- a/includes/sanitizers/class-amp-img-sanitizer.php
+++ b/includes/sanitizers/class-amp-img-sanitizer.php
@@ -46,6 +46,20 @@ class AMP_Img_Sanitizer extends AMP_Base_Sanitizer {
 	 */
 	private static $anim_extension = '.gif';
 
+	/**
+	 * Get mapping of HTML selectors to the AMP component selectors which they may be converted into.
+	 *
+	 * @return array Mapping.
+	 */
+	public function get_selector_conversion_mapping() {
+		return array(
+			'img' => array(
+				'amp-img',
+				'amp-anim',
+			),
+		);
+	}
+
 	/**
 	 * Sanitize the <img> elements from the HTML contained in this instance's DOMDocument.
 	 *
diff --git a/includes/sanitizers/class-amp-playbuzz-sanitizer.php b/includes/sanitizers/class-amp-playbuzz-sanitizer.php
index 55fb833808c..3a72b8b3ac8 100644
--- a/includes/sanitizers/class-amp-playbuzz-sanitizer.php
+++ b/includes/sanitizers/class-amp-playbuzz-sanitizer.php
@@ -40,6 +40,18 @@ class AMP_Playbuzz_Sanitizer extends AMP_Base_Sanitizer {
 	 */
 	private static $height = '500';
 
+	/**
+	 * Get mapping of HTML selectors to the AMP component selectors which they may be converted into.
+	 *
+	 * @return array Mapping.
+	 */
+	public function get_selector_conversion_mapping() {
+		return array(
+			'div.pb_feed' => array( 'amp-playbuzz' ),
+			'.pb_feed'    => array( 'amp-playbuzz' ),
+		);
+	}
+
 	/**
 	 * Sanitize the Playbuzz elements from the HTML contained in this instance's DOMDocument.
 	 *
diff --git a/includes/sanitizers/class-amp-style-sanitizer.php b/includes/sanitizers/class-amp-style-sanitizer.php
index 26aeaaf7e21..3eb685f3399 100644
--- a/includes/sanitizers/class-amp-style-sanitizer.php
+++ b/includes/sanitizers/class-amp-style-sanitizer.php
@@ -182,6 +182,13 @@ class AMP_Style_Sanitizer extends AMP_Base_Sanitizer {
 	 */
 	private $processed_imported_stylesheet_urls = array();
 
+	/**
+	 * Mapping of HTML element selectors to AMP selector elements.
+	 *
+	 * @var array
+	 */
+	private $selector_mappings = array();
+
 	/**
 	 * Get error codes that can be raised during parsing of CSS.
 	 *
@@ -308,6 +315,30 @@ private function get_used_tag_names() {
 		return $this->used_tag_names;
 	}
 
+	/**
+	 * Run logic before any sanitizers are run.
+	 *
+	 * After the sanitizers are instantiated but before calling sanitize on each of them, this
+	 * method is called with list of all the instantiated sanitizers.
+	 *
+	 * @param AMP_Base_Sanitizer[] $sanitizers Sanitizers.
+	 */
+	public function before_sanitize( $sanitizers ) {
+		parent::before_sanitize( $sanitizers );
+
+		foreach ( $sanitizers as $sanitizer ) {
+			foreach ( $sanitizer->get_selector_conversion_mapping() as $html_selectors => $amp_selectors ) {
+				if ( ! isset( $this->selector_mappings[ $html_selectors ] ) ) {
+					$this->selector_mappings[ $html_selectors ] = $amp_selectors;
+				} else {
+					$this->selector_mappings[ $html_selectors ] = array_unique(
+						array_merge( $this->selector_mappings[ $html_selectors ], $amp_selectors )
+					);
+				}
+			}
+		}
+	}
+
 	/**
 	 * Sanitize CSS styles within the HTML contained in this instance's DOMDocument.
 	 *
@@ -647,7 +678,7 @@ private function fetch_external_stylesheet( $url ) {
 	private function process_stylesheet( $stylesheet, $options = array() ) {
 		$parsed      = null;
 		$cache_key   = null;
-		$cache_group = 'amp-parsed-stylesheet-v6';
+		$cache_group = 'amp-parsed-stylesheet-v7';
 
 		$cache_impacting_options = array_merge(
 			wp_array_slice_assoc(
@@ -1236,10 +1267,8 @@ private function real_path_urls( $urls, $stylesheet_url ) {
 	private function process_css_declaration_block( RuleSet $ruleset, CSSList $css_list, $options ) {
 		$results = array();
 
-		if ( method_exists( $ruleset, 'getSelectors' ) ) {
-			foreach ( $ruleset->getSelectors() as $selector ) {
-				$this->ampify_selector( $selector );
-			}
+		if ( $ruleset instanceof DeclarationBlock ) {
+			$this->ampify_ruleset_selectors( $ruleset );
 		}
 
 		// Remove disallowed properties.
@@ -1761,31 +1790,36 @@ private function finalize_styles() {
 	}
 
 	/**
-	 * Ampify CSS selectors.
+	 * Convert CSS selectors.
 	 *
-	 * @param Selector $selector CSS Selector.
+	 * @param DeclarationBlock $ruleset Ruleset.
 	 */
-	private function ampify_selector( $selector ) {
-		// @todo What about amp-anim, amp-playbuzz?
-		$mappings = array(
-			'audio'  => 'amp-audio',
-			'iframe' => 'amp-iframe',
-			'img'    => 'amp-img',
-			'video'  => 'amp-video',
-		);
-
-		$new_selector = $selector->getSelector();
-		foreach ( $mappings as $tag => $amp_tag ) {
-			if ( 0 === strpos( $selector->getSelector(), $tag ) ) {
-				$new_selector = substr_replace( $new_selector, $amp_tag, 0, strlen( $tag ) );
-			}
-			if ( false !== strpos( $selector->getSelector(), ' ' . $tag ) ) {
-				$new_selector = str_replace( ' ' . $tag, ' ' . $amp_tag, $new_selector );
+	private function ampify_ruleset_selectors( $ruleset ) {
+		$selectors    = array();
+		$replacements = 0;
+		foreach ( $ruleset->getSelectors() as $old_selector ) {
+			$edited_selectors = array( $old_selector->getSelector() );
+			foreach ( $this->selector_mappings as $html_selector => $amp_selectors ) { // Note: The $selector_mappings array contains ~6 items.
+				$html_pattern = '/(?<=^|[^a-z0-9_-])' . preg_quote( $html_selector ) . '(?=$|[^a-z0-9_-])/i';
+				foreach ( $edited_selectors as &$edited_selector ) { // Note: The $edited_selectors array contains only item in the normal case.
+					$original_selector = $edited_selector;
+					$amp_selector      = array_shift( $amp_selectors );
+					$edited_selector   = preg_replace( $html_pattern, $amp_selector, $edited_selector, -1, $count );
+					if ( ! $count ) {
+						continue;
+					}
+					$replacements += $count;
+					while ( ! empty( $amp_selectors ) ) { // Note: This array contains only a couple items.
+						$amp_selector       = array_shift( $amp_selectors );
+						$edited_selectors[] = preg_replace( $html_pattern, $amp_selector, $original_selector, -1, $count );
+					}
+				}
 			}
+			$selectors = array_merge( $selectors, $edited_selectors );
 		}
 
-		if ( $selector->getSelector() !== $new_selector ) {
-			$selector->setSelector( $new_selector );
+		if ( $replacements > 0 ) {
+			$ruleset->setSelectors( $selectors );
 		}
 	}
 
diff --git a/includes/sanitizers/class-amp-video-sanitizer.php b/includes/sanitizers/class-amp-video-sanitizer.php
index fdea8947bbd..b61c85343fb 100644
--- a/includes/sanitizers/class-amp-video-sanitizer.php
+++ b/includes/sanitizers/class-amp-video-sanitizer.php
@@ -32,6 +32,17 @@ class AMP_Video_Sanitizer extends AMP_Base_Sanitizer {
 	 */
 	public static $tag = 'video';
 
+	/**
+	 * Get mapping of HTML selectors to the AMP component selectors which they may be converted into.
+	 *
+	 * @return array Mapping.
+	 */
+	public function get_selector_conversion_mapping() {
+		return array(
+			'video' => array( 'amp-video' ),
+		);
+	}
+
 	/**
 	 * Sanitize the <video> elements from the HTML contained in this instance's DOMDocument.
 	 *
diff --git a/includes/templates/class-amp-content-sanitizer.php b/includes/templates/class-amp-content-sanitizer.php
index d9206b427f3..834a500efb2 100644
--- a/includes/templates/class-amp-content-sanitizer.php
+++ b/includes/templates/class-amp-content-sanitizer.php
@@ -63,8 +63,16 @@ public static function sanitize_document( &$dom, $sanitizer_classes, $args ) {
 
 		$return_styles = ! empty( $args['return_styles'] );
 		unset( $args['return_styles'] );
+
+		/**
+		 * Sanitizers.
+		 *
+		 * @var AMP_Base_Sanitizer[] $sanitizers
+		 */
+		$sanitizers = array();
+
+		// Instantiate the sanitizers.
 		foreach ( $sanitizer_classes as $sanitizer_class => $sanitizer_args ) {
-			$sanitize_class_start = microtime( true );
 			if ( ! class_exists( $sanitizer_class ) ) {
 				/* translators: %s is sanitizer class */
 				_doing_it_wrong( __METHOD__, sprintf( esc_html__( 'Sanitizer (%s) class does not exist', 'amp' ), esc_html( $sanitizer_class ) ), '0.4.1' );
@@ -84,6 +92,18 @@ public static function sanitize_document( &$dom, $sanitizer_classes, $args ) {
 				continue;
 			}
 
+			$sanitizers[ $sanitizer_class ] = $sanitizer;
+		}
+
+		// Let the sanitizers know about each other prior to sanitizing.
+		foreach ( $sanitizers as $sanitizer ) {
+			$sanitizer->before_sanitize( $sanitizers );
+		}
+
+		// Sanitize.
+		foreach ( $sanitizers as $sanitizer ) {
+			$sanitize_class_start = microtime( true );
+
 			$sanitizer->sanitize();
 
 			$scripts = array_merge( $scripts, $sanitizer->get_scripts() );
@@ -96,6 +116,11 @@ public static function sanitize_document( &$dom, $sanitizer_classes, $args ) {
 			AMP_Response_Headers::send_server_timing( 'amp_sanitize', -$sanitize_class_start, $sanitizer_class );
 		}
 
+		// Let the sanitizers.
+		foreach ( $sanitizers as $sanitizer ) {
+			$sanitizer->after_sanitize( $sanitizers );
+		}
+
 		return compact( 'scripts', 'styles', 'stylesheets' );
 	}
 }
diff --git a/includes/utils/class-amp-dom-utils.php b/includes/utils/class-amp-dom-utils.php
index 552626366f9..e0808303998 100644
--- a/includes/utils/class-amp-dom-utils.php
+++ b/includes/utils/class-amp-dom-utils.php
@@ -473,7 +473,7 @@ public static function create_node( $dom, $tag, $attributes ) {
 	 *
 	 * @since 0.2
 	 *
-	 * @param DOMNode $node Represents an HTML element for which to extract attributes.
+	 * @param DOMElement $node Represents an HTML element for which to extract attributes.
 	 *
 	 * @return string[] The attributes for the passed node, or an
 	 *                  empty array if it has no attributes.
diff --git a/tests/test-amp-style-sanitizer.php b/tests/test-amp-style-sanitizer.php
index 8e7b4d8e338..774d5dbfadd 100644
--- a/tests/test-amp-style-sanitizer.php
+++ b/tests/test-amp-style-sanitizer.php
@@ -352,6 +352,54 @@ public function test_link_and_style_elements( $source, $expected_stylesheets, $e
 		$this->assertEquals( $expected_errors, $error_codes );
 	}
 
+	/**
+	 * Data for testing AMP selector conversion.
+	 *
+	 * @return array
+	 */
+	public function get_amp_selector_data() {
+		return array(
+			'img' => array(
+				'div img.color{color:red}',
+				'div amp-img.color,div amp-anim.color{color:red}',
+			),
+			'playbuzz' => array(
+				'p + .pb_feed{color:blue}',
+				'p + amp-playbuzz{color:blue}',
+			),
+			'video' => array(
+				'article>video{color:green}',
+				'article>amp-video{color:green}',
+			),
+			'iframe' => array(
+				'p>*:not(iframe){color:purple}',
+				'p>*:not(amp-iframe){color:purple}',
+			),
+			'audio' => array(
+				'audio{color:yellow}',
+				'amp-audio{color:yellow}',
+			),
+		);
+	}
+
+	/**
+	 * Test AMP selector conversion.
+	 *
+	 * @dataProvider get_amp_selector_data
+	 * @param string $input  Input stylesheet.
+	 * @param string $output Output stylesheet.
+	 */
+	public function test_amp_selector_conversion( $input, $output ) {
+		$html = "<html amp><head><meta charset=utf-8><style amp-custom>$input</style></head><body></body></html>";
+		$dom  = AMP_DOM_Utils::get_dom( $html );
+
+		$sanitized   = AMP_Content_Sanitizer::sanitize_document( $dom, amp_get_content_sanitizers(), array(
+			'use_document_element' => true,
+		) );
+		$stylesheets = array_values( $sanitized['stylesheets'] );
+		$this->assertEquals( $output, $stylesheets[0] );
+	}
+
 	/**
 	 * Test handling of stylesheets with @font-face that have data: url source.
 	 *

From d8158916963063ce5c18b1501751b99358510d9d Mon Sep 17 00:00:00 2001
From: Miina Sikk <miina.sikk@gmail.com>
Date: Thu, 31 May 2018 15:22:50 +0300
Subject: [PATCH 06/12] Refactor code.

---
 assets/css/amp-default.css                    |  2 +-
 .../sanitizers/class-amp-base-sanitizer.php   | 26 +--------------
 .../sanitizers/class-amp-img-sanitizer.php    | 32 ++++++++++++++++---
 .../sanitizers/class-amp-style-sanitizer.php  |  4 +--
 .../templates/class-amp-content-sanitizer.php |  7 +---
 tests/test-amp-img-sanitizer.php              |  4 +--
 6 files changed, 35 insertions(+), 40 deletions(-)

diff --git a/assets/css/amp-default.css b/assets/css/amp-default.css
index 48450af8fac..75df5e14ae3 100644
--- a/assets/css/amp-default.css
+++ b/assets/css/amp-default.css
@@ -1,4 +1,4 @@
-.amp-wp-unknown-size .i-amphtml-replaced-content {
+.amp-wp-unknown-size [src] {
 	/** Worst case scenario when we can't figure out dimensions for an image. **/
 	/** Force the image into a box of fixed dimensions and use object-fit to scale. **/
 	object-fit: contain;
diff --git a/includes/sanitizers/class-amp-base-sanitizer.php b/includes/sanitizers/class-amp-base-sanitizer.php
index 75c8e4247b8..75b64adda75 100644
--- a/includes/sanitizers/class-amp-base-sanitizer.php
+++ b/includes/sanitizers/class-amp-base-sanitizer.php
@@ -23,7 +23,6 @@ abstract class AMP_Base_Sanitizer {
 	 * Value for <amp-image-lightbox> ID.
 	 *
 	 * @since 1.0
-	 * @todo Move to AMP_Img_Sanitizer?
 	 *
 	 * @const string
 	 */
@@ -137,26 +136,15 @@ public function get_selector_conversion_mapping() {
 	 * After the sanitizers are instantiated but before calling sanitize on each of them, this
 	 * method is called with list of all the instantiated sanitizers.
 	 *
-	 * @todo Call this init?
-	 *
 	 * @param AMP_Base_Sanitizer[] $sanitizers Sanitizers.
 	 */
-	public function before_sanitize( $sanitizers ) {}
+	public function init( $sanitizers ) {}
 
 	/**
 	 * Sanitize the HTML contained in the DOMDocument received by the constructor
 	 */
 	abstract public function sanitize();
 
-	/**
-	 * Run logic after all sanitizers are finished.
-	 *
-	 * @todo Do we even need this?
-	 *
-	 * @param AMP_Base_Sanitizer[] $sanitizers Sanitizers.
-	 */
-	public function after_sanitize( $sanitizers ) {}
-
 	/**
 	 * Return array of values that would be valid as an HTML `script` element.
 	 *
@@ -475,11 +463,6 @@ public function get_data_amp_attributes( $node ) {
 			if ( isset( $parent_attributes['data-amp-noloading'] ) && true === filter_var( $parent_attributes['data-amp-noloading'], FILTER_VALIDATE_BOOLEAN ) ) {
 				$attributes['noloading'] = $parent_attributes['data-amp-noloading'];
 			}
-
-			// @todo Move to AMP_Img_Sanitizer subclassed method?
-			if ( isset( $parent_attributes['data-amp-lightbox'] ) && true === filter_var( $parent_attributes['data-amp-lightbox'], FILTER_VALIDATE_BOOLEAN ) ) {
-				$attributes['lightbox'] = true;
-			}
 		}
 
 		return $attributes;
@@ -499,13 +482,6 @@ public function filter_data_amp_attributes( $attributes, $amp_data ) {
 		if ( isset( $amp_data['noloading'] ) ) {
 			$attributes['data-amp-noloading'] = '';
 		}
-		// @todo Move lightbox condition to subclassed method of AMP_Img_Sanitizer.
-		if ( isset( $amp_data['lightbox'] ) ) {
-			$attributes['data-amp-lightbox'] = '';
-			$attributes['on']                = 'tap:' . self::AMP_IMAGE_LIGHTBOX_ID;
-			$attributes['role']              = 'button';
-			$attributes['tabindex']          = 0;
-		}
 		return $attributes;
 	}
 
diff --git a/includes/sanitizers/class-amp-img-sanitizer.php b/includes/sanitizers/class-amp-img-sanitizer.php
index 35f1d02e517..ba050adc49f 100644
--- a/includes/sanitizers/class-amp-img-sanitizer.php
+++ b/includes/sanitizers/class-amp-img-sanitizer.php
@@ -236,15 +236,12 @@ private function adjust_and_replace_node( $node ) {
 		$amp_data       = $this->get_data_amp_attributes( $node );
 		$old_attributes = AMP_DOM_Utils::get_node_attributes_as_assoc_array( $node );
 		$old_attributes = $this->filter_data_amp_attributes( $old_attributes, $amp_data );
+		$old_attributes = $this->maybe_add_lightbox_attributes( $old_attributes, $node );
 
 		$new_attributes = $this->filter_attributes( $old_attributes );
 		$layout         = isset( $amp_data['layout'] ) ? $amp_data['layout'] : false;
 		$new_attributes = $this->filter_attachment_layout_attributes( $node, $new_attributes, $layout );
 
-		if ( isset( $old_attributes['data-amp-lightbox'] ) ) {
-			$this->maybe_add_amp_image_lightbox_node();
-		}
-
 		$this->add_or_append_attribute( $new_attributes, 'class', 'amp-wp-enforced-sizes' );
 		if ( empty( $new_attributes['layout'] ) && ! empty( $new_attributes['height'] ) && ! empty( $new_attributes['width'] ) ) {
 			$new_attributes['layout'] = 'intrinsic';
@@ -262,6 +259,33 @@ private function adjust_and_replace_node( $node ) {
 		$node->parentNode->replaceChild( $new_node, $node );
 	}
 
+	/**
+	 * Set lightbox attributes.
+	 *
+	 * @param array   $attributes Array of attributes.
+	 * @param DomNode $node Array of AMP attributes.
+	 * @return array Updated attributes.
+	 */
+	private function maybe_add_lightbox_attributes( $attributes, $node ) {
+		$parent_node = $node->parentNode;
+		if ( 'figure' !== $parent_node->tagName ) {
+			return $attributes;
+		}
+
+		$parent_attributes = AMP_DOM_Utils::get_node_attributes_as_assoc_array( $parent_node );
+
+		if ( isset( $parent_attributes['data-amp-lightbox'] ) && true === filter_var( $parent_attributes['data-amp-lightbox'], FILTER_VALIDATE_BOOLEAN ) ) {
+			$attributes['data-amp-lightbox'] = '';
+			$attributes['on']                = 'tap:' . self::AMP_IMAGE_LIGHTBOX_ID;
+			$attributes['role']              = 'button';
+			$attributes['tabindex']          = 0;
+
+			$this->maybe_add_amp_image_lightbox_node();
+		}
+
+		return $attributes;
+	}
+
 	/**
 	 * Determines is a URL is considered a GIF URL
 	 *
diff --git a/includes/sanitizers/class-amp-style-sanitizer.php b/includes/sanitizers/class-amp-style-sanitizer.php
index 3eb685f3399..97ca4c64a53 100644
--- a/includes/sanitizers/class-amp-style-sanitizer.php
+++ b/includes/sanitizers/class-amp-style-sanitizer.php
@@ -323,8 +323,8 @@ private function get_used_tag_names() {
 	 *
 	 * @param AMP_Base_Sanitizer[] $sanitizers Sanitizers.
 	 */
-	public function before_sanitize( $sanitizers ) {
-		parent::before_sanitize( $sanitizers );
+	public function init( $sanitizers ) {
+		parent::init( $sanitizers );
 
 		foreach ( $sanitizers as $sanitizer ) {
 			foreach ( $sanitizer->get_selector_conversion_mapping() as $html_selectors => $amp_selectors ) {
diff --git a/includes/templates/class-amp-content-sanitizer.php b/includes/templates/class-amp-content-sanitizer.php
index 834a500efb2..241928d847d 100644
--- a/includes/templates/class-amp-content-sanitizer.php
+++ b/includes/templates/class-amp-content-sanitizer.php
@@ -97,7 +97,7 @@ public static function sanitize_document( &$dom, $sanitizer_classes, $args ) {
 
 		// Let the sanitizers know about each other prior to sanitizing.
 		foreach ( $sanitizers as $sanitizer ) {
-			$sanitizer->before_sanitize( $sanitizers );
+			$sanitizer->init( $sanitizers );
 		}
 
 		// Sanitize.
@@ -116,11 +116,6 @@ public static function sanitize_document( &$dom, $sanitizer_classes, $args ) {
 			AMP_Response_Headers::send_server_timing( 'amp_sanitize', -$sanitize_class_start, $sanitizer_class );
 		}
 
-		// Let the sanitizers.
-		foreach ( $sanitizers as $sanitizer ) {
-			$sanitizer->after_sanitize( $sanitizers );
-		}
-
 		return compact( 'scripts', 'styles', 'stylesheets' );
 	}
 }
diff --git a/tests/test-amp-img-sanitizer.php b/tests/test-amp-img-sanitizer.php
index ed4f3765f33..f8ec8e1b42e 100644
--- a/tests/test-amp-img-sanitizer.php
+++ b/tests/test-amp-img-sanitizer.php
@@ -180,8 +180,8 @@ public function get_data() {
 			),
 
 			'image_with_custom_lightbox_attrs'         => array(
-				'<img src="http://placehold.it/100x100" width="100" height="100" data-foo="bar" role="button" tabindex="0" data-amp-lightbox="true" />',
-				'<amp-img src="http://placehold.it/100x100" width="100" height="100" data-foo="bar" role="button" tabindex="0" data-amp-lightbox="true" class="amp-wp-enforced-sizes" layout="intrinsic"></amp-img><amp-image-lightbox id="amp-image-lightbox" layout="nodisplay" data-close-button-aria-label="Close"></amp-image-lightbox>',
+				'<figure data-amp-lightbox="true"><img src="http://placehold.it/100x100" width="100" height="100" data-foo="bar" role="button" tabindex="0" /></figure>',
+				'<figure data-amp-lightbox="true"><amp-img src="http://placehold.it/100x100" width="100" height="100" data-foo="bar" role="button" tabindex="0" data-amp-lightbox="" on="tap:amp-image-lightbox" class="amp-wp-enforced-sizes" layout="intrinsic"></amp-img></figure><amp-image-lightbox id="amp-image-lightbox" layout="nodisplay" data-close-button-aria-label="Close"></amp-image-lightbox>',
 			),
 		);
 	}

From 12c9ff8b1cfe69cc073e2e6db93a58d84cf930e3 Mon Sep 17 00:00:00 2001
From: Weston Ruter <weston@xwp.co>
Date: Thu, 31 May 2018 10:59:36 -0700
Subject: [PATCH 07/12] Use tree-shaking in test_amp_selector_conversion

---
 .../sanitizers/class-amp-base-sanitizer.php   |  2 --
 tests/test-amp-style-sanitizer.php            | 36 +++++++++++++------
 2 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/includes/sanitizers/class-amp-base-sanitizer.php b/includes/sanitizers/class-amp-base-sanitizer.php
index 75b64adda75..71aaec157a6 100644
--- a/includes/sanitizers/class-amp-base-sanitizer.php
+++ b/includes/sanitizers/class-amp-base-sanitizer.php
@@ -524,8 +524,6 @@ public function filter_attachment_layout_attributes( $node, $new_attributes, $la
 
 	/**
 	 * Add <amp-image-lightbox> element to body tag if it doesn't exist yet.
-	 *
-	 * @todo Move this to AMP_Img_Sanitizer?
 	 */
 	public function maybe_add_amp_image_lightbox_node() {
 
diff --git a/tests/test-amp-style-sanitizer.php b/tests/test-amp-style-sanitizer.php
index 774d5dbfadd..78fdefdf5c4 100644
--- a/tests/test-amp-style-sanitizer.php
+++ b/tests/test-amp-style-sanitizer.php
@@ -360,24 +360,35 @@ public function test_link_and_style_elements( $source, $expected_stylesheets, $e
 	public function get_amp_selector_data() {
 		return array(
 			'img' => array(
-				'div img.color{color:red}',
-				'div amp-img.color,div amp-anim.color{color:red}',
+				sprintf( '<div><img class="logo" src="%s" width="200" height="100"></div>', admin_url( 'images/wordpress-logo.png' ) ),
+				'div img.logo{border:solid 1px red}',
+				'div amp-img.logo{border:solid 1px red}', // Note that amp-anim is tree-shaken.
+			),
+			'img-anim' => array(
+				// Note: The spinner is in the following to prevent tree-shaking of the amp-anim element.
+				sprintf( '<div><img class="logo" src="%s" width="200" height="100"><img class="logo" src="%s" width="100" height="100"></div>', admin_url( 'images/wordpress-logo.png' ), admin_url( 'images/spinner-2x.gif' ) ),
+				'div img.logo{border:solid 1px red}',
+				'div amp-img.logo,div amp-anim.logo{border:solid 1px red}',
 			),
 			'playbuzz' => array(
-				'p + .pb_feed{color:blue}',
-				'p + amp-playbuzz{color:blue}',
+				'<p>hello</p><div class="pb_feed" data-item="226dd4c0-ef13-4fee-850b-7be32bf6d121"></div>',
+				'p + .pb_feed{border:solid 1px blue}',
+				'p + amp-playbuzz{border:solid 1px blue}',
 			),
 			'video' => array(
-				'article>video{color:green}',
-				'article>amp-video{color:green}',
+				'<article><video src="http://example.com" height="100" width="200"></video></article>',
+				'article>video{border:solid 1px green}',
+				'article>amp-video{border:solid 1px green}',
 			),
 			'iframe' => array(
+				'<p><b>purple</b><iframe src="http://example.com" height="100" width="200"></iframe></p>',
 				'p>*:not(iframe){color:purple}',
 				'p>*:not(amp-iframe){color:purple}',
 			),
 			'audio' => array(
-				'audio{color:yellow}',
-				'amp-audio{color:yellow}',
+				'<audio src="http://example.com/foo.mp3" height="100" width="200"></audio>',
+				'audio{border:solid 1px yellow}',
+				'amp-audio{border:solid 1px yellow}',
 			),
 		);
 	}
@@ -386,14 +397,17 @@ public function get_amp_selector_data() {
 	 * Test AMP selector conversion.
 	 *
 	 * @dataProvider get_amp_selector_data
+	 * @param string $markup Markup.
 	 * @param string $input  Input stylesheet.
 	 * @param string $output Output stylesheet.
 	 */
-	public function test_amp_selector_conversion( $input, $output ) {
-		$html = "<html amp><head><meta charset=utf-8><style amp-custom>$input</style></head><body></body></html>";
+	public function test_amp_selector_conversion( $markup, $input, $output ) {
+		$html = "<html amp><head><meta charset=utf-8><style amp-custom>$input</style></head><body>$markup</body></html>";
 		$dom  = AMP_DOM_Utils::get_dom( $html );
 
-		$sanitized   = AMP_Content_Sanitizer::sanitize_document( $dom, amp_get_content_sanitizers(), array(
+		$sanitizer_classes = amp_get_content_sanitizers();
+		$sanitizer_classes['AMP_Style_Sanitizer']['remove_unused_rules'] = 'always';
+		$sanitized   = AMP_Content_Sanitizer::sanitize_document( $dom, $sanitizer_classes, array(
 			'use_document_element' => true,
 		) );
 		$stylesheets = array_values( $sanitized['stylesheets'] );

From 91e3eef4cd601421a429589e65299ae4f9200f69 Mon Sep 17 00:00:00 2001
From: Weston Ruter <weston@xwp.co>
Date: Thu, 31 May 2018 11:12:21 -0700
Subject: [PATCH 08/12] Include selector mappings in dynamic_element_selectors
 to preserve selectors like amp-img>img

---
 includes/sanitizers/class-amp-style-sanitizer.php |  6 ++++++
 tests/test-amp-style-sanitizer.php                | 11 +++++------
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/includes/sanitizers/class-amp-style-sanitizer.php b/includes/sanitizers/class-amp-style-sanitizer.php
index 97ca4c64a53..44f96835c81 100644
--- a/includes/sanitizers/class-amp-style-sanitizer.php
+++ b/includes/sanitizers/class-amp-style-sanitizer.php
@@ -335,6 +335,12 @@ public function init( $sanitizers ) {
 						array_merge( $this->selector_mappings[ $html_selectors ], $amp_selectors )
 					);
 				}
+
+				// Prevent selectors like `amp-img img` getting deleted since `img` does not occur in the DOM.
+				$this->args['dynamic_element_selectors'] = array_merge(
+					$this->args['dynamic_element_selectors'],
+					$this->selector_mappings[ $html_selectors ]
+				);
 			}
 		}
 	}
diff --git a/tests/test-amp-style-sanitizer.php b/tests/test-amp-style-sanitizer.php
index 78fdefdf5c4..ccadcafcddc 100644
--- a/tests/test-amp-style-sanitizer.php
+++ b/tests/test-amp-style-sanitizer.php
@@ -362,13 +362,12 @@ public function get_amp_selector_data() {
 			'img' => array(
 				sprintf( '<div><img class="logo" src="%s" width="200" height="100"></div>', admin_url( 'images/wordpress-logo.png' ) ),
 				'div img.logo{border:solid 1px red}',
-				'div amp-img.logo{border:solid 1px red}', // Note that amp-anim is tree-shaken.
+				'div amp-img.logo,div amp-anim.logo{border:solid 1px red}', // Note that amp-anim is not tree-shaken because amp-anim is added to dynamic_element_selectors.
 			),
-			'img-anim' => array(
-				// Note: The spinner is in the following to prevent tree-shaking of the amp-anim element.
-				sprintf( '<div><img class="logo" src="%s" width="200" height="100"><img class="logo" src="%s" width="100" height="100"></div>', admin_url( 'images/wordpress-logo.png' ), admin_url( 'images/spinner-2x.gif' ) ),
-				'div img.logo{border:solid 1px red}',
-				'div amp-img.logo,div amp-anim.logo{border:solid 1px red}',
+			'img-cover' => array(
+				sprintf( '<div><amp-img class="logo" src="%s" width="200" height="100"></amp-img></div>', admin_url( 'images/wordpress-logo.png' ) ),
+				'div amp-img.logo img{object-fit:cover}',
+				'div amp-img.logo amp-img,div amp-img.logo amp-anim{object-fit:cover}', // Note that amp-anim is not tree-shaken because amp-anim is added to dynamic_element_selectors.
 			),
 			'playbuzz' => array(
 				'<p>hello</p><div class="pb_feed" data-item="226dd4c0-ef13-4fee-850b-7be32bf6d121"></div>',

From 04f6b85d4cee36bb1296f1949102cbb2bf10dd4c Mon Sep 17 00:00:00 2001
From: Weston Ruter <weston@xwp.co>
Date: Thu, 31 May 2018 11:24:45 -0700
Subject: [PATCH 09/12] Preserve original pb_feed class on translated
 amp-playbuzz elements

---
 .../class-amp-playbuzz-sanitizer.php          | 11 +--
 tests/test-amp-playbuzz-sanitizer.php         | 92 ++++++++++---------
 tests/test-amp-style-sanitizer.php            |  4 +-
 3 files changed, 54 insertions(+), 53 deletions(-)

diff --git a/includes/sanitizers/class-amp-playbuzz-sanitizer.php b/includes/sanitizers/class-amp-playbuzz-sanitizer.php
index 3a72b8b3ac8..3ec07e5f8b9 100644
--- a/includes/sanitizers/class-amp-playbuzz-sanitizer.php
+++ b/includes/sanitizers/class-amp-playbuzz-sanitizer.php
@@ -47,8 +47,7 @@ class AMP_Playbuzz_Sanitizer extends AMP_Base_Sanitizer {
 	 */
 	public function get_selector_conversion_mapping() {
 		return array(
-			'div.pb_feed' => array( 'amp-playbuzz' ),
-			'.pb_feed'    => array( 'amp-playbuzz' ),
+			'div.pb_feed' => array( 'amp-playbuzz.pb_feed' ),
 		);
 	}
 
@@ -125,16 +124,14 @@ private function filter_attributes( $attributes ) {
 					}
 					break;
 
-				case 'data-game-info':
-					$out['data-item-info'] = $value;
-					break;
-
 				case 'data-shares':
 					$out['data-share-buttons'] = $value;
 					break;
 
+				case 'data-game-info':
 				case 'data-comments':
-					$out['data-comments'] = $value;
+				case 'class':
+					$out[ $name ] = $value;
 					break;
 
 				default:
diff --git a/tests/test-amp-playbuzz-sanitizer.php b/tests/test-amp-playbuzz-sanitizer.php
index 5988dcb9735..430311dacb2 100644
--- a/tests/test-amp-playbuzz-sanitizer.php
+++ b/tests/test-amp-playbuzz-sanitizer.php
@@ -3,50 +3,54 @@
 
 class AMP_Playbuzz_Sanitizer_Test extends WP_UnitTestCase {
 
-    public function get_data() {
-        return array(
-            'no_playbuzz_item' => array(
-                '<h1>Im Not A Playbuzz Embed</h1>',
-                '<h1>Im Not A Playbuzz Embed</h1>',
-            ),
-
-            'playbuzz_item_without_sorce' => array(
-                '<div class="pb_feed"></div>',
-                '<div class="pb_feed"></div>'
-            ),
-
-            'playbuzz_item_with_data_item' => array(
-                '<div class="pb_feed" data-item="226dd4c0-ef13-4fee-850b-7be32bf6d121"></div>',
-                '<amp-playbuzz data-item="226dd4c0-ef13-4fee-850b-7be32bf6d121" height="500"></amp-playbuzz>'
-            ),
-
-            'playbuzz_item_with_data_game' => array(
-                '<div class="pb_feed" data-game="https://www.playbuzz.com/jessiemills10/donald-trump-hits-out-at-rachel-maddow-and-accuses-nbc-of-being-fake-news-is-he-right"></div>',
-                '<amp-playbuzz src="https://www.playbuzz.com/jessiemills10/donald-trump-hits-out-at-rachel-maddow-and-accuses-nbc-of-being-fake-news-is-he-right" height="500"></amp-playbuzz>'
-            ),
-
-            'playbuzz_item_with_data_game_and_data_item' => array(
-                '<div class="pb_feed" data-item="226dd4c0-ef13-4fee-850b-7be32bf6d121" data-game="https://www.playbuzz.com/jessiemills10/donald-trump-hits-out-at-rachel-maddow-and-accuses-nbc-of-being-fake-news-is-he-right"></div>',
-                '<amp-playbuzz data-item="226dd4c0-ef13-4fee-850b-7be32bf6d121" src="https://www.playbuzz.com/jessiemills10/donald-trump-hits-out-at-rachel-maddow-and-accuses-nbc-of-being-fake-news-is-he-right" height="500"></amp-playbuzz>'
-            ),
-
-            'playbuzz_item_with_data_game_info' => array(
-                '<div class="pb_feed" data-game-info="true" data-item="226dd4c0-ef13-4fee-850b-7be32bf6d121"></div>',
-                '<amp-playbuzz data-item-info="true" data-item="226dd4c0-ef13-4fee-850b-7be32bf6d121" height="500"></amp-playbuzz>',
-            ),
-
-            'playbuzz_item_with_data_shares_info' => array(
-                '<div class="pb_feed" data-shares="true" data-item="226dd4c0-ef13-4fee-850b-7be32bf6d121"></div>',
-                '<amp-playbuzz data-share-buttons="true" data-item="226dd4c0-ef13-4fee-850b-7be32bf6d121" height="500"></amp-playbuzz>',
-            ),
-
-            'playbuzz_item_with_data_comments' => array(
-                '<div class="pb_feed" data-comments="true" data-item="226dd4c0-ef13-4fee-850b-7be32bf6d121"></div>',
-                '<amp-playbuzz data-comments="true" data-item="226dd4c0-ef13-4fee-850b-7be32bf6d121" height="500"></amp-playbuzz>',
-            )
-
-        );
-    }
+	/**
+	 * Data for converter test.
+	 *
+	 * @return array Data.
+	 */
+	public function get_data() {
+		return array(
+			'no_playbuzz_item'                           => array(
+				'<h1>Im Not A Playbuzz Embed</h1>',
+				'<h1>Im Not A Playbuzz Embed</h1>',
+			),
+
+			'playbuzz_item_without_sorce'                => array(
+				'<div class="pb_feed"></div>',
+				'<div class="pb_feed"></div>',
+			),
+
+			'playbuzz_item_with_data_item'               => array(
+				'<div class="pb_feed" data-item="226dd4c0-ef13-4fee-850b-7be32bf6d121"></div>',
+				'<amp-playbuzz class="pb_feed" data-item="226dd4c0-ef13-4fee-850b-7be32bf6d121" height="500"></amp-playbuzz>',
+			),
+
+			'playbuzz_item_with_data_game'               => array(
+				'<div class="pb_feed" data-game="https://www.playbuzz.com/jessiemills10/donald-trump-hits-out-at-rachel-maddow-and-accuses-nbc-of-being-fake-news-is-he-right"></div>',
+				'<amp-playbuzz class="pb_feed" src="https://www.playbuzz.com/jessiemills10/donald-trump-hits-out-at-rachel-maddow-and-accuses-nbc-of-being-fake-news-is-he-right" height="500"></amp-playbuzz>',
+			),
+
+			'playbuzz_item_with_data_game_and_data_item' => array(
+				'<div class="pb_feed" data-item="226dd4c0-ef13-4fee-850b-7be32bf6d121" data-game="https://www.playbuzz.com/jessiemills10/donald-trump-hits-out-at-rachel-maddow-and-accuses-nbc-of-being-fake-news-is-he-right"></div>',
+				'<amp-playbuzz class="pb_feed" data-item="226dd4c0-ef13-4fee-850b-7be32bf6d121" src="https://www.playbuzz.com/jessiemills10/donald-trump-hits-out-at-rachel-maddow-and-accuses-nbc-of-being-fake-news-is-he-right" height="500"></amp-playbuzz>',
+			),
+
+			'playbuzz_item_with_data_game_info'          => array(
+				'<div class="pb_feed" data-game-info="true" data-item="226dd4c0-ef13-4fee-850b-7be32bf6d121"></div>',
+				'<amp-playbuzz class="pb_feed" data-game-info="true" data-item="226dd4c0-ef13-4fee-850b-7be32bf6d121" height="500"></amp-playbuzz>',
+			),
+
+			'playbuzz_item_with_data_shares_info'        => array(
+				'<div class="pb_feed" data-shares="true" data-item="226dd4c0-ef13-4fee-850b-7be32bf6d121"></div>',
+				'<amp-playbuzz class="pb_feed" data-share-buttons="true" data-item="226dd4c0-ef13-4fee-850b-7be32bf6d121" height="500"></amp-playbuzz>',
+			),
+
+			'playbuzz_item_with_data_comments'           => array(
+				'<div class="pb_feed" data-comments="true" data-item="226dd4c0-ef13-4fee-850b-7be32bf6d121"></div>',
+				'<amp-playbuzz class="pb_feed" data-comments="true" data-item="226dd4c0-ef13-4fee-850b-7be32bf6d121" height="500"></amp-playbuzz>',
+			),
+		);
+	}
 
     /**
      * @dataProvider get_data
diff --git a/tests/test-amp-style-sanitizer.php b/tests/test-amp-style-sanitizer.php
index ccadcafcddc..5ce08775a17 100644
--- a/tests/test-amp-style-sanitizer.php
+++ b/tests/test-amp-style-sanitizer.php
@@ -371,8 +371,8 @@ public function get_amp_selector_data() {
 			),
 			'playbuzz' => array(
 				'<p>hello</p><div class="pb_feed" data-item="226dd4c0-ef13-4fee-850b-7be32bf6d121"></div>',
-				'p + .pb_feed{border:solid 1px blue}',
-				'p + amp-playbuzz{border:solid 1px blue}',
+				'p + div.pb_feed{border:solid 1px blue}',
+				'p + amp-playbuzz.pb_feed{border:solid 1px blue}',
 			),
 			'video' => array(
 				'<article><video src="http://example.com" height="100" width="200"></video></article>',

From 19db2c1442b71bbe221653d6719d7c788b7d18fc Mon Sep 17 00:00:00 2001
From: Weston Ruter <weston@xwp.co>
Date: Thu, 31 May 2018 11:56:50 -0700
Subject: [PATCH 10/12] Allow tree shaking on selectors with dynamic elements
 when non-dynamic ancestor is absent

---
 .../sanitizers/class-amp-style-sanitizer.php  | 27 ++++++++++---------
 tests/test-amp-style-sanitizer.php            | 24 ++++++++++++++++-
 2 files changed, 38 insertions(+), 13 deletions(-)

diff --git a/includes/sanitizers/class-amp-style-sanitizer.php b/includes/sanitizers/class-amp-style-sanitizer.php
index 44f96835c81..e39a93e886e 100644
--- a/includes/sanitizers/class-amp-style-sanitizer.php
+++ b/includes/sanitizers/class-amp-style-sanitizer.php
@@ -949,6 +949,16 @@ private function prepare_stylesheet( $stylesheet_string, $options = array() ) {
 			$pattern .= preg_quote( $after_declaration_block, '#' );
 			$pattern .= '#s';
 
+			$dynamic_selector_pattern = null;
+			if ( ! empty( $this->args['dynamic_element_selectors'] ) ) {
+				$dynamic_selector_pattern = implode( '|', array_map(
+					function( $selector ) {
+						return preg_quote( $selector, '#' );
+					},
+					$this->args['dynamic_element_selectors']
+				) );
+			}
+
 			$split_stylesheet = preg_split( $pattern, $stylesheet_string, -1, PREG_SPLIT_DELIM_CAPTURE );
 			$length           = count( $split_stylesheet );
 			for ( $i = 0; $i < $length; $i++ ) {
@@ -966,6 +976,11 @@ private function prepare_stylesheet( $stylesheet_string, $options = array() ) {
 						// Remove attribute selectors to eliminate false negative, such as with `.social-navigation a[href*="example.com"]:before`.
 						$reduced_selector = preg_replace( '/\[\w.*?\]/', '', $reduced_selector );
 
+						// Ignore any selector terms that occur under a dynamic selector.
+						if ( $dynamic_selector_pattern ) {
+							$reduced_selector = preg_replace( '#((?:' . $dynamic_selector_pattern . ')(?:\.[a-z0-9_-]+)*)[^a-z0-9_-].*#si', '$1', $reduced_selector . ' ' );
+						}
+
 						$reduced_selector = preg_replace_callback(
 							'/\.([a-zA-Z0-9_-]+)/',
 							function( $matches ) use ( $selector, &$selectors_parsed ) {
@@ -1853,16 +1868,6 @@ private function finalize_stylesheet_set( $stylesheet_set ) {
 			) );
 		}
 
-		$dynamic_selector_pattern = null;
-		if ( $should_tree_shake && ! empty( $this->args['dynamic_element_selectors'] ) ) {
-			$dynamic_selector_pattern = '#' . implode( '|', array_map(
-				function( $selector ) {
-					return preg_quote( $selector, '#' );
-				},
-				$this->args['dynamic_element_selectors']
-			) ) . '#';
-		}
-
 		$stylesheet_set['processed_nodes'] = array();
 
 		$final_size = 0;
@@ -1879,8 +1884,6 @@ function( $selector ) {
 					$selectors = array();
 					foreach ( $selectors_parsed as $selector => $parsed_selector ) {
 						$should_include = (
-							( $dynamic_selector_pattern && preg_match( $dynamic_selector_pattern, $selector ) )
-							||
 							(
 								// If all class names are used in the doc.
 								(
diff --git a/tests/test-amp-style-sanitizer.php b/tests/test-amp-style-sanitizer.php
index 5ce08775a17..e523c8fcaba 100644
--- a/tests/test-amp-style-sanitizer.php
+++ b/tests/test-amp-style-sanitizer.php
@@ -279,6 +279,7 @@ public function get_link_and_style_test_data() {
 					'<html amp><head><meta charset="utf-8">',
 					'<style amp-custom>b.foo, form [submit-success] b, div[submit-failure] b, form.unused b { color: green }</style>',
 					'<style amp-custom>.dead-list li .highlighted, amp-live-list li .highlighted { background: yellow }</style>',
+					'<style amp-custom>article.missing amp-live-list li .highlighted { background: yellow }</style>',
 					'<style amp-custom>body amp-list .portland { color:blue; }</style>',
 					'</head><body>',
 					'<form method="post" action-xhr="https://example.com/subscribe" target="_top"><div submit-success><template type="amp-mustache"><b>Thanks</b>, {{name}}}</template></div></form>',
@@ -289,6 +290,7 @@ public function get_link_and_style_test_data() {
 				array(
 					'form [submit-success] b,div[submit-failure] b{color:green}',
 					'amp-live-list li .highlighted{background:yellow}',
+					'',
 					'body amp-list .portland{color:blue}',
 				),
 				array(),
@@ -341,6 +343,11 @@ public function test_link_and_style_elements( $source, $expected_stylesheets, $e
 		$actual_stylesheets = array_values( $sanitizer->get_stylesheets() );
 		$this->assertCount( count( $expected_stylesheets ), $actual_stylesheets );
 		foreach ( $expected_stylesheets as $i => $expected_stylesheet ) {
+			if ( empty( $expected_stylesheet ) ) {
+				$this->assertEmpty( $actual_stylesheets[ $i ] );
+				continue;
+			}
+
 			if ( false === strpos( $expected_stylesheet, '{' ) ) {
 				$this->assertContains( $expected_stylesheet, $actual_stylesheets[ $i ] );
 			} else {
@@ -362,13 +369,28 @@ public function get_amp_selector_data() {
 			'img' => array(
 				sprintf( '<div><img class="logo" src="%s" width="200" height="100"></div>', admin_url( 'images/wordpress-logo.png' ) ),
 				'div img.logo{border:solid 1px red}',
-				'div amp-img.logo,div amp-anim.logo{border:solid 1px red}', // Note that amp-anim is not tree-shaken because amp-anim is added to dynamic_element_selectors.
+				'div amp-img.logo{border:solid 1px red}', // Note amp-anim is still tree-shaken because it doesn't occur in the DOM.
+			),
+			'img-missing-class' => array(
+				sprintf( '<div><img class="logo" src="%s" width="200" height="100"></div>', admin_url( 'images/wordpress-logo.png' ) ),
+				'div img.missing{border:solid 1px red}',
+				'', // Tree-shaken because missing class doesn't occur in the DOM.
+			),
+			'img-and-anim' => array(
+				sprintf( '<div><img class="logo" src="%s" width="200" height="100"><img class="spinner" src="%s" width="200" height="100"></div>', admin_url( 'images/wordpress-logo.png' ), admin_url( 'images/spinner-2x.gif' ) ),
+				'div img{border:solid 1px red}',
+				'div amp-img,div amp-anim{border:solid 1px red}',
 			),
 			'img-cover' => array(
 				sprintf( '<div><amp-img class="logo" src="%s" width="200" height="100"></amp-img></div>', admin_url( 'images/wordpress-logo.png' ) ),
 				'div amp-img.logo img{object-fit:cover}',
 				'div amp-img.logo amp-img,div amp-img.logo amp-anim{object-fit:cover}', // Note that amp-anim is not tree-shaken because amp-anim is added to dynamic_element_selectors.
 			),
+			'img-tree-shaking' => array(
+				sprintf( '<article><img class="logo" src="%s" width="200" height="100"></article>', admin_url( 'images/wordpress-logo.png' ) ),
+				'div img.logo{border:solid 1px red}',
+				'', // The selector is removed because there is no div element.
+			),
 			'playbuzz' => array(
 				'<p>hello</p><div class="pb_feed" data-item="226dd4c0-ef13-4fee-850b-7be32bf6d121"></div>',
 				'p + div.pb_feed{border:solid 1px blue}',

From 1b8405a6be4f2299de285e4720afb504888d56ba Mon Sep 17 00:00:00 2001
From: Miina Sikk <miina.sikk@gmail.com>
Date: Thu, 31 May 2018 22:38:28 +0300
Subject: [PATCH 11/12] Stop replacing CSS selectors which are addressing AMP
 components directly.

---
 includes/sanitizers/class-amp-style-sanitizer.php |  7 ++++++-
 tests/test-amp-style-sanitizer.php                | 12 +++++++++++-
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/includes/sanitizers/class-amp-style-sanitizer.php b/includes/sanitizers/class-amp-style-sanitizer.php
index 44f96835c81..52db5da281b 100644
--- a/includes/sanitizers/class-amp-style-sanitizer.php
+++ b/includes/sanitizers/class-amp-style-sanitizer.php
@@ -1810,7 +1810,12 @@ private function ampify_ruleset_selectors( $ruleset ) {
 				foreach ( $edited_selectors as &$edited_selector ) { // Note: The $edited_selectors array contains only item in the normal case.
 					$original_selector = $edited_selector;
 					$amp_selector      = array_shift( $amp_selectors );
-					$edited_selector   = preg_replace( $html_pattern, $amp_selector, $edited_selector, -1, $count );
+					$amp_tag_pattern   = '/(?<=^|[^a-z0-9_-])' . preg_quote( $amp_selector ) . '(?=$|[^a-z0-9_-])/i';
+					preg_match( $amp_tag_pattern, $edited_selector, $matches );
+					if ( ! empty( $matches ) && $amp_selector === $matches[0] ) {
+						continue;
+					}
+					$edited_selector = preg_replace( $html_pattern, $amp_selector, $edited_selector, -1, $count );
 					if ( ! $count ) {
 						continue;
 					}
diff --git a/tests/test-amp-style-sanitizer.php b/tests/test-amp-style-sanitizer.php
index 5ce08775a17..dec84cdd1ab 100644
--- a/tests/test-amp-style-sanitizer.php
+++ b/tests/test-amp-style-sanitizer.php
@@ -364,10 +364,15 @@ public function get_amp_selector_data() {
 				'div img.logo{border:solid 1px red}',
 				'div amp-img.logo,div amp-anim.logo{border:solid 1px red}', // Note that amp-anim is not tree-shaken because amp-anim is added to dynamic_element_selectors.
 			),
+			'img_with_amp_img' => array(
+				'<div></div>',
+				'amp-img img{background-color:red}',
+				'amp-img img{background-color:red}',
+			),
 			'img-cover' => array(
 				sprintf( '<div><amp-img class="logo" src="%s" width="200" height="100"></amp-img></div>', admin_url( 'images/wordpress-logo.png' ) ),
 				'div amp-img.logo img{object-fit:cover}',
-				'div amp-img.logo amp-img,div amp-img.logo amp-anim{object-fit:cover}', // Note that amp-anim is not tree-shaken because amp-anim is added to dynamic_element_selectors.
+				'div amp-img.logo img{object-fit:cover}',
 			),
 			'playbuzz' => array(
 				'<p>hello</p><div class="pb_feed" data-item="226dd4c0-ef13-4fee-850b-7be32bf6d121"></div>',
@@ -379,6 +384,11 @@ public function get_amp_selector_data() {
 				'article>video{border:solid 1px green}',
 				'article>amp-video{border:solid 1px green}',
 			),
+			'video_with_amp_video' => array(
+				'<article></article>',
+				'amp-video.video video{border:solid 1px green}',
+				'amp-video.video video{border:solid 1px green}',
+			),
 			'iframe' => array(
 				'<p><b>purple</b><iframe src="http://example.com" height="100" width="200"></iframe></p>',
 				'p>*:not(iframe){color:purple}',

From a564410b9fea27c667993fc0fa56d4fcd855532e Mon Sep 17 00:00:00 2001
From: Miina Sikk <miina.sikk@gmail.com>
Date: Thu, 31 May 2018 22:51:27 +0300
Subject: [PATCH 12/12] Fix tests.

---
 tests/test-amp-style-sanitizer.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/tests/test-amp-style-sanitizer.php b/tests/test-amp-style-sanitizer.php
index dccde42540c..a0f67374fbe 100644
--- a/tests/test-amp-style-sanitizer.php
+++ b/tests/test-amp-style-sanitizer.php
@@ -382,7 +382,7 @@ public function get_amp_selector_data() {
 				'div amp-img,div amp-anim{border:solid 1px red}',
 			),
 			'img_with_amp_img' => array(
-				'<div></div>',
+				'<amp-img></amp-img>',
 				'amp-img img{background-color:red}',
 				'amp-img img{background-color:red}',
 			),
@@ -407,7 +407,7 @@ public function get_amp_selector_data() {
 				'article>amp-video{border:solid 1px green}',
 			),
 			'video_with_amp_video' => array(
-				'<article></article>',
+				'<amp-video class="video"></amp-video>',
 				'amp-video.video video{border:solid 1px green}',
 				'amp-video.video video{border:solid 1px green}',
 			),