Fix: Container isolation: isolate issues (#19834, #19845, #19705) [ED…

…-8353] (#20014)

assets/dev/scss/frontend/_container.scss

@@ -46,7 +46,6 @@
 	z-index: var( --z-index );
 	overflow: var( --overflow );
 	transition: var( --transition );
-	isolation: isolate;
 
 	&--width-full,
 	& > .e-container__inner {
@@ -110,13 +109,16 @@
 	}
 
 	// Background overlay.
-	&::before {
+	&::before,
+	> .elementor-background-video-container::before,
+	> .e-container__inner > .elementor-background-video-container::before,
+	> .elementor-background-slideshow:before,
+	> .e-container__inner > .elementor-background-slideshow:before {
 		// Render the background overlay only if it's being used - Determined by passing a CSS var from the background
 		// control with an empty string (e.g. `--background-overlay: '';`).
 		content: var( --background-overlay );
 		display: block;
 		position: absolute;
-		z-index: $under-layer;
 		width: 100%;
 		height: 100%;
 		left: 0;
@@ -127,9 +129,14 @@
 		border-radius: var( --border-radius );
 	}
 
-	.elementor-background-video-container,
-	.elementor-background-slideshow {
-		z-index: calc( $under-layer - 1 );
+	> .elementor-background-video-container:before,
+	> .e-container__inner > .elementor-background-video-container:before {
+		z-index: $first-layer;
+	}
+
+	> .elementor-background-slideshow:before,
+	> .e-container__inner > .elementor-background-slideshow:before {
+		z-index: $second-layer;
 	}
 
 	.elementor-widget {

includes/elements/container.php

@@ -673,16 +673,18 @@ protected function register_background_overlay_controls() {
 			]
 		);
 
+		$background_overlay_selector = '{{WRAPPER}}::before, {{WRAPPER}} > .elementor-background-video-container::before, {{WRAPPER}} > .e-container__inner > .elementor-background-video-container::before, {{WRAPPER}} > .elementor-background-slideshow::before, {{WRAPPER}} > .e-container__inner > .elementor-background-slideshow::before';
+
 		$this->add_group_control(
 			Group_Control_Background::get_type(),
 			[
 				'name' => 'background_overlay',
-				'selector' => '{{WRAPPER}}::before',
+				'selector' => $background_overlay_selector,
 				'fields_options' => [
 					'background' => [
 						'selectors' => [
 							// Hack to set the `::before` content in order to render it only when there is a background overlay.
-							'{{WRAPPER}}::before' => '--background-overlay: \'\';',
+							$background_overlay_selector => '--background-overlay: \'\';',
 						],
 					],
 				],
@@ -785,16 +787,18 @@ protected function register_background_overlay_controls() {
 			]
 		);
 
+		$background_overlay_hover_selector = '{{WRAPPER}}:hover::before, {{WRAPPER}}:hover > .elementor-background-video-container::before, {{WRAPPER}}:hover > .e-container__inner > .elementor-background-video-container::before, {{WRAPPER}} > .elementor-background-slideshow:hover::before, {{WRAPPER}} > .e-container__inner > .elementor-background-slideshow:hover::before';
+
 		$this->add_group_control(
 			Group_Control_Background::get_type(),
 			[
 				'name' => 'background_overlay_hover',
-				'selector' => '{{WRAPPER}}:hover::before',
+				'selector' => $background_overlay_hover_selector,
 				'fields_options' => [
 					'background' => [
 						'selectors' => [
 							// Hack to set the `::before` content in order to render it only when there is a background overlay.
-							'{{WRAPPER}}:hover::before' => '--background-overlay: \'\';',
+							$background_overlay_hover_selector => '--background-overlay: \'\';',
 						],
 					],
 				],

tests/playwright/sanity/container.test.js

@@ -261,4 +261,54 @@ test.describe( 'Container tests', () => {
 			container: false,
 		} );
 	} );
+
+	test( 'Fallback image is not on top of background video', async ( { page }, testInfo ) => {
+		const wpAdmin = new WpAdminPage( page, testInfo );
+		await wpAdmin.setExperiments( {
+			container: true,
+		} );
+
+		await page.goto( '/wp-admin/media-new.php' );
+
+		if ( await page.locator( '.upload-flash-bypass a' ).isVisible() ) {
+			await page.locator( '.upload-flash-bypass a' ).click();
+		}
+
+		await page.setInputFiles( 'input[name="async-upload"]', './tests/playwright/resources/video.webm' );
+		await page.locator( '#html-upload' ).click();
+		await page.waitForSelector( '.attachments-wrapper' );
+		await page.locator( 'ul.attachments li' ).nth( 0 ).click();
+		await page.waitForSelector( '.attachment-details-copy-link' );
+		const videoURL = await page.locator( '.attachment-details-copy-link' ).inputValue();
+
+		const editor = await wpAdmin.useElementorCleanPost();
+
+		const containerId = await editor.addElement( { elType: 'container' }, 'document' );
+
+		await wpAdmin.activatePanelTab( 'style' );
+		await page.locator( '[data-tooltip="Video"]' ).click();
+		await page.locator( '[data-setting="background_video_link"]' ).fill( videoURL );
+		await page.locator( '.elementor-control-background_video_fallback .eicon-plus-circle' ).click();
+		await page.locator( '#menu-item-browse' ).click();
+		await page.setInputFiles( 'input[type="file"]', './tests/playwright/resources/mountain-image.jpeg' );
+		await page.waitForLoadState( 'networkidle' );
+		await page.click( '.button.media-button' );
+		await page.locator( '.elementor-control-section_background_overlay' ).click();
+		await page.locator( '.elementor-control-background_overlay_background [data-tooltip="Classic"]' ).click();
+		await page.locator( '.elementor-control-background_overlay_color .pcr-button' ).click();
+		await page.locator( '.pcr-app.visible .pcr-interaction input.pcr-result' ).fill( '#61CE70' );
+
+		await editor.closeNavigatorIfOpen();
+
+		const container = editor.getFrame().locator( '.elementor-element-' + containerId );
+
+		expect( await container.screenshot( {
+			type: 'jpeg',
+			quality: 70,
+		} ) ).toMatchSnapshot( 'container-background.jpeg' );
+
+		await wpAdmin.setExperiments( {
+			container: false,
+		} );
+	} );
 } );