Skip to content

Commit

Permalink
#344@trivial: Continues on CSSStyleDeclaration.
Browse files Browse the repository at this point in the history
  • Loading branch information
@capricorn86
capricorn86 committed Sep 9, 2022
1 parent b0d14bd commit 4ebf7b7
Show file tree
Hide file tree
Showing 4 changed files with 486 additions and 37 deletions.
11 changes: 8 additions & 3 deletions packages/happy-dom/src/css/declaration/utilities/CSSStyleDeclarationPropertyManager.ts
View file
Expand Up @@ -242,6 +242,11 @@ export default class CSSStyleDeclarationPropertyManager {
* @param important Important.
*/
public set(name: string, value: string, important: boolean): void {
if (value === null) {
this.remove(name);
return;
}

let properties = null;

switch (name) {
Expand Down Expand Up @@ -356,15 +361,15 @@ export default class CSSStyleDeclarationPropertyManager {
case 'css-float':
properties = CSSStyleDeclarationPropertySetParser.getCSSFloat(value, important);
break;
case 'float':
properties = CSSStyleDeclarationPropertySetParser.getFloat(value, important);
break;
case 'display':
properties = CSSStyleDeclarationPropertySetParser.getDisplay(value, important);
break;
case 'direction':
properties = CSSStyleDeclarationPropertySetParser.getDirection(value, important);
break;
case 'float':
properties = CSSStyleDeclarationPropertySetParser.getFloat(value, important);
break;
case 'flex':
properties = CSSStyleDeclarationPropertySetParser.getFlex(value, important);
break;
Expand Down
64 changes: 37 additions & 27 deletions packages/happy-dom/src/css/declaration/utilities/CSSStyleDeclarationPropertySetParser.ts
View file
Expand Up @@ -22,7 +22,7 @@ const BACKGROUND_CLIP = ['border-box', 'padding-box', 'content-box'];
const BACKGROUND_ATTACHMENT = ['scroll', 'fixed'];
const FLEX_BASIS = ['auto', 'fill', 'max-content', 'min-content', 'fit-content', 'content'];
const CLEAR = ['none', 'left', 'right', 'both'];
const FLOAT = ['none', 'left', 'right'];
const FLOAT = ['none', 'left', 'right', 'inline-start', 'inline-end'];
const SYSTEM_FONT = ['caption', 'icon', 'menu', 'message-box', 'small-caption', 'status-bar'];
const FONT_WEIGHT = ['normal', 'bold', 'bolder', 'lighter'];
const FONT_STYLE = ['normal', 'italic', 'oblique'];
Expand Down Expand Up @@ -168,7 +168,7 @@ export default class CSSStyleDeclarationPropertySetParser {
} {
const parsedValue =
CSSStyleDeclarationValueParser.getGlobal(value) ||
CSSStyleDeclarationValueParser.getMeasurementOrAuto(value);
CSSStyleDeclarationValueParser.getContentMeasurement(value);
return parsedValue ? { top: { value: parsedValue, important } } : null;
}

Expand All @@ -187,7 +187,7 @@ export default class CSSStyleDeclarationPropertySetParser {
} {
const parsedValue =
CSSStyleDeclarationValueParser.getGlobal(value) ||
CSSStyleDeclarationValueParser.getMeasurementOrAuto(value);
CSSStyleDeclarationValueParser.getContentMeasurement(value);
return parsedValue ? { right: { value: parsedValue, important } } : null;
}

Expand All @@ -206,7 +206,7 @@ export default class CSSStyleDeclarationPropertySetParser {
} {
const parsedValue =
CSSStyleDeclarationValueParser.getGlobal(value) ||
CSSStyleDeclarationValueParser.getMeasurementOrAuto(value);
CSSStyleDeclarationValueParser.getContentMeasurement(value);
return parsedValue ? { bottom: { value: parsedValue, important } } : null;
}

Expand All @@ -225,7 +225,7 @@ export default class CSSStyleDeclarationPropertySetParser {
} {
const parsedValue =
CSSStyleDeclarationValueParser.getGlobal(value) ||
CSSStyleDeclarationValueParser.getMeasurementOrAuto(value);
CSSStyleDeclarationValueParser.getContentMeasurement(value);
return parsedValue ? { left: { value: parsedValue, important } } : null;
}

Expand Down Expand Up @@ -318,8 +318,7 @@ export default class CSSStyleDeclarationPropertySetParser {
): {
[key: string]: ICSSStyleDeclarationPropertyValue;
} {
const float =
CSSStyleDeclarationValueParser.getGlobal(value) || this.getFloat(value, important);
const float = this.getFloat(value, important);
return float ? { 'css-float': float['float'] } : null;
}

Expand Down Expand Up @@ -715,7 +714,7 @@ export default class CSSStyleDeclarationPropertySetParser {
for (const part of parts) {
if (
!CSSStyleDeclarationValueParser.getInteger(part) &&
!CSSStyleDeclarationValueParser.getMeasurementOrAuto(part)
!CSSStyleDeclarationValueParser.getContentMeasurement(part)
) {
return null;
}
Expand Down Expand Up @@ -1121,8 +1120,8 @@ export default class CSSStyleDeclarationPropertySetParser {
return {
...this.getBorderTopLeftRadius(globalValue, important),
...this.getBorderTopRightRadius(globalValue, important),
...this.getBorderTopRightRadius(globalValue, important),
...this.getBorderTopRightRadius(globalValue, important)
...this.getBorderBottomRightRadius(globalValue, important),
...this.getBorderBottomLeftRadius(globalValue, important)
};
}

Expand Down Expand Up @@ -1548,7 +1547,7 @@ export default class CSSStyleDeclarationPropertySetParser {
): { [key: string]: ICSSStyleDeclarationPropertyValue } {
const margin =
CSSStyleDeclarationValueParser.getGlobal(value) ||
CSSStyleDeclarationValueParser.getMeasurementOrAuto(value);
CSSStyleDeclarationValueParser.getContentMeasurement(value);
return margin ? { 'margin-top': { value: margin, important } } : null;
}

Expand All @@ -1565,7 +1564,7 @@ export default class CSSStyleDeclarationPropertySetParser {
): { [key: string]: ICSSStyleDeclarationPropertyValue } {
const margin =
CSSStyleDeclarationValueParser.getGlobal(value) ||
CSSStyleDeclarationValueParser.getMeasurementOrAuto(value);
CSSStyleDeclarationValueParser.getContentMeasurement(value);
return margin ? { 'margin-right': { value: margin, important } } : null;
}

Expand All @@ -1582,7 +1581,7 @@ export default class CSSStyleDeclarationPropertySetParser {
): { [key: string]: ICSSStyleDeclarationPropertyValue } {
const margin =
CSSStyleDeclarationValueParser.getGlobal(value) ||
CSSStyleDeclarationValueParser.getMeasurementOrAuto(value);
CSSStyleDeclarationValueParser.getContentMeasurement(value);
return margin ? { 'margin-bottom': { value: margin, important } } : null;
}

Expand All @@ -1599,7 +1598,7 @@ export default class CSSStyleDeclarationPropertySetParser {
): { [key: string]: ICSSStyleDeclarationPropertyValue } {
const margin =
CSSStyleDeclarationValueParser.getGlobal(value) ||
CSSStyleDeclarationValueParser.getMeasurementOrAuto(value);
CSSStyleDeclarationValueParser.getContentMeasurement(value);
return margin ? { 'margin-left': { value: margin, important } } : null;
}

Expand Down Expand Up @@ -1640,20 +1639,30 @@ export default class CSSStyleDeclarationPropertySetParser {
};
}

const parts = value.split(/ +/);
const flexGrow = parts[0] && this.getFlexGrow(parts[0], important);
const flexShrink = parts[1] && this.getFlexShrink(parts[1], important);
const flexBasis = parts[2] && this.getFlexBasis(parts[2], important);
const measurement = CSSStyleDeclarationValueParser.getContentMeasurement(lowerValue);

if (flexGrow && flexShrink && flexBasis) {
if (measurement) {
return {
...flexBasis,
...flexGrow,
...flexBasis
...this.getFlexGrow('1', important),
...this.getFlexShrink('1', important),
...this.getFlexBasis(measurement, important)
};
}

return null;
const parts = value.split(/ +/);
const flexGrow = this.getFlexGrow(parts[0], important);
const flexShrink = this.getFlexShrink(parts[1] || '1', important);
const flexBasis = this.getFlexBasis(parts[2] || '0%', important);

if (!flexGrow || !flexShrink || !flexBasis) {
return null;
}

return {
...flexGrow,
...flexShrink,
...flexBasis
};
}

/**
Expand All @@ -1673,7 +1682,8 @@ export default class CSSStyleDeclarationPropertySetParser {
if (CSSStyleDeclarationValueParser.getGlobal(lowerValue) || FLEX_BASIS.includes(lowerValue)) {
return { 'flex-basis': { value: lowerValue, important } };
}
return { 'flex-basis': { value: CSSStyleDeclarationValueParser.getLength(value), important } };
const measurement = CSSStyleDeclarationValueParser.getContentMeasurement(value);
return measurement ? { 'flex-basis': { value: measurement, important } } : null;
}

/**
Expand Down Expand Up @@ -1828,15 +1838,15 @@ export default class CSSStyleDeclarationPropertySetParser {
if (
parts[0] !== 'cover' &&
parts[0] !== 'contain' &&
!CSSStyleDeclarationValueParser.getMeasurementOrAuto(parts[0])
!CSSStyleDeclarationValueParser.getContentMeasurement(parts[0])
) {
return null;
}
parsed.push(parts[0]);
} else {
if (
!CSSStyleDeclarationValueParser.getMeasurementOrAuto(parts[0]) ||
!CSSStyleDeclarationValueParser.getMeasurementOrAuto(parts[1])
!CSSStyleDeclarationValueParser.getContentMeasurement(parts[0]) ||
!CSSStyleDeclarationValueParser.getContentMeasurement(parts[1])
) {
return null;
}
Expand Down
28 changes: 21 additions & 7 deletions packages/happy-dom/src/css/declaration/utilities/CSSStyleDeclarationValueParser.ts
View file
Expand Up @@ -8,6 +8,7 @@ const URL_REGEXP = /^url\(\s*([^)]*)\s*\)$/;
const INTEGER_REGEXP = /^[0-9]+$/;
const FLOAT_REGEXP = /^[0-9.]+$/;
const CALC_REGEXP = /^calc\([^^)]+\)$/;
const FIT_CONTENT_REGEXP = /^fit-content\([^^)]+\)$/;
const GRADIENT_REGEXP =
/^(repeating-linear|linear|radial|repeating-radial|conic|repeating-conic)-gradient\([^)]+\)$/;
const GLOBALS = ['inherit', 'initial', 'unset', 'revert'];
Expand Down Expand Up @@ -223,6 +224,23 @@ export default class CSSStyleDeclarationValueParser {
return null;
}

/**
* Returns fit content.
*
* @param value Value.
* @returns Parsed value.
*/
public static getFitContent(value: string): string {
const lowerValue = value.toLowerCase();
if (lowerValue === 'auto' || lowerValue === 'max-content' || lowerValue === 'min-content') {
return lowerValue;
}
if (FIT_CONTENT_REGEXP.test(lowerValue)) {
return lowerValue;
}
return null;
}

/**
* Returns measurement.
*
Expand All @@ -234,17 +252,13 @@ export default class CSSStyleDeclarationValueParser {
}

/**
* Returns measurement or auto.
* Returns measurement or auto, min-content, max-content or fit-content.
*
* @param value Value.
* @returns Parsed value.
*/
public static getMeasurementOrAuto(value: string): string {
const lowerValue = value.toLowerCase();
if (lowerValue === 'auto') {
return lowerValue;
}
return this.getMeasurement(value);
public static getContentMeasurement(value: string): string {
return this.getFitContent(value) || this.getMeasurement(value);
}

/**
Expand Down

0 comments on commit 4ebf7b7

Please sign in to comment.