Block editor: iframe: add editor style e2e test

packages/e2e-tests/plugins/iframed-editor-style.php

@@ -0,0 +1,24 @@
+<?php
+/**
+ * Plugin Name: Gutenberg Test Iframed Editor Style
+ * Plugin URI: https://github.com/WordPress/gutenberg
+ * Author: Gutenberg Team
+ *
+ * @package gutenberg-test-iframed-add-editor-style
+ */
+
+// Enable the template editor to test the iframed content.
+add_action(
+	'setup_theme',
+	function() {
+		add_theme_support( 'block-templates' );
+	}
+);
+
+add_action(
+	'block_editor_settings_all',
+	function( $settings ) {
+		$settings['styles'][] = array( 'css' => 'p { border: 1px solid red }' );
+		return $settings;
+	}
+);

packages/e2e-tests/specs/editor/plugins/iframed-editor-style.test.js

@@ -0,0 +1,49 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	activatePlugin,
+	createNewPost,
+	deactivatePlugin,
+	insertBlock,
+	openDocumentSettingsSidebar,
+	clickButton,
+	canvas,
+} from '@wordpress/e2e-test-utils';
+
+async function getComputedStyle( context ) {
+	return await context.evaluate( () => {
+		const container = document.querySelector( '.wp-block-paragraph' );
+		return window.getComputedStyle( container )[ 'border-width' ];
+	} );
+}
+
+describe( 'iframed editor styles', () => {
+	beforeEach( async () => {
+		await activatePlugin( 'gutenberg-test-iframed-editor-style' );
+		await createNewPost( { postType: 'page' } );
+	} );
+
+	afterEach( async () => {
+		await deactivatePlugin( 'gutenberg-test-iframed-editor-style' );
+	} );
+
+	it( 'should load editor styles through the block editor settings', async () => {
+		await insertBlock( 'Paragraph' );
+
+		expect( await getComputedStyle( page ) ).toBe( '1px' );
+
+		await openDocumentSettingsSidebar();
+		await clickButton( 'Page' );
+		await clickButton( 'Template' );
+		await clickButton( 'New' );
+		await page.keyboard.press( 'Tab' );
+		await page.keyboard.press( 'Tab' );
+		await page.keyboard.type( 'Iframed Test' );
+		await clickButton( 'Create' );
+		await page.waitForSelector( 'iframe[name="editor-canvas"]' );
+		await canvas().waitForSelector( '.wp-block-paragraph' );
+
+		expect( await getComputedStyle( canvas() ) ).toBe( '1px' );
+	} );
+} );