Update constructor

Author: asamuzaK

lib/CSSStyleDeclaration.js

@@ -22,6 +22,8 @@ const {
 } = require("./parsers");
 const { asciiLowercase } = require("./utils/strings");
 
+const ELEMENT_NODE = 1;
+
 /**
  * @see https://drafts.csswg.org/cssom/#the-cssstyledeclaration-interface
  */
@@ -32,38 +34,39 @@ class CSSStyleDeclaration {
    * @param {object} opt.context - Element or CSSStyleRule
    * @param {string} opt.format - "specifiedValue" or "computedValue"
    * @param {Function} opt.onChange - Callback when cssText is changed or the property is removed
-   * @param {boolean} opt.readOnly - The read-only flag
    */
-  constructor(globalObject = globalThis, opt = {}) {
-    const { context, format, onChange, readOnly, ...styleOpts } = opt;
+  constructor(globalObject, opt = {}) {
+    const { context, format, onChange } = opt;
+    // These help interface with jsdom.
     this._global = globalObject;
+    this._onChange = onChange;
+
+    // These correspond to https://drafts.csswg.org/cssom/#css-declaration-block.
+    this._computed = format === "computedValue";
     this._ownerNode = null;
     this._parentRule = null;
     if (context) {
-      if (context.nodeType === 1) {
+      // The context is an element.
+      if (context.nodeType === ELEMENT_NODE) {
         this._ownerNode = context;
+        // The context is a CSSStyleRule.
       } else if (Object.hasOwn(context, "parentRule")) {
         this._parentRule = context;
       }
     }
-    this._onChange = onChange;
-    this._readonly = readOnly ?? false;
-    this._computed = undefined;
-    const styleOptions = {
-      ...styleOpts
-    };
-    if (format === "computedValue") {
-      this._computed = true;
-      styleOptions.format = format;
-    } else if (format !== "specifiedValue") {
-      // Set the default format value.
-      styleOptions.format = "specifiedValue";
-    }
-    this._options = styleOptions;
+    this._readonly = false;
+    this._updating = false;
+
+    // These correspond to the specification's "declarations".
     this._values = new Map();
     this._priorities = new Map();
     this._length = 0;
-    this._updating = undefined;
+
+    // This is used internally by parsers. e.g. parsers.resolveCalc(), parsers.parseColor(), etc.
+    // Note that options may be updated later to resolve getComputedStyle(). See setOptions() below.
+    this._options = {
+      format: format === "computedValue" ? format : "specifiedValue"
+    };
   }
 
   get cssText() {
@@ -301,10 +304,21 @@ class CSSStyleDeclaration {
    */
   setOptions(opt = {}) {
     for (const [key, value] of Object.entries(opt)) {
-      if (key === "readOnly") {
-        this._readonly = value;
-      } else {
-        this._options[key] = value;
+      switch (key) {
+        case "format": {
+          if (value === "computedValue") {
+            this._computed = true;
+            this._options[key] = value;
+          }
+          break;
+        }
+        case "readOnly": {
+          this._readonly = value === true;
+          break;
+        }
+        default: {
+          this._options[key] = value;
+        }
       }
     }
   }

test/CSSStyleDeclaration.test.js

@@ -71,7 +71,6 @@ describe("CSSStyleDeclaration", () => {
       foo: "bar"
     });
     assert.deepEqual(style._options, {
-      foo: "bar",
       format: "specifiedValue"
     });
   });