Merge pull request #934 from capricorn86/task/932-read-css-vars-with-…

…getcomputedstyle-dont-work #932@patch: Fixes issue where CSS variables where not possible to be …
capricorn86 · May 23, 2023 · 6b49cc3 · 6b49cc3
2 parents 1f30b0d + 693a402
commit 6b49cc3
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 12 deletions.
diff --git a/packages/happy-dom/src/css/declaration/element-style/CSSStyleDeclarationElementStyle.ts b/packages/happy-dom/src/css/declaration/element-style/CSSStyleDeclarationElementStyle.ts
@@ -187,22 +187,19 @@ export default class CSSStyleDeclarationElementStyle {
 			}
 
 			CSSStyleDeclarationCSSParser.parse(elementCSSText, (name, value, important) => {
-				if (name.startsWith('--')) {
-					const cssValue = this.parseCSSVariablesInValue(value, cssVariables);
-					if (cssValue) {
-						cssVariables[name] = cssValue;
-					}
-					return;
-				}
-
+				const isCSSVariable = name.startsWith('--');
 				if (
+					isCSSVariable ||
 					CSSStyleDeclarationElementInheritedProperties[name] ||
 					parentElement === targetElement
 				) {
 					const cssValue = this.parseCSSVariablesInValue(value, cssVariables);
 					if (cssValue && (!propertyManager.get(name)?.important || important)) {
 						propertyManager.set(name, cssValue, important);
-						if (name === 'font' || name === 'font-size') {
+
+						if (isCSSVariable) {
+							cssVariables[name] = cssValue;
+						} else if (name === 'font' || name === 'font-size') {
 							const fontSize = propertyManager.properties['font-size'];
 							if (fontSize !== null) {
 								const parsedValue = this.parseMeasurementsInValue({

diff --git a/packages/happy-dom/test/css/declaration/CSSStyleDeclaration.test.ts b/packages/happy-dom/test/css/declaration/CSSStyleDeclaration.test.ts
@@ -2,17 +2,17 @@ import CSSStyleDeclaration from '../../../src/css/declaration/CSSStyleDeclaratio
 import Window from '../../../src/window/Window';
 import IWindow from '../../../src/window/IWindow';
 import IDocument from '../../../src/nodes/document/IDocument';
-import IElement from '../../../src/nodes/element/IElement';
+import IHTMLElement from '../../../src/nodes/html-element/IHTMLElement';
 
 describe('CSSStyleDeclaration', () => {
 	let window: IWindow;
 	let document: IDocument;
-	let element: IElement;
+	let element: IHTMLElement;
 
 	beforeEach(() => {
 		window = new Window();
 		document = window.document;
-		element = document.createElement('div');
+		element = <IHTMLElement>document.createElement('div');
 	});
 
 	describe(`get {number}()`, () => {
@@ -2721,6 +2721,23 @@ describe('CSSStyleDeclaration', () => {
 			expect(element.getAttribute('style')).toBe('border: 2px solid green; --test-key: value;');
 			expect(declaration.getPropertyValue('--test-key')).toBe('value');
 		});
+
+		it('Can set a CSS variable.', () => {
+			const declaration = new CSSStyleDeclaration(element);
+
+			element.setAttribute('style', `border: 2px solid green;`);
+
+			declaration.setProperty('--test-key', 'value');
+
+			expect(element.getAttribute('style')).toBe('border: 2px solid green; --test-key: value;');
+			expect(declaration.getPropertyValue('--test-key')).toBe('value');
+		});
+
+		it('Can set a CSS variable as element style property.', () => {
+			element.style.setProperty('--test-key', 'value');
+			document.body.appendChild(element);
+			expect(new CSSStyleDeclaration(element, true).getPropertyValue('--test-key')).toBe('value');
+		});
 	});
 
 	describe('removeProperty()', () => {