Add test case for 2040

5 years ago · 8316fef208
parent decded9610
commit 8316fef208
4 changed files with 100 additions and 0 deletions
--- a/test/2040/iframe.html
+++ b/test/2040/iframe.html
@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
+    <style>
+html,
+body {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  overflow: hidden;
+}
+
+#container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+
+.dev-setup-control {
+    display: none;
+}
+    </style>
+  </head>
+  <body>
+    <div id="container"></div>
+    <script src="../../metadata.js"></script>
+    <script src="../dev-setup.js"></script>
+    <script src="iframe.js"></script>
+  </body>
+</html>
--- a/test/2040/iframe.js
+++ b/test/2040/iframe.js
@ -0,0 +1,22 @@
+const init = () => {
+    loadEditor(function() {
+        // create the editor
+        const target = document.getElementById('container');
+        const editor = monaco.editor.create(target, { language: 'html' });
+
+        // load some sample data
+        (async () => {
+          const response = await fetch('https://microsoft.github.io/monaco-editor/');
+          const html = await response.text();
+          editor.getModel().setValue(html);
+        })();
+    });
+};
+
+window.addEventListener('DOMContentLoaded', () => {
+  if (!window.innerWidth || !window.innerHeight) {
+    window.addEventListener('resize', init, { once: true });
+  } else {
+    init();
+  }
+});
--- a/test/2040/index.html
+++ b/test/2040/index.html
@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script type="module">
+class MonacoEditorElement extends HTMLElement {
+  constructor() {
+    super();
+    this.style = 'display: block;';
+    const shadow = this.attachShadow({ mode: 'open' });
+    const iframe = document.createElement('iframe');
+    iframe.src = new URL('iframe.html?editor=src', import.meta.url).href;
+    iframe.style = `width: 100%; height: 100%;`;
+    shadow.appendChild(iframe);
+  }
+}
+
+customElements.define('monaco-editor', MonacoEditorElement);
+    </script>
+    <style>
+section {
+  margin: 80px;
+}
+
+iframe,
+monaco-editor {
+  width: 640px;
+  height: 400px;
+}
+    </style>
+  </head>
+  <body>
+    <section>
+      <h1>Monaco in a shadowRoot + iframe context</h1>
+      <monaco-editor></monaco-editor>
+    </section>
+    <hr>
+    <section>
+      <h1>Monaco in an iframe context</h1>
+      <iframe src="iframe.html?editor=src"></iframe>
+    </section>
+  </body>
+</html>
--- a/test/dev-setup.js
+++ b/test/dev-setup.js
@ -129,6 +129,7 @@
 		}

 		let div = document.createElement('div');
+		div.className = 'dev-setup-control'
 		div.style.position = 'fixed';
 		div.style.top = 0;
 		div.style.right = 0;