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 Aug 23, 2022
1 parent 22a17ba commit 09c75fc
Show file tree
Hide file tree
Showing 4 changed files with 190 additions and 13 deletions.
4 changes: 3 additions & 1 deletion packages/happy-dom/src/css/declaration/utilities/CSSStyleDeclarationElement.ts
View file
Expand Up @@ -138,7 +138,9 @@ export default class CSSStyleDeclarationElement {
const targetPropertyManager = new CSSStyleDeclarationPropertyManager(
targetElement.cssText + (targetElement.element['_attributes']['style']?.value || '')
);
Object.assign(targetPropertyManager.properties, inheritedProperties);

Object.assign(inheritedProperties, targetPropertyManager.properties);
targetPropertyManager.properties = inheritedProperties;

return targetPropertyManager;
}
Expand Down
6 changes: 3 additions & 3 deletions packages/happy-dom/src/css/declaration/utilities/CSSStyleDeclarationPropertySetParser.ts
View file
Expand Up @@ -1341,12 +1341,12 @@ export default class CSSStyleDeclarationPropertySetParser {
} {
const lowerValue = value.toLowerCase();
if (FONT_STYLE.includes(lowerValue)) {
return { fontStyle: { value: lowerValue, important } };
return { 'font-style': { value: lowerValue, important } };
}
const parts = value.split(/ +/);
if (parts.length === 2 && parts[0] === 'oblique') {
const degree = CSSStyleDeclarationValueParser.getDegree(parts[1]);
return degree ? { fontStyle: { value: lowerValue, important } } : null;
return degree ? { 'font-style': { value: lowerValue, important } } : null;
}
return null;
}
Expand All @@ -1366,7 +1366,7 @@ export default class CSSStyleDeclarationPropertySetParser {
} {
const lowerValue = value.toLowerCase();
return lowerValue === 'normal' || lowerValue === 'small-caps'
? { 'font-size': { value: lowerValue, important } }
? { 'font-variant': { value: lowerValue, important } }
: null;
}

Expand Down
148 changes: 148 additions & 0 deletions packages/happy-dom/src/css/declaration/utilities/CSSStyleDeclarationValueParser.ts
View file
Expand Up @@ -8,6 +8,150 @@ const URL_REGEXP = /^url\(\s*([^)]*)\s*\)$/;
const INTEGER_REGEXP = /^[0-9]+$/;
const FLOAT_REGEXP = /^[0-9.]+$/;
const GLOBALS = ['inherit', 'initial', 'unset', 'revert'];
const COLORS = [
'silver',
'gray',
'white',
'maroon',
'red',
'purple',
'fuchsia',
'green',
'lime',
'olive',
'yellow',
'navy',
'blue',
'teal',
'aqua',
'antiquewhite',
'aquamarine',
'azure',
'beige',
'bisque',
'blanchedalmond',
'blueviolet',
'brown',
'burlywood',
'cadetblue',
'chartreuse',
'chocolate',
'coral',
'cornflowerblue',
'cornsilk',
'crimson',
'darkblue',
'darkcyan',
'darkgoldenrod',
'darkgray',
'darkgreen',
'darkgrey',
'darkkhaki',
'darkmagenta',
'darkolivegreen',
'darkorange',
'darkorchid',
'darkred',
'darksalmon',
'darkseagreen',
'darkslateblue',
'darkslategray',
'darkslategrey',
'darkturquoise',
'darkviolet',
'deeppink',
'deepskyblue',
'dimgray',
'dimgrey',
'dodgerblue',
'firebrick',
'floralwhite',
'forestgreen',
'gainsboro',
'ghostwhite',
'gold',
'goldenrod',
'greenyellow',
'grey',
'honeydew',
'hotpink',
'indianred',
'indigo',
'ivory',
'khaki',
'lavender',
'lavenderblush',
'lawngreen',
'lemonchiffon',
'lightblue',
'lightcoral',
'lightcyan',
'lightgoldenrodyellow',
'lightgray',
'lightgreen',
'lightgrey',
'lightpink',
'lightsalmon',
'lightseagreen',
'lightskyblue',
'lightslategray',
'lightslategrey',
'lightsteelblue',
'lightyellow',
'limegreen',
'linen',
'mediumaquamarine',
'mediumblue',
'mediumorchid',
'mediumpurple',
'mediumseagreen',
'mediumslateblue',
'mediumspringgreen',
'mediumturquoise',
'mediumvioletred',
'midnightblue',
'mintcream',
'mistyrose',
'moccasin',
'navajowhite',
'oldlace',
'olivedrab',
'orangered',
'orchid',
'palegoldenrod',
'palegreen',
'paleturquoise',
'palevioletred',
'papayawhip',
'peachpuff',
'peru',
'pink',
'plum',
'powderblue',
'rosybrown',
'royalblue',
'saddlebrown',
'salmon',
'sandybrown',
'seagreen',
'seashell',
'sienna',
'skyblue',
'slateblue',
'slategray',
'slategrey',
'snow',
'springgreen',
'steelblue',
'tan',
'thistle',
'tomato',
'turquoise',
'violet',
'wheat',
'whitesmoke',
'yellowgreen'
];

/**
* Style declaration value parser.
Expand Down Expand Up @@ -118,6 +262,10 @@ export default class CSSStyleDeclarationValueParser {
* @returns Parsed value.
*/
public static getColor(value: string): string {
const lowerValue = value.toLowerCase();
if (COLORS.includes(lowerValue)) {
return lowerValue;
}
if (COLOR_REGEXP.test(value)) {
return value;
}
Expand Down
45 changes: 36 additions & 9 deletions packages/happy-dom/test/css/declaration/CSSStyleDeclaration.test.ts
View file
Expand Up @@ -30,11 +30,24 @@ describe('CSSStyleDeclaration', () => {

element.setAttribute('style', `border: 2px solid green;border-radius: 2px;font-size: 12px;`);

debugger;
expect(declaration[0]).toBe('border');
expect(declaration[1]).toBe('border-radius');
expect(declaration[2]).toBe('font-size');
expect(declaration[3]).toBe(undefined);
expect(declaration[0]).toBe('border-top-width');
expect(declaration[1]).toBe('border-right-width');
expect(declaration[2]).toBe('border-bottom-width');
expect(declaration[3]).toBe('border-left-width');
expect(declaration[4]).toBe('border-top-style');
expect(declaration[5]).toBe('border-right-style');
expect(declaration[6]).toBe('border-bottom-style');
expect(declaration[7]).toBe('border-left-style');
expect(declaration[8]).toBe('border-top-color');
expect(declaration[9]).toBe('border-right-color');
expect(declaration[10]).toBe('border-bottom-color');
expect(declaration[11]).toBe('border-left-color');
expect(declaration[12]).toBe('border-top-left-radius');
expect(declaration[13]).toBe('border-top-right-radius');
expect(declaration[14]).toBe('border-bottom-right-radius');
expect(declaration[15]).toBe('border-bottom-left-radius');
expect(declaration[16]).toBe('font-size');
expect(declaration[17]).toBe(undefined);
});

it('Returns name of property without element.', () => {
Expand All @@ -44,10 +57,24 @@ describe('CSSStyleDeclaration', () => {
declaration.borderRadius = '2px';
declaration.fontSize = '12px';

expect(declaration[0]).toBe('border');
expect(declaration[1]).toBe('border-radius');
expect(declaration[2]).toBe('font-size');
expect(declaration[3]).toBe(undefined);
expect(declaration[0]).toBe('border-top-width');
expect(declaration[1]).toBe('border-right-width');
expect(declaration[2]).toBe('border-bottom-width');
expect(declaration[3]).toBe('border-left-width');
expect(declaration[4]).toBe('border-top-style');
expect(declaration[5]).toBe('border-right-style');
expect(declaration[6]).toBe('border-bottom-style');
expect(declaration[7]).toBe('border-left-style');
expect(declaration[8]).toBe('border-top-color');
expect(declaration[9]).toBe('border-right-color');
expect(declaration[10]).toBe('border-bottom-color');
expect(declaration[11]).toBe('border-left-color');
expect(declaration[12]).toBe('border-top-left-radius');
expect(declaration[13]).toBe('border-top-right-radius');
expect(declaration[14]).toBe('border-bottom-right-radius');
expect(declaration[15]).toBe('border-bottom-left-radius');
expect(declaration[16]).toBe('font-size');
expect(declaration[17]).toBe(undefined);
});
});

Expand Down

0 comments on commit 09c75fc

Please sign in to comment.