diff --git a/packages/happy-dom/src/css/declaration/AbstractCSSStyleDeclaration.ts b/packages/happy-dom/src/css/declaration/AbstractCSSStyleDeclaration.ts index af58ea6ab..22547789d 100644 --- 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 index beb210e7a..2e5c30308 100644 --- 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' ? 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 index f79f8b019..35ab764da 100644 --- 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 index 1d3a13020..ddf4b572d 100644 --- 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 index 9d2053311..b8cb69859 100644 --- 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('
'); + + 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('
'); + + 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('
'); + }); + }); + 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');