From 09c75fcea58f36cdcae7ef9a44c891b4e123ea7f Mon Sep 17 00:00:00 2001 From: David Ortner Date: Tue, 23 Aug 2022 22:32:37 +0200 Subject: [PATCH] #344@trivial: Continues on CSSStyleDeclaration. --- .../utilities/CSSStyleDeclarationElement.ts | 4 +- .../CSSStyleDeclarationPropertySetParser.ts | 6 +- .../CSSStyleDeclarationValueParser.ts | 148 ++++++++++++++++++ .../declaration/CSSStyleDeclaration.test.ts | 45 ++++-- 4 files changed, 190 insertions(+), 13 deletions(-) diff --git a/packages/happy-dom/src/css/declaration/utilities/CSSStyleDeclarationElement.ts b/packages/happy-dom/src/css/declaration/utilities/CSSStyleDeclarationElement.ts index 27f3b7c0f..e68a6e21f 100644 --- a/packages/happy-dom/src/css/declaration/utilities/CSSStyleDeclarationElement.ts +++ b/packages/happy-dom/src/css/declaration/utilities/CSSStyleDeclarationElement.ts @@ -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; } diff --git a/packages/happy-dom/src/css/declaration/utilities/CSSStyleDeclarationPropertySetParser.ts b/packages/happy-dom/src/css/declaration/utilities/CSSStyleDeclarationPropertySetParser.ts index 6ca35fd37..02ef54cbc 100644 --- a/packages/happy-dom/src/css/declaration/utilities/CSSStyleDeclarationPropertySetParser.ts +++ b/packages/happy-dom/src/css/declaration/utilities/CSSStyleDeclarationPropertySetParser.ts @@ -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; } @@ -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; } diff --git a/packages/happy-dom/src/css/declaration/utilities/CSSStyleDeclarationValueParser.ts b/packages/happy-dom/src/css/declaration/utilities/CSSStyleDeclarationValueParser.ts index 6544f3ea0..e1efdb0f6 100644 --- a/packages/happy-dom/src/css/declaration/utilities/CSSStyleDeclarationValueParser.ts +++ b/packages/happy-dom/src/css/declaration/utilities/CSSStyleDeclarationValueParser.ts @@ -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. @@ -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; } diff --git a/packages/happy-dom/test/css/declaration/CSSStyleDeclaration.test.ts b/packages/happy-dom/test/css/declaration/CSSStyleDeclaration.test.ts index 2131ae2e9..b8e524e2e 100644 --- a/packages/happy-dom/test/css/declaration/CSSStyleDeclaration.test.ts +++ b/packages/happy-dom/test/css/declaration/CSSStyleDeclaration.test.ts @@ -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.', () => { @@ -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); }); });