html2canvas-pro 2.0.4 → 2.1.0

package/src/css/type-descriptor.ts

@@ -0,0 +1,7 @@
+import { CSSValue } from './syntax/parser';
+import { Context } from '../core/context';
+
+export interface ITypeDescriptor<T> {
+    name: string;
+    parse: (context: Context, value: CSSValue) => T;
+}

package/src/css/types/__tests__/color-tests.ts

@@ -0,0 +1,147 @@
+import { strictEqual } from 'assert';
+import { color } from '../color';
+import { asString, isTransparent, pack } from '../color-utilities';
+import { Parser } from '../../syntax/parser';
+import { Context } from '../../../core/context';
+
+const parse = (value: string) => color.parse({} as Context, Parser.parseValue(value));
+
+describe('types', () => {
+    describe('<color>', () => {
+        describe('parsing', () => {
+            it('#000', () => strictEqual(parse('#000'), pack(0, 0, 0, 1)));
+            it('#0000', () => strictEqual(parse('#0000'), pack(0, 0, 0, 0)));
+            it('#000f', () => strictEqual(parse('#000f'), pack(0, 0, 0, 1)));
+            it('#fff', () => strictEqual(parse('#fff'), pack(255, 255, 255, 1)));
+            it('#000000', () => strictEqual(parse('#000000'), pack(0, 0, 0, 1)));
+            it('#00000000', () => strictEqual(parse('#00000000'), pack(0, 0, 0, 0)));
+            it('#ffffff', () => strictEqual(parse('#ffffff'), pack(255, 255, 255, 1)));
+            it('#ffffffff', () => strictEqual(parse('#ffffffff'), pack(255, 255, 255, 1)));
+            it('#7FFFD4', () => strictEqual(parse('#7FFFD4'), pack(127, 255, 212, 1)));
+            it('#f0ffff', () => strictEqual(parse('#f0ffff'), pack(240, 255, 255, 1)));
+            it('transparent', () => strictEqual(parse('transparent'), pack(0, 0, 0, 0)));
+            it('bisque', () => strictEqual(parse('bisque'), pack(255, 228, 196, 1)));
+            it('BLUE', () => strictEqual(parse('BLUE'), pack(0, 0, 255, 1)));
+            it('rgb(1, 3, 5)', () => strictEqual(parse('rgb(1, 3, 5)'), pack(1, 3, 5, 1)));
+            it('rgb(0% 0% 0%)', () => strictEqual(parse('rgb(0% 0% 0%)'), pack(0, 0, 0, 1)));
+            it('rgb(50% 50% 50%)', () => strictEqual(parse('rgb(50% 50% 50%)'), pack(128, 128, 128, 1)));
+            it('rgba(50% 50% 50% 50%)', () => strictEqual(parse('rgba(50% 50% 50% 50%)'), pack(128, 128, 128, 0.5)));
+            it('rgb(100% 100% 100%)', () => strictEqual(parse('rgb(100% 100% 100%)'), pack(255, 255, 255, 1)));
+            it('rgb(222 111 50)', () => strictEqual(parse('rgb(222 111 50)'), pack(222, 111, 50, 1)));
+            it('rgba(200, 3, 5, 1)', () => strictEqual(parse('rgba(200, 3, 5, 1)'), pack(200, 3, 5, 1)));
+            it('rgba(222, 111, 50, 0.22)', () =>
+                strictEqual(parse('rgba(222, 111, 50, 0.22)'), pack(222, 111, 50, 0.22)));
+            it('rgba(222 111 50 0.123)', () => strictEqual(parse('rgba(222 111 50 0.123)'), pack(222, 111, 50, 0.123)));
+            it('hsl(270,60%,70%)', () => strictEqual(parse('hsl(270,60%,70%)'), parse('rgb(178,132,224)')));
+            it('hsl(270, 60%, 70%)', () => strictEqual(parse('hsl(270, 60%, 70%)'), parse('rgb(178,132,224)')));
+            it('hsl(270 60% 70%)', () => strictEqual(parse('hsl(270 60% 70%)'), parse('rgb(178,132,224)')));
+            it('hsl(270deg, 60%, 70%)', () => strictEqual(parse('hsl(270deg, 60%, 70%)'), parse('rgb(178,132,224)')));
+            it('hsl(4.71239rad, 60%, 70%)', () =>
+                strictEqual(parse('hsl(4.71239rad, 60%, 70%)'), parse('rgb(178,132,224)')));
+            it('hsl(.75turn, 60%, 70%)', () => strictEqual(parse('hsl(.75turn, 60%, 70%)'), parse('rgb(178,132,224)')));
+            it('hsla(.75turn, 60%, 70%, 50%)', () =>
+                strictEqual(parse('hsl(.75turn, 60%, 70%, 50%)'), parse('rgba(178,132,224, 0.5)')));
+            it('oklch(0.93 0.39 28deg)', () => strictEqual(parse('oklch(0.93 0.39 28deg)'), pack(255, 0, 23, 1)));
+            it('oklch(0.93 0.39 28)', () => strictEqual(parse('oklch(0.93 0.39 28)'), pack(255, 0, 23, 1)));
+            it('oklch(0.63 0.26 27.65)', () => strictEqual(parse('oklch(0.63 0.26 27.65)'), pack(255, 0, 20, 1)));
+            it('oklch(0.57 0.23 145.62)', () => strictEqual(parse('oklch(0.57 0.23 145.62)'), pack(0, 151, 0, 1)));
+            it('oklch(0.57 0.23 145.62 / 0.5)', () =>
+                strictEqual(parse('oklch(0.57 0.23 145.62 / 0.5)'), pack(0, 151, 0, 0.5)));
+            it('oklab(0.4 0.11 0.05)', () => strictEqual(parse('oklab(0.4 0.11 0.05)'), pack(124, 37, 37, 1)));
+            it('oklab(0.57 -0.19 0.13)', () => strictEqual(parse('oklab(0.57 -0.19 0.13)'), pack(0, 151, 0, 1)));
+            it('oklab(0.57 -0.19 0.13 / 50%)', () =>
+                strictEqual(parse('oklab(0.57 -0.19 0.13 / 50%)'), pack(0, 151, 0, 0.5)));
+            it('lab(53 -66.2 60.96)', () => strictEqual(parse('lab(53 -66.2 60.96)'), pack(0, 151, 0, 1)));
+            it('lab(63 -41.52 -25.36)', () => strictEqual(parse('lab(63 -41.52 -25.36)'), pack(0, 173, 196, 1)));
+            it('lab(63 -41.52 -25.36 / 0.5)', () =>
+                strictEqual(parse('lab(63 -41.52 -25.36 / 0.5)'), pack(0, 173, 196, 0.5)));
+            it('lch(29.2345% 44.2 27)', () => strictEqual(parse('lch(29.2345% 44.2 27)'), pack(125, 35, 41, 1)));
+            it('lch(52.2345% 72.2 56.2)', () => strictEqual(parse('lch(52.2345% 72.2 56.2)'), pack(198, 93, 6, 1)));
+            it('color(srgb 1 0 0)', () => strictEqual(parse('color(srgb 1 0 0)'), pack(255, 0, 0, 1)));
+            it('color(srgb 1 0 0 / .5)', () => strictEqual(parse('color(srgb 1 0 0 / .5)'), pack(255, 0, 0, 0.5)));
+            it('color(srgb 0.5 0 0.5)', () => strictEqual(parse('color(srgb 0.5 0 0.5)'), pack(128, 0, 128, 1)));
+            it('color(xyz 0.11 0.17 0.24)', () =>
+                strictEqual(parse('color(xyz 0.11 0.17 0.24)'), pack(0, 130, 131, 1)));
+            it('color(xyz-d65 0.11 0.17 0.24)', () =>
+                strictEqual(parse('color(xyz-d65 0.11 0.17 0.24)'), pack(0, 130, 131, 1)));
+            it('color(xyz-d50 0.11 0.17 0.24)', () =>
+                strictEqual(parse('color(xyz-d50 0.11 0.17 0.24)'), pack(0, 131, 150, 1)));
+            it('color(srgb-linear 0.23 0.59 0.13)', () =>
+                strictEqual(parse('color(srgb-linear 0.23 0.59 0.13)'), pack(132, 202, 101, 1)));
+            it('color(display-p3 0.47 0.47 0.47)', () =>
+                strictEqual(parse('color(display-p3 0.47 0.47 0.47)'), pack(120, 120, 120, 1)));
+            it('color(display-p3 1 1 1)', () => strictEqual(parse('color(display-p3 1 1 1)'), pack(255, 255, 255, 1)));
+            it('color(display-p3 -0.1 -0.1 -0.1) ', () =>
+                strictEqual(parse('color(display-p3 -0.1 -0.1 -0.1)'), pack(0, 0, 0, 1)));
+            it('color(display-p3 0.238 0.532 0.611)', () =>
+                strictEqual(parse('color(display-p3 0.238 0.532 0.611)'), pack(5, 138, 158, 1)));
+            it('color(display-p3 1 0 0)', () => strictEqual(parse('color(display-p3 1 0 0)'), pack(255, 0, 0, 1)));
+            it('color(display-p3 0 1 0)', () => strictEqual(parse('color(display-p3 0 1 0)'), pack(0, 255, 0, 1)));
+            it('color(display-p3 0 0 1)', () => strictEqual(parse('color(display-p3 0 0 1)'), pack(0, 0, 255, 1)));
+            it('color(a98-rgb 1 0.5 0)', () => strictEqual(parse('color(a98-rgb 1 0.5 0)'), pack(255, 129, 0, 1)));
+            it('color(a98-rgb 1 0.22548 0.9854)', () =>
+                strictEqual(parse('color(a98-rgb 1 0.22548 0.9854)'), pack(255, 55, 255, 1)));
+            it('color(prophoto-rgb 1 0.5 0)', () =>
+                strictEqual(parse('color(prophoto-rgb 1 0.5 0)'), pack(255, 99, 0, 1)));
+            it('color(rec2020 0.17 0.31 0.5)', () =>
+                strictEqual(parse('color(rec2020 0.17 0.31 0.5)'), pack(0, 97, 144, 1)));
+            it('color(rec2020 1 0 0)', () => strictEqual(parse('color(rec2020 1 0 0)'), pack(255, 0, 0, 1)));
+            it('color(rec2020 0 1 0)', () => strictEqual(parse('color(rec2020 0 1 0)'), pack(0, 255, 0, 1)));
+            it('color(rec2020 0 0 1)', () => strictEqual(parse('color(rec2020 0 0 1)'), pack(0, 0, 255, 1)));
+            it('color(from #0000FF srgb r g b)', () =>
+                strictEqual(parse('color(from #0000FF srgb r b g)'), pack(0, 255, 0, 1)));
+            it('color(from #0000FF srgb b 0 0)', () =>
+                strictEqual(parse('color(from #0000FF srgb b 0 0)'), pack(255, 0, 0, 1)));
+            it('color(from green srgb r g b)', () =>
+                strictEqual(parse('color(from green srgb r g b)'), pack(0, 128, 0, 1)));
+            it('color(from lime srgb r g b)', () =>
+                strictEqual(parse('color(from lime srgb r g b)'), pack(0, 255, 0, 1)));
+            it('color(from green srgb r calc(g * 2) b)', () =>
+                strictEqual(parse('color(from green srgb r calc(g * 2) b)'), pack(0, 255, 0, 1)));
+            it('color(from hsl(0 100% 50%) xyz x y z)', () =>
+                strictEqual(parse('color(from hsl(0 100% 50%) xyz x y z)'), pack(255, 0, 0, 1)));
+            it('color(from hsl(0 100% 50%) xyz 0.75 0.6554 0.1)', () =>
+                strictEqual(parse('color(from hsl(0 100% 50%) xyz 0.75 0.6554 0.1)'), pack(255, 189, 31, 1)));
+            it('color(from hsl(0 100% 50%) srgb 0.749938 0 0.609579)', () =>
+                strictEqual(parse('color(from hsl(0 100% 50%) srgb 0.749938 0 0.609579)'), pack(191, 0, 155, 1)));
+            it('color(from hsl(0 100% 50%) display-p3 r g b)', () =>
+                strictEqual(parse('color(from hsl(0 100% 50%) display-p3 r g b)'), pack(255, 0, 0, 1)));
+            it('color(from lab(52.14 -26.38 -20.37) display-p3 r g b)', () =>
+                strictEqual(parse('color(from lab(52.14 -26.38 -20.37) display-p3 r g b)'), pack(5, 138, 158, 1)));
+            it('color(from lab(52.14 -26.38 -20.37) display-p3 r g calc(r / 2))', () =>
+                strictEqual(
+                    parse('color(from lab(52.14 -26.38 -20.37) display-p3 r g calc(r / 2))'),
+                    pack(5, 138, 0, 1)
+                ));
+            it('color(from lab(52.14 -26.38 -20.37) a98-rgb r g b)', () =>
+                strictEqual(parse('color(from lab(52.14 -26.38 -20.37) a98-rgb r g b)'), pack(5, 138, 158, 1)));
+            it('color(from hsl(0 100% 50%) prophoto-rgb r g b)', () =>
+                strictEqual(parse('color(from hsl(0 100% 50%) prophoto-rgb r g b)'), pack(255, 0, 0, 1)));
+            it('color(from hsl(0 100% 50%) prophoto-rgb calc(r / 2) g b)', () =>
+                strictEqual(parse('color(from hsl(0 100% 50%) prophoto-rgb calc(r / 2) g b)'), pack(132, 83, 11, 1)));
+            it('color(from lab(52.14 -26.38 -20.37) rec2020 r g b)', () =>
+                strictEqual(parse('color(from lab(52.14 -26.38 -20.37) rec2020 r g b)'), pack(5, 138, 158, 1)));
+            it('color(from hsl(0 100% 50%) rec2020 calc(r / 2) g 0)', () =>
+                strictEqual(parse('color(from hsl(0 100% 50%) rec2020 calc(r / 2) g 0)'), pack(135, 68, 0, 1)));
+        });
+        describe('util', () => {
+            describe('isTransparent', () => {
+                it('transparent', () => strictEqual(isTransparent(parse('transparent')), true));
+                it('#000', () => strictEqual(isTransparent(parse('#000')), false));
+                it('#000f', () => strictEqual(isTransparent(parse('#000f')), false));
+                it('#0001', () => strictEqual(isTransparent(parse('#0001')), false));
+                it('#0000', () => strictEqual(isTransparent(parse('#0000')), true));
+            });
+
+            describe('toString', () => {
+                it('transparent', () => strictEqual(asString(parse('transparent')), 'rgba(0,0,0,0)'));
+                it('#000', () => strictEqual(asString(parse('#000')), 'rgb(0,0,0)'));
+                it('#000f', () => strictEqual(asString(parse('#000f')), 'rgb(0,0,0)'));
+                it('#000f', () => strictEqual(asString(parse('#000c')), 'rgba(0,0,0,0.8)'));
+                it('#fff', () => strictEqual(asString(parse('#fff')), 'rgb(255,255,255)'));
+                it('#ffff', () => strictEqual(asString(parse('#ffff')), 'rgb(255,255,255)'));
+                it('#fffc', () => strictEqual(asString(parse('#fffc')), 'rgba(255,255,255,0.8)'));
+            });
+        });
+    });
+});

package/src/css/types/__tests__/image-tests.ts

@@ -0,0 +1,239 @@
+import { deepStrictEqual } from 'assert';
+import { Parser } from '../../syntax/parser';
+import { CSSImageType, image } from '../image';
+import { color } from '../color';
+import { pack } from '../color-utilities';
+import { FLAG_INTEGER, TokenType } from '../../syntax/tokenizer';
+import { deg } from '../angle';
+
+const parse = (context: Context, value: string) => image.parse(context, Parser.parseValue(value));
+const colorParse = (context: Context, value: string) => color.parse(context, Parser.parseValue(value));
+
+vi.mock('../../../core/features');
+
+vi.mock('../../../core/context');
+import { Context } from '../../../core/context';
+
+import { Html2CanvasConfig } from '../../../config';
+
+describe('types', () => {
+    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>', () => {
+        describe('parsing', () => {
+            describe('url', () => {
+                it('url(test.jpg)', () =>
+                    deepStrictEqual(parse(context, 'url(http://example.com/test.jpg)'), {
+                        url: 'http://example.com/test.jpg',
+                        type: CSSImageType.URL
+                    }));
+                it('url("test.jpg")', () =>
+                    deepStrictEqual(parse(context, 'url("http://example.com/test.jpg")'), {
+                        url: 'http://example.com/test.jpg',
+                        type: CSSImageType.URL
+                    }));
+            });
+            describe('linear-gradient', () => {
+                it('linear-gradient(#f69d3c, #3f87a6)', () =>
+                    deepStrictEqual(parse(context, 'linear-gradient(#f69d3c, #3f87a6)'), {
+                        angle: deg(180),
+                        type: CSSImageType.LINEAR_GRADIENT,
+                        stops: [
+                            { color: pack(0xf6, 0x9d, 0x3c, 1), stop: null },
+                            { color: pack(0x3f, 0x87, 0xa6, 1), stop: null }
+                        ]
+                    }));
+                it('linear-gradient(yellow, blue)', () =>
+                    deepStrictEqual(parse(context, 'linear-gradient(yellow, blue)'), {
+                        angle: deg(180),
+                        type: CSSImageType.LINEAR_GRADIENT,
+                        stops: [
+                            { color: colorParse(context, 'yellow'), stop: null },
+                            { color: colorParse(context, 'blue'), stop: null }
+                        ]
+                    }));
+                it('linear-gradient(to bottom, yellow, blue)', () =>
+                    deepStrictEqual(parse(context, 'linear-gradient(to bottom, yellow, blue)'), {
+                        angle: deg(180),
+                        type: CSSImageType.LINEAR_GRADIENT,
+                        stops: [
+                            { color: colorParse(context, 'yellow'), stop: null },
+                            { color: colorParse(context, 'blue'), stop: null }
+                        ]
+                    }));
+                it('linear-gradient(180deg, yellow, blue)', () =>
+                    deepStrictEqual(parse(context, 'linear-gradient(180deg, yellow, blue)'), {
+                        angle: deg(180),
+                        type: CSSImageType.LINEAR_GRADIENT,
+                        stops: [
+                            { color: colorParse(context, 'yellow'), stop: null },
+                            { color: colorParse(context, 'blue'), stop: null }
+                        ]
+                    }));
+                it('linear-gradient(to top, blue, yellow)', () =>
+                    deepStrictEqual(parse(context, 'linear-gradient(to top, blue, yellow)'), {
+                        angle: 0,
+                        type: CSSImageType.LINEAR_GRADIENT,
+                        stops: [
+                            { color: colorParse(context, 'blue'), stop: null },
+                            { color: colorParse(context, 'yellow'), stop: null }
+                        ]
+                    }));
+                it('linear-gradient(to top right, blue, yellow)', () =>
+                    deepStrictEqual(parse(context, 'linear-gradient(to top right, blue, yellow)'), {
+                        angle: [
+                            { type: TokenType.PERCENTAGE_TOKEN, number: 100, flags: 4 },
+                            { type: TokenType.NUMBER_TOKEN, number: 0, flags: 4 }
+                        ],
+                        type: CSSImageType.LINEAR_GRADIENT,
+                        stops: [
+                            { color: colorParse(context, 'blue'), stop: null },
+                            { color: colorParse(context, 'yellow'), stop: null }
+                        ]
+                    }));
+                it('linear-gradient(to bottom, yellow 0%, blue 100%)', () =>
+                    deepStrictEqual(parse(context, 'linear-gradient(to bottom, yellow 0%, blue 100%)'), {
+                        angle: deg(180),
+                        type: CSSImageType.LINEAR_GRADIENT,
+                        stops: [
+                            {
+                                color: colorParse(context, 'yellow'),
+                                stop: {
+                                    type: TokenType.PERCENTAGE_TOKEN,
+                                    number: 0,
+                                    flags: FLAG_INTEGER
+                                }
+                            },
+                            {
+                                color: colorParse(context, 'blue'),
+                                stop: {
+                                    type: TokenType.PERCENTAGE_TOKEN,
+                                    number: 100,
+                                    flags: FLAG_INTEGER
+                                }
+                            }
+                        ]
+                    }));
+                it('linear-gradient(to top left, lightpink, lightpink 5px, white 5px, white 10px)', () =>
+                    deepStrictEqual(
+                        parse(context, 'linear-gradient(to top left, lightpink, lightpink 5px, white 5px, white 10px)'),
+                        {
+                            angle: [
+                                { type: TokenType.PERCENTAGE_TOKEN, number: 100, flags: 4 },
+                                { type: TokenType.PERCENTAGE_TOKEN, number: 100, flags: 4 }
+                            ],
+                            type: CSSImageType.LINEAR_GRADIENT,
+                            stops: [
+                                { color: colorParse(context, 'lightpink'), stop: null },
+                                {
+                                    color: colorParse(context, 'lightpink'),
+                                    stop: {
+                                        type: TokenType.DIMENSION_TOKEN,
+                                        number: 5,
+                                        flags: FLAG_INTEGER,
+                                        unit: 'px'
+                                    }
+                                },
+                                {
+                                    color: colorParse(context, 'white'),
+                                    stop: {
+                                        type: TokenType.DIMENSION_TOKEN,
+                                        number: 5,
+                                        flags: FLAG_INTEGER,
+                                        unit: 'px'
+                                    }
+                                },
+                                {
+                                    color: colorParse(context, 'white'),
+                                    stop: {
+                                        type: TokenType.DIMENSION_TOKEN,
+                                        number: 10,
+                                        flags: FLAG_INTEGER,
+                                        unit: 'px'
+                                    }
+                                }
+                            ]
+                        }
+                    ));
+            });
+            describe('-prefix-linear-gradient', () => {
+                it('-webkit-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #3a8bc2 84%, #26558b 100%)', () =>
+                    deepStrictEqual(
+                        parse(
+                            context,
+                            '-webkit-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #3a8bc2 84%, #26558b 100%)'
+                        ),
+                        {
+                            angle: deg(90),
+                            type: CSSImageType.LINEAR_GRADIENT,
+                            stops: [
+                                {
+                                    color: colorParse(context, '#cedbe9'),
+                                    stop: {
+                                        type: TokenType.PERCENTAGE_TOKEN,
+                                        number: 0,
+                                        flags: FLAG_INTEGER
+                                    }
+                                },
+                                {
+                                    color: colorParse(context, '#aac5de'),
+                                    stop: {
+                                        type: TokenType.PERCENTAGE_TOKEN,
+                                        number: 17,
+                                        flags: FLAG_INTEGER
+                                    }
+                                },
+                                {
+                                    color: colorParse(context, '#3a8bc2'),
+                                    stop: {
+                                        type: TokenType.PERCENTAGE_TOKEN,
+                                        number: 84,
+                                        flags: FLAG_INTEGER
+                                    }
+                                },
+                                {
+                                    color: colorParse(context, '#26558b'),
+                                    stop: {
+                                        type: TokenType.PERCENTAGE_TOKEN,
+                                        number: 100,
+                                        flags: FLAG_INTEGER
+                                    }
+                                }
+                            ]
+                        }
+                    ));
+                it('-moz-linear-gradient(top, #cce5f4 0%, #00263c 100%)', () =>
+                    deepStrictEqual(parse(context, '-moz-linear-gradient(top, #cce5f4 0%, #00263c 100%)'), {
+                        angle: deg(180),
+                        type: CSSImageType.LINEAR_GRADIENT,
+                        stops: [
+                            {
+                                color: colorParse(context, '#cce5f4'),
+                                stop: {
+                                    type: TokenType.PERCENTAGE_TOKEN,
+                                    number: 0,
+                                    flags: FLAG_INTEGER
+                                }
+                            },
+                            {
+                                color: colorParse(context, '#00263c'),
+                                stop: {
+                                    type: TokenType.PERCENTAGE_TOKEN,
+                                    number: 100,
+                                    flags: FLAG_INTEGER
+                                }
+                            }
+                        ]
+                    }));
+            });
+        });
+    });
+});

package/src/css/types/angle.ts

@@ -0,0 +1,86 @@
+import { CSSValue, isIdentToken } from '../syntax/parser';
+import { TokenType } from '../syntax/tokenizer';
+import { ITypeDescriptor } from '../type-descriptor';
+import { HUNDRED_PERCENT, ZERO_LENGTH } from './length-percentage';
+import { GradientCorner } from './image';
+import { Context } from '../../core/context';
+
+const DEG = 'deg';
+const GRAD = 'grad';
+const RAD = 'rad';
+const TURN = 'turn';
+
+export const angle: ITypeDescriptor<number> = {
+    name: 'angle',
+    parse: (_context: Context, value: CSSValue): number => {
+        if (value.type === TokenType.DIMENSION_TOKEN) {
+            switch (value.unit) {
+                case DEG:
+                    return (Math.PI * value.number) / 180;
+                case GRAD:
+                    return (Math.PI / 200) * value.number;
+                case RAD:
+                    return value.number;
+                case TURN:
+                    return Math.PI * 2 * value.number;
+            }
+        }
+
+        throw new Error(`Unsupported angle type`);
+    }
+};
+
+export const isAngle = (value: CSSValue): boolean => {
+    if (value.type === TokenType.DIMENSION_TOKEN) {
+        if (value.unit === DEG || value.unit === GRAD || value.unit === RAD || value.unit === TURN) {
+            return true;
+        }
+    }
+    return false;
+};
+
+export const parseNamedSide = (tokens: CSSValue[]): number | GradientCorner => {
+    const sideOrCorner = tokens
+        .filter(isIdentToken)
+        .map((ident) => ident.value)
+        .join(' ');
+
+    switch (sideOrCorner) {
+        case 'to bottom right':
+        case 'to right bottom':
+        case 'left top':
+        case 'top left':
+            return [ZERO_LENGTH, ZERO_LENGTH];
+        case 'to top':
+        case 'bottom':
+            return deg(0);
+        case 'to bottom left':
+        case 'to left bottom':
+        case 'right top':
+        case 'top right':
+            return [ZERO_LENGTH, HUNDRED_PERCENT];
+        case 'to right':
+        case 'left':
+            return deg(90);
+        case 'to top left':
+        case 'to left top':
+        case 'right bottom':
+        case 'bottom right':
+            return [HUNDRED_PERCENT, HUNDRED_PERCENT];
+        case 'to bottom':
+        case 'top':
+            return deg(180);
+        case 'to top right':
+        case 'to right top':
+        case 'left bottom':
+        case 'bottom left':
+            return [HUNDRED_PERCENT, ZERO_LENGTH];
+        case 'to left':
+        case 'right':
+            return deg(270);
+    }
+
+    return 0;
+};
+
+export const deg = (deg: number): number => (Math.PI * deg) / 180;

package/src/css/types/color-math.ts

@@ -0,0 +1,22 @@
+/**
+ * Color mathematics utilities
+ * Extracted to break circular dependency between srgb.ts and color-utilities.ts
+ */
+
+/**
+ * Clamp a value between min and max
+ */
+export const clamp = (value: number, min: number, max: number): number => {
+    return Math.min(Math.max(value, min), max);
+};
+
+/**
+ * Multiply two 3x3 matrices
+ */
+export const multiplyMatrices = (A: number[], B: number[]): [number, number, number] => {
+    return [
+        A[0] * B[0] + A[1] * B[1] + A[2] * B[2],
+        A[3] * B[0] + A[4] * B[1] + A[5] * B[2],
+        A[6] * B[0] + A[7] * B[1] + A[8] * B[2]
+    ];
+};

package/src/css/types/color-spaces/a98.ts

@@ -0,0 +1,86 @@
+/**
+ * A98-RGB related functions
+ */
+
+import { multiplyMatrices, packSrgbLinear } from '../color-utilities';
+import { xyz2rgbLinear } from './srgb';
+
+/**
+ * Convert XYZ to a98 linear
+ *
+ * @param xyz
+ */
+export const xyz2a98Linear = (xyz: [number, number, number]): [number, number, number] => {
+    return multiplyMatrices(
+        [
+            2.0415879038107465, -0.5650069742788596, -0.34473135077832956, -0.9692436362808795, 1.8759675015077202,
+            0.04155505740717557, 0.013444280632031142, -0.11836239223101838, 1.0151749943912054
+        ],
+        xyz
+    );
+};
+
+/**
+ * Convert XYZ to a98 linear
+ *
+ * @param a98
+ */
+export const a98Linear2xyz = (a98: [number, number, number]): [number, number, number] => {
+    return multiplyMatrices(
+        [
+            0.5766690429101305, 0.1855582379065463, 0.1882286462349947, 0.29734497525053605, 0.6273635662554661,
+            0.0752914584939978, 0.02703136138641234, 0.07068885253582723, 0.9913375368376388
+        ],
+        a98
+    );
+};
+
+/**
+ * Convert A98 RGB to rgb linear
+ *
+ * @param rgb
+ */
+export const a982a98Linear = (rgb: [number, number, number]): [number, number, number] => {
+    const mapped = rgb.map((c: number) => {
+        const sign = c < 0 ? -1 : 1,
+            abs = Math.abs(c);
+        return sign * abs ** (563 / 256);
+    });
+
+    return [mapped[0], mapped[1], mapped[2]];
+};
+
+/**
+ * Convert A98 RGB Linear to A98
+ *
+ * @param rgb
+ */
+export const a98Linear2a98 = (rgb: [number, number, number]): [number, number, number] => {
+    const mapped = rgb.map((c: number) => {
+        const sign = c < 0 ? -1 : 1,
+            abs = Math.abs(c);
+        return sign * abs ** (256 / 563);
+    });
+
+    return [mapped[0], mapped[1], mapped[2]];
+};
+
+/**
+ * Convert XYZ to A98
+ *
+ * @param args
+ */
+export const a98FromXYZ = (args: [number, number, number, number]): [number, number, number, number] => {
+    const [r, g, b] = a98Linear2a98(xyz2a98Linear([args[0], args[1], args[2]]));
+    return [r, g, b, args[3]];
+};
+
+/**
+ * Convert A98 to XYZ and Pack
+ *
+ * @param args
+ */
+export const convertA98rgb = (args: number[]): number => {
+    const srgb_linear = xyz2rgbLinear(a98Linear2xyz(a982a98Linear([args[0], args[1], args[2]])));
+    return packSrgbLinear([srgb_linear[0], srgb_linear[1], srgb_linear[2], args[3]]);
+};