html2canvas-pro 2.0.4 → 2.1.0

package/{dist/lib/css/property-descriptors/__tests__/image-rendering-performance.test.js → src/css/property-descriptors/__tests__/image-rendering-performance.test.ts}

@@ -1,40 +1,37 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const globals_1 = require("@jest/globals");
 /**
  * Performance tests for image smoothing
  * Measures the performance impact of enabling/disabling image smoothing
  */
-(0, globals_1.describe)('image-rendering performance', () => {
-    let canvas;
-    let ctx = null;
-    let testImage;
-    (0, globals_1.beforeEach)(() => {
+describe('image-rendering performance', () => {
+    let canvas: HTMLCanvasElement;
+    let ctx: CanvasRenderingContext2D | null = null;
+    let testImage: HTMLCanvasElement;
+
+    beforeEach(() => {
         ctx = null;
         // Create test canvas (JSDOM throws on getContext('2d'), so catch and skip)
         canvas = document.createElement('canvas');
         canvas.width = 800;
         canvas.height = 600;
-        let context = null;
+        let context: CanvasRenderingContext2D | null = null;
         try {
             context = canvas.getContext('2d');
-        }
-        catch {
+        } catch {
             return;
         }
         if (!context) {
             return;
         }
         ctx = context;
+
         // Create a test image (using canvas as source)
         testImage = document.createElement('canvas');
         testImage.width = 100;
         testImage.height = 100;
-        let testCtx = null;
+        let testCtx: CanvasRenderingContext2D | null = null;
         try {
             testCtx = testImage.getContext('2d');
-        }
-        catch {
+        } catch {
             // JSDOM: no canvas
         }
         if (testCtx) {
@@ -49,88 +46,96 @@ const globals_1 = require("@jest/globals");
             testCtx.fillRect(50, 50, 50, 50);
         }
     });
-    const measureDrawTime = (smoothing, quality) => {
-        if (!ctx)
-            return 0; // Skip if canvas not available
+
+    const measureDrawTime = (smoothing: boolean, quality?: 'low' | 'medium' | 'high'): number => {
+        if (!ctx) return 0; // Skip if canvas not available
+
         ctx.imageSmoothingEnabled = smoothing;
         if (quality) {
             ctx.imageSmoothingQuality = quality;
         }
+
         const iterations = 100;
         const startTime = performance.now();
+
         for (let i = 0; i < iterations; i++) {
             // Scale up the image (this is where smoothing matters)
             ctx.drawImage(testImage, 0, 0, 100, 100, 0, 0, 400, 400);
         }
+
         const endTime = performance.now();
         return (endTime - startTime) / iterations; // Average time per draw
     };
-    (0, globals_1.it)('should measure performance with smoothing disabled', () => {
-        if (!ctx)
-            return; // Skip if canvas not available
+
+    it('should measure performance with smoothing disabled', () => {
+        if (!ctx) return; // Skip if canvas not available
         const avgTime = measureDrawTime(false);
-        (0, globals_1.expect)(avgTime).toBeGreaterThan(0);
-        (0, globals_1.expect)(avgTime).toBeLessThan(100); // Should complete quickly
+        expect(avgTime).toBeGreaterThan(0);
+        expect(avgTime).toBeLessThan(100); // Should complete quickly
     });
-    (0, globals_1.it)('should measure performance with smoothing enabled', () => {
-        if (!ctx)
-            return;
+
+    it('should measure performance with smoothing enabled', () => {
+        if (!ctx) return;
         const avgTime = measureDrawTime(true);
-        (0, globals_1.expect)(avgTime).toBeGreaterThan(0);
-        (0, globals_1.expect)(avgTime).toBeLessThan(100);
+        expect(avgTime).toBeGreaterThan(0);
+        expect(avgTime).toBeLessThan(100);
     });
-    (0, globals_1.it)('should measure performance with low quality smoothing', () => {
-        if (!ctx)
-            return;
+
+    it('should measure performance with low quality smoothing', () => {
+        if (!ctx) return;
         const avgTime = measureDrawTime(true, 'low');
-        (0, globals_1.expect)(avgTime).toBeGreaterThan(0);
+        expect(avgTime).toBeGreaterThan(0);
     });
-    (0, globals_1.it)('should measure performance with medium quality smoothing', () => {
-        if (!ctx)
-            return;
+
+    it('should measure performance with medium quality smoothing', () => {
+        if (!ctx) return;
         const avgTime = measureDrawTime(true, 'medium');
-        (0, globals_1.expect)(avgTime).toBeGreaterThan(0);
+        expect(avgTime).toBeGreaterThan(0);
     });
-    (0, globals_1.it)('should measure performance with high quality smoothing', () => {
-        if (!ctx)
-            return;
+
+    it('should measure performance with high quality smoothing', () => {
+        if (!ctx) return;
         const avgTime = measureDrawTime(true, 'high');
-        (0, globals_1.expect)(avgTime).toBeGreaterThan(0);
+        expect(avgTime).toBeGreaterThan(0);
     });
-    (0, globals_1.it)('should compare performance: disabled vs enabled', () => {
-        if (!ctx)
-            return;
+
+    it('should compare performance: disabled vs enabled', () => {
+        if (!ctx) return;
         const disabledTime = measureDrawTime(false);
         const enabledTime = measureDrawTime(true);
+
         // Performance should be reasonable in both cases
-        (0, globals_1.expect)(disabledTime).toBeLessThan(50);
-        (0, globals_1.expect)(enabledTime).toBeLessThan(50);
+        expect(disabledTime).toBeLessThan(50);
+        expect(enabledTime).toBeLessThan(50);
+
         // Verify difference is within acceptable range
         const difference = enabledTime - disabledTime;
-        (0, globals_1.expect)(Math.abs(difference)).toBeLessThan(30);
+        expect(Math.abs(difference)).toBeLessThan(30);
     });
-    (0, globals_1.it)('should compare quality levels', () => {
-        if (!ctx)
-            return;
+
+    it('should compare quality levels', () => {
+        if (!ctx) return;
         const lowTime = measureDrawTime(true, 'low');
         const mediumTime = measureDrawTime(true, 'medium');
         const highTime = measureDrawTime(true, 'high');
+
         // All quality levels should complete reasonably fast
-        (0, globals_1.expect)(lowTime).toBeLessThan(50);
-        (0, globals_1.expect)(mediumTime).toBeLessThan(50);
-        (0, globals_1.expect)(highTime).toBeLessThan(50);
+        expect(lowTime).toBeLessThan(50);
+        expect(mediumTime).toBeLessThan(50);
+        expect(highTime).toBeLessThan(50);
     });
-    (0, globals_1.describe)('Large image performance', () => {
-        let largeTestImage;
-        (0, globals_1.beforeEach)(() => {
+
+    describe('Large image performance', () => {
+        let largeTestImage: HTMLCanvasElement;
+
+        beforeEach(() => {
             largeTestImage = document.createElement('canvas');
             largeTestImage.width = 500;
             largeTestImage.height = 500;
-            let testCtx = null;
+            let testCtx: CanvasRenderingContext2D | null = null;
             try {
                 testCtx = largeTestImage.getContext('2d');
-            }
-            catch {
+            } catch {
                 // JSDOM: no canvas
             }
             if (testCtx) {
@@ -143,25 +148,28 @@ const globals_1 = require("@jest/globals");
                 testCtx.fillRect(0, 0, 500, 500);
             }
         });
-        (0, globals_1.it)('should handle large image with smoothing disabled', () => {
-            if (!ctx)
-                return;
+
+        it('should handle large image with smoothing disabled', () => {
+            if (!ctx) return;
             ctx.imageSmoothingEnabled = false;
+
             const startTime = performance.now();
             ctx.drawImage(largeTestImage, 0, 0, 500, 500, 0, 0, 800, 600);
             const duration = performance.now() - startTime;
-            (0, globals_1.expect)(duration).toBeLessThan(100);
+
+            expect(duration).toBeLessThan(100);
         });
-        (0, globals_1.it)('should handle large image with smoothing enabled', () => {
-            if (!ctx)
-                return;
+
+        it('should handle large image with smoothing enabled', () => {
+            if (!ctx) return;
             ctx.imageSmoothingEnabled = true;
             ctx.imageSmoothingQuality = 'high';
+
             const startTime = performance.now();
             ctx.drawImage(largeTestImage, 0, 0, 500, 500, 0, 0, 800, 600);
             const duration = performance.now() - startTime;
-            (0, globals_1.expect)(duration).toBeLessThan(200); // Allow more time for high quality
+
+            expect(duration).toBeLessThan(200); // Allow more time for high quality
         });
     });
 });
-//# sourceMappingURL=image-rendering-performance.test.js.map

package/src/css/property-descriptors/__tests__/image-rendering.test.ts

@@ -0,0 +1,72 @@
+import { imageRendering, IMAGE_RENDERING } from '../image-rendering';
+import { Context } from '../../../core/context';
+import { Html2CanvasConfig } from '../../../config';
+
+describe('property-descriptors', () => {
+    let context: Context;
+
+    beforeEach(() => {
+        const mockWindow = {
+            location: { href: 'http://example.com' },
+            document: { createElement: () => ({ href: '' }) }
+        } as any;
+        const config = new Html2CanvasConfig({ window: mockWindow });
+        context = new Context({} as any, {} as any, config);
+    });
+
+    describe('image-rendering', () => {
+        it('should parse "auto" as AUTO', () => {
+            expect(imageRendering.parse(context, 'auto')).toBe(IMAGE_RENDERING.AUTO);
+        });
+
+        it('should parse "pixelated" as PIXELATED', () => {
+            expect(imageRendering.parse(context, 'pixelated')).toBe(IMAGE_RENDERING.PIXELATED);
+        });
+
+        it('should parse "crisp-edges" as CRISP_EDGES', () => {
+            expect(imageRendering.parse(context, 'crisp-edges')).toBe(IMAGE_RENDERING.CRISP_EDGES);
+        });
+
+        it('should parse "-webkit-crisp-edges" as CRISP_EDGES', () => {
+            expect(imageRendering.parse(context, '-webkit-crisp-edges')).toBe(IMAGE_RENDERING.CRISP_EDGES);
+        });
+
+        it('should parse "-webkit-optimize-contrast" as PIXELATED', () => {
+            expect(imageRendering.parse(context, '-webkit-optimize-contrast')).toBe(IMAGE_RENDERING.PIXELATED);
+        });
+
+        it('should parse "smooth" as SMOOTH', () => {
+            expect(imageRendering.parse(context, 'smooth')).toBe(IMAGE_RENDERING.SMOOTH);
+        });
+
+        it('should parse unknown values as AUTO', () => {
+            expect(imageRendering.parse(context, 'invalid')).toBe(IMAGE_RENDERING.AUTO);
+        });
+
+        it('should be case-insensitive', () => {
+            expect(imageRendering.parse(context, 'PIXELATED')).toBe(IMAGE_RENDERING.PIXELATED);
+            expect(imageRendering.parse(context, 'Crisp-Edges')).toBe(IMAGE_RENDERING.CRISP_EDGES);
+        });
+
+        // Edge case tests
+        it('should handle empty string as AUTO', () => {
+            expect(imageRendering.parse(context, '')).toBe(IMAGE_RENDERING.AUTO);
+        });
+
+        it('should handle whitespace as AUTO', () => {
+            expect(imageRendering.parse(context, '   ')).toBe(IMAGE_RENDERING.AUTO);
+        });
+
+        it('should handle special characters as AUTO', () => {
+            expect(imageRendering.parse(context, '@#$%')).toBe(IMAGE_RENDERING.AUTO);
+        });
+
+        it('should parse "-moz-crisp-edges" as CRISP_EDGES', () => {
+            expect(imageRendering.parse(context, '-moz-crisp-edges')).toBe(IMAGE_RENDERING.CRISP_EDGES);
+        });
+
+        it('should parse "high-quality" as SMOOTH', () => {
+            expect(imageRendering.parse(context, 'high-quality')).toBe(IMAGE_RENDERING.SMOOTH);
+        });
+    });
+});

package/src/css/property-descriptors/__tests__/paint-order.ts

@@ -0,0 +1,87 @@
+import { deepStrictEqual } from 'assert';
+import { Parser } from '../../syntax/parser';
+import { paintOrder, PAINT_ORDER_LAYER } from '../paint-order';
+import { Context } from '../../../core/context';
+
+const paintOrderParse = (value: string) => paintOrder.parse({} as Context, Parser.parseValues(value));
+
+describe('property-descriptors', () => {
+    describe('paint-order', () => {
+        it('none', () =>
+            deepStrictEqual(paintOrderParse('none'), [
+                PAINT_ORDER_LAYER.FILL,
+                PAINT_ORDER_LAYER.STROKE,
+                PAINT_ORDER_LAYER.MARKERS
+            ]));
+
+        it('EMPTY', () =>
+            deepStrictEqual(paintOrderParse(''), [
+                PAINT_ORDER_LAYER.FILL,
+                PAINT_ORDER_LAYER.STROKE,
+                PAINT_ORDER_LAYER.MARKERS
+            ]));
+
+        it('other values', () =>
+            deepStrictEqual(paintOrderParse('other values'), [
+                PAINT_ORDER_LAYER.FILL,
+                PAINT_ORDER_LAYER.STROKE,
+                PAINT_ORDER_LAYER.MARKERS
+            ]));
+
+        it('normal', () =>
+            deepStrictEqual(paintOrderParse('normal'), [
+                PAINT_ORDER_LAYER.FILL,
+                PAINT_ORDER_LAYER.STROKE,
+                PAINT_ORDER_LAYER.MARKERS
+            ]));
+
+        it('stroke', () =>
+            deepStrictEqual(paintOrderParse('stroke'), [
+                PAINT_ORDER_LAYER.STROKE,
+                PAINT_ORDER_LAYER.FILL,
+                PAINT_ORDER_LAYER.MARKERS
+            ]));
+
+        it('fill', () =>
+            deepStrictEqual(paintOrderParse('fill'), [
+                PAINT_ORDER_LAYER.FILL,
+                PAINT_ORDER_LAYER.STROKE,
+                PAINT_ORDER_LAYER.MARKERS
+            ]));
+
+        it('markers', () =>
+            deepStrictEqual(paintOrderParse('markers'), [
+                PAINT_ORDER_LAYER.MARKERS,
+                PAINT_ORDER_LAYER.FILL,
+                PAINT_ORDER_LAYER.STROKE
+            ]));
+
+        it('stroke fill', () =>
+            deepStrictEqual(paintOrderParse('stroke fill'), [
+                PAINT_ORDER_LAYER.STROKE,
+                PAINT_ORDER_LAYER.FILL,
+                PAINT_ORDER_LAYER.MARKERS
+            ]));
+
+        it('markers stroke', () =>
+            deepStrictEqual(paintOrderParse('markers stroke'), [
+                PAINT_ORDER_LAYER.MARKERS,
+                PAINT_ORDER_LAYER.STROKE,
+                PAINT_ORDER_LAYER.FILL
+            ]));
+
+        it('markers stroke fill', () =>
+            deepStrictEqual(paintOrderParse('markers stroke fill'), [
+                PAINT_ORDER_LAYER.MARKERS,
+                PAINT_ORDER_LAYER.STROKE,
+                PAINT_ORDER_LAYER.FILL
+            ]));
+
+        it('stroke fill markers', () =>
+            deepStrictEqual(paintOrderParse('stroke fill markers'), [
+                PAINT_ORDER_LAYER.STROKE,
+                PAINT_ORDER_LAYER.FILL,
+                PAINT_ORDER_LAYER.MARKERS
+            ]));
+    });
+});

package/src/css/property-descriptors/__tests__/text-shadow.ts

@@ -0,0 +1,94 @@
+import { deepStrictEqual } from 'assert';
+import { Parser } from '../../syntax/parser';
+import { color, COLORS } from '../../types/color';
+import { textShadow } from '../text-shadow';
+import { FLAG_INTEGER, DimensionToken, TokenType } from '../../syntax/tokenizer';
+import { ZERO_LENGTH } from '../../types/length-percentage';
+import { Context } from '../../../core/context';
+
+const textShadowParse = (value: string) => textShadow.parse({} as Context, Parser.parseValues(value));
+const colorParse = (value: string) => color.parse({} as Context, Parser.parseValue(value));
+const dimension = (number: number, unit: string): DimensionToken => ({
+    flags: FLAG_INTEGER,
+    number,
+    unit,
+    type: TokenType.DIMENSION_TOKEN
+});
+
+describe('property-descriptors', () => {
+    describe('text-shadow', () => {
+        it('none', () => deepStrictEqual(textShadowParse('none'), []));
+
+        it('1px 1px 2px pink', () =>
+            deepStrictEqual(textShadowParse('1px 1px 2px pink'), [
+                {
+                    color: colorParse('pink'),
+                    offsetX: dimension(1, 'px'),
+                    offsetY: dimension(1, 'px'),
+                    blur: dimension(2, 'px')
+                }
+            ]));
+
+        it('#fc0 1px 0 10px', () =>
+            deepStrictEqual(textShadowParse('#fc0 1px 0 10px'), [
+                {
+                    color: colorParse('#fc0'),
+                    offsetX: dimension(1, 'px'),
+                    offsetY: ZERO_LENGTH,
+                    blur: dimension(10, 'px')
+                }
+            ]));
+
+        it('5px 5px #558abb', () =>
+            deepStrictEqual(textShadowParse('5px 5px #558abb'), [
+                {
+                    color: colorParse('#558abb'),
+                    offsetX: dimension(5, 'px'),
+                    offsetY: dimension(5, 'px'),
+                    blur: ZERO_LENGTH
+                }
+            ]));
+
+        it('white 2px 5px', () =>
+            deepStrictEqual(textShadowParse('white 2px 5px'), [
+                {
+                    color: colorParse('#fff'),
+                    offsetX: dimension(2, 'px'),
+                    offsetY: dimension(5, 'px'),
+                    blur: ZERO_LENGTH
+                }
+            ]));
+
+        it('white 2px 5px', () =>
+            deepStrictEqual(textShadowParse('5px 10px'), [
+                {
+                    color: COLORS.TRANSPARENT,
+                    offsetX: dimension(5, 'px'),
+                    offsetY: dimension(10, 'px'),
+                    blur: ZERO_LENGTH
+                }
+            ]));
+
+        it('1px 1px 2px red, 0 0 1em blue, 0 0 2em blue', () =>
+            deepStrictEqual(textShadowParse('1px 1px 2px red, 0 0 1em blue, 0 0 2em blue'), [
+                {
+                    color: colorParse('red'),
+                    offsetX: dimension(1, 'px'),
+                    offsetY: dimension(1, 'px'),
+                    blur: dimension(2, 'px')
+                },
+                {
+                    color: colorParse('blue'),
+                    offsetX: ZERO_LENGTH,
+                    offsetY: ZERO_LENGTH,
+                    blur: dimension(1, 'em')
+                },
+                {
+                    color: colorParse('blue'),
+                    offsetX: ZERO_LENGTH,
+                    offsetY: ZERO_LENGTH,
+                    blur: dimension(2, 'em')
+                }
+            ]));
+    });
+});

package/src/css/property-descriptors/__tests__/transform-tests.ts

@@ -0,0 +1,18 @@
+import { transform } from '../transform';
+import { Parser } from '../../syntax/parser';
+import { deepStrictEqual } from 'assert';
+import { Context } from '../../../core/context';
+const parseValue = (value: string) => transform.parse({} as Context, Parser.parseValue(value));
+
+describe('property-descriptors', () => {
+    describe('transform', () => {
+        it('none', () => deepStrictEqual(parseValue('none'), null));
+        it('matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0)', () =>
+            deepStrictEqual(parseValue('matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0)'), [1, 2, 3, 4, 5, 6]));
+        it('matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)', () =>
+            deepStrictEqual(
+                parseValue('matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'),
+                [1, 0, 0, 1, 0, 0]
+            ));
+    });
+});

package/src/css/property-descriptors/background-clip.ts

@@ -0,0 +1,30 @@
+import { IPropertyListDescriptor, PropertyDescriptorParsingType } from '../property-descriptor';
+import { CSSValue, isIdentToken } from '../syntax/parser';
+import { Context } from '../../core/context';
+export const enum BACKGROUND_CLIP {
+    BORDER_BOX = 0,
+    PADDING_BOX = 1,
+    CONTENT_BOX = 2
+}
+
+export type BackgroundClip = BACKGROUND_CLIP[];
+
+export const backgroundClip: IPropertyListDescriptor<BackgroundClip> = {
+    name: 'background-clip',
+    initialValue: 'border-box',
+    prefix: false,
+    type: PropertyDescriptorParsingType.LIST,
+    parse: (_context: Context, tokens: CSSValue[]): BackgroundClip => {
+        return tokens.map((token) => {
+            if (isIdentToken(token)) {
+                switch (token.value) {
+                    case 'padding-box':
+                        return BACKGROUND_CLIP.PADDING_BOX;
+                    case 'content-box':
+                        return BACKGROUND_CLIP.CONTENT_BOX;
+                }
+            }
+            return BACKGROUND_CLIP.BORDER_BOX;
+        });
+    }
+};

package/src/css/property-descriptors/background-color.ts

@@ -0,0 +1,9 @@
+import { IPropertyTypeValueDescriptor, PropertyDescriptorParsingType } from '../property-descriptor';
+
+export const backgroundColor: IPropertyTypeValueDescriptor = {
+    name: `background-color`,
+    initialValue: 'transparent',
+    prefix: false,
+    type: PropertyDescriptorParsingType.TYPE_VALUE,
+    format: 'color'
+};

package/src/css/property-descriptors/background-image.ts

@@ -0,0 +1,27 @@
+import { TokenType } from '../syntax/tokenizer';
+import { ICSSImage, image, isSupportedImage } from '../types/image';
+import { IPropertyListDescriptor, PropertyDescriptorParsingType } from '../property-descriptor';
+import { CSSValue, nonFunctionArgSeparator } from '../syntax/parser';
+import { Context } from '../../core/context';
+
+export const backgroundImage: IPropertyListDescriptor<ICSSImage[]> = {
+    name: 'background-image',
+    initialValue: 'none',
+    type: PropertyDescriptorParsingType.LIST,
+    prefix: false,
+    parse: (context: Context, tokens: CSSValue[]) => {
+        if (tokens.length === 0) {
+            return [];
+        }
+
+        const first = tokens[0];
+
+        if (first.type === TokenType.IDENT_TOKEN && first.value === 'none') {
+            return [];
+        }
+
+        return tokens
+            .filter((value) => nonFunctionArgSeparator(value) && isSupportedImage(value))
+            .map((value) => image.parse(context, value));
+    }
+};

package/src/css/property-descriptors/background-origin.ts

@@ -0,0 +1,31 @@
+import { IPropertyListDescriptor, PropertyDescriptorParsingType } from '../property-descriptor';
+import { CSSValue, isIdentToken } from '../syntax/parser';
+import { Context } from '../../core/context';
+
+export const enum BACKGROUND_ORIGIN {
+    BORDER_BOX = 0,
+    PADDING_BOX = 1,
+    CONTENT_BOX = 2
+}
+
+export type BackgroundOrigin = BACKGROUND_ORIGIN[];
+
+export const backgroundOrigin: IPropertyListDescriptor<BackgroundOrigin> = {
+    name: 'background-origin',
+    initialValue: 'border-box',
+    prefix: false,
+    type: PropertyDescriptorParsingType.LIST,
+    parse: (_context: Context, tokens: CSSValue[]): BackgroundOrigin => {
+        return tokens.map((token) => {
+            if (isIdentToken(token)) {
+                switch (token.value) {
+                    case 'padding-box':
+                        return BACKGROUND_ORIGIN.PADDING_BOX;
+                    case 'content-box':
+                        return BACKGROUND_ORIGIN.CONTENT_BOX;
+                }
+            }
+            return BACKGROUND_ORIGIN.BORDER_BOX;
+        });
+    }
+};

package/src/css/property-descriptors/background-position.ts

@@ -0,0 +1,38 @@
+import { PropertyDescriptorParsingType, IPropertyListDescriptor } from '../property-descriptor';
+import { CSSValue, parseFunctionArgs } from '../syntax/parser';
+import {
+    isLengthPercentage,
+    isCalcFunction,
+    evaluateCalcToLengthPercentage,
+    LengthPercentageTuple,
+    parseLengthPercentageTuple
+} from '../types/length-percentage';
+import { Context } from '../../core/context';
+export type BackgroundPosition = BackgroundImagePosition[];
+
+export type BackgroundImagePosition = LengthPercentageTuple;
+
+export const backgroundPosition: IPropertyListDescriptor<BackgroundPosition> = {
+    name: 'background-position',
+    initialValue: '0% 0%',
+    type: PropertyDescriptorParsingType.LIST,
+    prefix: false,
+    parse: (_context: Context, tokens: CSSValue[]): BackgroundPosition => {
+        return parseFunctionArgs(tokens)
+            .map((values: CSSValue[]) => {
+                // Convert calc() to length-percentage tokens, keep other length-percentage as is
+                return values
+                    .map((value) => {
+                        if (isCalcFunction(value)) {
+                            // For calc() at parse time, we can't know the container size
+                            // So we evaluate with 0 context which will work for px-only calc()
+                            // Percentage-based calc() will need special handling
+                            return evaluateCalcToLengthPercentage(value, 0);
+                        }
+                        return isLengthPercentage(value) ? value : null;
+                    })
+                    .filter((v): v is NonNullable<typeof v> => v !== null);
+            })
+            .map(parseLengthPercentageTuple);
+    }
+};