fix: multi token overflow #1850 (#1851)

src/css/index.ts

@@ -40,7 +40,7 @@ import {listStyleImage} from './property-descriptors/list-style-image';
 import {listStylePosition} from './property-descriptors/list-style-position';
 import {listStyleType} from './property-descriptors/list-style-type';
 import {marginBottom, marginLeft, marginRight, marginTop} from './property-descriptors/margin';
-import {overflow} from './property-descriptors/overflow';
+import {overflow, OVERFLOW} from './property-descriptors/overflow';
 import {overflowWrap} from './property-descriptors/overflow-wrap';
 import {paddingBottom, paddingLeft, paddingRight, paddingTop} from './property-descriptors/padding';
 import {textAlign} from './property-descriptors/text-align';
@@ -118,7 +118,8 @@ export class CSSParsedDeclaration {
     marginBottom: CSSValue;
     marginLeft: CSSValue;
     opacity: ReturnType<typeof opacity.parse>;
-    overflow: ReturnType<typeof overflow.parse>;
+    overflowX: OVERFLOW;
+    overflowY: OVERFLOW;
     overflowWrap: ReturnType<typeof overflowWrap.parse>;
     paddingTop: LengthPercentage;
     paddingRight: LengthPercentage;
@@ -180,7 +181,9 @@ export class CSSParsedDeclaration {
         this.marginBottom = parse(marginBottom, declaration.marginBottom);
         this.marginLeft = parse(marginLeft, declaration.marginLeft);
         this.opacity = parse(opacity, declaration.opacity);
-        this.overflow = parse(overflow, declaration.overflow);
+        const overflowTuple = parse(overflow, declaration.overflow);
+        this.overflowX = overflowTuple[0];
+        this.overflowY = overflowTuple[overflowTuple.length > 1 ? 1 : 0];
         this.overflowWrap = parse(overflowWrap, declaration.overflowWrap);
         this.paddingTop = parse(paddingTop, declaration.paddingTop);
         this.paddingRight = parse(paddingRight, declaration.paddingRight);

src/css/property-descriptors/overflow.ts

@@ -1,4 +1,5 @@
-import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+import {CSSValue, isIdentToken} from '../syntax/parser';
 export enum OVERFLOW {
     VISIBLE = 0,
     HIDDEN = 1,
@@ -6,22 +7,24 @@ export enum OVERFLOW {
     AUTO = 3
 }
 
-export const overflow: IPropertyIdentValueDescriptor<OVERFLOW> = {
+export const overflow: IPropertyListDescriptor<OVERFLOW[]> = {
     name: 'overflow',
     initialValue: 'visible',
     prefix: false,
-    type: PropertyDescriptorParsingType.IDENT_VALUE,
-    parse: (overflow: string) => {
-        switch (overflow) {
-            case 'hidden':
-                return OVERFLOW.HIDDEN;
-            case 'scroll':
-                return OVERFLOW.SCROLL;
-            case 'auto':
-                return OVERFLOW.AUTO;
-            case 'visible':
-            default:
-                return OVERFLOW.VISIBLE;
-        }
+    type: PropertyDescriptorParsingType.LIST,
+    parse: (tokens: CSSValue[]): OVERFLOW[] => {
+        return tokens.filter(isIdentToken).map(overflow => {
+            switch (overflow.value) {
+                case 'hidden':
+                    return OVERFLOW.HIDDEN;
+                case 'scroll':
+                    return OVERFLOW.SCROLL;
+                case 'auto':
+                    return OVERFLOW.AUTO;
+                case 'visible':
+                default:
+                    return OVERFLOW.VISIBLE;
+            }
+        });
     }
 };

src/render/stacking-context.ts

@@ -48,7 +48,7 @@ export class ElementPaint {
             this.effects.push(new TransformEffect(offsetX, offsetY, matrix));
         }
 
-        if (element.styles.overflow !== OVERFLOW.VISIBLE) {
+        if (element.styles.overflowX !== OVERFLOW.VISIBLE) {
             const borderBox = calculateBorderBoxPath(this.curves);
             const paddingBox = calculatePaddingBoxPath(this.curves);
 
@@ -63,7 +63,7 @@ export class ElementPaint {
 
     getParentEffects(): IElementEffect[] {
         const effects = this.effects.slice(0);
-        if (this.container.styles.overflow !== OVERFLOW.VISIBLE) {
+        if (this.container.styles.overflowX !== OVERFLOW.VISIBLE) {
             const borderBox = calculateBorderBoxPath(this.curves);
             const paddingBox = calculatePaddingBoxPath(this.curves);
             if (!equalPath(borderBox, paddingBox)) {