Closes #6360: Fix ll bgcss markup (#6362)

assets/js/lazyload-css.js

@@ -3,7 +3,7 @@ function rocket_css_lazyload_launch() {
 	const usable_pairs = typeof rocket_pairs === 'undefined' ? [] : rocket_pairs;
 
 
-	const styleElement = document.querySelector('#wpr-lazyload-bg');
+	const styleElement = document.querySelector('#wpr-lazyload-bg-container');
 
 	const threshold = rocket_lazyload_css_data.threshold || 300;
 

inc/Engine/Media/Lazyload/CSS/Front/TagGenerator.php

@@ -28,7 +28,7 @@ function ( $mapping_item ) use ( $loaded ) {
 		foreach ( $loaded as $item ) {
 			$loaded_content .= $item['style'];
 		}
-		$loaded_tag = "<div id=\"wpr-lazyload-bg\"></div><style id=\"wpr-lazyload-bg-exclusion\">$loaded_content</style>";
+		$loaded_tag = "<style id=\"wpr-lazyload-bg-container\"></style><style id=\"wpr-lazyload-bg-exclusion\">$loaded_content</style>";
 
 		$nostyle_content = '';
 		foreach ( $mapping as $item ) {

src/js/global/lazyload-css.js

@@ -13,7 +13,7 @@ function rocket_css_lazyload_launch() {
 
 
 
-	const styleElement = document.querySelector('#wpr-lazyload-bg');
+	const styleElement = document.querySelector('#wpr-lazyload-bg-container');
 
 	const threshold = rocket_lazyload_css_data.threshold || 300;
 
@@ -25,7 +25,7 @@ function rocket_css_lazyload_launch() {
 					if (pair) {
 						var new_style_element = document.createElement('style');
 						new_style_element.textContent = pair.style;
-						styleElement.appendChild(new_style_element);
+						styleElement.insertAdjacentElement('afterend', new_style_element);
 
 						pair.elements.forEach(el => {
 							// Stop observing the target element

tests/Fixtures/inc/Engine/Media/Lazyload/CSS/Front/TagGenerator/generate.php

@@ -1,7 +1,7 @@
 <?php
 
 $tags = <<<TAG
-<div id="wpr-lazyload-bg"></div><style id="wpr-lazyload-bg-exclusion">:root{--wpr-bg-15ef8: url(https://domain.ext/path/to/background.ext); }</style>
+<style id="wpr-lazyload-bg-container"></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); }: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>

tests/Fixtures/inc/Engine/Media/Lazyload/CSS/Subscriber/integration/HTML/html_excluded.php

@@ -37,8 +37,8 @@
 }
 
 </style> -->
-	<div id="wpr-lazyload-bg">
-	</div>
+	<style id="wpr-lazyload-bg-container">
+	</style>
 	<style id="wpr-lazyload-bg-exclusion">
 		.external-css-background-images{--wpr-bg-15ef8: url('http://example.org/wp-content/rocket-test-data/images/test.png');}.external-css-background-images{--wpr-bg-25ef18: url('http://example.org/wp-content/rocket-test-data/images/paper.jpeg');}.external-css-background-images{--wpr-bg-19ef12: url('https://new.rocketlabsqa.ovh/wp-content/rocket-test-data/styles/./wp-content/rocket-test-data/images/test.png');}</style>
 	<noscript>

tests/Fixtures/inc/Engine/Media/Lazyload/CSS/Subscriber/integration/HTML/html_output.php

@@ -38,8 +38,8 @@
 }
 
 </style> -->
-	<div id="wpr-lazyload-bg">
-	</div>
+	<style id="wpr-lazyload-bg-container">
+	</style>
 	<style id="wpr-lazyload-bg-exclusion">
 	</style>
 	<noscript>