fix: ensure priority is set before calling the onchange callback

jsdom · Aug 25, 2022 · 475c294 · 475c294
1 parent b527ed7
commit 475c294
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/lib/CSSStyleDeclaration.js b/lib/CSSStyleDeclaration.js
@@ -59,6 +59,7 @@ CSSStyleDeclaration.prototype = {
     var isCustomProperty = name.indexOf('--') === 0;
     if (isCustomProperty) {
       this._setProperty(name, value, priority);
+      this._onChange(this.cssText);
       return;
     }
     var lowercaseName = name.toLowerCase();
@@ -68,6 +69,7 @@ CSSStyleDeclaration.prototype = {
 
     this[lowercaseName] = value;
     this._importants[lowercaseName] = priority;
+    this._onChange(this.cssText);
   },
   _setProperty: function(name, value, priority) {
     if (value === undefined) {
@@ -91,7 +93,6 @@ CSSStyleDeclaration.prototype = {
     }
     this._values[name] = value;
     this._importants[name] = priority;
-    this._onChange(this.cssText);
   },
 
   /**

diff --git a/lib/CSSStyleDeclaration.test.js b/lib/CSSStyleDeclaration.test.js
@@ -359,6 +359,20 @@ describe('CSSStyleDeclaration', () => {
     style.setProperty('opacity', 0);
   });
 
+  test('onchange callback should be called when priority is specified on a setProperty call', () => {
+    var style = new CSSStyleDeclaration(function(cssText) {
+      expect(cssText).toEqual('opacity: 0 !important;');
+    });
+    style.setProperty('opacity', 0, 'important');
+  });
+
+  test('onchange callback should be called when custom property is set', () => {
+    var style = new CSSStyleDeclaration(function(cssText) {
+      expect(cssText).toEqual('--test-prop: 0;');
+    });
+    style.setProperty('--test-prop', 0);
+  });
+
   test('setting float should work the same as cssfloat', () => {
     var style = new CSSStyleDeclaration();
     style.float = 'left';