diff --git a/packages/happy-dom/src/css/declaration/utilities/CSSStyleDeclarationPropertyGetParser.ts b/packages/happy-dom/src/css/declaration/utilities/CSSStyleDeclarationPropertyGetParser.ts index 1ed544904..482cc627f 100644 --- a/packages/happy-dom/src/css/declaration/utilities/CSSStyleDeclarationPropertyGetParser.ts +++ b/packages/happy-dom/src/css/declaration/utilities/CSSStyleDeclarationPropertyGetParser.ts @@ -16,6 +16,26 @@ export default class CSSStyleDeclarationPropertyGetParser { if (!properties['margin-top']?.value) { return null; } + const values = [properties['margin-top'].value]; + if ( + properties['margin-right']?.value && + (properties['margin-right'].value !== properties['margin-top'].value || + (properties['margin-bottom']?.value && + properties['margin-bottom'].value !== properties['margin-top'].value)) + ) { + values.push(properties['margin-right'].value); + } + if ( + properties['margin-bottom']?.value && + (properties['margin-bottom'].value !== properties['margin-top'].value || + (properties['margin-left']?.value && + properties['margin-left'].value !== properties['margin-right'].value)) + ) { + values.push(properties['margin-bottom'].value); + } + if (properties['margin-left']?.value) { + values.push(properties['margin-left'].value); + } return { important: ![ properties['margin-top']?.important, @@ -23,21 +43,7 @@ export default class CSSStyleDeclarationPropertyGetParser { properties['margin-left']?.important, properties['margin-right']?.important ].some((important) => important === false), - value: `${properties['margin-top'].value} ${ - properties['margin-top'].value !== properties['margin-right']?.value - ? properties['margin-right']?.value || '' - : '' - } ${ - properties['margin-top'].value !== properties['margin-bottom']?.value - ? properties['margin-bottom']?.value || '' - : '' - } ${ - properties['margin-right']?.value !== properties['margin-left']?.value - ? properties['margin-left']?.value || '' - : '' - }` - .replace(/ /g, '') - .trim() + value: values.join(' ') }; } @@ -53,6 +59,16 @@ export default class CSSStyleDeclarationPropertyGetParser { if (!properties['padding-top']?.value) { return null; } + const values = [properties['padding-top'].value]; + if (properties['padding-right']?.value) { + values.push(properties['padding-right'].value); + } + if (properties['padding-bottom']?.value) { + values.push(properties['padding-bottom'].value); + } + if (properties['padding-left']?.value) { + values.push(properties['padding-left'].value); + } return { important: ![ properties['padding-top']?.important, @@ -60,21 +76,7 @@ export default class CSSStyleDeclarationPropertyGetParser { properties['padding-left']?.important, properties['padding-right']?.important ].some((important) => important === false), - value: `${properties['padding-top'].value} ${ - properties['padding-top'].value !== properties['padding-right']?.value - ? properties['padding-right']?.value || '' - : '' - } ${ - properties['padding-top'].value !== properties['padding-bottom']?.value - ? properties['padding-bottom']?.value || '' - : '' - } ${ - properties['padding-right']?.value !== properties['padding-left']?.value - ? properties['padding-left']?.value || '' - : '' - }` - .replace(/ /g, '') - .trim() + value: values.join(' ') }; } @@ -89,18 +91,34 @@ export default class CSSStyleDeclarationPropertyGetParser { }): ICSSStyleDeclarationPropertyValue { if ( !properties['border-top-width']?.value || - properties['border-right-width']?.value !== properties['border-top-width']?.value || - properties['border-right-style']?.value !== properties['border-top-style']?.value || - properties['border-right-color']?.value !== properties['border-top-color']?.value || - properties['border-bottom-width']?.value !== properties['border-top-width']?.value || - properties['border-bottom-style']?.value !== properties['border-top-style']?.value || - properties['border-bottom-color']?.value !== properties['border-top-color']?.value || - properties['border-left-width']?.value !== properties['border-top-width']?.value || - properties['border-left-style']?.value !== properties['border-top-style']?.value || - properties['border-left-color']?.value !== properties['border-top-color']?.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; } + + const values = [properties['border-top-width'].value]; + + if ( + properties['border-top-style']?.value && + properties['border-top-style'].value === properties['border-right-style'].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 + ) { + values.push(properties['border-top-style'].value); + } + + 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 + ) { + values.push(properties['border-top-color'].value); + } + return { important: ![ properties['border-top-width']?.important, @@ -116,11 +134,7 @@ export default class CSSStyleDeclarationPropertyGetParser { properties['border-bottom-color']?.important, properties['border-left-color']?.important ].some((important) => important === false), - value: `${properties['border-top-width'].value} ${ - properties['border-top-style']?.value || '' - } ${properties['border-top-color']?.value || ''}` - .replace(/ /g, '') - .trim() + value: values.join(' ') }; } @@ -136,17 +150,20 @@ export default class CSSStyleDeclarationPropertyGetParser { if (!properties['border-top-width']?.value) { return null; } + const values = [properties['border-top-width'].value]; + if (properties['border-top-style']?.value) { + values.push(properties['border-top-style'].value); + } + if (properties['border-top-color']?.value) { + values.push(properties['border-top-color'].value); + } return { important: ![ properties['border-top-width']?.important, properties['border-top-style']?.important, properties['border-top-color']?.important ].some((important) => important === false), - value: `${properties['border-top-width'].value} ${ - properties['border-top-style']?.value || '' - } ${properties['border-top-color']?.value || ''}` - .replace(/ /g, '') - .trim() + value: values.join(' ') }; } @@ -162,17 +179,20 @@ export default class CSSStyleDeclarationPropertyGetParser { if (!properties['border-right-width']?.value) { return null; } + const values = [properties['border-right-width'].value]; + if (properties['border-right-style']?.value) { + values.push(properties['border-right-style'].value); + } + if (properties['border-right-color']?.value) { + values.push(properties['border-right-color'].value); + } return { important: ![ properties['border-right-width']?.important, properties['border-right-style']?.important, properties['border-right-color']?.important ].some((important) => important === false), - value: `${properties['border-right-width'].value} ${ - properties['border-right-style']?.value || '' - } ${properties['border-right-color']?.value || ''}` - .replace(/ /g, '') - .trim() + value: values.join(' ') }; } @@ -188,17 +208,20 @@ export default class CSSStyleDeclarationPropertyGetParser { if (!properties['border-bottom-width']?.value) { return null; } + const values = [properties['border-bottom-width'].value]; + if (properties['border-bottom-style']?.value) { + values.push(properties['border-bottom-style'].value); + } + if (properties['border-bottom-color']?.value) { + values.push(properties['border-bottom-color'].value); + } return { important: ![ properties['border-bottom-width']?.important, properties['border-bottom-style']?.important, properties['border-bottom-color']?.important ].some((important) => important === false), - value: `${properties['border-bottom-width'].value} ${ - properties['border-bottom-style']?.value || '' - } ${properties['border-bottom-color']?.value || ''}` - .replace(/ /g, '') - .trim() + value: values.join(' ') }; } @@ -214,17 +237,20 @@ export default class CSSStyleDeclarationPropertyGetParser { if (!properties['border-left-width']?.value) { return null; } + const values = [properties['border-left-width'].value]; + if (properties['border-left-style']?.value) { + values.push(properties['border-bottom-style'].value); + } + if (properties['border-left-color']?.value) { + values.push(properties['border-left-color'].value); + } return { important: ![ properties['border-left-width']?.important, properties['border-left-style']?.important, properties['border-left-color']?.important ].some((important) => important === false), - value: `${properties['border-left-width'].value} ${ - properties['border-left-style']?.value || '' - } ${properties['border-left-color']?.value || ''}` - .replace(/ /g, '') - .trim() + value: values.join(' ') }; } @@ -324,6 +350,16 @@ export default class CSSStyleDeclarationPropertyGetParser { if (!properties['border-top-left-radius']?.value) { return null; } + const values = [properties['border-top-left-radius'].value]; + if (properties['border-top-right-radius']?.value) { + values.push(properties['border-top-right-radius'].value); + } + if (properties['border-bottom-right-radius']?.value) { + values.push(properties['border-bottom-right-radius'].value); + } + if (properties['border-bottom-left-radius']?.value) { + values.push(properties['border-bottom-left-radius'].value); + } return { important: ![ properties['border-top-left-radius']?.important, @@ -331,23 +367,7 @@ export default class CSSStyleDeclarationPropertyGetParser { properties['border-bottom-right-radius']?.important, properties['border-bottom-left-radius']?.important ].some((important) => important === false), - value: `${properties['border-top-left-radius'].value} ${ - properties['border-top-left-radius'].value !== properties['border-top-right-radius']?.value - ? properties['border-top-right-radius']?.value || '' - : '' - } ${ - properties['border-top-left-radius'].value !== - properties['border-bottom-right-radius']?.value - ? properties['border-bottom-right-radius']?.value || '' - : '' - } ${ - properties['border-top-right-radius']?.value !== - properties['border-bottom-left-radius']?.value - ? properties['border-bottom-left-radius']?.value || '' - : '' - }` - .replace(/ /g, '') - .trim() + value: values.join(' ') }; } @@ -363,6 +383,22 @@ export default class CSSStyleDeclarationPropertyGetParser { if (!properties['background-color']?.value && !properties['background-image']?.value) { return null; } + const values = []; + if (properties['background-color']?.value) { + values.push(properties['background-color'].value); + } + if (properties['background-image']?.value) { + values.push(properties['background-image'].value); + } + if (properties['background-repeat']?.value) { + values.push(properties['background-repeat'].value); + } + if (properties['background-attachment']?.value) { + values.push(properties['background-attachment'].value); + } + if (properties['background-position']?.value) { + values.push(properties['background-position'].value); + } return { important: ![ properties['background-color']?.important, @@ -371,19 +407,7 @@ export default class CSSStyleDeclarationPropertyGetParser { properties['background-attachment']?.important, properties['background-position']?.important ].some((important) => important === false), - value: `${properties['background-color']?.value || ''} ${ - properties['background-image']?.value || '' - } ${properties['background-repeat']?.value || ''} ${ - properties['background-repeat']?.value - ? properties['background-attachment']?.value || '' - : '' - } ${ - properties['background-repeat']?.value && properties['background-attachment']?.value - ? properties['background-position']?.value || '' - : '' - }` - .replace(/ /g, '') - .trim() + value: values.join(' ') }; } @@ -431,6 +455,26 @@ export default class CSSStyleDeclarationPropertyGetParser { sizeAndLineHeight.push(properties['line-height'].value); } + const values = []; + if (properties['font-style']?.value) { + values.push(properties['font-style'].value); + } + if (properties['font-variant']?.value) { + values.push(properties['font-variant'].value); + } + if (properties['font-weight']?.value) { + values.push(properties['font-weight'].value); + } + if (properties['font-stretch']?.value) { + values.push(properties['font-stretch'].value); + } + + values.push(sizeAndLineHeight.join('/')); + + if (properties['font-family']?.value) { + values.push(properties['font-family'].value); + } + return { important: ![ properties['font-style']?.important, @@ -441,13 +485,7 @@ export default class CSSStyleDeclarationPropertyGetParser { properties['line-height']?.important, properties['font-family']?.important ].some((important) => important === false), - value: `${properties['font-style']?.value || ''} ${properties['font-variant']?.value || ''} ${ - properties['font-weight']?.value || '' - } ${properties['font-stretch']?.value || ''} ${sizeAndLineHeight.join('/')} ${ - properties['font-family'].value || '' - }` - .replace(/ /g, '') - .trim() + value: values.join(' ') }; } } diff --git a/packages/happy-dom/src/css/declaration/utilities/CSSStyleDeclarationPropertyManager.ts b/packages/happy-dom/src/css/declaration/utilities/CSSStyleDeclarationPropertyManager.ts index 36b6d34e0..eca52fddc 100644 --- a/packages/happy-dom/src/css/declaration/utilities/CSSStyleDeclarationPropertyManager.ts +++ b/packages/happy-dom/src/css/declaration/utilities/CSSStyleDeclarationPropertyManager.ts @@ -306,6 +306,12 @@ export default class CSSStyleDeclarationPropertyManager { case 'css-float': properties = CSSStyleDeclarationPropertySetParser.getCSSFloat(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; diff --git a/packages/happy-dom/src/css/declaration/utilities/CSSStyleDeclarationPropertySetParser.ts b/packages/happy-dom/src/css/declaration/utilities/CSSStyleDeclarationPropertySetParser.ts index 02ef54cbc..6fbfb1e3f 100644 --- a/packages/happy-dom/src/css/declaration/utilities/CSSStyleDeclarationPropertySetParser.ts +++ b/packages/happy-dom/src/css/declaration/utilities/CSSStyleDeclarationPropertySetParser.ts @@ -49,6 +49,37 @@ const FONT_STRETCH = [ 'ultra-expanded' ]; +const DISPLAY = [ + /* Legacy values */ + 'block', + 'inline', + 'inline-block', + 'flex', + 'inline-flex', + 'grid', + 'inline-grid', + 'flow-root', + + /* Box generation */ + 'none', + 'contents', + + /* Two-value syntax */ + 'block flow', + 'inline flow', + 'inline flow-root', + 'block flex', + 'inline flex', + 'block grid', + 'inline grid', + 'block flow-root', + + /* Other values */ + 'table', + 'table-row', + 'list-item' +]; + /** * Computed style property parser. */ @@ -170,6 +201,46 @@ export default class CSSStyleDeclarationPropertySetParser { return null; } + /** + * Returns display. + * + * @param value Value. + * @param important Important. + * @returns Property values + */ + public static getDisplay( + value: string, + important: boolean + ): { + [key: string]: ICSSStyleDeclarationPropertyValue; + } { + const lowerValue = value.toLowerCase(); + if (DISPLAY.includes(lowerValue)) { + return { display: { value: lowerValue, important } }; + } + return null; + } + + /** + * Returns direction. + * + * @param value Value. + * @param important Important. + * @returns Property values + */ + public static getDirection( + value: string, + important: boolean + ): { + [key: string]: ICSSStyleDeclarationPropertyValue; + } { + const lowerValue = value.toLowerCase(); + if (lowerValue === 'ltr' || lowerValue === 'rtl') { + return { direction: { value: lowerValue, important } }; + } + return null; + } + /** * Returns top. * diff --git a/packages/happy-dom/test/css/declaration/CSSStyleDeclaration.test.ts b/packages/happy-dom/test/css/declaration/CSSStyleDeclaration.test.ts index 5eb70bfdb..d74bc2c92 100644 --- a/packages/happy-dom/test/css/declaration/CSSStyleDeclaration.test.ts +++ b/packages/happy-dom/test/css/declaration/CSSStyleDeclaration.test.ts @@ -3,7 +3,7 @@ import Window from '../../../src/window/Window'; import IWindow from '../../../src/window/IWindow'; import IDocument from '../../../src/nodes/document/IDocument'; import IElement from '../../../src/nodes/element/IElement'; -import CSSStyleDeclarationDefaultValues from './data/CSSStyleDeclarationDefaultValues'; +import CSSStyleDeclarationMockedProperties from './data/CSSStyleDeclarationMockedProperties'; function KEBAB_TO_CAMEL_CASE(text: string): string { const parts = text.split('-'); @@ -78,38 +78,38 @@ describe('CSSStyleDeclaration', () => { }); }); - for (const property of Object.keys(CSSStyleDeclarationDefaultValues)) { + for (const property of Object.keys(CSSStyleDeclarationMockedProperties)) { const camelCaseProperty = KEBAB_TO_CAMEL_CASE(property); describe(`get ${camelCaseProperty}()`, () => { it('Returns style property on element.', () => { const declaration = new CSSStyleDeclaration(element); element.setAttribute( 'style', - `${property}: ${CSSStyleDeclarationDefaultValues[property]};` + `${property}: ${CSSStyleDeclarationMockedProperties[property]};` ); - expect(declaration[camelCaseProperty]).toBe(CSSStyleDeclarationDefaultValues[property]); + expect(declaration[camelCaseProperty]).toBe(CSSStyleDeclarationMockedProperties[property]); }); it('Returns style property without element.', () => { const declaration = new CSSStyleDeclaration(); - declaration[camelCaseProperty] = CSSStyleDeclarationDefaultValues[property]; - expect(declaration[camelCaseProperty]).toBe(CSSStyleDeclarationDefaultValues[property]); + declaration[camelCaseProperty] = CSSStyleDeclarationMockedProperties[property]; + expect(declaration[camelCaseProperty]).toBe(CSSStyleDeclarationMockedProperties[property]); }); }); describe(`set ${camelCaseProperty}()`, () => { it('Sets style property on element.', () => { const declaration = new CSSStyleDeclaration(element); - declaration[camelCaseProperty] = CSSStyleDeclarationDefaultValues[property]; + declaration[camelCaseProperty] = CSSStyleDeclarationMockedProperties[property]; expect(element.getAttribute('style')).toBe( - `${property}: ${CSSStyleDeclarationDefaultValues[property]};` + `${property}: ${CSSStyleDeclarationMockedProperties[property]};` ); }); it('Sets style property without element.', () => { const declaration = new CSSStyleDeclaration(); - declaration[camelCaseProperty] = CSSStyleDeclarationDefaultValues[property]; - expect(declaration[camelCaseProperty]).toBe(CSSStyleDeclarationDefaultValues[property]); + declaration[camelCaseProperty] = CSSStyleDeclarationMockedProperties[property]; + expect(declaration[camelCaseProperty]).toBe(CSSStyleDeclarationMockedProperties[property]); }); }); } diff --git a/packages/happy-dom/test/css/declaration/data/CSSStyleDeclarationCamelCaseKeys.ts b/packages/happy-dom/test/css/declaration/data/CSSStyleDeclarationCamelCaseKeys.ts deleted file mode 100644 index 60e73c3ae..000000000 --- a/packages/happy-dom/test/css/declaration/data/CSSStyleDeclarationCamelCaseKeys.ts +++ /dev/null @@ -1,371 +0,0 @@ -export default [ - 'alignContent', - 'alignItems', - 'alignSelf', - 'alignmentBaseline', - 'all', - 'animation', - 'animationDelay', - 'animationDirection', - 'animationDuration', - 'animationFillMode', - 'animationIterationCount', - 'animationName', - 'animationPlayState', - 'animationTimingFunction', - 'appearance', - 'backdropFilter', - 'backfaceVisibility', - 'background', - 'backgroundAttachment', - 'backgroundBlendMode', - 'backgroundClip', - 'backgroundColor', - 'backgroundImage', - 'backgroundOrigin', - 'backgroundPosition', - 'backgroundPositionX', - 'backgroundPositionY', - 'backgroundRepeat', - 'backgroundRepeatX', - 'backgroundRepeatY', - 'backgroundSize', - 'baselineShift', - 'blockSize', - 'border', - 'borderBlockEnd', - 'borderBlockEndColor', - 'borderBlockEndStyle', - 'borderBlockEndWidth', - 'borderBlockStart', - 'borderBlockStartColor', - 'borderBlockStartStyle', - 'borderBlockStartWidth', - 'borderBottom', - 'borderBottomColor', - 'borderBottomLeftRadius', - 'borderBottomRightRadius', - 'borderBottomStyle', - 'borderBottomWidth', - 'borderCollapse', - 'borderColor', - 'borderImage', - 'borderImageOutset', - 'borderImageRepeat', - 'borderImageSlice', - 'borderImageSource', - 'borderImageWidth', - 'borderInlineEnd', - 'borderInlineEndColor', - 'borderInlineEndStyle', - 'borderInlineEndWidth', - 'borderInlineStart', - 'borderInlineStartColor', - 'borderInlineStartStyle', - 'borderInlineStartWidth', - 'borderLeft', - 'borderLeftColor', - 'borderLeftStyle', - 'borderLeftWidth', - 'borderRadius', - 'borderRight', - 'borderRightColor', - 'borderRightStyle', - 'borderRightWidth', - 'borderSpacing', - 'borderStyle', - 'borderTop', - 'borderTopColor', - 'borderTopLeftRadius', - 'borderTopRightRadius', - 'borderTopStyle', - 'borderTopWidth', - 'borderWidth', - 'bottom', - 'boxShadow', - 'boxSizing', - 'breakAfter', - 'breakBefore', - 'breakInside', - 'bufferedRendering', - 'captionSide', - 'caretColor', - 'clear', - 'clip', - 'clipPath', - 'clipRule', - 'color', - 'colorInterpolation', - 'colorInterpolationFilters', - 'colorRendering', - 'colorScheme', - 'columnCount', - 'columnFill', - 'columnGap', - 'columnRule', - 'columnRuleColor', - 'columnRuleStyle', - 'columnRuleWidth', - 'columnSpan', - 'columnWidth', - 'columns', - 'contain', - 'containIntrinsicSize', - 'content', - 'contentVisibility', - 'counterIncrement', - 'counterReset', - 'counterSet', - 'cssFloat', - 'cursor', - 'cx', - 'cy', - 'd', - 'direction', - 'display', - 'dominantBaseline', - 'emptyCells', - 'fill', - 'fillOpacity', - 'fillRule', - 'filter', - 'flex', - 'flexBasis', - 'flexDirection', - 'flexFlow', - 'flexGrow', - 'flexShrink', - 'flexWrap', - 'float', - 'floodColor', - 'floodOpacity', - 'font', - 'fontDisplay', - 'fontFamily', - 'fontFeatureSettings', - 'fontKerning', - 'fontOpticalSizing', - 'fontSize', - 'fontStretch', - 'fontStyle', - 'fontVariant', - 'fontVariantCaps', - 'fontVariantEastAsian', - 'fontVariantLigatures', - 'fontVariantNumeric', - 'fontVariationSettings', - 'fontWeight', - 'gap', - 'grid', - 'gridArea', - 'gridAutoColumns', - 'gridAutoFlow', - 'gridAutoRows', - 'gridColumn', - 'gridColumnEnd', - 'gridColumnGap', - 'gridColumnStart', - 'gridGap', - 'gridRow', - 'gridRowEnd', - 'gridRowGap', - 'gridRowStart', - 'gridTemplate', - 'gridTemplateAreas', - 'gridTemplateColumns', - 'gridTemplateRows', - 'height', - 'hyphens', - 'imageOrientation', - 'imageRendering', - 'inherits', - 'initialValue', - 'inlineSize', - 'isolation', - 'justifyContent', - 'justifyItems', - 'justifySelf', - 'left', - 'letterSpacing', - 'lightingColor', - 'lineBreak', - 'lineHeight', - 'listStyle', - 'listStyleImage', - 'listStylePosition', - 'listStyleType', - 'margin', - 'marginBlockEnd', - 'marginBlockStart', - 'marginBottom', - 'marginInlineEnd', - 'marginInlineStart', - 'marginLeft', - 'marginRight', - 'marginTop', - 'marker', - 'markerEnd', - 'markerMid', - 'markerStart', - 'mask', - 'maskType', - 'maxBlockSize', - 'maxHeight', - 'maxInlineSize', - 'maxWidth', - 'maxZoom', - 'minBlockSize', - 'minHeight', - 'minInlineSize', - 'minWidth', - 'minZoom', - 'mixBlendMode', - 'objectFit', - 'objectPosition', - 'offset', - 'offsetDistance', - 'offsetPath', - 'offsetRotate', - 'opacity', - 'order', - 'orientation', - 'orphans', - 'outline', - 'outlineColor', - 'outlineOffset', - 'outlineStyle', - 'outlineWidth', - 'overflow', - 'overflowAnchor', - 'overflowWrap', - 'overflowX', - 'overflowY', - 'overscrollBehavior', - 'overscrollBehaviorBlock', - 'overscrollBehaviorInline', - 'overscrollBehaviorX', - 'overscrollBehaviorY', - 'padding', - 'paddingBlockEnd', - 'paddingBlockStart', - 'paddingBottom', - 'paddingInlineEnd', - 'paddingInlineStart', - 'paddingLeft', - 'paddingRight', - 'paddingTop', - 'page', - 'pageBreakAfter', - 'pageBreakBefore', - 'pageBreakInside', - 'pageOrientation', - 'paintOrder', - 'perspective', - 'perspectiveOrigin', - 'placeContent', - 'placeItems', - 'placeSelf', - 'pointerEvents', - 'position', - 'quotes', - 'r', - 'resize', - 'right', - 'rowGap', - 'rubyPosition', - 'rx', - 'ry', - 'scrollBehavior', - 'scrollMargin', - 'scrollMarginBlock', - 'scrollMarginBlockEnd', - 'scrollMarginBlockStart', - 'scrollMarginBottom', - 'scrollMarginInline', - 'scrollMarginInlineEnd', - 'scrollMarginInlineStart', - 'scrollMarginLeft', - 'scrollMarginRight', - 'scrollMarginTop', - 'scrollPadding', - 'scrollPaddingBlock', - 'scrollPaddingBlockEnd', - 'scrollPaddingBlockStart', - 'scrollPaddingBottom', - 'scrollPaddingInline', - 'scrollPaddingInlineEnd', - 'scrollPaddingInlineStart', - 'scrollPaddingLeft', - 'scrollPaddingRight', - 'scrollPaddingTop', - 'scrollSnapAlign', - 'scrollSnapStop', - 'scrollSnapType', - 'shapeImageThreshold', - 'shapeMargin', - 'shapeOutside', - 'shapeRendering', - 'size', - 'speak', - 'src', - 'stopColor', - 'stopOpacity', - 'stroke', - 'strokeDasharray', - 'strokeDashoffset', - 'strokeLinecap', - 'strokeLinejoin', - 'strokeMiterlimit', - 'strokeOpacity', - 'strokeWidth', - 'syntax', - 'tabSize', - 'tableLayout', - 'textAlign', - 'textAlignLast', - 'textAnchor', - 'textCombineUpright', - 'textDecoration', - 'textDecorationColor', - 'textDecorationLine', - 'textDecorationSkipInk', - 'textDecorationStyle', - 'textIndent', - 'textOrientation', - 'textOverflow', - 'textRendering', - 'textShadow', - 'textSizeAdjust', - 'textTransform', - 'textUnderlinePosition', - 'top', - 'touchAction', - 'transform', - 'transformBox', - 'transformOrigin', - 'transformStyle', - 'transition', - 'transitionDelay', - 'transitionDuration', - 'transitionProperty', - 'transitionTimingFunction', - 'unicodeBidi', - 'unicodeRange', - 'userSelect', - 'userZoom', - 'vectorEffect', - 'verticalAlign', - 'visibility', - 'whiteSpace', - 'widows', - 'width', - 'willChange', - 'wordBreak', - 'wordSpacing', - 'wordWrap', - 'writingMode', - 'x', - 'y', - 'zIndex', - 'zoom' -]; diff --git a/packages/happy-dom/test/css/declaration/data/CSSStyleDeclarationKebabCaseKeys.ts b/packages/happy-dom/test/css/declaration/data/CSSStyleDeclarationKebabCaseKeys.ts deleted file mode 100644 index c6fa9f9c0..000000000 --- a/packages/happy-dom/test/css/declaration/data/CSSStyleDeclarationKebabCaseKeys.ts +++ /dev/null @@ -1,371 +0,0 @@ -export default [ - 'align-content', - 'align-items', - 'align-self', - 'alignment-baseline', - 'all', - 'animation', - 'animation-delay', - 'animation-direction', - 'animation-duration', - 'animation-fill-mode', - 'animation-iteration-count', - 'animation-name', - 'animation-play-state', - 'animation-timing-function', - 'appearance', - 'backdrop-filter', - 'backface-visibility', - 'background', - 'background-attachment', - 'background-blend-mode', - 'background-clip', - 'background-color', - 'background-image', - 'background-origin', - 'background-position', - 'background-position-x', - 'background-position-y', - 'background-repeat', - 'background-repeat-x', - 'background-repeat-y', - 'background-size', - 'baseline-shift', - 'block-size', - 'border', - 'border-block-end', - 'border-block-end-color', - 'border-block-end-style', - 'border-block-end-width', - 'border-block-start', - 'border-block-start-color', - 'border-block-start-style', - 'border-block-start-width', - 'border-bottom', - 'border-bottom-color', - 'border-bottom-left-radius', - 'border-bottom-right-radius', - 'border-bottom-style', - 'border-bottom-width', - 'border-collapse', - 'border-color', - 'border-image', - 'border-image-outset', - 'border-image-repeat', - 'border-image-slice', - 'border-image-source', - 'border-image-width', - 'border-inline-end', - 'border-inline-end-color', - 'border-inline-end-style', - 'border-inline-end-width', - 'border-inline-start', - 'border-inline-start-color', - 'border-inline-start-style', - 'border-inline-start-width', - 'border-left', - 'border-left-color', - 'border-left-style', - 'border-left-width', - 'border-radius', - 'border-right', - 'border-right-color', - 'border-right-style', - 'border-right-width', - 'border-spacing', - 'border-style', - 'border-top', - 'border-top-color', - 'border-top-left-radius', - 'border-top-right-radius', - 'border-top-style', - 'border-top-width', - 'border-width', - 'bottom', - 'box-shadow', - 'box-sizing', - 'break-after', - 'break-before', - 'break-inside', - 'buffered-rendering', - 'caption-side', - 'caret-color', - 'clear', - 'clip', - 'clip-path', - 'clip-rule', - 'color', - 'color-interpolation', - 'color-interpolation-filters', - 'color-rendering', - 'color-scheme', - 'column-count', - 'column-fill', - 'column-gap', - 'column-rule', - 'column-rule-color', - 'column-rule-style', - 'column-rule-width', - 'column-span', - 'column-width', - 'columns', - 'contain', - 'contain-intrinsic-size', - 'content', - 'content-visibility', - 'counter-increment', - 'counter-reset', - 'counter-set', - 'css-float', - 'cursor', - 'cx', - 'cy', - 'd', - 'direction', - 'display', - 'dominant-baseline', - 'empty-cells', - 'fill', - 'fill-opacity', - 'fill-rule', - 'filter', - 'flex', - 'flex-basis', - 'flex-direction', - 'flex-flow', - 'flex-grow', - 'flex-shrink', - 'flex-wrap', - 'float', - 'flood-color', - 'flood-opacity', - 'font', - 'font-display', - 'font-family', - 'font-feature-settings', - 'font-kerning', - 'font-optical-sizing', - 'font-size', - 'font-stretch', - 'font-style', - 'font-variant', - 'font-variant-caps', - 'font-variant-east-asian', - 'font-variant-ligatures', - 'font-variant-numeric', - 'font-variation-settings', - 'font-weight', - 'gap', - 'grid', - 'grid-area', - 'grid-auto-columns', - 'grid-auto-flow', - 'grid-auto-rows', - 'grid-column', - 'grid-column-end', - 'grid-column-gap', - 'grid-column-start', - 'grid-gap', - 'grid-row', - 'grid-row-end', - 'grid-row-gap', - 'grid-row-start', - 'grid-template', - 'grid-template-areas', - 'grid-template-columns', - 'grid-template-rows', - 'height', - 'hyphens', - 'image-orientation', - 'image-rendering', - 'inherits', - 'initial-value', - 'inline-size', - 'isolation', - 'justify-content', - 'justify-items', - 'justify-self', - 'left', - 'letter-spacing', - 'lighting-color', - 'line-break', - 'line-height', - 'list-style', - 'list-style-image', - 'list-style-position', - 'list-style-type', - 'margin', - 'margin-block-end', - 'margin-block-start', - 'margin-bottom', - 'margin-inline-end', - 'margin-inline-start', - 'margin-left', - 'margin-right', - 'margin-top', - 'marker', - 'marker-end', - 'marker-mid', - 'marker-start', - 'mask', - 'mask-type', - 'max-block-size', - 'max-height', - 'max-inline-size', - 'max-width', - 'max-zoom', - 'min-block-size', - 'min-height', - 'min-inline-size', - 'min-width', - 'min-zoom', - 'mix-blend-mode', - 'object-fit', - 'object-position', - 'offset', - 'offset-distance', - 'offset-path', - 'offset-rotate', - 'opacity', - 'order', - 'orientation', - 'orphans', - 'outline', - 'outline-color', - 'outline-offset', - 'outline-style', - 'outline-width', - 'overflow', - 'overflow-anchor', - 'overflow-wrap', - 'overflow-x', - 'overflow-y', - 'overscroll-behavior', - 'overscroll-behavior-block', - 'overscroll-behavior-inline', - 'overscroll-behavior-x', - 'overscroll-behavior-y', - 'padding', - 'padding-block-end', - 'padding-block-start', - 'padding-bottom', - 'padding-inline-end', - 'padding-inline-start', - 'padding-left', - 'padding-right', - 'padding-top', - 'page', - 'page-break-after', - 'page-break-before', - 'page-break-inside', - 'page-orientation', - 'paint-order', - 'perspective', - 'perspective-origin', - 'place-content', - 'place-items', - 'place-self', - 'pointer-events', - 'position', - 'quotes', - 'r', - 'resize', - 'right', - 'row-gap', - 'ruby-position', - 'rx', - 'ry', - 'scroll-behavior', - 'scroll-margin', - 'scroll-margin-block', - 'scroll-margin-block-end', - 'scroll-margin-block-start', - 'scroll-margin-bottom', - 'scroll-margin-inline', - 'scroll-margin-inline-end', - 'scroll-margin-inline-start', - 'scroll-margin-left', - 'scroll-margin-right', - 'scroll-margin-top', - 'scroll-padding', - 'scroll-padding-block', - 'scroll-padding-block-end', - 'scroll-padding-block-start', - 'scroll-padding-bottom', - 'scroll-padding-inline', - 'scroll-padding-inline-end', - 'scroll-padding-inline-start', - 'scroll-padding-left', - 'scroll-padding-right', - 'scroll-padding-top', - 'scroll-snap-align', - 'scroll-snap-stop', - 'scroll-snap-type', - 'shape-image-threshold', - 'shape-margin', - 'shape-outside', - 'shape-rendering', - 'size', - 'speak', - 'src', - 'stop-color', - 'stop-opacity', - 'stroke', - 'stroke-dasharray', - 'stroke-dashoffset', - 'stroke-linecap', - 'stroke-linejoin', - 'stroke-miterlimit', - 'stroke-opacity', - 'stroke-width', - 'syntax', - 'tab-size', - 'table-layout', - 'text-align', - 'text-align-last', - 'text-anchor', - 'text-combine-upright', - 'text-decoration', - 'text-decoration-color', - 'text-decoration-line', - 'text-decoration-skip-ink', - 'text-decoration-style', - 'text-indent', - 'text-orientation', - 'text-overflow', - 'text-rendering', - 'text-shadow', - 'text-size-adjust', - 'text-transform', - 'text-underline-position', - 'top', - 'touch-action', - 'transform', - 'transform-box', - 'transform-origin', - 'transform-style', - 'transition', - 'transition-delay', - 'transition-duration', - 'transition-property', - 'transition-timing-function', - 'unicode-bidi', - 'unicode-range', - 'user-select', - 'user-zoom', - 'vector-effect', - 'vertical-align', - 'visibility', - 'white-space', - 'widows', - 'width', - 'will-change', - 'word-break', - 'word-spacing', - 'word-wrap', - 'writing-mode', - 'x', - 'y', - 'z-index', - 'zoom' -]; diff --git a/packages/happy-dom/test/css/declaration/data/CSSStyleDeclarationDefaultValues.ts b/packages/happy-dom/test/css/declaration/data/CSSStyleDeclarationMockedProperties.ts similarity index 94% rename from packages/happy-dom/test/css/declaration/data/CSSStyleDeclarationDefaultValues.ts rename to packages/happy-dom/test/css/declaration/data/CSSStyleDeclarationMockedProperties.ts index 335e05b30..f3651cd11 100644 --- a/packages/happy-dom/test/css/declaration/data/CSSStyleDeclarationDefaultValues.ts +++ b/packages/happy-dom/test/css/declaration/data/CSSStyleDeclarationMockedProperties.ts @@ -16,6 +16,8 @@ export default { appearance: 'none', 'backdrop-filter': 'none', 'backface-visibility': 'visible', + background: + 'center / contain no-repeat url("../../media/examples/firefox-logo.svg"), #eee 35% url("../../media/examples/lizard.png")', 'background-attachment': 'scroll', 'background-blend-mode': 'normal', 'background-clip': 'border-box', @@ -27,6 +29,11 @@ export default { 'background-size': 'auto', 'baseline-shift': '0px', 'block-size': 'auto', + border: '1rem solid red', + 'border-top': '1rem solid red', + 'border-right': '1rem solid red', + 'border-bottom': '1rem solid red', + 'border-left': '1rem solid red', 'border-block-end-color': 'rgb(0, 0, 0)', 'border-block-end-style': 'none', 'border-block-end-width': '0px', @@ -65,6 +72,7 @@ export default { 'border-top-right-radius': '0px', 'border-top-style': 'none', 'border-top-width': '0px', + 'border-radius': '1px 2px 3px 4px', bottom: 'auto', 'box-shadow': 'none', 'box-sizing': 'content-box', @@ -107,6 +115,7 @@ export default { 'fill-opacity': '1', 'fill-rule': 'nonzero', filter: 'none', + flex: '1 2 fill', 'flex-basis': 'auto', 'flex-direction': 'row', 'flex-grow': '0', @@ -115,6 +124,7 @@ export default { float: 'none', 'flood-color': 'rgb(0, 0, 0)', 'flood-opacity': '1', + font: 'italic small-caps bold 2rem/2.2 cursive', 'font-family': 'Roboto, system-ui, sans-serif', 'font-kerning': 'auto', 'font-optical-sizing': 'auto', @@ -162,6 +172,7 @@ export default { 'list-style-image': 'none', 'list-style-position': 'outside', 'list-style-type': 'disc', + margin: '1px 2px 3px 4px', 'margin-block-end': '0px', 'margin-block-start': '0px', 'margin-bottom': '0px', @@ -202,6 +213,7 @@ export default { 'overflow-y': 'visible', 'overscroll-behavior-block': 'auto', 'overscroll-behavior-inline': 'auto', + padding: '1px 2px 3px 4px', 'padding-block-end': '0px', 'padding-block-start': '0px', 'padding-bottom': '0px',