Enhance CSSStyleDeclaration constructor options

Author: asamuzaK

lib/CSSStyleDeclaration.js

@@ -23,46 +23,46 @@ class CSSStyleDeclaration {
   /**
    * Creates a new CSSStyleDeclaration instance.
    *
+   * TODO: constructor(globalObject, args, { computed, context, ... })
    * @param {Function} [onChangeCallback] - Callback triggered when style changes.
    * @param {object} [opt] - Options.
-   * @param {object} [opt.context] - The context object (Window, Element, or CSSRule).
+   * @param {boolean} [opt.computed] - The computed flag.
+   * @param {object} [opt.context] - The context object (Element, or CSSRule).
+   * @param {object} [opt.globalObject] - The global object, i.e.) Window.
+   * @param {number} [opt.fontSizeMedium] - The medium font size in pixels.
+   * @param {object} [opt.systemColors] - The system colors.
    */
-  constructor(onChangeCallback, { context } = {}) {
-    // Internals for jsdom
-    this._global = globalThis;
+  constructor(onChangeCallback, { computed, context, globalObject, fontSizeMedium, systemColors } = {}) {
+    // Internals for jsdom.
+    // TODO: Remove globalThis fallback.
+    this._global = globalObject ?? globalThis;
     this._onChange = onChangeCallback;
+    this._fontSizeMedium = fontSizeMedium;
+    this._systemColors = systemColors;
 
-    // Internals for CSS declaration block
+    // Internals for CSS declaration block.
     // @see https://drafts.csswg.org/cssom/#css-declaration-blocks
-    this._computed = false;
+    this._computed = Boolean(computed);
     this._ownerNode = null;
     this._parentRule = null;
     this._readonly = false;
     this._updating = false;
 
-    // Other internals
+    // Other internals.
     this._length = 0;
     this._propertyIndices = new Map();
     this._priorities = new Map();
     this._values = new Map();
 
+    // Options for computed style.
+    // TODO: Add private method to prepare options.
+    this._computedStyleOpts = null;
+
     if (context) {
-      if (typeof context.getComputedStyle === "function") {
-        this._global = context;
-        this._computed = true;
-        // FIXME: The `_readonly` flag should initially be `false` to be editable,
-        // but should eventually be set to `true`.
-        // this._readonly = true;
-      } else if (context.nodeType === 1 && Object.hasOwn(context, "style")) {
-        this._global = context.ownerDocument.defaultView;
+      if (context.nodeType === 1) {
         this._ownerNode = context;
       } else if (Object.hasOwn(context, "parentRule")) {
         this._parentRule = context;
-        // Find Window from the owner node of the StyleSheet.
-        const window = context?.parentStyleSheet?.ownerNode?.ownerDocument?.defaultView;
-        if (window) {
-          this._global = window;
-        }
       }
     }
   }
@@ -318,7 +318,7 @@ class CSSStyleDeclaration {
       this.removeProperty(property);
       return;
     }
-    // Custom property
+    // Custom property.
     if (property.startsWith("--")) {
       this._setProperty(property, value, priority);
       return;