happy-dom 14.12.3 → 15.0.0

package/cjs/css/declaration/property-manager/CSSStyleDeclarationPropertySetParser.cjs

@@ -5,7 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const CSSStyleDeclarationValueParser_js_1 = __importDefault(require("./CSSStyleDeclarationValueParser.cjs"));
 const RECT_REGEXP = /^rect\((.*)\)$/i;
-const SPLIT_PARTS_REGEXP = /,(?=(?:(?:(?!\))[\s\S])*\()|[^\(\)]*$)/; // Split on commas that are outside of parentheses
+const SPLIT_COMMA_SEPARATED_REGEXP = /,(?=(?:(?:(?!\))[\s\S])*\()|[^\(\)]*$)/; // Split on commas that are outside of parentheses
+const SPLIT_SPACE_SEPARATED_REGEXP = /\s+(?=(?:(?:(?!\))[\s\S])*\()|[^\(\)]*$)/; // Split on spaces that are outside of parentheses
 const BORDER_STYLE = [
     'none',
     'hidden',
@@ -378,7 +379,7 @@ class CSSStyleDeclarationPropertySetParser {
             ...this.getOutlineStyle('initial', important),
             ...this.getOutlineWidth('initial', important)
         };
-        const parts = value.split(/ +/);
+        const parts = value.split(SPLIT_SPACE_SEPARATED_REGEXP);
         for (const part of parts) {
             const width = this.getOutlineWidth(part, important);
             const style = this.getOutlineStyle(part, important);
@@ -489,7 +490,7 @@ class CSSStyleDeclarationPropertySetParser {
             ...this.getBorderColor('initial', important),
             ...this.getBorderImage('initial', important)
         };
-        const parts = value.replace(/ *, */g, ',').split(/ +/);
+        const parts = value.replace(/\s*,\s*/g, ',').split(SPLIT_SPACE_SEPARATED_REGEXP);
         for (const part of parts) {
             const width = this.getBorderWidth(part, important);
             const style = this.getBorderStyle(part, important);
@@ -522,7 +523,7 @@ class CSSStyleDeclarationPropertySetParser {
                 ...this.getBorderLeftWidth(globalValue, important)
             };
         }
-        const parts = value.split(/ +/);
+        const parts = value.split(SPLIT_SPACE_SEPARATED_REGEXP);
         const top = this.getBorderTopWidth(parts[0], important);
         const right = this.getBorderRightWidth(parts[1] || parts[0], important);
         const bottom = this.getBorderBottomWidth(parts[2] || parts[0], important);
@@ -558,7 +559,7 @@ class CSSStyleDeclarationPropertySetParser {
                 ...this.getBorderLeftStyle(globalValue, important)
             };
         }
-        const parts = value.split(/ +/);
+        const parts = value.split(SPLIT_SPACE_SEPARATED_REGEXP);
         const top = this.getBorderTopStyle(parts[0], important);
         const right = this.getBorderRightStyle(parts[1] || parts[0], important);
         const bottom = this.getBorderBottomStyle(parts[2] || parts[0], important);
@@ -594,7 +595,7 @@ class CSSStyleDeclarationPropertySetParser {
                 ...this.getBorderLeftColor(globalValue, important)
             };
         }
-        const parts = value.split(/ +/);
+        const parts = value.split(SPLIT_SPACE_SEPARATED_REGEXP);
         const top = this.getBorderTopColor(parts[0], important);
         const right = this.getBorderRightColor(parts[1] || parts[0], important);
         const bottom = this.getBorderBottomColor(parts[2] || parts[0], important);
@@ -631,12 +632,12 @@ class CSSStyleDeclarationPropertySetParser {
                 ...this.getBorderImageRepeat(globalValue, important)
             };
         }
-        let parsedValue = value.replace(/[ ]*\/[ ]*/g, '/');
-        const sourceMatch = parsedValue.match(/ *([a-zA-Z-]+\([^)]*\)) */);
+        let parsedValue = value.replace(/\s\/\s/g, '/');
+        const sourceMatch = parsedValue.match(/\s*([a-zA-Z-]+\([^)]*\))\s*/);
         if (sourceMatch) {
             parsedValue = parsedValue.replace(sourceMatch[0], '');
         }
-        const parts = parsedValue.split(/ +/);
+        const parts = parsedValue.split(SPLIT_SPACE_SEPARATED_REGEXP);
         if (sourceMatch) {
             parts.push(sourceMatch[1]);
         }
@@ -781,7 +782,7 @@ class CSSStyleDeclarationPropertySetParser {
                 }
             };
         }
-        const parts = lowerValue.split(/ +/);
+        const parts = lowerValue.split(SPLIT_SPACE_SEPARATED_REGEXP);
         if (parts.length > 4) {
             return null;
         }
@@ -806,6 +807,14 @@ class CSSStyleDeclarationPropertySetParser {
      * @returns Property values
      */
     static getBorderImageOutset(value, important) {
+        if (value === '0') {
+            return {
+                'border-image-outset': {
+                    important,
+                    value
+                }
+            };
+        }
         const variable = CSSStyleDeclarationValueParser_js_1.default.getVariable(value);
         if (variable) {
             return { 'border-image-outset': { value: variable, important } };
@@ -819,20 +828,23 @@ class CSSStyleDeclarationPropertySetParser {
                 }
             };
         }
-        const parts = value.split(/ +/);
+        const parts = value.split(SPLIT_SPACE_SEPARATED_REGEXP);
         if (parts.length > 4) {
             return null;
         }
+        const newParts = [];
         for (const part of parts) {
-            if (!CSSStyleDeclarationValueParser_js_1.default.getLength(part) &&
-                !CSSStyleDeclarationValueParser_js_1.default.getFloat(part)) {
+            const parsedValue = CSSStyleDeclarationValueParser_js_1.default.getLength(part) ||
+                CSSStyleDeclarationValueParser_js_1.default.getFloat(part);
+            if (!parsedValue) {
                 return null;
             }
+            newParts.push(parsedValue === '0px' ? '0' : parsedValue);
         }
         return {
             'border-image-outset': {
                 important,
-                value
+                value: newParts.join(' ')
             }
         };
     }
@@ -857,7 +869,7 @@ class CSSStyleDeclarationPropertySetParser {
                 }
             };
         }
-        const parts = lowerValue.split(/ +/);
+        const parts = lowerValue.split(SPLIT_SPACE_SEPARATED_REGEXP);
         if (parts.length > 2) {
             return null;
         }
@@ -1146,7 +1158,7 @@ class CSSStyleDeclarationPropertySetParser {
                 ...this.getBorderBottomLeftRadius(globalValue, important)
             };
         }
-        const parts = value.split(/ +/);
+        const parts = value.split(SPLIT_SPACE_SEPARATED_REGEXP);
         const topLeft = this.getBorderTopLeftRadius(parts[0], important);
         const topRight = this.getBorderTopRightRadius(parts[1] || parts[0], important);
         const bottomRight = this.getBorderBottomRightRadius(parts[2] || parts[0], important);
@@ -1250,7 +1262,7 @@ class CSSStyleDeclarationPropertySetParser {
             ...this.getBorderTopStyle('initial', important),
             ...this.getBorderTopColor('initial', important)
         };
-        const parts = value.split(/ +/);
+        const parts = value.split(SPLIT_SPACE_SEPARATED_REGEXP);
         for (const part of parts) {
             const width = this.getBorderTopWidth(part, important);
             const style = this.getBorderTopStyle(part, important);
@@ -1287,7 +1299,7 @@ class CSSStyleDeclarationPropertySetParser {
             ...this.getBorderRightStyle('initial', important),
             ...this.getBorderRightColor('initial', important)
         };
-        const parts = value.split(/ +/);
+        const parts = value.split(SPLIT_SPACE_SEPARATED_REGEXP);
         for (const part of parts) {
             const width = this.getBorderRightWidth(part, important);
             const style = this.getBorderRightStyle(part, important);
@@ -1324,7 +1336,7 @@ class CSSStyleDeclarationPropertySetParser {
             ...this.getBorderBottomStyle('initial', important),
             ...this.getBorderBottomColor('initial', important)
         };
-        const parts = value.split(/ +/);
+        const parts = value.split(SPLIT_SPACE_SEPARATED_REGEXP);
         for (const part of parts) {
             const width = this.getBorderBottomWidth(part, important);
             const style = this.getBorderBottomStyle(part, important);
@@ -1361,7 +1373,7 @@ class CSSStyleDeclarationPropertySetParser {
             ...this.getBorderLeftStyle('initial', important),
             ...this.getBorderLeftColor('initial', important)
         };
-        const parts = value.split(/ +/);
+        const parts = value.split(SPLIT_SPACE_SEPARATED_REGEXP);
         for (const part of parts) {
             const width = this.getBorderLeftWidth(part, important);
             const style = this.getBorderLeftStyle(part, important);
@@ -1393,7 +1405,7 @@ class CSSStyleDeclarationPropertySetParser {
                 ...this.getPaddingLeft(globalValue, important)
             };
         }
-        const parts = value.split(/ +/);
+        const parts = value.split(SPLIT_SPACE_SEPARATED_REGEXP);
         const top = this.getPaddingTop(parts[0], important);
         const right = this.getPaddingRight(parts[1] || parts[0], important);
         const bottom = this.getPaddingBottom(parts[2] || parts[0], important);
@@ -1493,7 +1505,7 @@ class CSSStyleDeclarationPropertySetParser {
                 ...this.getMarginLeft(globalValue, important)
             };
         }
-        const parts = value.split(/ +/);
+        const parts = value.split(SPLIT_SPACE_SEPARATED_REGEXP);
         const top = this.getMarginTop(parts[0], important);
         const right = this.getMarginRight(parts[1] || parts[0], important);
         const bottom = this.getMarginBottom(parts[2] || parts[0], important);
@@ -1615,7 +1627,7 @@ class CSSStyleDeclarationPropertySetParser {
                 ...this.getFlexBasis(measurement, important)
             };
         }
-        const parts = value.split(/ +/);
+        const parts = value.split(SPLIT_SPACE_SEPARATED_REGEXP);
         const flexGrow = this.getFlexGrow(parts[0], important);
         const flexShrink = this.getFlexShrink(parts[1] || '1', important);
         const flexBasis = this.getFlexBasis(parts[2] || '0%', important);
@@ -1716,9 +1728,9 @@ class CSSStyleDeclarationPropertySetParser {
             ...this.getBackgroundColor('initial', important)
         };
         const parts = value
-            .replace(/[ ]*,[ ]*/g, ',')
-            .replace(/[ ]*\/[ ]*/g, '/')
-            .split(/ +/);
+            .replace(/\s,\s/g, ',')
+            .replace(/\s\/\s/g, '/')
+            .split(SPLIT_SPACE_SEPARATED_REGEXP);
         const backgroundPositions = [];
         for (const part of parts) {
             if (!part.startsWith('url') && part.includes('/')) {
@@ -1786,7 +1798,7 @@ class CSSStyleDeclarationPropertySetParser {
         if (CSSStyleDeclarationValueParser_js_1.default.getGlobal(lowerValue)) {
             return { 'background-size': { value: lowerValue, important } };
         }
-        const imageParts = lowerValue.split(SPLIT_PARTS_REGEXP);
+        const imageParts = lowerValue.split(SPLIT_COMMA_SEPARATED_REGEXP);
         const parsed = [];
         for (const imagePart of imageParts) {
             const parts = imagePart.trim().split(' ');
@@ -1909,11 +1921,11 @@ class CSSStyleDeclarationPropertySetParser {
                 ...this.getBackgroundPositionY(globalValue, important)
             };
         }
-        const imageParts = value.split(SPLIT_PARTS_REGEXP);
+        const imageParts = value.split(SPLIT_COMMA_SEPARATED_REGEXP);
         let x = '';
         let y = '';
         for (const imagePart of imageParts) {
-            const parts = imagePart.trim().split(/ +/);
+            const parts = imagePart.trim().split(SPLIT_SPACE_SEPARATED_REGEXP);
             if (x) {
                 x += ',';
                 y += ',';
@@ -2010,10 +2022,10 @@ class CSSStyleDeclarationPropertySetParser {
         if (CSSStyleDeclarationValueParser_js_1.default.getGlobal(lowerValue)) {
             return { 'background-position-x': { value: lowerValue, important } };
         }
-        const imageParts = lowerValue.split(SPLIT_PARTS_REGEXP);
+        const imageParts = lowerValue.split(SPLIT_COMMA_SEPARATED_REGEXP);
         let parsedValue = '';
         for (const imagePart of imageParts) {
-            const parts = imagePart.trim().split(/ +/);
+            const parts = imagePart.trim().split(SPLIT_SPACE_SEPARATED_REGEXP);
             if (parsedValue) {
                 parsedValue += ',';
             }
@@ -2046,10 +2058,10 @@ class CSSStyleDeclarationPropertySetParser {
         if (CSSStyleDeclarationValueParser_js_1.default.getGlobal(lowerValue)) {
             return { 'background-position-y': { value: lowerValue, important } };
         }
-        const imageParts = lowerValue.split(SPLIT_PARTS_REGEXP);
+        const imageParts = lowerValue.split(SPLIT_COMMA_SEPARATED_REGEXP);
         let parsedValue = '';
         for (const imagePart of imageParts) {
-            const parts = imagePart.trim().split(/ +/);
+            const parts = imagePart.trim().split(SPLIT_SPACE_SEPARATED_REGEXP);
             if (parsedValue) {
                 parsedValue += ',';
             }
@@ -2102,14 +2114,15 @@ class CSSStyleDeclarationPropertySetParser {
         if (CSSStyleDeclarationValueParser_js_1.default.getGlobal(lowerValue) || lowerValue === 'none') {
             return { 'background-image': { value: lowerValue, important } };
         }
-        const parts = value.split(SPLIT_PARTS_REGEXP);
+        const parts = value.split(SPLIT_COMMA_SEPARATED_REGEXP);
         const parsed = [];
         for (const part of parts) {
-            const url = CSSStyleDeclarationValueParser_js_1.default.getURL(part.trim());
-            if (!url) {
+            const parsedValue = CSSStyleDeclarationValueParser_js_1.default.getURL(part.trim()) ||
+                CSSStyleDeclarationValueParser_js_1.default.getGradient(part.trim());
+            if (!parsedValue) {
                 return null;
             }
-            parsed.push(url);
+            parsed.push(parsedValue);
         }
         if (parsed.length) {
             return { 'background-image': { value: parsed.join(', '), important } };
@@ -2182,7 +2195,7 @@ class CSSStyleDeclarationPropertySetParser {
             ...this.getFontStretch('normal', important),
             ...this.getLineHeight('normal', important)
         };
-        const parts = value.replace(/ *\/ */g, '/').split(/ +/);
+        const parts = value.replace(/\s*\/\s*/g, '/').split(SPLIT_SPACE_SEPARATED_REGEXP);
         for (let i = 0, max = parts.length; i < max; i++) {
             const part = parts[i];
             if (part.includes('/')) {
@@ -2244,7 +2257,7 @@ class CSSStyleDeclarationPropertySetParser {
         if (CSSStyleDeclarationValueParser_js_1.default.getGlobal(lowerValue) || FONT_STYLE.includes(lowerValue)) {
             return { 'font-style': { value: lowerValue, important } };
         }
-        const parts = value.split(/ +/);
+        const parts = value.split(SPLIT_SPACE_SEPARATED_REGEXP);
         if (parts.length === 2 && parts[0] === 'oblique') {
             const degree = CSSStyleDeclarationValueParser_js_1.default.getDegree(parts[1]);
             return degree ? { 'font-style': { value: lowerValue, important } } : null;