diff --git a/lib/CSSStyleDeclaration.js b/lib/CSSStyleDeclaration.js index 0bb9eced..bded9a44 100644 --- a/lib/CSSStyleDeclaration.js +++ b/lib/CSSStyleDeclaration.js @@ -56,6 +56,11 @@ CSSStyleDeclaration.prototype = { this.removeProperty(name); return; } + var isCustomProperty = name.indexOf('--') === 0; + if (isCustomProperty) { + this._setProperty(name, value, priority); + return; + } var lowercaseName = name.toLowerCase(); if (!allProperties.has(lowercaseName) && !allExtraProperties.has(lowercaseName)) { return; diff --git a/lib/CSSStyleDeclaration.test.js b/lib/CSSStyleDeclaration.test.js index a2460360..d0cba231 100644 --- a/lib/CSSStyleDeclaration.test.js +++ b/lib/CSSStyleDeclaration.test.js @@ -518,4 +518,33 @@ describe('CSSStyleDeclaration', () => { expect(0).toEqual(style.length); expect(undefined).toEqual(style[0]); }); + + test('getPropertyValue for custom properties in cssText', () => { + const style = new CSSStyleDeclaration(); + style.cssText = '--foo: red'; + + expect(style.getPropertyValue('--foo')).toEqual('red'); + }); + + test('getPropertyValue for custom properties with setProperty', () => { + const style = new CSSStyleDeclaration(); + style.setProperty('--bar', 'blue'); + + expect(style.getPropertyValue('--bar')).toEqual('blue'); + }); + + test('getPropertyValue for custom properties with object setter', () => { + const style = new CSSStyleDeclaration(); + style['--baz'] = 'yellow'; + + expect(style.getPropertyValue('--baz')).toEqual(''); + }); + + test('custom properties are case-sensitive', () => { + const style = new CSSStyleDeclaration(); + style.cssText = '--fOo: purple'; + + expect(style.getPropertyValue('--foo')).toEqual(''); + expect(style.getPropertyValue('--fOo')).toEqual('purple'); + }); });