cssstyle 2.3.0 → 4.0.0

package/README.md

@@ -2,14 +2,14 @@
 
 A Node JS implementation of the CSS Object Model [CSSStyleDeclaration interface](https://www.w3.org/TR/cssom-1/#the-cssstyledeclaration-interface).
 
-[![NpmVersion](https://img.shields.io/npm/v/cssstyle.svg)](https://www.npmjs.com/package/cssstyle) [![Build Status](https://travis-ci.org/jsdom/cssstyle.svg?branch=master)](https://travis-ci.org/jsdom/cssstyle) [![codecov](https://codecov.io/gh/jsdom/cssstyle/branch/master/graph/badge.svg)](https://codecov.io/gh/jsdom/cssstyle)
+[![NpmVersion](https://img.shields.io/npm/v/cssstyle.svg)](https://www.npmjs.com/package/cssstyle) [![Build Status](https://travis-ci.org/jsdom/cssstyle.svg?branch=main)](https://travis-ci.org/jsdom/cssstyle) [![codecov](https://codecov.io/gh/jsdom/cssstyle/branch/main/graph/badge.svg)](https://codecov.io/gh/jsdom/cssstyle)
 
 ---
 
 #### Background
 
-This package is an extension of the CSSStyleDeclaration class in Nikita Vasilyev's [CSSOM](https://github.com/NV/CSSOM) with added support for CSS 2 & 3 properties. The primary use case is for testing browser code in a Node environment. 
+This package is an extension of the CSSStyleDeclaration class in Nikita Vasilyev's [CSSOM](https://github.com/NV/CSSOM) with added support for CSS 2 & 3 properties. The primary use case is for testing browser code in a Node environment.
 
-It was originally created by Chad Walker, it is now maintaind by Jon Sakas and other open source contributors.
+It was originally created by Chad Walker, it is now maintained by the jsdom community.
 
 Bug reports and pull requests are welcome.

package/lib/CSSStyleDeclaration.js

@@ -3,7 +3,7 @@
  * https://github.com/NV/CSSOM
  ********************************************************************/
 'use strict';
-var CSSOM = require('cssom');
+var CSSOM = require('rrweb-cssom');
 var allProperties = require('./allProperties');
 var allExtraProperties = require('./allExtraProperties');
 var implementedProperties = require('./implementedProperties');
@@ -18,11 +18,8 @@ var CSSStyleDeclaration = function CSSStyleDeclaration(onChangeCallback) {
   this._values = {};
   this._importants = {};
   this._length = 0;
-  this._onChange =
-    onChangeCallback ||
-    function() {
-      return;
-    };
+  this._onChange = onChangeCallback;
+  this._setInProgress = false;
 };
 CSSStyleDeclaration.prototype = {
   constructor: CSSStyleDeclaration,
@@ -34,7 +31,7 @@ CSSStyleDeclaration.prototype = {
    * @return {string} the value of the property if it has been explicitly set for this declaration block.
    * Returns the empty string if the property has not been set.
    */
-  getPropertyValue: function(name) {
+  getPropertyValue: function (name) {
     if (!this._values.hasOwnProperty(name)) {
       return '';
     }
@@ -48,7 +45,7 @@ CSSStyleDeclaration.prototype = {
    * @param {string} [priority=null] "important" or null
    * @see http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration-setProperty
    */
-  setProperty: function(name, value, priority) {
+  setProperty: function (name, value, priority) {
     if (value === undefined) {
       return;
     }
@@ -69,7 +66,7 @@ CSSStyleDeclaration.prototype = {
     this[lowercaseName] = value;
     this._importants[lowercaseName] = priority;
   },
-  _setProperty: function(name, value, priority) {
+  _setProperty: function (name, value, priority) {
     if (value === undefined) {
       return;
     }
@@ -77,6 +74,7 @@ CSSStyleDeclaration.prototype = {
       this.removeProperty(name);
       return;
     }
+    var originalText = this.cssText;
     if (this._values[name]) {
       // Property already exist. Overwrite it.
       var index = Array.prototype.indexOf.call(this, name);
@@ -91,7 +89,9 @@ CSSStyleDeclaration.prototype = {
     }
     this._values[name] = value;
     this._importants[name] = priority;
-    this._onChange(this.cssText);
+    if (this._onChange && this.cssText !== originalText && !this._setInProgress) {
+      this._onChange(this.cssText);
+    }
   },
 
   /**
@@ -101,7 +101,7 @@ CSSStyleDeclaration.prototype = {
    * @return {string} the value of the property if it has been explicitly set for this declaration block.
    * Returns the empty string if the property has not been set or the property name does not correspond to a known CSS property.
    */
-  removeProperty: function(name) {
+  removeProperty: function (name) {
     if (!this._values.hasOwnProperty(name)) {
       return '';
     }
@@ -121,7 +121,9 @@ CSSStyleDeclaration.prototype = {
     // That's what Firefox does
     //this[index] = ""
 
-    this._onChange(this.cssText);
+    if (this._onChange) {
+      this._onChange(this.cssText);
+    }
     return prevValue;
   },
 
@@ -129,11 +131,11 @@ CSSStyleDeclaration.prototype = {
    *
    * @param {String} name
    */
-  getPropertyPriority: function(name) {
+  getPropertyPriority: function (name) {
     return this._importants[name] || '';
   },
 
-  getPropertyCSSValue: function() {
+  getPropertyCSSValue: function () {
     //FIXME
     return;
   },
@@ -143,12 +145,12 @@ CSSStyleDeclaration.prototype = {
    *   element.style.getPropertyShorthand("overflow-x")
    *   -> "overflow"
    */
-  getPropertyShorthand: function() {
+  getPropertyShorthand: function () {
     //FIXME
     return;
   },
 
-  isPropertyImplicit: function() {
+  isPropertyImplicit: function () {
     //FIXME
     return;
   },
@@ -156,7 +158,7 @@ CSSStyleDeclaration.prototype = {
   /**
    *   http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration-item
    */
-  item: function(index) {
+  item: function (index) {
     index = parseInt(index, 10);
     if (index < 0 || index >= this._length) {
       return '';
@@ -167,7 +169,7 @@ CSSStyleDeclaration.prototype = {
 
 Object.defineProperties(CSSStyleDeclaration.prototype, {
   cssText: {
-    get: function() {
+    get: function () {
       var properties = [];
       var i;
       var name;
@@ -184,7 +186,7 @@ Object.defineProperties(CSSStyleDeclaration.prototype, {
       }
       return properties.join(' ');
     },
-    set: function(value) {
+    set: function (value) {
       var i;
       this._values = {};
       Array.prototype.splice.call(this, 0, this._length);
@@ -196,6 +198,7 @@ Object.defineProperties(CSSStyleDeclaration.prototype, {
         // malformed css, just return
         return;
       }
+      this._setInProgress = true;
       var rule_length = dummyRule.length;
       var name;
       for (i = 0; i < rule_length; ++i) {
@@ -206,20 +209,23 @@ Object.defineProperties(CSSStyleDeclaration.prototype, {
           dummyRule.getPropertyPriority(name)
         );
       }
-      this._onChange(this.cssText);
+      this._setInProgress = false;
+      if (this._onChange) {
+        this._onChange(this.cssText);
+      }
     },
     enumerable: true,
     configurable: true,
   },
   parentRule: {
-    get: function() {
+    get: function () {
       return null;
     },
     enumerable: true,
     configurable: true,
   },
   length: {
-    get: function() {
+    get: function () {
       return this._length;
     },
     /**
@@ -227,7 +233,7 @@ Object.defineProperties(CSSStyleDeclaration.prototype, {
      * length. If the new length is more, it does nothing, the new indices
      * will be undefined until set.
      **/
-    set: function(value) {
+    set: function (value) {
       var i;
       for (i = value; i < this._length; i++) {
         delete this[i];
@@ -241,7 +247,7 @@ Object.defineProperties(CSSStyleDeclaration.prototype, {
 
 require('./properties')(CSSStyleDeclaration.prototype);
 
-allProperties.forEach(function(property) {
+allProperties.forEach(function (property) {
   if (!implementedProperties.has(property)) {
     var declaration = getBasicPropertyDescriptor(property);
     Object.defineProperty(CSSStyleDeclaration.prototype, property, declaration);
@@ -249,7 +255,7 @@ allProperties.forEach(function(property) {
   }
 });
 
-allExtraProperties.forEach(function(property) {
+allExtraProperties.forEach(function (property) {
   if (!implementedProperties.has(property)) {
     var declaration = getBasicPropertyDescriptor(property);
     Object.defineProperty(CSSStyleDeclaration.prototype, property, declaration);

package/lib/CSSStyleDeclaration.test.js

@@ -10,7 +10,7 @@ var parsers = require('./parsers');
 var dashedProperties = [...allProperties, ...allExtraProperties];
 var allowedProperties = dashedProperties.map(parsers.dashedToCamelCase);
 implementedProperties = Array.from(implementedProperties).map(parsers.dashedToCamelCase);
-var invalidProperties = implementedProperties.filter(prop => !allowedProperties.includes(prop));
+var invalidProperties = implementedProperties.filter((prop) => !allowedProperties.includes(prop));
 
 describe('CSSStyleDeclaration', () => {
   test('has only valid properties implemented', () => {
@@ -19,7 +19,7 @@ describe('CSSStyleDeclaration', () => {
 
   test('has all properties', () => {
     var style = new CSSStyleDeclaration();
-    allProperties.forEach(property => {
+    allProperties.forEach((property) => {
       expect(style.__lookupGetter__(property)).toBeTruthy();
       expect(style.__lookupSetter__(property)).toBeTruthy();
     });
@@ -27,7 +27,7 @@ describe('CSSStyleDeclaration', () => {
 
   test('has dashed properties', () => {
     var style = new CSSStyleDeclaration();
-    dashedProperties.forEach(property => {
+    dashedProperties.forEach((property) => {
       expect(style.__lookupGetter__(property)).toBeTruthy();
       expect(style.__lookupSetter__(property)).toBeTruthy();
     });
@@ -302,7 +302,7 @@ describe('CSSStyleDeclaration', () => {
   test('padding and margin should set/clear shorthand properties', () => {
     var style = new CSSStyleDeclaration();
     var parts = ['Top', 'Right', 'Bottom', 'Left'];
-    var testParts = function(name, v, V) {
+    var testParts = function (name, v, V) {
       style[name] = v;
       for (var i = 0; i < 4; i++) {
         var part = name + parts[i];
@@ -329,7 +329,7 @@ describe('CSSStyleDeclaration', () => {
   test('padding and margin shorthands should set main properties', () => {
     var style = new CSSStyleDeclaration();
     var parts = ['Top', 'Right', 'Bottom', 'Left'];
-    var testParts = function(name, v, V) {
+    var testParts = function (name, v, V) {
       var expected;
       for (var i = 0; i < 4; i++) {
         style[name] = v;
@@ -346,6 +346,114 @@ describe('CSSStyleDeclaration', () => {
     testParts('margin', '1px 2px 3px 4px', 'auto');
   });
 
+  test('setting individual padding and margin properties to an empty string should clear them', () => {
+    var style = new CSSStyleDeclaration();
+
+    var properties = ['padding', 'margin'];
+    var parts = ['Top', 'Right', 'Bottom', 'Left'];
+    for (var i = 0; i < properties.length; i++) {
+      for (var j = 0; j < parts.length; j++) {
+        var property = properties[i] + parts[j];
+        style[property] = '12px';
+        expect(style[property]).toEqual('12px');
+
+        style[property] = '';
+        expect(style[property]).toEqual('');
+      }
+    }
+  });
+
+  test('removing and setting individual margin properties updates the combined property accordingly', () => {
+    var style = new CSSStyleDeclaration();
+    style.margin = '1px 2px 3px 4px';
+
+    style.marginTop = '';
+    expect(style.margin).toEqual('');
+    expect(style.marginRight).toEqual('2px');
+    expect(style.marginBottom).toEqual('3px');
+    expect(style.marginLeft).toEqual('4px');
+
+    style.marginBottom = '';
+    expect(style.margin).toEqual('');
+    expect(style.marginRight).toEqual('2px');
+    expect(style.marginLeft).toEqual('4px');
+
+    style.marginBottom = '5px';
+    expect(style.margin).toEqual('');
+    expect(style.marginRight).toEqual('2px');
+    expect(style.marginBottom).toEqual('5px');
+    expect(style.marginLeft).toEqual('4px');
+
+    style.marginTop = '6px';
+    expect(style.cssText).toEqual('margin: 6px 2px 5px 4px;');
+  });
+
+  test.each(['padding', 'margin'])(
+    'removing an individual %s property should remove the combined property and replace it with the remaining individual ones',
+    (property) => {
+      var style = new CSSStyleDeclaration();
+      var parts = ['Top', 'Right', 'Bottom', 'Left'];
+      var partValues = ['1px', '2px', '3px', '4px'];
+
+      for (var j = 0; j < parts.length; j++) {
+        var partToRemove = parts[j];
+        style[property] = partValues.join(' ');
+        style[property + partToRemove] = '';
+
+        // Main property should have been removed
+        expect(style[property]).toEqual('');
+
+        // Expect other parts to still be there
+        for (var k = 0; k < parts.length; k++) {
+          var propertyCss = property + '-' + parts[k].toLowerCase() + ': ' + partValues[k] + ';';
+          if (k === j) {
+            expect(style[property + parts[k]]).toEqual('');
+            expect(style.cssText).not.toContain(propertyCss);
+          } else {
+            expect(style[property + parts[k]]).toEqual(partValues[k]);
+            expect(style.cssText).toContain(propertyCss);
+          }
+        }
+      }
+    }
+  );
+
+  test.each(['margin', 'padding'])(
+    'setting additional %s properties keeps important status of others',
+    (property) => {
+      var style = new CSSStyleDeclaration();
+      var importantProperty = property + '-top: 3px !important;';
+      style.cssText = importantProperty;
+      expect(style.cssText).toContain(importantProperty);
+
+      style[property + 'Right'] = '4px';
+      style[property + 'Bottom'] = '5px';
+      style[property + 'Left'] = '6px';
+
+      expect(style.cssText).toContain(importantProperty);
+      expect(style.cssText).toContain(property + '-right: 4px;');
+      expect(style.cssText).toContain(property + '-bottom: 5px;');
+      expect(style.cssText).toContain(property + '-left: 6px;');
+      expect(style.cssText).not.toContain('margin:');
+    }
+  );
+
+  test.each(['margin', 'padding'])(
+    'setting individual %s keeps important status of others',
+    (property) => {
+      var style = new CSSStyleDeclaration();
+      style.cssText = property + ': 3px !important;';
+
+      style[property + 'Top'] = '4px';
+
+      expect(style.cssText).toContain(property + '-top: 4px;');
+      expect(style.cssText).toContain(property + '-right: 3px !important;');
+      expect(style.cssText).toContain(property + '-bottom: 3px !important;');
+      expect(style.cssText).toContain(property + '-left: 3px !important;');
+      expect(style.cssText).not.toContain('margin:');
+    }
+  );
+
   test('setting a value to 0 should return the string value', () => {
     var style = new CSSStyleDeclaration();
     style.setProperty('fill-opacity', 0);
@@ -353,10 +461,46 @@ describe('CSSStyleDeclaration', () => {
   });
 
   test('onchange callback should be called when the csstext changes', () => {
-    var style = new CSSStyleDeclaration(function(cssText) {
+    var called = 0;
+    var style = new CSSStyleDeclaration(function (cssText) {
+      called++;
       expect(cssText).toEqual('opacity: 0;');
     });
+    style.cssText = 'opacity: 0;';
+    expect(called).toEqual(1);
+    style.cssText = 'opacity: 0;';
+    expect(called).toEqual(2);
+  });
+
+  test('onchange callback should be called only once when multiple properties were added', () => {
+    var called = 0;
+    var style = new CSSStyleDeclaration(function (cssText) {
+      called++;
+      expect(cssText).toEqual('width: 100px; height: 100px;');
+    });
+    style.cssText = 'width: 100px;height:100px;';
+    expect(called).toEqual(1);
+  });
+
+  test('onchange callback should not be called when property is set to the same value', () => {
+    var called = 0;
+    var style = new CSSStyleDeclaration(function () {
+      called++;
+    });
+
+    style.setProperty('opacity', 0);
+    expect(called).toEqual(1);
     style.setProperty('opacity', 0);
+    expect(called).toEqual(1);
+  });
+
+  test('onchange callback should not be called when removeProperty was called on non-existing property', () => {
+    var called = 0;
+    var style = new CSSStyleDeclaration(function () {
+      called++;
+    });
+    style.removeProperty('opacity');
+    expect(called).toEqual(0);
   });
 
   test('setting float should work the same as cssfloat', () => {
@@ -402,6 +546,43 @@ describe('CSSStyleDeclaration', () => {
     expect(style.marginTop).toEqual('0.5ex');
   });
 
+  test('setting empty string and null to a padding or margin works', () => {
+    var style = new CSSStyleDeclaration();
+    var parts = ['Top', 'Right', 'Bottom', 'Left'];
+    function testParts(base, nullValue) {
+      var props = [base].concat(parts.map((part) => base + part));
+      for (let prop of props) {
+        expect(style[prop]).toEqual('');
+        style[prop] = '10px';
+        expect(style[prop]).toEqual('10px');
+        style[prop] = nullValue;
+        expect(style[prop]).toEqual('');
+      }
+    }
+
+    testParts('margin', '');
+    testParts('margin', null);
+    testParts('padding', '');
+    testParts('padding', null);
+  });
+
+  test('setting undefined to a padding or margin does nothing', () => {
+    var style = new CSSStyleDeclaration();
+    var parts = ['Top', 'Right', 'Bottom', 'Left'];
+    function testParts(base) {
+      var props = [base].concat(parts.map((part) => base + part));
+      for (let prop of props) {
+        style[prop] = '10px';
+        expect(style[prop]).toEqual('10px');
+        style[prop] = undefined;
+        expect(style[prop]).toEqual('10px');
+      }
+    }
+
+    testParts('margin');
+    testParts('padding');
+  });
+
   test('setting null to background works', () => {
     var style = new CSSStyleDeclaration();
     style.background = 'red';

package/lib/allProperties.js

@@ -1,6 +1,6 @@
 'use strict';
 
-// autogenerated - 4/29/2020
+// autogenerated - 1/22/2023
 
 /*
  *
@@ -8,6 +8,8 @@
  */
 
 module.exports = new Set([
+  '-webkit-line-clamp',
+  'accent-color',
   'align-content',
   'align-items',
   'align-self',
@@ -15,15 +17,20 @@ module.exports = new Set([
   'all',
   'animation',
   'animation-delay',
+  'animation-delay-end',
+  'animation-delay-start',
   'animation-direction',
   'animation-duration',
   'animation-fill-mode',
   'animation-iteration-count',
   'animation-name',
   'animation-play-state',
+  'animation-range',
   'animation-timing-function',
   'appearance',
+  'aspect-ratio',
   'azimuth',
+  'backface-visibility',
   'background',
   'background-attachment',
   'background-blend-mode',
@@ -35,7 +42,8 @@ module.exports = new Set([
   'background-repeat',
   'background-size',
   'baseline-shift',
-  'block-overflow',
+  'baseline-source',
+  'block-ellipsis',
   'block-size',
   'bookmark-label',
   'bookmark-level',
@@ -134,7 +142,16 @@ module.exports = new Set([
   'column-width',
   'columns',
   'contain',
+  'contain-intrinsic-block-size',
+  'contain-intrinsic-height',
+  'contain-intrinsic-inline-size',
+  'contain-intrinsic-size',
+  'contain-intrinsic-width',
+  'container',
+  'container-name',
+  'container-type',
   'content',
+  'content-visibility',
   'continue',
   'counter-increment',
   'counter-reset',
@@ -218,9 +235,9 @@ module.exports = new Set([
   'image-orientation',
   'image-rendering',
   'image-resolution',
-  'initial-letters',
-  'initial-letters-align',
-  'initial-letters-wrap',
+  'initial-letter',
+  'initial-letter-align',
+  'initial-letter-wrap',
   'inline-size',
   'inline-sizing',
   'inset',
@@ -234,6 +251,7 @@ module.exports = new Set([
   'justify-content',
   'justify-items',
   'justify-self',
+  'leading-trim',
   'left',
   'letter-spacing',
   'lighting-color',
@@ -258,6 +276,7 @@ module.exports = new Set([
   'margin-left',
   'margin-right',
   'margin-top',
+  'margin-trim',
   'marker-side',
   'mask',
   'mask-border',
@@ -284,6 +303,7 @@ module.exports = new Set([
   'min-block-size',
   'min-height',
   'min-inline-size',
+  'min-intrinsic-sizing',
   'min-width',
   'mix-blend-mode',
   'nav-down',
@@ -293,15 +313,11 @@ module.exports = new Set([
   'object-fit',
   'object-position',
   'offset',
-  'offset-after',
   'offset-anchor',
-  'offset-before',
   'offset-distance',
-  'offset-end',
   'offset-path',
   'offset-position',
   'offset-rotate',
-  'offset-start',
   'opacity',
   'order',
   'orphans',
@@ -311,7 +327,19 @@ module.exports = new Set([
   'outline-style',
   'outline-width',
   'overflow',
+  'overflow-anchor',
   'overflow-block',
+  'overflow-clip-margin',
+  'overflow-clip-margin-block',
+  'overflow-clip-margin-block-end',
+  'overflow-clip-margin-block-start',
+  'overflow-clip-margin-bottom',
+  'overflow-clip-margin-inline',
+  'overflow-clip-margin-inline-end',
+  'overflow-clip-margin-inline-start',
+  'overflow-clip-margin-left',
+  'overflow-clip-margin-right',
+  'overflow-clip-margin-top',
   'overflow-inline',
   'overflow-wrap',
   'overflow-x',
@@ -334,6 +362,8 @@ module.exports = new Set([
   'pause',
   'pause-after',
   'pause-before',
+  'perspective',
+  'perspective-origin',
   'pitch',
   'pitch-range',
   'place-content',
@@ -341,6 +371,7 @@ module.exports = new Set([
   'place-self',
   'play-during',
   'position',
+  'print-color-adjust',
   'quotes',
   'region-fragment',
   'resize',
@@ -349,11 +380,14 @@ module.exports = new Set([
   'rest-before',
   'richness',
   'right',
+  'rotate',
   'row-gap',
   'ruby-align',
   'ruby-merge',
+  'ruby-overhang',
   'ruby-position',
   'running',
+  'scale',
   'scroll-behavior',
   'scroll-margin',
   'scroll-margin-block',
@@ -380,6 +414,12 @@ module.exports = new Set([
   'scroll-snap-align',
   'scroll-snap-stop',
   'scroll-snap-type',
+  'scroll-timeline',
+  'scroll-timeline-axis',
+  'scroll-timeline-name',
+  'scrollbar-color',
+  'scrollbar-gutter',
+  'scrollbar-width',
   'shape-image-threshold',
   'shape-inside',
   'shape-margin',
@@ -404,10 +444,19 @@ module.exports = new Set([
   'text-decoration',
   'text-decoration-color',
   'text-decoration-line',
+  'text-decoration-skip',
+  'text-decoration-skip-box',
+  'text-decoration-skip-ink',
+  'text-decoration-skip-inset',
+  'text-decoration-skip-self',
+  'text-decoration-skip-spaces',
   'text-decoration-style',
+  'text-decoration-thickness',
+  'text-edge',
   'text-emphasis',
   'text-emphasis-color',
   'text-emphasis-position',
+  'text-emphasis-skip',
   'text-emphasis-style',
   'text-group-align',
   'text-indent',
@@ -419,20 +468,28 @@ module.exports = new Set([
   'text-space-trim',
   'text-spacing',
   'text-transform',
+  'text-underline-offset',
   'text-underline-position',
   'text-wrap',
   'top',
   'transform',
   'transform-box',
   'transform-origin',
+  'transform-style',
   'transition',
   'transition-delay',
   'transition-duration',
   'transition-property',
   'transition-timing-function',
+  'translate',
   'unicode-bidi',
   'user-select',
   'vertical-align',
+  'view-timeline',
+  'view-timeline-axis',
+  'view-timeline-inset',
+  'view-timeline-name',
+  'view-transition-name',
   'visibility',
   'voice-balance',
   'voice-duration',