Closes #6199: Lazyload CSS Background Images triggers DOMException er…

…rors because of incorrect selector (#6225)
wp-media · Nov 2, 2023 · 5ca0902 · 5ca0902
1 parent 7d56c41
commit 5ca0902
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 4 deletions.
diff --git a/inc/Engine/Media/Lazyload/CSS/Front/Extractor.php b/inc/Engine/Media/Lazyload/CSS/Front/Extractor.php
@@ -37,9 +37,9 @@ function ( $matches ) {
 			$content
 			);
 
-		$background_regex = '(?<selector>[ \-,:\w.()\n\r^>[*"\'=\]#]+)\s?{[^{}]*background\s*:(?<property>[^;}]*)[^}]*}';
+		$background_regex = '(?<selector>(?:[ \-,:\w.()\n\r^>[*"\'=\]#]|(?:\[[^\]]+\]))+)\s?{[^{}]*background\s*:(?<property>[^;}]*)[^}]*}';
 
-		$background_image_regex = '(?<selector>[ \-,:\w.()\n\r>^[*"\'=\]#]+)\s?{[^{}]*background-image\s*:(?<property>[^;}]*)[^}]*}';
+		$background_image_regex = '(?<selector>(?:[ \-,:\w.()\n\r^>[*"\'=\]#]|(?:\[[^\]]+\]))+)\s?{[^{}]*background-image\s*:(?<property>[^;}]*)[^}]*}';
 
 		/**
 		 * Lazyload background property regex.

diff --git a/tests/Fixtures/inc/Engine/Media/Lazyload/CSS/Front/Extractor/CSS/content_with_url.php b/tests/Fixtures/inc/Engine/Media/Lazyload/CSS/Front/Extractor/CSS/content_with_url.php
@@ -142,3 +142,11 @@
  background-image: url(https://www.villmarksbua.no/wp-content/uploads/2022/03/nordic-pocket-saw-foldbar-tursag-for-tre-og-metall.jpg);
  }
  }
+
+ [title~="wp-rocket"] {
+ background: url("/wp-content/rocket-test-data/images/wp-rocket.svg") no-repeat;
+ }
+
+ [title~="wp-rocket-image"] {
+ background-image: url("/wp-content/rocket-test-data/images/wp-rocket.svg") no-repeat;
+ }
diff --git a/tests/Fixtures/inc/Engine/Media/Lazyload/CSS/Front/Extractor/extract.php b/tests/Fixtures/inc/Engine/Media/Lazyload/CSS/Front/Extractor/extract.php
@@ -154,6 +154,26 @@
  background-image: url("../img/glyphicons-halflings.png");
  background-position: 14px 14px;
  background-repeat: no-repeat
+ }'
+				]
+			],
+			'[title~="wp-rocket"]' => [
+				[
+					'selector' => '[title~="wp-rocket"]',
+					'url' => "url('/wp-content/rocket-test-data/images/wp-rocket.svg')",
+					'original' => 'url("/wp-content/rocket-test-data/images/wp-rocket.svg")',
+					'block' => '[title~="wp-rocket"] {
+ background: url("/wp-content/rocket-test-data/images/wp-rocket.svg") no-repeat;
+ }'
+				]
+			],
+			'[title~="wp-rocket-image"]' => [
+				[
+					'selector' => '[title~="wp-rocket-image"]',
+					'url' => "url('/wp-content/rocket-test-data/images/wp-rocket.svg')",
+					'original' => 'url("/wp-content/rocket-test-data/images/wp-rocket.svg")',
+					'block' => '[title~="wp-rocket-image"] {
+ background-image: url("/wp-content/rocket-test-data/images/wp-rocket.svg") no-repeat;
  }'
 				]
 			],

diff --git a/tests/Fixtures/inc/Engine/Media/Lazyload/CSS/Front/TagGenerator/generate.php b/tests/Fixtures/inc/Engine/Media/Lazyload/CSS/Front/TagGenerator/generate.php
@@ -3,9 +3,9 @@
 $tags = <<<TAG
 <style id="wpr-lazyload-bg"></style><style id="wpr-lazyload-bg-exclusion">:root{--wpr-bg-15ef8: url(https://domain.ext/path/to/background.ext); }</style>
 <noscript>
-<style id="wpr-lazyload-bg-nostyle">:root{--wpr-bg-16ef9: url(https://domain.ext/path/to/background2.ext); }</style>
+<style id="wpr-lazyload-bg-nostyle">:root{--wpr-bg-16ef9: url(https://domain.ext/path/to/background2.ext); }:root{--wpr-bg-17ef6: url(https://domain.ext/path/to/background3.ext); }:root{--wpr-bg-18ef6: url(https://domain.ext/path/to/background3.ext); }</style>
 </noscript>
-<script type="application/javascript">const rocket_pairs = [{"selector":"#section_2_hash","style":":root{--wpr-bg-16ef9: url(https:\/\/domain.ext\/path\/to\/background2.ext); }"}]; const rocket_excluded_pairs = [{"selector":".internal-css-background-image","style":":root{--wpr-bg-15ef8: url(https:\/\/domain.ext\/path\/to\/background.ext); }"}];</script>
+<script type="application/javascript">const rocket_pairs = [{"selector":"#section_2_hash","style":":root{--wpr-bg-16ef9: url(https:\/\/domain.ext\/path\/to\/background2.ext); }"},{"selector":"title~=\"wp-rocket\"","style":":root{--wpr-bg-17ef6: url(https:\/\/domain.ext\/path\/to\/background3.ext); }"},{"selector":"title~=\"wp-rocket-image\"","style":":root{--wpr-bg-18ef6: url(https:\/\/domain.ext\/path\/to\/background3.ext); }"}]; const rocket_excluded_pairs = [{"selector":".internal-css-background-image","style":":root{--wpr-bg-15ef8: url(https:\/\/domain.ext\/path\/to\/background.ext); }"}];</script>
 TAG;
 
 
@@ -21,6 +21,14 @@
 					  'selector' => '#section_2_hash',
 					  'style' => ":root{--wpr-bg-16ef9: url(https://domain.ext/path/to/background2.ext); }"
 				  ],
+				  [
+					  'selector' => 'title~="wp-rocket"',
+					  'style' => ':root{--wpr-bg-17ef6: url(https://domain.ext/path/to/background3.ext); }'
+				  ],
+				  [
+					  'selector' => 'title~="wp-rocket-image"',
+					  'style' => ':root{--wpr-bg-18ef6: url(https://domain.ext/path/to/background3.ext); }'
+				  ]
 			  ],
               'loaded' => [
 				  [