Add shadow dom test page

5 years ago · 45f731f75a
parent 01a31541c7
commit 45f731f75a
3 changed files with 69 additions and 2 deletions
--- a/test/dev-setup.js
+++ b/test/dev-setup.js
@ -149,6 +149,12 @@
 		}
 	})();

+	self.getCodiconPath = function(PATH_PREFIX) {
+		PATH_PREFIX = PATH_PREFIX || '';
+		const result = RESOLVED_CORE.getResolvedPath(PATH_PREFIX);
+		return `${result}/base/browser/ui/codiconLabel/codicon/codicon.ttf`;
+	};
+

 	self.loadEditor = function(callback, PATH_PREFIX) {
 		PATH_PREFIX = PATH_PREFIX || '';
--- a/test/index.html
+++ b/test/index.html
@ -16,7 +16,9 @@ Jump to:
 &#160;|&#160;
 <a class="loading-opts" href="./mouse-scrollable-body.html">[scrollable body]</a>
 &#160;|&#160;
-<a class="loading-opts" href="./mouse-scrollable-element.html">[scrollable element]</a>
+<a class="loading-opts" href="./mouse-scrollable-element.html">[scrollable element]</a><br/>
+&#160;|&#160;
+<a class="loading-opts" href="./shadow-dom.html">[Shadow DOM]</a>
 &#160;|&#160;
 <a class="loading-opts" href="./colorize.html">[colorize element]</a>
 &#160;|&#160;
@ -39,4 +41,4 @@ Jump to:
 	});
 </script>
 </body>
-</html>
+</html>
--- a/test/shadow-dom.html
+++ b/test/shadow-dom.html
@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+</head>
+<body>
+
+<h2>Monaco Editor Shadow DOM</h2>
+
+<div style="clear:both"></div>
+<div id="container" style="float:left;width:800px;height:450px;border: 1px solid grey"></div>
+<div style="clear:both"></div>
+
+<script src="../metadata.js"></script>
+<script src="dev-setup.js"></script>
+<script>
+	const container = document.getElementById('container');
+	const shadowRoot = container.attachShadow({
+		mode: "closed"
+	});
+	loadEditor(function() {
+		const innerContainer = document.createElement('div');
+		shadowRoot.appendChild(innerContainer);
+		innerContainer.style.width = '800px';
+		innerContainer.style.height = '450px';
+
+		// We must move all CSS inside the shadow root, pick only link tags relevant to the editor
+		const documentLinks = Array.prototype.slice.call(document.getElementsByTagName('link'), 0).filter((documentLink) => {
+			if (/vs\/(base|editor|platform)/.test(documentLink.getAttribute('href'))) {
+				return true;
+			}
+			console.log(`Not moving: `, documentLink);
+			return true;
+		});
+		documentLinks.forEach(documentLink => shadowRoot.appendChild(documentLink));
+
+		// We must define the font face outside the shadowroot
+		const codiconCSS = `@font-face { font-family: "codicon"; src: url("${getCodiconPath()}") format("truetype"); }`;
+		const style = document.createElement('style');
+		style.type = 'text/css';
+		style.media = 'screen';
+		document.getElementsByTagName('head')[0].appendChild(style);
+		style.innerHTML = codiconCSS;
+
+		monaco.editor.create(innerContainer, {
+			value: [
+				'function hello() {',
+				'\tconsole.log("hello world");',
+				'}',
+				''
+			].join('\n'),
+			language: 'javascript'
+		});
+	});
+</script>
+
+</body>
+</html>