Update normalize.js

Author: asamuzaK

lib/normalize.js

@@ -16,8 +16,16 @@ const font = require("./properties/font");
 const margin = require("./properties/margin");
 const padding = require("./properties/padding");
 
+const BACKGROUND = "background"
 const BORDER = "border";
+const BORDER_BOTTOM = "border-bottom";
+const BORDER_COLOR = "border-color";
 const BORDER_IMAGE = "border-image";
+const BORDER_LEFT = "border-left";
+const BORDER_RIGHT = "border-right";
+const BORDER_STYLE = "border-style";
+const BORDER_TOP = "border-top";
+const BORDER_WIDTH = "border-width";
 const TOP = "top";
 const RIGHT = "right";
 const BOTTOM = "bottom";
@@ -28,7 +36,7 @@ const COLOR = "color";
 const NONE = "none";
 
 const shorthandProperties = new Map([
-  ["background", background],
+  [BACKGROUND, background],
   [
     BORDER,
     {
@@ -41,13 +49,13 @@ const shorthandProperties = new Map([
       ])
     }
   ],
-  ["border-width", borderWidth],
-  ["border-style", borderStyle],
-  ["border-color", borderColor],
-  ["border-top", borderTop],
-  ["border-right", borderRight],
-  ["border-bottom", borderBottom],
-  ["border-left", borderLeft],
+  [BORDER_WIDTH, borderWidth],
+  [BORDER_STYLE, borderStyle],
+  [BORDER_COLOR, borderColor],
+  [BORDER_TOP, borderTop],
+  [BORDER_RIGHT, borderRight],
+  [BORDER_BOTTOM, borderBottom],
+  [BORDER_LEFT, borderLeft],
   ["flex", flex],
   ["font", font],
   ["margin", margin],
@@ -970,45 +978,45 @@ const prepareBorderShorthands = (properties) => {
     }
   }
   if (lineWidthItems.size === 4) {
-    const [property, item] = generateBorderLineShorthand(lineWidthItems, "border-width") ?? [];
+    const [property, item] = generateBorderLineShorthand(lineWidthItems, BORDER_WIDTH) ?? [];
     if (property && item) {
       properties.set(property, item);
     }
   } else if (lineWidthPriorItems.size === 4) {
     const [property, item] =
-      generateBorderLineShorthand(lineWidthPriorItems, "border-width", "important") ?? [];
+      generateBorderLineShorthand(lineWidthPriorItems, BORDER_WIDTH, "important") ?? [];
     if (property && item) {
       properties.set(property, item);
     }
   }
   if (lineStyleItems.size === 4) {
-    const [property, item] = generateBorderLineShorthand(lineStyleItems, "border-style") ?? [];
+    const [property, item] = generateBorderLineShorthand(lineStyleItems, BORDER_STYLE) ?? [];
     if (property && item) {
       properties.set(property, item);
     }
   } else if (lineStylePriorItems.size === 4) {
     const [property, item] =
-      generateBorderLineShorthand(lineStylePriorItems, "border-style", "important") ?? [];
+      generateBorderLineShorthand(lineStylePriorItems, BORDER_STYLE, "important") ?? [];
     if (property && item) {
       properties.set(property, item);
     }
   }
   if (lineColorItems.size === 4) {
-    const [property, item] = generateBorderLineShorthand(lineColorItems, "border-color") ?? [];
+    const [property, item] = generateBorderLineShorthand(lineColorItems, BORDER_COLOR) ?? [];
     if (property && item) {
       properties.set(property, item);
     }
   } else if (lineColorPriorItems.size === 4) {
     const [property, item] =
-      generateBorderLineShorthand(lineColorPriorItems, "border-color", "important") ?? [];
+      generateBorderLineShorthand(lineColorPriorItems, BORDER_COLOR, "important") ?? [];
     if (property && item) {
       properties.set(property, item);
     }
   }
   const nameItems = [];
   const namePriorItems = [];
   if (positionTopItems.size === 3) {
-    const [property, item] = generateBorderPositionShorthand(positionTopItems, "border-top") ?? [];
+    const [property, item] = generateBorderPositionShorthand(positionTopItems, BORDER_TOP) ?? [];
     if (property && item) {
       properties.set(property, item);
       if (properties.has(BORDER_IMAGE)) {
@@ -1021,7 +1029,7 @@ const prepareBorderShorthands = (properties) => {
     }
   } else if (positionTopPriorItems.size === 3) {
     const [property, item] =
-      generateBorderPositionShorthand(positionTopPriorItems, "border-top", "important") ?? [];
+      generateBorderPositionShorthand(positionTopPriorItems, BORDER_TOP, "important") ?? [];
     if (property && item) {
       properties.set(property, item);
       if (properties.has(BORDER_IMAGE)) {
@@ -1035,7 +1043,7 @@ const prepareBorderShorthands = (properties) => {
   }
   if (positionRightItems.size === 3) {
     const [property, item] =
-      generateBorderPositionShorthand(positionRightItems, "border-right") ?? [];
+      generateBorderPositionShorthand(positionRightItems, BORDER_RIGHT) ?? [];
     if (property && item) {
       properties.set(property, item);
       if (properties.has(BORDER_IMAGE)) {
@@ -1048,7 +1056,7 @@ const prepareBorderShorthands = (properties) => {
     }
   } else if (positionRightPriorItems.size === 3) {
     const [property, item] =
-      generateBorderPositionShorthand(positionRightPriorItems, "border-right", "important") ?? [];
+      generateBorderPositionShorthand(positionRightPriorItems, BORDER_RIGHT, "important") ?? [];
     if (property && item) {
       properties.set(property, item);
       if (properties.has(BORDER_IMAGE)) {
@@ -1062,7 +1070,7 @@ const prepareBorderShorthands = (properties) => {
   }
   if (positionBottomItems.size === 3) {
     const [property, item] =
-      generateBorderPositionShorthand(positionBottomItems, "border-bottom") ?? [];
+      generateBorderPositionShorthand(positionBottomItems, BORDER_BOTTOM) ?? [];
     if (property && item) {
       properties.set(property, item);
       if (properties.has(BORDER_IMAGE)) {
@@ -1075,7 +1083,7 @@ const prepareBorderShorthands = (properties) => {
     }
   } else if (positionBottomPriorItems.size === 3) {
     const [property, item] =
-      generateBorderPositionShorthand(positionBottomPriorItems, "border-bottom", "important") ?? [];
+      generateBorderPositionShorthand(positionBottomPriorItems, BORDER_BOTTOM, "important") ?? [];
     if (property && item) {
       properties.set(property, item);
       if (properties.has(BORDER_IMAGE)) {
@@ -1089,7 +1097,7 @@ const prepareBorderShorthands = (properties) => {
   }
   if (positionLeftItems.size === 3) {
     const [property, item] =
-      generateBorderPositionShorthand(positionLeftItems, "border-left") ?? [];
+      generateBorderPositionShorthand(positionLeftItems, BORDER_LEFT) ?? [];
     if (property && item) {
       properties.set(property, item);
       if (properties.has(BORDER_IMAGE)) {
@@ -1102,7 +1110,7 @@ const prepareBorderShorthands = (properties) => {
     }
   } else if (positionLeftPriorItems.size === 3) {
     const [property, item] =
-      generateBorderPositionShorthand(positionLeftPriorItems, "border-left", "important") ?? [];
+      generateBorderPositionShorthand(positionLeftPriorItems, BORDER_LEFT, "important") ?? [];
     if (property && item) {
       properties.set(property, item);
       if (properties.has(BORDER_IMAGE)) {
@@ -1248,7 +1256,13 @@ const prepareProperties = (properties, opt = {}) => {
         }
       }
       if (!omitShorthandProperty) {
-        parsedProperties.set(property, { property, value, priority });
+        if (property === BACKGROUND) {
+          if (priority) {
+            parsedProperties.set(property, { property, value, priority });
+          }
+        } else {
+          parsedProperties.set(property, { property, value, priority });
+        }
       }
     } else {
       parsedProperties.set(property, { property, value, priority });

test/CSSStyleProperties.test.js

@@ -1525,3 +1525,11 @@ describe("regression test for https://github.com/jsdom/cssstyle/issues/214", ()
     assert.strictEqual(style.getPropertyPriority("word-spacing"), "important", "priority");
   });
 });
+
+describe("regression test for https://github.com/jsdom/jsdom/issues/3944", () => {
+  it("should get overwritten value", () => {
+    const style = new CSSStyleProperties();
+    style.cssText = "background:linear-gradient(rgb(0 0 255 / 0.5), rgb(255 255 0 / 0.5)) center center;background-position:top;";
+    assert.strictEqual(style.backgroundPosition, "center top");
+  });
+});