fix(UI): Script displayed in preview when using specific css (#56570)

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

e2e/iframe-script.spec.ts

@@ -0,0 +1,43 @@
+import { expect, test } from '@playwright/test';
+import translations from '../client/i18n/locales/english/translations.json';
+import { focusEditor } from './utils/editor';
+
+test.beforeEach(async ({ page }) => {
+  await page.goto(
+    '/learn/javascript-algorithms-and-data-structures-v8/build-a-cash-register-project/build-a-cash-register'
+  );
+});
+
+test.describe('Preventing Script From Displaying in Preview', () => {
+  // this test is for inserting problematic <style> tag and checking if the preview is empty
+
+  test('should render an empty preview after inserting CSS', async ({
+    page,
+    isMobile
+  }) => {
+    await focusEditor({ page, isMobile });
+
+    //  the pain in the butt <style> tag with display: block rule into the editor
+    const styleTag = `
+  <style>
+  * {
+    margin: 0;
+    padding: 0;
+    display: block;
+  }
+  </style>`;
+    await page.keyboard.insertText(styleTag);
+
+    if (isMobile) {
+      await page
+        .getByRole('tab', { name: translations.learn['editor-tabs'].preview })
+        .click();
+    }
+
+    // Checks that the iframe preview is empty
+    const frame = page.frameLocator('#fcc-main-frame').first();
+
+    // Make sure there are no visible elements inside the iframe's body
+    await expect(frame.locator('body')).toBeEmpty();
+  });
+});