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 7, 2022
1 parent a321e54 commit b8c2672
Show file tree
Hide file tree
Showing 5 changed files with 267 additions and 137 deletions.
85 changes: 34 additions & 51 deletions packages/happy-dom/src/css/declaration/utilities/CSSStyleDeclarationPropertyGetParser.ts
View file
Expand Up @@ -198,22 +198,10 @@ export default class CSSStyleDeclarationPropertyGetParser {
public static getBorderColor(properties: {
[k: string]: ICSSStyleDeclarationPropertyValue;
}): ICSSStyleDeclarationPropertyValue {
if (
!properties['border-top-color']?.value ||
properties['border-top-color']?.value !== properties['border-right-color']?.value ||
properties['border-top-color']?.value !== properties['border-bottom-color']?.value ||
properties['border-top-color']?.value !== properties['border-left-color']?.value
) {
return null;
}
return {
important:
properties['border-top-color'].important &&
properties['border-right-color'].important &&
properties['border-bottom-color'].important &&
properties['border-left-color'].important,
value: properties['border-top-color'].value
};
return this.getPaddingLikeProperty(
['border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color'],
properties
);
}

/**
Expand All @@ -225,22 +213,10 @@ export default class CSSStyleDeclarationPropertyGetParser {
public static getBorderWidth(properties: {
[k: string]: ICSSStyleDeclarationPropertyValue;
}): ICSSStyleDeclarationPropertyValue {
if (
!properties['border-top-width']?.value ||
properties['border-top-width']?.value !== properties['border-right-width']?.value ||
properties['border-top-width']?.value !== properties['border-bottom-width']?.value ||
properties['border-top-width']?.value !== properties['border-left-width']?.value
) {
return null;
}
return {
important:
properties['border-top-width'].important &&
properties['border-right-width'].important &&
properties['border-bottom-width'].important &&
properties['border-left-width'].important,
value: properties['border-top-width'].value
};
return this.getPaddingLikeProperty(
['border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'],
properties
);
}

/**
Expand All @@ -252,22 +228,10 @@ export default class CSSStyleDeclarationPropertyGetParser {
public static getBorderStyle(properties: {
[k: string]: ICSSStyleDeclarationPropertyValue;
}): ICSSStyleDeclarationPropertyValue {
if (
!properties['border-top-style']?.value ||
properties['border-top-style']?.value !== properties['border-right-style']?.value ||
properties['border-top-style']?.value !== properties['border-bottom-style']?.value ||
properties['border-top-style']?.value !== properties['border-left-style']?.value
) {
return null;
}
return {
important:
properties['border-top-style'].important &&
properties['border-right-style'].important &&
properties['border-bottom-style'].important &&
properties['border-left-style'].important,
value: properties['border-top-style'].value
};
return this.getPaddingLikeProperty(
['border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style'],
properties
);
}

/**
Expand Down Expand Up @@ -731,11 +695,30 @@ export default class CSSStyleDeclarationPropertyGetParser {
};
}

const values = [properties[propertyNames[0]].value];

if (
properties[propertyNames[1]].value !== properties[propertyNames[0]].value ||
properties[propertyNames[2]].value !== properties[propertyNames[0]].value ||
properties[propertyNames[3]].value !== properties[propertyNames[1]].value
) {
values.push(properties[propertyNames[1]].value);
}

if (
properties[propertyNames[2]].value !== properties[propertyNames[0]].value ||
properties[propertyNames[3]].value !== properties[propertyNames[1]].value
) {
values.push(properties[propertyNames[2]].value);
}

if (properties[propertyNames[3]].value !== properties[propertyNames[1]].value) {
values.push(properties[propertyNames[3]].value);
}

return {
important,
value: `${properties[propertyNames[0]].value} ${properties[propertyNames[1]].value} ${
properties[propertyNames[2]].value
} ${properties[propertyNames[3]].value}`
value: values.join(' ')
};
}
}
90 changes: 86 additions & 4 deletions packages/happy-dom/src/css/declaration/utilities/CSSStyleDeclarationPropertyManager.ts
View file
Expand Up @@ -113,26 +113,51 @@ export default class CSSStyleDeclarationPropertyManager {
delete this.properties['border-right-color'];
delete this.properties['border-bottom-color'];
delete this.properties['border-left-color'];
delete this.properties['border-image-source'];
delete this.properties['border-image-slice'];
delete this.properties['border-image-width'];
delete this.properties['border-image-outset'];
delete this.properties['border-image-repeat'];
break;
case 'border-left':
delete this.properties['border-left-width'];
delete this.properties['border-left-style'];
delete this.properties['border-left-color'];
delete this.properties['border-image-source'];
delete this.properties['border-image-slice'];
delete this.properties['border-image-width'];
delete this.properties['border-image-outset'];
delete this.properties['border-image-repeat'];
break;
case 'border-bottom':
delete this.properties['border-bottom-width'];
delete this.properties['border-bottom-style'];
delete this.properties['border-bottom-color'];
delete this.properties['border-image-source'];
delete this.properties['border-image-slice'];
delete this.properties['border-image-width'];
delete this.properties['border-image-outset'];
delete this.properties['border-image-repeat'];
break;
case 'border-right':
delete this.properties['border-right-width'];
delete this.properties['border-right-style'];
delete this.properties['border-right-color'];
delete this.properties['border-image-source'];
delete this.properties['border-image-slice'];
delete this.properties['border-image-width'];
delete this.properties['border-image-outset'];
delete this.properties['border-image-repeat'];
break;
case 'border-top':
delete this.properties['border-top-width'];
delete this.properties['border-top-style'];
delete this.properties['border-top-color'];
delete this.properties['border-image-source'];
delete this.properties['border-image-slice'];
delete this.properties['border-image-width'];
delete this.properties['border-image-outset'];
delete this.properties['border-image-repeat'];
break;
case 'border-width':
delete this.properties['border-top-width'];
Expand Down Expand Up @@ -170,7 +195,11 @@ export default class CSSStyleDeclarationPropertyManager {
delete this.properties['background-image'];
delete this.properties['background-repeat'];
delete this.properties['background-attachment'];
delete this.properties['background-position'];
delete this.properties['background-position-x'];
delete this.properties['background-position-y'];
delete this.properties['background-size'];
delete this.properties['background-origin'];
delete this.properties['background-clip'];
break;
case 'background-position':
delete this.properties['background-position-x'];
Expand Down Expand Up @@ -499,10 +528,63 @@ export default class CSSStyleDeclarationPropertyManager {
*/
public toString(): string {
const result = [];
const clone = this.clone();
const properties = {};

for (const name of Object.keys(this.definedPropertyNames)) {
const property = this.get(name);
result.push(`${name}: ${property.value}${property.important ? ' !important' : ''};`);
for (const fallbackNames of [
['margin'],
['padding'],
['border', ['border-width', 'border-style', 'border-color', 'border-image']],
['border-radius'],
['background', 'background-position'],
['font']
]) {
for (const fallbackName of fallbackNames) {
if (Array.isArray(fallbackName)) {
let isMatch = false;
for (const childFallbackName of fallbackName) {
const property = clone.get(childFallbackName);
if (property) {
properties[childFallbackName] = property;
clone.remove(childFallbackName);
isMatch = true;
}
}
if (isMatch) {
break;
}
} else {
const property = clone.get(fallbackName);
if (property) {
properties[fallbackName] = property;
clone.remove(fallbackName);
break;
}
}
}
}

for (const name of Object.keys(clone.properties)) {
properties[name] = clone.get(name);
}

for (const definedPropertyName of Object.keys(this.definedPropertyNames)) {
const property = properties[definedPropertyName];
if (property) {
result.push(
`${definedPropertyName}: ${property.value}${property.important ? ' !important' : ''};`
);
delete properties[definedPropertyName];
}
}

for (const propertyName of Object.keys(properties)) {
const property = properties[propertyName];
if (property) {
result.push(
`${propertyName}: ${property.value}${property.important ? ' !important' : ''};`
);
}
}

return result.join(' ');
Expand Down

0 comments on commit b8c2672

Please sign in to comment.