capricorn86#628@patch: Handle style setter in HTMLElement.

jledentu · Oct 20, 2022 · 3e7ed6b · 3e7ed6b
1 parent 42c92a6
commit 3e7ed6b
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 15 deletions.
diff --git a/packages/happy-dom/src/css/declaration/AbstractCSSStyleDeclaration.ts b/packages/happy-dom/src/css/declaration/AbstractCSSStyleDeclaration.ts
@@ -77,21 +77,17 @@ export default abstract class AbstractCSSStyleDeclaration {
 
 		if (this._ownerElement) {
 			const style = new CSSStyleDeclarationPropertyManager({ cssText });
-			if (!style.size()) {
-				delete this._ownerElement['_attributes']['style'];
-			} else {
-				if (!this._ownerElement['_attributes']['style']) {
-					Attr._ownerDocument = this._ownerElement.ownerDocument;
-					this._ownerElement['_attributes']['style'] = new Attr();
-					this._ownerElement['_attributes']['style'].name = 'style';
-				}
-
-				if (this._ownerElement.isConnected) {
-					this._ownerElement.ownerDocument['_cacheID']++;
-				}
+			if (!this._ownerElement['_attributes']['style']) {
+				Attr._ownerDocument = this._ownerElement.ownerDocument;
+				this._ownerElement['_attributes']['style'] = new Attr();
+				this._ownerElement['_attributes']['style'].name = 'style';
+			}
 
-				this._ownerElement['_attributes']['style'].value = style.toString();
+			if (this._ownerElement.isConnected) {
+				this._ownerElement.ownerDocument['_cacheID']++;
 			}
+
+			this._ownerElement['_attributes']['style'].value = style.toString();
 		} else {
 			this._style = new CSSStyleDeclarationPropertyManager({ cssText });
 		}

diff --git a/packages/happy-dom/src/nodes/html-element/HTMLElement.ts b/packages/happy-dom/src/nodes/html-element/HTMLElement.ts
@@ -200,6 +200,16 @@ export default class HTMLElement extends Element implements IHTMLElement {
 		return this._style;
 	}
 
+	/**
+	 * Sets style.
+	 *
+	 * @param cssText Style as text.
+	 * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style#setting_styles
+	 */
+	public set style(cssText: string | CSSStyleDeclaration) {
+		this.setAttribute('style', typeof cssText === 'string' ? <string>cssText : '');
+	}
+
 	/**
 	 * Returns data set.
 	 *

diff --git a/packages/happy-dom/src/nodes/html-element/IHTMLElement.ts b/packages/happy-dom/src/nodes/html-element/IHTMLElement.ts
@@ -9,7 +9,6 @@ import IElement from '../element/IElement';
  * https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.
  */
 export default interface IHTMLElement extends IElement {
-	style: CSSStyleDeclaration;
 	dataset: { [key: string]: string };
 	tabIndex: number;
 	offsetHeight: number;
@@ -48,6 +47,9 @@ export default interface IHTMLElement extends IElement {
 	ontransitionrun: (event: Event) => void | null;
 	ontransitionstart: (event: Event) => void | null;
 
+	get style(): CSSStyleDeclaration;
+	set style(cssText: CSSStyleDeclaration | string);
+
 	/**
 	 * Triggers a click event.
 	 */

diff --git a/packages/happy-dom/test/css/declaration/CSSStyleDeclaration.test.ts b/packages/happy-dom/test/css/declaration/CSSStyleDeclaration.test.ts
@@ -1978,7 +1978,7 @@ describe('CSSStyleDeclaration', () => {
 
 			declaration.cssText = '';
 
-			expect(element.getAttribute('style')).toBe(null);
+			expect(element.getAttribute('style')).toBe('');
 		});
 	});
 

diff --git a/packages/happy-dom/test/nodes/html-element/HTMLElement.test.ts b/packages/happy-dom/test/nodes/html-element/HTMLElement.test.ts
@@ -239,6 +239,34 @@ describe('HTMLElement', () => {
 		});
 	});
 
+	describe('set style()', () => {
+		it('Sets the value of the style.cssText property.', () => {
+			element.style = 'border-radius: 2px; padding: 2px;';
+
+			expect(element.style.cssText).toEqual('border-radius: 2px; padding: 2px;');
+			expect(element.style.borderRadius).toEqual('2px');
+			expect(element.style.padding).toEqual('2px');
+			expect(element.getAttribute('style')).toEqual('border-radius: 2px; padding: 2px;');
+			expect(element.outerHTML).toEqual('<div style="border-radius: 2px; padding: 2px;"></div>');
+
+			element.style = '';
+
+			expect(element.style.cssText).toEqual('');
+			expect(element.style.borderRadius).toEqual('');
+			expect(element.style.padding).toEqual('');
+			expect(element.getAttribute('style')).toEqual('');
+			expect(element.outerHTML).toEqual('<div style=""></div>');
+
+			element.style = null;
+
+			expect(element.style.cssText).toEqual('');
+			expect(element.style.borderRadius).toEqual('');
+			expect(element.style.padding).toEqual('');
+			expect(element.getAttribute('style')).toEqual('');
+			expect(element.outerHTML).toEqual('<div style=""></div>');
+		});
+	});
+
 	describe('get dataset()', () => {
 		it('Returns a Proxy behaving like an object that can add, remove, set and get element attributes prefixed with "data-".', () => {
 			element.setAttribute('test-alpha', 'value1');