diff --git a/lib/StylePropertyMap.js b/lib/StylePropertyMap.js index 27b0631..dac082a 100644 --- a/lib/StylePropertyMap.js +++ b/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: " + // 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; } diff --git a/lib/StylePropertyMap.test.js b/lib/StylePropertyMap.test.js index c972b73..e67ac5c 100644 --- a/lib/StylePropertyMap.test.js +++ b/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)", + // ); + }); });