From 07bbc16dcd6bf4a58e6f7e4e7964e93e451ea3c2 Mon Sep 17 00:00:00 2001
From: Matt Gadd <mgadd@sitepen.com>
Date: Tue, 8 Jan 2019 18:57:15 +0000
Subject: [PATCH] use root node display property to set custom element root
 node display. if none set default to display:block

---
 src/widget-core/registerCustomElement.ts      |  5 +++
 .../widget-core/unit/registerCustomElement.ts | 38 ++++++++++++++++++-
 2 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/src/widget-core/registerCustomElement.ts b/src/widget-core/registerCustomElement.ts
index 315f11f6c..e0aec3a6f 100644
--- a/src/widget-core/registerCustomElement.ts
+++ b/src/widget-core/registerCustomElement.ts
@@ -137,6 +137,11 @@ export function create(descriptor: any, WidgetConstructor: any): any {
 			const r = renderer(() => w(Wrapper, {}));
 			this._renderer = r;
 			r.mount({ domNode: this, merge: false, registry });
+			const root = this.children[0];
+			if (root) {
+				const { display = 'block' } = global.getComputedStyle(root);
+				this.style.display = display;
+			}
 
 			this._initialised = true;
 			this.dispatchEvent(
diff --git a/tests/widget-core/unit/registerCustomElement.ts b/tests/widget-core/unit/registerCustomElement.ts
index 830589c06..2ff407900 100644
--- a/tests/widget-core/unit/registerCustomElement.ts
+++ b/tests/widget-core/unit/registerCustomElement.ts
@@ -22,6 +22,24 @@ class Foo extends WidgetBase {
 	}
 }
 
+@customElement({
+	tag: 'display-element-inline-block'
+})
+class DisplayElement extends WidgetBase {
+	render() {
+		return v('div', { styles: { display: 'inline-block' } }, ['hello world']);
+	}
+}
+
+@customElement({
+	tag: 'display-element-default-block'
+})
+class DisplayElementDefault extends WidgetBase {
+	render() {
+		return v('div', ['hello world']);
+	}
+}
+
 function createTestWidget(options: any) {
 	const { properties, attributes, events, childType = CustomElementChildType.DOJO } = options;
 	@customElement<any>({
@@ -60,7 +78,7 @@ function createTestWidget(options: any) {
 			if (onExternalFunction) {
 				onExternalFunction('hello');
 			}
-			return v('div', [
+			return v('div', { styles: { display: 'inline-block' } }, [
 				v('button', { classes: ['event'], onclick: this._onClick }),
 				v('div', { classes: ['prop'] }, [`${myProp}`]),
 				v('div', { classes: ['attr'] }, [`${myAttr}`]),
@@ -120,7 +138,7 @@ describe('registerCustomElement', () => {
 		register(Foo);
 		element = document.createElement('foo-element');
 		document.body.appendChild(element);
-		assert.equal(element.outerHTML, '<foo-element><div>hello world</div></foo-element>');
+		assert.equal(element.outerHTML, '<foo-element style="display: block;"><div>hello world</div></foo-element>');
 	});
 
 	it('custom element with property', () => {
@@ -315,4 +333,20 @@ describe('registerCustomElement', () => {
 		assert.equal(functionText, 'hello');
 		assert.equal(scope, undefined, 'function scope should not be tampered with');
 	});
+
+	it('adds the correct display style to the wrapping node based on the root node of the widget', () => {
+		register(DisplayElement);
+		element = document.createElement('display-element-inline-block');
+		document.body.appendChild(element);
+		const { display } = global.getComputedStyle(element);
+		assert.equal(display, 'inline-block');
+	});
+
+	it('adds display:block if no style found on root node of widget', () => {
+		register(DisplayElementDefault);
+		element = document.createElement('display-element-default-block');
+		document.body.appendChild(element);
+		const { display } = global.getComputedStyle(element);
+		assert.equal(display, 'block');
+	});
 });