Implements StylePropertyMap append

Author: tylergaw

lib/StylePropertyMap.js

@@ -19,9 +19,37 @@ export default class StylePropertyMap extends StylePropertyMapReadOnly {
    * @param {string} value
    * @returns {undefined}
    * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/StylePropertyMap/append}
-   * @todo Implement
+   * @see {@link https://drafts.css-houdini.org/css-typed-om/#dom-stylepropertymap-append}
+   * @todo implement
    */
-  append() {
+  append(propertyName = null, propertyValue = null) {
+    if (!propertyName || !propertyValue) {
+      throw new TypeError(
+        `Failed to execute 'set' on 'StylePropertyMap': propertyName and propertyValue arguments are required.`,
+      );
+    }
+
+    if (Array.isArray(propertyValue)) {
+      if (propertyValue.length === 0) {
+        throw new TypeError(
+          `Failed to execute 'append' on 'StylePropertyMap': Invalid type for property`,
+        );
+      }
+    }
+
+    // 1. If property is not a custom property name string, set property to property ASCII lowercased.
+    const isCustomProp = propertyName.startsWith("--");
+    // TODO: Handle custom property scenario
+    const prop = !isCustomProp ? propertyName.toLowerCase() : propertyName;
+    console.log(prop);
+
+    // TODO: 2. If property is not a valid CSS property, throw a TypeError with:
+    // "Failed to execute 'append' on 'StylePropertyMap': Invalid propertyName: <propertyName>"
+    // TODO: 3. If property is not a list-valued property, throw a TypeError with:
+    // "Failed to execute 'append' on 'StylePropertyMap': Property does not support multiple values"
+    // TODO: 4. If any of the items in values have a non-null [[associatedProperty]] internal slot, and that slot’s value is anything other than property, throw a TypeError.
+    // TODO: 5. If any of the items in values are a CSSUnparsedValue or CSSVariableReferenceValue object, throw a TypeError.
+
     console.warn("StylePropertyMap.append not implemented yet.");
     return undefined;
   }

lib/StylePropertyMap.test.js

@@ -12,6 +12,7 @@ import StylePropertyMap, {
 describe("class StylePropertyMap", () => {
   const mockStyles = {
     background: "red",
+    "background-image": "url(/path/to/url.jpg)",
     color: "#1f1f1f",
     width: "500px",
   };
@@ -31,7 +32,7 @@ describe("class StylePropertyMap", () => {
   });
 
   it("the size property returns as expected", () => {
-    assert.equal(styleMapInstance.size, 3);
+    assert.equal(styleMapInstance.size, 4);
   });
 
   it("#has returns true when a property exists", () => {
@@ -110,4 +111,38 @@ describe("class StylePropertyMap", () => {
       assert.equal(expected.includes(val.toString()), true);
     }
   });
+
+  it("#append throws without required arguments", () => {
+    assert.throws(() => {
+      styleMapInstance.append();
+    }, TypeError);
+
+    assert.throws(() => {
+      styleMapInstance.append("background-image");
+    }, TypeError);
+
+    assert.throws(() => {
+      styleMapInstance.append("background-image", []);
+    }, TypeError);
+  });
+
+  it("#append adds the expected property and value", () => {
+    // Check the initial value that should have a single background image.
+    assert.equal(
+      styleMapInstance.get("background-image"),
+      "url(/path/to/url.jpg)",
+    );
+
+    // Append the new background image
+    styleMapInstance.append(
+      "background-image",
+      "linear-gradient(90deg, red, blue)",
+    );
+
+    // Check that the second background image has been appended
+    // assert.equal(
+    //   styleMapInstance.get("background-image"),
+    //   "url(/path/to/url.jpg) linear-gradient(90deg, red, blue)",
+    // );
+  });
 });