feat: box-shadow rendering (#1848)

* feat: box-shadow rendering

* test: add box-shadow test

src/css/index.ts

@@ -72,6 +72,7 @@ import {content} from './property-descriptors/content';
 import {counterIncrement} from './property-descriptors/counter-increment';
 import {counterReset} from './property-descriptors/counter-reset';
 import {quotes} from './property-descriptors/quotes';
+import {boxShadow} from './property-descriptors/box-shadow';
 
 export class CSSParsedDeclaration {
     backgroundClip: ReturnType<typeof backgroundClip.parse>;
@@ -97,6 +98,7 @@ export class CSSParsedDeclaration {
     borderRightWidth: ReturnType<typeof borderRightWidth.parse>;
     borderBottomWidth: ReturnType<typeof borderBottomWidth.parse>;
     borderLeftWidth: ReturnType<typeof borderLeftWidth.parse>;
+    boxShadow: ReturnType<typeof boxShadow.parse>;
     color: Color;
     display: ReturnType<typeof display.parse>;
     float: ReturnType<typeof float.parse>;
@@ -158,6 +160,7 @@ export class CSSParsedDeclaration {
         this.borderRightWidth = parse(borderRightWidth, declaration.borderRightWidth);
         this.borderBottomWidth = parse(borderBottomWidth, declaration.borderBottomWidth);
         this.borderLeftWidth = parse(borderLeftWidth, declaration.borderLeftWidth);
+        this.boxShadow = parse(boxShadow, declaration.boxShadow);
         this.color = parse(color, declaration.color);
         this.display = parse(display, declaration.display);
         this.float = parse(float, declaration.cssFloat);

src/css/property-descriptors/box-shadow.ts

@@ -0,0 +1,59 @@
+import {PropertyDescriptorParsingType, IPropertyListDescriptor} from '../IPropertyDescriptor';
+import {CSSValue, isIdentWithValue, parseFunctionArgs} from '../syntax/parser';
+import {ZERO_LENGTH} from '../types/length-percentage';
+import {color, Color} from '../types/color';
+import {isLength, Length} from '../types/length';
+
+export type BoxShadow = BoxShadowItem[];
+interface BoxShadowItem {
+    inset: boolean;
+    color: Color;
+    offsetX: Length;
+    offsetY: Length;
+    blur: Length;
+    spread: Length;
+}
+
+export const boxShadow: IPropertyListDescriptor<BoxShadow> = {
+    name: 'box-shadow',
+    initialValue: 'none',
+    type: PropertyDescriptorParsingType.LIST,
+    prefix: false,
+    parse: (tokens: CSSValue[]): BoxShadow => {
+        if (tokens.length === 1 && isIdentWithValue(tokens[0], 'none')) {
+            return [];
+        }
+
+        return parseFunctionArgs(tokens).map((values: CSSValue[]) => {
+            const shadow: BoxShadowItem = {
+                color: 0x000000ff,
+                offsetX: ZERO_LENGTH,
+                offsetY: ZERO_LENGTH,
+                blur: ZERO_LENGTH,
+                spread: ZERO_LENGTH,
+                inset: false
+            };
+            let c = 0;
+            for (let i = 0; i < values.length; i++) {
+                const token = values[i];
+                if (isIdentWithValue(token, 'inset')) {
+                    shadow.inset = true;
+                } else if (isLength(token)) {
+                    if (c === 0) {
+                        shadow.offsetX = token;
+                    } else if (c === 1) {
+                        shadow.offsetY = token;
+                    } else if (c === 2) {
+                        shadow.blur = token;
+                    } else {
+                        shadow.spread = token;
+                    }
+                    c++;
+                } else {
+                    shadow.color = color.parse(token);
+                }
+            }
+            return shadow;
+        });
+    }
+};