mirror/html2canvas
1
0
Fork 0
mirror of https://github.com/niklasvh/html2canvas.git synced 2023-08-10 21:13:10 +03:00
Code Issues Projects Releases Wiki Activity

fix: element cropping & scrolling (#2625)

Browse Source
This commit is contained in:
Niklas von Hertzen
2021-08-04 20:58:17 +08:00
committed by GitHub
parent 1338c7b203
commit 878e37a242
90 changed files with 750 additions and 552 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/css/IPropertyDescriptor.ts
View File

@@ -1,5 +1,6 @@
import {CSSValue} from './syntax/parser';
import {CSSTypes} from './types/index';
import {Context} from '../core/context';
export enum PropertyDescriptorParsingType {
VALUE,
@@ -18,7 +19,7 @@ export interface IPropertyDescriptor {
export interface IPropertyIdentValueDescriptor<T> extends IPropertyDescriptor {
type: PropertyDescriptorParsingType.IDENT_VALUE;
parse: (token: string) => T;
parse: (context: Context, token: string) => T;
}
export interface IPropertyTypeValueDescriptor extends IPropertyDescriptor {
@@ -28,12 +29,12 @@ export interface IPropertyTypeValueDescriptor extends IPropertyDescriptor {
export interface IPropertyValueDescriptor<T> extends IPropertyDescriptor {
type: PropertyDescriptorParsingType.VALUE;
parse: (token: CSSValue) => T;
parse: (context: Context, token: CSSValue) => T;
}
export interface IPropertyListDescriptor<T> extends IPropertyDescriptor {
type: PropertyDescriptorParsingType.LIST;
parse: (tokens: CSSValue[]) => T;
parse: (context: Context, tokens: CSSValue[]) => T;
}
export interface IPropertyTokenValueDescriptor extends IPropertyDescriptor {

3
src/css/ITypeDescriptor.ts
View File

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

158
src/css/index.ts
View File

@@ -76,6 +76,7 @@ import {boxShadow} from './property-descriptors/box-shadow';
import {paintOrder} from './property-descriptors/paint-order';
import {webkitTextStrokeColor} from './property-descriptors/webkit-text-stroke-color';
import {webkitTextStrokeWidth} from './property-descriptors/webkit-text-stroke-width';
import {Context} from '../core/context';
export class CSSParsedDeclaration {
backgroundClip: ReturnType<typeof backgroundClip.parse>;
@@ -143,75 +144,80 @@ export class CSSParsedDeclaration {
wordBreak: ReturnType<typeof wordBreak.parse>;
zIndex: ReturnType<typeof zIndex.parse>;
constructor(declaration: CSSStyleDeclaration) {
this.backgroundClip = parse(backgroundClip, declaration.backgroundClip);
this.backgroundColor = parse(backgroundColor, declaration.backgroundColor);
this.backgroundImage = parse(backgroundImage, declaration.backgroundImage);
this.backgroundOrigin = parse(backgroundOrigin, declaration.backgroundOrigin);
this.backgroundPosition = parse(backgroundPosition, declaration.backgroundPosition);
this.backgroundRepeat = parse(backgroundRepeat, declaration.backgroundRepeat);
this.backgroundSize = parse(backgroundSize, declaration.backgroundSize);
this.borderTopColor = parse(borderTopColor, declaration.borderTopColor);
this.borderRightColor = parse(borderRightColor, declaration.borderRightColor);
this.borderBottomColor = parse(borderBottomColor, declaration.borderBottomColor);
this.borderLeftColor = parse(borderLeftColor, declaration.borderLeftColor);
this.borderTopLeftRadius = parse(borderTopLeftRadius, declaration.borderTopLeftRadius);
this.borderTopRightRadius = parse(borderTopRightRadius, declaration.borderTopRightRadius);
this.borderBottomRightRadius = parse(borderBottomRightRadius, declaration.borderBottomRightRadius);
this.borderBottomLeftRadius = parse(borderBottomLeftRadius, declaration.borderBottomLeftRadius);
this.borderTopStyle = parse(borderTopStyle, declaration.borderTopStyle);
this.borderRightStyle = parse(borderRightStyle, declaration.borderRightStyle);
this.borderBottomStyle = parse(borderBottomStyle, declaration.borderBottomStyle);
this.borderLeftStyle = parse(borderLeftStyle, declaration.borderLeftStyle);
this.borderTopWidth = parse(borderTopWidth, declaration.borderTopWidth);
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);
this.fontFamily = parse(fontFamily, declaration.fontFamily);
this.fontSize = parse(fontSize, declaration.fontSize);
this.fontStyle = parse(fontStyle, declaration.fontStyle);
this.fontVariant = parse(fontVariant, declaration.fontVariant);
this.fontWeight = parse(fontWeight, declaration.fontWeight);
this.letterSpacing = parse(letterSpacing, declaration.letterSpacing);
this.lineBreak = parse(lineBreak, declaration.lineBreak);
this.lineHeight = parse(lineHeight, declaration.lineHeight);
this.listStyleImage = parse(listStyleImage, declaration.listStyleImage);
this.listStylePosition = parse(listStylePosition, declaration.listStylePosition);
this.listStyleType = parse(listStyleType, declaration.listStyleType);
this.marginTop = parse(marginTop, declaration.marginTop);
this.marginRight = parse(marginRight, declaration.marginRight);
this.marginBottom = parse(marginBottom, declaration.marginBottom);
this.marginLeft = parse(marginLeft, declaration.marginLeft);
this.opacity = parse(opacity, declaration.opacity);
const overflowTuple = parse(overflow, declaration.overflow);
constructor(context: Context, declaration: CSSStyleDeclaration) {
this.backgroundClip = parse(context, backgroundClip, declaration.backgroundClip);
this.backgroundColor = parse(context, backgroundColor, declaration.backgroundColor);
this.backgroundImage = parse(context, backgroundImage, declaration.backgroundImage);
this.backgroundOrigin = parse(context, backgroundOrigin, declaration.backgroundOrigin);
this.backgroundPosition = parse(context, backgroundPosition, declaration.backgroundPosition);
this.backgroundRepeat = parse(context, backgroundRepeat, declaration.backgroundRepeat);
this.backgroundSize = parse(context, backgroundSize, declaration.backgroundSize);
this.borderTopColor = parse(context, borderTopColor, declaration.borderTopColor);
this.borderRightColor = parse(context, borderRightColor, declaration.borderRightColor);
this.borderBottomColor = parse(context, borderBottomColor, declaration.borderBottomColor);
this.borderLeftColor = parse(context, borderLeftColor, declaration.borderLeftColor);
this.borderTopLeftRadius = parse(context, borderTopLeftRadius, declaration.borderTopLeftRadius);
this.borderTopRightRadius = parse(context, borderTopRightRadius, declaration.borderTopRightRadius);
this.borderBottomRightRadius = parse(context, borderBottomRightRadius, declaration.borderBottomRightRadius);
this.borderBottomLeftRadius = parse(context, borderBottomLeftRadius, declaration.borderBottomLeftRadius);
this.borderTopStyle = parse(context, borderTopStyle, declaration.borderTopStyle);
this.borderRightStyle = parse(context, borderRightStyle, declaration.borderRightStyle);
this.borderBottomStyle = parse(context, borderBottomStyle, declaration.borderBottomStyle);
this.borderLeftStyle = parse(context, borderLeftStyle, declaration.borderLeftStyle);
this.borderTopWidth = parse(context, borderTopWidth, declaration.borderTopWidth);
this.borderRightWidth = parse(context, borderRightWidth, declaration.borderRightWidth);
this.borderBottomWidth = parse(context, borderBottomWidth, declaration.borderBottomWidth);
this.borderLeftWidth = parse(context, borderLeftWidth, declaration.borderLeftWidth);
this.boxShadow = parse(context, boxShadow, declaration.boxShadow);
this.color = parse(context, color, declaration.color);
this.display = parse(context, display, declaration.display);
this.float = parse(context, float, declaration.cssFloat);
this.fontFamily = parse(context, fontFamily, declaration.fontFamily);
this.fontSize = parse(context, fontSize, declaration.fontSize);
this.fontStyle = parse(context, fontStyle, declaration.fontStyle);
this.fontVariant = parse(context, fontVariant, declaration.fontVariant);
this.fontWeight = parse(context, fontWeight, declaration.fontWeight);
this.letterSpacing = parse(context, letterSpacing, declaration.letterSpacing);
this.lineBreak = parse(context, lineBreak, declaration.lineBreak);
this.lineHeight = parse(context, lineHeight, declaration.lineHeight);
this.listStyleImage = parse(context, listStyleImage, declaration.listStyleImage);
this.listStylePosition = parse(context, listStylePosition, declaration.listStylePosition);
this.listStyleType = parse(context, listStyleType, declaration.listStyleType);
this.marginTop = parse(context, marginTop, declaration.marginTop);
this.marginRight = parse(context, marginRight, declaration.marginRight);
this.marginBottom = parse(context, marginBottom, declaration.marginBottom);
this.marginLeft = parse(context, marginLeft, declaration.marginLeft);
this.opacity = parse(context, opacity, declaration.opacity);
const overflowTuple = parse(context, 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);
this.paddingBottom = parse(paddingBottom, declaration.paddingBottom);
this.paddingLeft = parse(paddingLeft, declaration.paddingLeft);
this.paintOrder = parse(paintOrder, declaration.paintOrder);
this.position = parse(position, declaration.position);
this.textAlign = parse(textAlign, declaration.textAlign);
this.textDecorationColor = parse(textDecorationColor, declaration.textDecorationColor ?? declaration.color);
this.overflowWrap = parse(context, overflowWrap, declaration.overflowWrap);
this.paddingTop = parse(context, paddingTop, declaration.paddingTop);
this.paddingRight = parse(context, paddingRight, declaration.paddingRight);
this.paddingBottom = parse(context, paddingBottom, declaration.paddingBottom);
this.paddingLeft = parse(context, paddingLeft, declaration.paddingLeft);
this.paintOrder = parse(context, paintOrder, declaration.paintOrder);
this.position = parse(context, position, declaration.position);
this.textAlign = parse(context, textAlign, declaration.textAlign);
this.textDecorationColor = parse(
context,
textDecorationColor,
declaration.textDecorationColor ?? declaration.color
);
this.textDecorationLine = parse(
context,
textDecorationLine,
declaration.textDecorationLine ?? declaration.textDecoration
);
this.textShadow = parse(textShadow, declaration.textShadow);
this.textTransform = parse(textTransform, declaration.textTransform);
this.transform = parse(transform, declaration.transform);
this.transformOrigin = parse(transformOrigin, declaration.transformOrigin);
this.visibility = parse(visibility, declaration.visibility);
this.webkitTextStrokeColor = parse(webkitTextStrokeColor, declaration.webkitTextStrokeColor);
this.webkitTextStrokeWidth = parse(webkitTextStrokeWidth, declaration.webkitTextStrokeWidth);
this.wordBreak = parse(wordBreak, declaration.wordBreak);
this.zIndex = parse(zIndex, declaration.zIndex);
this.textShadow = parse(context, textShadow, declaration.textShadow);
this.textTransform = parse(context, textTransform, declaration.textTransform);
this.transform = parse(context, transform, declaration.transform);
this.transformOrigin = parse(context, transformOrigin, declaration.transformOrigin);
this.visibility = parse(context, visibility, declaration.visibility);
this.webkitTextStrokeColor = parse(context, webkitTextStrokeColor, declaration.webkitTextStrokeColor);
this.webkitTextStrokeWidth = parse(context, webkitTextStrokeWidth, declaration.webkitTextStrokeWidth);
this.wordBreak = parse(context, wordBreak, declaration.wordBreak);
this.zIndex = parse(context, zIndex, declaration.zIndex);
}
isVisible(): boolean {
@@ -254,9 +260,9 @@ export class CSSParsedPseudoDeclaration {
content: ReturnType<typeof content.parse>;
quotes: ReturnType<typeof quotes.parse>;
constructor(declaration: CSSStyleDeclaration) {
this.content = parse(content, declaration.content);
this.quotes = parse(quotes, declaration.quotes);
constructor(context: Context, declaration: CSSStyleDeclaration) {
this.content = parse(context, content, declaration.content);
this.quotes = parse(context, quotes, declaration.quotes);
}
}
@@ -264,14 +270,14 @@ export class CSSParsedCounterDeclaration {
counterIncrement: ReturnType<typeof counterIncrement.parse>;
counterReset: ReturnType<typeof counterReset.parse>;
constructor(declaration: CSSStyleDeclaration) {
this.counterIncrement = parse(counterIncrement, declaration.counterIncrement);
this.counterReset = parse(counterReset, declaration.counterReset);
constructor(context: Context, declaration: CSSStyleDeclaration) {
this.counterIncrement = parse(context, counterIncrement, declaration.counterIncrement);
this.counterReset = parse(context, counterReset, declaration.counterReset);
}
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const parse = (descriptor: CSSPropertyDescriptor<any>, style?: string | null) => {
const parse = (context: Context, descriptor: CSSPropertyDescriptor<any>, style?: string | null) => {
const tokenizer = new Tokenizer();
const value = style !== null && typeof style !== 'undefined' ? style.toString() : descriptor.initialValue;
tokenizer.write(value);
@@ -279,21 +285,21 @@ const parse = (descriptor: CSSPropertyDescriptor<any>, style?: string | null) =>
switch (descriptor.type) {
case PropertyDescriptorParsingType.IDENT_VALUE:
const token = parser.parseComponentValue();
return descriptor.parse(isIdentToken(token) ? token.value : descriptor.initialValue);
return descriptor.parse(context, isIdentToken(token) ? token.value : descriptor.initialValue);
case PropertyDescriptorParsingType.VALUE:
return descriptor.parse(parser.parseComponentValue());
return descriptor.parse(context, parser.parseComponentValue());
case PropertyDescriptorParsingType.LIST:
return descriptor.parse(parser.parseComponentValues());
return descriptor.parse(context, parser.parseComponentValues());
case PropertyDescriptorParsingType.TOKEN_VALUE:
return parser.parseComponentValue();
case PropertyDescriptorParsingType.TYPE_VALUE:
switch (descriptor.format) {
case 'angle':
return angle.parse(parser.parseComponentValue());
return angle.parse(context, parser.parseComponentValue());
case 'color':
return colorType.parse(parser.parseComponentValue());
return colorType.parse(context, parser.parseComponentValue());
case 'image':
return image.parse(parser.parseComponentValue());
return image.parse(context, parser.parseComponentValue());
case 'length':
const length = parser.parseComponentValue();
return isLength(length) ? length : ZERO_LENGTH;

27
src/css/layout/bounds.ts
View File

@@ -1,27 +1,24 @@
export class Bounds {
readonly top: number;
readonly left: number;
readonly width: number;
readonly height: number;
import {Context} from '../../core/context';
constructor(x: number, y: number, w: number, h: number) {
this.left = x;
this.top = y;
this.width = w;
this.height = h;
}
export class Bounds {
constructor(readonly left: number, readonly top: number, readonly width: number, readonly height: number) {}
add(x: number, y: number, w: number, h: number): Bounds {
return new Bounds(this.left + x, this.top + y, this.width + w, this.height + h);
}
static fromClientRect(clientRect: ClientRect): Bounds {
return new Bounds(clientRect.left, clientRect.top, clientRect.width, clientRect.height);
static fromClientRect(context: Context, clientRect: ClientRect): Bounds {
return new Bounds(
clientRect.left + context.windowBounds.left,
clientRect.top + context.windowBounds.top,
clientRect.width,
clientRect.height
);
}
}
export const parseBounds = (node: Element): Bounds => {
return Bounds.fromClientRect(node.getBoundingClientRect());
export const parseBounds = (context: Context, node: Element): Bounds => {
return Bounds.fromClientRect(context, node.getBoundingClientRect());
};
export const parseDocumentSize = (document: Document): Bounds => {

20
src/css/layout/text.ts
View File

@@ -3,6 +3,7 @@ import {CSSParsedDeclaration} from '../index';
import {fromCodePoint, LineBreaker, toCodePoints} from 'css-line-break';
import {Bounds, parseBounds} from './bounds';
import {FEATURES} from '../../core/features';
import {Context} from '../../core/context';
export class TextBounds {
readonly text: string;
@@ -14,17 +15,22 @@ export class TextBounds {
}
}
export const parseTextBounds = (value: string, styles: CSSParsedDeclaration, node: Text): TextBounds[] => {
export const parseTextBounds = (
context: Context,
value: string,
styles: CSSParsedDeclaration,
node: Text
): TextBounds[] => {
const textList = breakText(value, styles);
const textBounds: TextBounds[] = [];
let offset = 0;
textList.forEach((text) => {
if (styles.textDecorationLine.length || text.trim().length > 0) {
if (FEATURES.SUPPORT_RANGE_BOUNDS) {
textBounds.push(new TextBounds(text, getRangeBounds(node, offset, text.length)));
textBounds.push(new TextBounds(text, getRangeBounds(context, node, offset, text.length)));
} else {
const replacementNode = node.splitText(text.length);
textBounds.push(new TextBounds(text, getWrapperBounds(node)));
textBounds.push(new TextBounds(text, getWrapperBounds(context, node)));
node = replacementNode;
}
} else if (!FEATURES.SUPPORT_RANGE_BOUNDS) {
@@ -36,7 +42,7 @@ export const parseTextBounds = (value: string, styles: CSSParsedDeclaration, nod
return textBounds;
};
const getWrapperBounds = (node: Text): Bounds => {
const getWrapperBounds = (context: Context, node: Text): Bounds => {
const ownerDocument = node.ownerDocument;
if (ownerDocument) {
const wrapper = ownerDocument.createElement('html2canvaswrapper');
@@ -44,7 +50,7 @@ const getWrapperBounds = (node: Text): Bounds => {
const parentNode = node.parentNode;
if (parentNode) {
parentNode.replaceChild(wrapper, node);
const bounds = parseBounds(wrapper);
const bounds = parseBounds(context, wrapper);
if (wrapper.firstChild) {
parentNode.replaceChild(wrapper.firstChild, wrapper);
}
@@ -55,7 +61,7 @@ const getWrapperBounds = (node: Text): Bounds => {
return new Bounds(0, 0, 0, 0);
};
const getRangeBounds = (node: Text, offset: number, length: number): Bounds => {
const getRangeBounds = (context: Context, node: Text, offset: number, length: number): Bounds => {
const ownerDocument = node.ownerDocument;
if (!ownerDocument) {
throw new Error('Node has no owner document');
@@ -63,7 +69,7 @@ const getRangeBounds = (node: Text, offset: number, length: number): Bounds => {
const range = ownerDocument.createRange();
range.setStart(node, offset);
range.setEnd(node, offset + length);
return Bounds.fromClientRect(range.getBoundingClientRect());
return Bounds.fromClientRect(context, range.getBoundingClientRect());
};
const breakText = (value: string, styles: CSSParsedDeclaration): string[] => {

27
src/css/property-descriptors/__tests__/background-tests.ts
View File

@@ -5,27 +5,42 @@ import {CSSImageType} from '../../types/image';
import {pack} from '../../types/color';
import {deg} from '../../types/angle';
jest.mock('../../../core/cache-storage');
jest.mock('../../../core/context');
import {Context} from '../../../core/context';
jest.mock('../../../core/features');
const backgroundImageParse = (value: string) => backgroundImage.parse(Parser.parseValues(value));
const backgroundImageParse = (context: Context, value: string) =>
backgroundImage.parse(context, Parser.parseValues(value));
describe('property-descriptors', () => {
let context: Context;
beforeEach(() => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
context = new Context({} as any, {} as any);
});
describe('background-image', () => {
it('none', () => deepStrictEqual(backgroundImageParse('none'), []));
it('none', () => {
deepStrictEqual(backgroundImageParse(context, 'none'), []);
expect(context.cache.addImage).not.toHaveBeenCalled();
});
it('url(test.jpg), url(test2.jpg)', () =>
it('url(test.jpg), url(test2.jpg)', () => {
deepStrictEqual(
backgroundImageParse('url(http://example.com/test.jpg), url(http://example.com/test2.jpg)'),
backgroundImageParse(context, 'url(http://example.com/test.jpg), url(http://example.com/test2.jpg)'),
[
{url: 'http://example.com/test.jpg', type: CSSImageType.URL},
{url: 'http://example.com/test2.jpg', type: CSSImageType.URL}
]
));
);
expect(context.cache.addImage).toHaveBeenCalledWith('http://example.com/test.jpg');
expect(context.cache.addImage).toHaveBeenCalledWith('http://example.com/test2.jpg');
});
it(`linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)), url('https://html2canvas.hertzen.com')`, () =>
deepStrictEqual(
backgroundImageParse(
context,
`linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)), url('https://html2canvas.hertzen.com')`
),
[

3
src/css/property-descriptors/__tests__/font-family.ts
View File

@@ -1,8 +1,9 @@
import {deepEqual} from 'assert';
import {Parser} from '../../syntax/parser';
import {fontFamily} from '../font-family';
import {Context} from '../../../core/context';
const fontFamilyParse = (value: string) => fontFamily.parse(Parser.parseValues(value));
const fontFamilyParse = (value: string) => fontFamily.parse({} as Context, Parser.parseValues(value));
describe('property-descriptors', () => {
describe('font-family', () => {

3
src/css/property-descriptors/__tests__/paint-order.ts
View File

@@ -1,8 +1,9 @@
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(Parser.parseValues(value));
const paintOrderParse = (value: string) => paintOrder.parse({} as Context, Parser.parseValues(value));
describe('property-descriptors', () => {
describe('paint-order', () => {

5
src/css/property-descriptors/__tests__/text-shadow.ts
View File

@@ -4,9 +4,10 @@ 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(Parser.parseValues(value));
const colorParse = (value: string) => color.parse(Parser.parseValue(value));
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,

3
src/css/property-descriptors/__tests__/transform-tests.ts
View File

@@ -1,7 +1,8 @@
import {transform} from '../transform';
import {Parser} from '../../syntax/parser';
import {deepStrictEqual} from 'assert';
const parseValue = (value: string) => transform.parse(Parser.parseValue(value));
import {Context} from '../../../core/context';
const parseValue = (value: string) => transform.parse({} as Context, Parser.parseValue(value));
describe('property-descriptors', () => {
describe('transform', () => {

3
src/css/property-descriptors/background-clip.ts
View File

@@ -1,5 +1,6 @@
import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {CSSValue, isIdentToken} from '../syntax/parser';
import {Context} from '../../core/context';
export enum BACKGROUND_CLIP {
BORDER_BOX = 0,
PADDING_BOX = 1,
@@ -13,7 +14,7 @@ export const backgroundClip: IPropertyListDescriptor<BackgroundClip> = {
initialValue: 'border-box',
prefix: false,
type: PropertyDescriptorParsingType.LIST,
parse: (tokens: CSSValue[]): BackgroundClip => {
parse: (_context: Context, tokens: CSSValue[]): BackgroundClip => {
return tokens.map((token) => {
if (isIdentToken(token)) {
switch (token.value) {

7
src/css/property-descriptors/background-image.ts
View File

@@ -2,13 +2,14 @@ import {TokenType} from '../syntax/tokenizer';
import {ICSSImage, image, isSupportedImage} from '../types/image';
import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
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: (tokens: CSSValue[]) => {
parse: (context: Context, tokens: CSSValue[]) => {
if (tokens.length === 0) {
return [];
}
@@ -19,6 +20,8 @@ export const backgroundImage: IPropertyListDescriptor<ICSSImage[]> = {
return [];
}
return tokens.filter((value) => nonFunctionArgSeparator(value) && isSupportedImage(value)).map(image.parse);
return tokens
.filter((value) => nonFunctionArgSeparator(value) && isSupportedImage(value))
.map((value) => image.parse(context, value));
}
};

3
src/css/property-descriptors/background-origin.ts
View File

@@ -1,5 +1,6 @@
import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {CSSValue, isIdentToken} from '../syntax/parser';
import {Context} from '../../core/context';
export const enum BACKGROUND_ORIGIN {
BORDER_BOX = 0,
@@ -14,7 +15,7 @@ export const backgroundOrigin: IPropertyListDescriptor<BackgroundOrigin> = {
initialValue: 'border-box',
prefix: false,
type: PropertyDescriptorParsingType.LIST,
parse: (tokens: CSSValue[]): BackgroundOrigin => {
parse: (_context: Context, tokens: CSSValue[]): BackgroundOrigin => {
return tokens.map((token) => {
if (isIdentToken(token)) {
switch (token.value) {

3
src/css/property-descriptors/background-position.ts
View File

@@ -1,6 +1,7 @@
import {PropertyDescriptorParsingType, IPropertyListDescriptor} from '../IPropertyDescriptor';
import {CSSValue, parseFunctionArgs} from '../syntax/parser';
import {isLengthPercentage, LengthPercentageTuple, parseLengthPercentageTuple} from '../types/length-percentage';
import {Context} from '../../core/context';
export type BackgroundPosition = BackgroundImagePosition[];
export type BackgroundImagePosition = LengthPercentageTuple;
@@ -10,7 +11,7 @@ export const backgroundPosition: IPropertyListDescriptor<BackgroundPosition> = {
initialValue: '0% 0%',
type: PropertyDescriptorParsingType.LIST,
prefix: false,
parse: (tokens: CSSValue[]): BackgroundPosition => {
parse: (_context: Context, tokens: CSSValue[]): BackgroundPosition => {
return parseFunctionArgs(tokens)
.map((values: CSSValue[]) => values.filter(isLengthPercentage))
.map(parseLengthPercentageTuple);

3
src/css/property-descriptors/background-repeat.ts
View File

@@ -1,5 +1,6 @@
import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {CSSValue, isIdentToken, parseFunctionArgs} from '../syntax/parser';
import {Context} from '../../core/context';
export type BackgroundRepeat = BACKGROUND_REPEAT[];
export enum BACKGROUND_REPEAT {
@@ -14,7 +15,7 @@ export const backgroundRepeat: IPropertyListDescriptor<BackgroundRepeat> = {
initialValue: 'repeat',
prefix: false,
type: PropertyDescriptorParsingType.LIST,
parse: (tokens: CSSValue[]): BackgroundRepeat => {
parse: (_context: Context, tokens: CSSValue[]): BackgroundRepeat => {
return parseFunctionArgs(tokens)
.map((values) =>
values

3
src/css/property-descriptors/background-size.ts
View File

@@ -2,6 +2,7 @@ import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IProper
import {CSSValue, isIdentToken, parseFunctionArgs} from '../syntax/parser';
import {isLengthPercentage, LengthPercentage} from '../types/length-percentage';
import {StringValueToken} from '../syntax/tokenizer';
import {Context} from '../../core/context';
export enum BACKGROUND_SIZE {
AUTO = 'auto',
@@ -17,7 +18,7 @@ export const backgroundSize: IPropertyListDescriptor<BackgroundSize> = {
initialValue: '0',
prefix: false,
type: PropertyDescriptorParsingType.LIST,
parse: (tokens: CSSValue[]): BackgroundSize => {
parse: (_context: Context, tokens: CSSValue[]): BackgroundSize => {
return parseFunctionArgs(tokens).map((values) => values.filter(isBackgroundSizeInfoToken));
}
};

4
src/css/property-descriptors/border-radius.ts
View File

@@ -1,6 +1,7 @@
import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {CSSValue} from '../syntax/parser';
import {isLengthPercentage, LengthPercentageTuple, parseLengthPercentageTuple} from '../types/length-percentage';
import {Context} from '../../core/context';
export type BorderRadius = LengthPercentageTuple;
const borderRadiusForSide = (side: string): IPropertyListDescriptor<BorderRadius> => ({
@@ -8,7 +9,8 @@ const borderRadiusForSide = (side: string): IPropertyListDescriptor<BorderRadius
initialValue: '0 0',
prefix: false,
type: PropertyDescriptorParsingType.LIST,
parse: (tokens: CSSValue[]): BorderRadius => parseLengthPercentageTuple(tokens.filter(isLengthPercentage))
parse: (_context: Context, tokens: CSSValue[]): BorderRadius =>
parseLengthPercentageTuple(tokens.filter(isLengthPercentage))
});
export const borderTopLeftRadius: IPropertyListDescriptor<BorderRadius> = borderRadiusForSide('top-left');

3
src/css/property-descriptors/border-style.ts
View File

@@ -1,4 +1,5 @@
import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {Context} from '../../core/context';
export enum BORDER_STYLE {
NONE = 0,
SOLID = 1,
@@ -12,7 +13,7 @@ const borderStyleForSide = (side: string): IPropertyIdentValueDescriptor<BORDER_
initialValue: 'solid',
prefix: false,
type: PropertyDescriptorParsingType.IDENT_VALUE,
parse: (style: string): BORDER_STYLE => {
parse: (_context: Context, style: string): BORDER_STYLE => {
switch (style) {
case 'none':
return BORDER_STYLE.NONE;

3
src/css/property-descriptors/border-width.ts
View File

@@ -1,11 +1,12 @@
import {IPropertyValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {CSSValue, isDimensionToken} from '../syntax/parser';
import {Context} from '../../core/context';
const borderWidthForSide = (side: string): IPropertyValueDescriptor<number> => ({
name: `border-${side}-width`,
initialValue: '0',
type: PropertyDescriptorParsingType.VALUE,
prefix: false,
parse: (token: CSSValue): number => {
parse: (_context: Context, token: CSSValue): number => {
if (isDimensionToken(token)) {
return token.number;
}

5
src/css/property-descriptors/box-shadow.ts
View File

@@ -3,6 +3,7 @@ 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';
import {Context} from '../../core/context';
export type BoxShadow = BoxShadowItem[];
interface BoxShadowItem {
@@ -19,7 +20,7 @@ export const boxShadow: IPropertyListDescriptor<BoxShadow> = {
initialValue: 'none',
type: PropertyDescriptorParsingType.LIST,
prefix: false,
parse: (tokens: CSSValue[]): BoxShadow => {
parse: (context: Context, tokens: CSSValue[]): BoxShadow => {
if (tokens.length === 1 && isIdentWithValue(tokens[0], 'none')) {
return [];
}
@@ -50,7 +51,7 @@ export const boxShadow: IPropertyListDescriptor<BoxShadow> = {
}
c++;
} else {
shadow.color = color.parse(token);
shadow.color = color.parse(context, token);
}
}
return shadow;

3
src/css/property-descriptors/content.ts
View File

@@ -1,6 +1,7 @@
import {TokenType} from '../syntax/tokenizer';
import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {CSSValue} from '../syntax/parser';
import {Context} from '../../core/context';
export type Content = CSSValue[];
@@ -9,7 +10,7 @@ export const content: IPropertyListDescriptor<Content> = {
initialValue: 'none',
type: PropertyDescriptorParsingType.LIST,
prefix: false,
parse: (tokens: CSSValue[]) => {
parse: (_context: Context, tokens: CSSValue[]) => {
if (tokens.length === 0) {
return [];
}

3
src/css/property-descriptors/counter-increment.ts
View File

@@ -1,6 +1,7 @@
import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {CSSValue, isNumberToken, nonWhiteSpace} from '../syntax/parser';
import {TokenType} from '../syntax/tokenizer';
import {Context} from '../../core/context';
export interface COUNTER_INCREMENT {
counter: string;
@@ -14,7 +15,7 @@ export const counterIncrement: IPropertyListDescriptor<CounterIncrement> = {
initialValue: 'none',
prefix: true,
type: PropertyDescriptorParsingType.LIST,
parse: (tokens: CSSValue[]) => {
parse: (_context: Context, tokens: CSSValue[]) => {
if (tokens.length === 0) {
return null;
}

3
src/css/property-descriptors/counter-reset.ts
View File

@@ -1,5 +1,6 @@
import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {CSSValue, isIdentToken, isNumberToken, nonWhiteSpace} from '../syntax/parser';
import {Context} from '../../core/context';
export interface COUNTER_RESET {
counter: string;
@@ -13,7 +14,7 @@ export const counterReset: IPropertyListDescriptor<CounterReset> = {
initialValue: 'none',
prefix: true,
type: PropertyDescriptorParsingType.LIST,
parse: (tokens: CSSValue[]) => {
parse: (_context: Context, tokens: CSSValue[]) => {
if (tokens.length === 0) {
return [];
}

3
src/css/property-descriptors/display.ts
View File

@@ -1,5 +1,6 @@
import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {CSSValue, isIdentToken} from '../syntax/parser';
import {Context} from '../../core/context';
export const enum DISPLAY {
NONE = 0,
BLOCK = 1 << 1,
@@ -40,7 +41,7 @@ export const display: IPropertyListDescriptor<Display> = {
initialValue: 'inline-block',
prefix: false,
type: PropertyDescriptorParsingType.LIST,
parse: (tokens: CSSValue[]): Display => {
parse: (_context: Context, tokens: CSSValue[]): Display => {
return tokens.filter(isIdentToken).reduce((bit, token) => {
return bit | parseDisplayValue(token.value);
}, DISPLAY.NONE);

3
src/css/property-descriptors/float.ts
View File

@@ -1,4 +1,5 @@
import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {Context} from '../../core/context';
export enum FLOAT {
NONE = 0,
LEFT = 1,
@@ -12,7 +13,7 @@ export const float: IPropertyIdentValueDescriptor<FLOAT> = {
initialValue: 'none',
prefix: false,
type: PropertyDescriptorParsingType.IDENT_VALUE,
parse: (float: string) => {
parse: (_context: Context, float: string) => {
switch (float) {
case 'left':
return FLOAT.LEFT;

3
src/css/property-descriptors/font-family.ts
View File

@@ -1,6 +1,7 @@
import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {CSSValue} from '../syntax/parser';
import {TokenType} from '../syntax/tokenizer';
import {Context} from '../../core/context';
export type FONT_FAMILY = string;
@@ -11,7 +12,7 @@ export const fontFamily: IPropertyListDescriptor<FontFamily> = {
initialValue: '',
prefix: false,
type: PropertyDescriptorParsingType.LIST,
parse: (tokens: CSSValue[]) => {
parse: (_context: Context, tokens: CSSValue[]) => {
const accumulator: string[] = [];
const results: string[] = [];
tokens.forEach((token) => {

3
src/css/property-descriptors/font-style.ts
View File

@@ -1,4 +1,5 @@
import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {Context} from '../../core/context';
export enum FONT_STYLE {
NORMAL = 'normal',
ITALIC = 'italic',
@@ -10,7 +11,7 @@ export const fontStyle: IPropertyIdentValueDescriptor<FONT_STYLE> = {
initialValue: 'normal',
prefix: false,
type: PropertyDescriptorParsingType.IDENT_VALUE,
parse: (overflow: string) => {
parse: (_context: Context, overflow: string) => {
switch (overflow) {
case 'oblique':
return FONT_STYLE.OBLIQUE;

3
src/css/property-descriptors/font-variant.ts
View File

@@ -1,11 +1,12 @@
import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {CSSValue, isIdentToken} from '../syntax/parser';
import {Context} from '../../core/context';
export const fontVariant: IPropertyListDescriptor<string[]> = {
name: 'font-variant',
initialValue: 'none',
type: PropertyDescriptorParsingType.LIST,
prefix: false,
parse: (tokens: CSSValue[]): string[] => {
parse: (_context: Context, tokens: CSSValue[]): string[] => {
return tokens.filter(isIdentToken).map((token) => token.value);
}
};

3
src/css/property-descriptors/font-weight.ts
View File

@@ -1,11 +1,12 @@
import {IPropertyValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {CSSValue, isIdentToken, isNumberToken} from '../syntax/parser';
import {Context} from '../../core/context';
export const fontWeight: IPropertyValueDescriptor<number> = {
name: 'font-weight',
initialValue: 'normal',
type: PropertyDescriptorParsingType.VALUE,
prefix: false,
parse: (token: CSSValue): number => {
parse: (_context: Context, token: CSSValue): number => {
if (isNumberToken(token)) {
return token.number;
}

3
src/css/property-descriptors/letter-spacing.ts
View File

@@ -1,12 +1,13 @@
import {IPropertyValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {CSSValue} from '../syntax/parser';
import {TokenType} from '../syntax/tokenizer';
import {Context} from '../../core/context';
export const letterSpacing: IPropertyValueDescriptor<number> = {
name: 'letter-spacing',
initialValue: '0',
prefix: false,
type: PropertyDescriptorParsingType.VALUE,
parse: (token: CSSValue) => {
parse: (_context: Context, token: CSSValue) => {
if (token.type === TokenType.IDENT_TOKEN && token.value === 'normal') {
return 0;
}

3
src/css/property-descriptors/line-break.ts
View File

@@ -1,4 +1,5 @@
import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {Context} from '../../core/context';
export enum LINE_BREAK {
NORMAL = 'normal',
STRICT = 'strict'
@@ -9,7 +10,7 @@ export const lineBreak: IPropertyIdentValueDescriptor<LINE_BREAK> = {
initialValue: 'normal',
prefix: false,
type: PropertyDescriptorParsingType.IDENT_VALUE,
parse: (lineBreak: string): LINE_BREAK => {
parse: (_context: Context, lineBreak: string): LINE_BREAK => {
switch (lineBreak) {
case 'strict':
return LINE_BREAK.STRICT;

5
src/css/property-descriptors/list-style-image.ts
View File

@@ -2,17 +2,18 @@ import {TokenType} from '../syntax/tokenizer';
import {ICSSImage, image} from '../types/image';
import {IPropertyValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {CSSValue} from '../syntax/parser';
import {Context} from '../../core/context';
export const listStyleImage: IPropertyValueDescriptor<ICSSImage | null> = {
name: 'list-style-image',
initialValue: 'none',
type: PropertyDescriptorParsingType.VALUE,
prefix: false,
parse: (token: CSSValue) => {
parse: (context: Context, token: CSSValue) => {
if (token.type === TokenType.IDENT_TOKEN && token.value === 'none') {
return null;
}
return image.parse(token);
return image.parse(context, token);
}
};

3
src/css/property-descriptors/list-style-position.ts
View File

@@ -1,4 +1,5 @@
import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {Context} from '../../core/context';
export enum LIST_STYLE_POSITION {
INSIDE = 0,
OUTSIDE = 1
@@ -9,7 +10,7 @@ export const listStylePosition: IPropertyIdentValueDescriptor<LIST_STYLE_POSITIO
initialValue: 'outside',
prefix: false,
type: PropertyDescriptorParsingType.IDENT_VALUE,
parse: (position: string) => {
parse: (_context: Context, position: string) => {
switch (position) {
case 'inside':
return LIST_STYLE_POSITION.INSIDE;

3
src/css/property-descriptors/list-style-type.ts
View File

@@ -1,4 +1,5 @@
import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {Context} from '../../core/context';
export enum LIST_STYLE_TYPE {
NONE = -1,
DISC = 0,
@@ -61,7 +62,7 @@ export const listStyleType: IPropertyIdentValueDescriptor<LIST_STYLE_TYPE> = {
initialValue: 'none',
prefix: false,
type: PropertyDescriptorParsingType.IDENT_VALUE,
parse: (type: string) => {
parse: (_context: Context, type: string) => {
switch (type) {
case 'disc':
return LIST_STYLE_TYPE.DISC;

3
src/css/property-descriptors/opacity.ts
View File

@@ -1,11 +1,12 @@
import {IPropertyValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {CSSValue, isNumberToken} from '../syntax/parser';
import {Context} from '../../core/context';
export const opacity: IPropertyValueDescriptor<number> = {
name: 'opacity',
initialValue: '1',
type: PropertyDescriptorParsingType.VALUE,
prefix: false,
parse: (token: CSSValue): number => {
parse: (_context: Context, token: CSSValue): number => {
if (isNumberToken(token)) {
return token.number;
}

3
src/css/property-descriptors/overflow-wrap.ts
View File

@@ -1,4 +1,5 @@
import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {Context} from '../../core/context';
export enum OVERFLOW_WRAP {
NORMAL = 'normal',
BREAK_WORD = 'break-word'
@@ -9,7 +10,7 @@ export const overflowWrap: IPropertyIdentValueDescriptor<OVERFLOW_WRAP> = {
initialValue: 'normal',
prefix: false,
type: PropertyDescriptorParsingType.IDENT_VALUE,
parse: (overflow: string) => {
parse: (_context: Context, overflow: string) => {
switch (overflow) {
case 'break-word':
return OVERFLOW_WRAP.BREAK_WORD;

3
src/css/property-descriptors/overflow.ts
View File

@@ -1,5 +1,6 @@
import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {CSSValue, isIdentToken} from '../syntax/parser';
import {Context} from '../../core/context';
export enum OVERFLOW {
VISIBLE = 0,
HIDDEN = 1,
@@ -12,7 +13,7 @@ export const overflow: IPropertyListDescriptor<OVERFLOW[]> = {
initialValue: 'visible',
prefix: false,
type: PropertyDescriptorParsingType.LIST,
parse: (tokens: CSSValue[]): OVERFLOW[] => {
parse: (_context: Context, tokens: CSSValue[]): OVERFLOW[] => {
return tokens.filter(isIdentToken).map((overflow) => {
switch (overflow.value) {
case 'hidden':

5
src/css/property-descriptors/paint-order.ts
View File

@@ -1,5 +1,6 @@
import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {CSSValue, isIdentToken} from '../syntax/parser';
import {Context} from '../../core/context';
export enum PAINT_ORDER_LAYER {
FILL,
STROKE,
@@ -13,9 +14,9 @@ export const paintOrder: IPropertyListDescriptor<PaintOrder> = {
initialValue: 'normal',
prefix: false,
type: PropertyDescriptorParsingType.LIST,
parse: (tokens: CSSValue[]): PaintOrder => {
parse: (_context: Context, tokens: CSSValue[]): PaintOrder => {
const DEFAULT_VALUE = [PAINT_ORDER_LAYER.FILL, PAINT_ORDER_LAYER.STROKE, PAINT_ORDER_LAYER.MARKERS];
let layers: PaintOrder = [];
const layers: PaintOrder = [];
tokens.filter(isIdentToken).forEach((token) => {
switch (token.value) {

3
src/css/property-descriptors/position.ts
View File

@@ -1,4 +1,5 @@
import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {Context} from '../../core/context';
export enum POSITION {
STATIC = 0,
RELATIVE = 1,
@@ -12,7 +13,7 @@ export const position: IPropertyIdentValueDescriptor<POSITION> = {
initialValue: 'static',
prefix: false,
type: PropertyDescriptorParsingType.IDENT_VALUE,
parse: (position: string) => {
parse: (_context: Context, position: string) => {
switch (position) {
case 'relative':
return POSITION.RELATIVE;

3
src/css/property-descriptors/quotes.ts
View File

@@ -1,6 +1,7 @@
import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {CSSValue, isStringToken} from '../syntax/parser';
import {TokenType} from '../syntax/tokenizer';
import {Context} from '../../core/context';
export interface QUOTE {
open: string;
@@ -14,7 +15,7 @@ export const quotes: IPropertyListDescriptor<Quotes> = {
initialValue: 'none',
prefix: true,
type: PropertyDescriptorParsingType.LIST,
parse: (tokens: CSSValue[]) => {
parse: (_context: Context, tokens: CSSValue[]) => {
if (tokens.length === 0) {
return null;
}

3
src/css/property-descriptors/text-align.ts
View File

@@ -1,4 +1,5 @@
import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {Context} from '../../core/context';
export enum TEXT_ALIGN {
LEFT = 0,
CENTER = 1,
@@ -10,7 +11,7 @@ export const textAlign: IPropertyIdentValueDescriptor<TEXT_ALIGN> = {
initialValue: 'left',
prefix: false,
type: PropertyDescriptorParsingType.IDENT_VALUE,
parse: (textAlign: string) => {
parse: (_context: Context, textAlign: string) => {
switch (textAlign) {
case 'right':
return TEXT_ALIGN.RIGHT;

3
src/css/property-descriptors/text-decoration-line.ts
View File

@@ -1,5 +1,6 @@
import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {CSSValue, isIdentToken} from '../syntax/parser';
import {Context} from '../../core/context';
export const enum TEXT_DECORATION_LINE {
NONE = 0,
@@ -16,7 +17,7 @@ export const textDecorationLine: IPropertyListDescriptor<TextDecorationLine> = {
initialValue: 'none',
prefix: false,
type: PropertyDescriptorParsingType.LIST,
parse: (tokens: CSSValue[]): TextDecorationLine => {
parse: (_context: Context, tokens: CSSValue[]): TextDecorationLine => {
return tokens
.filter(isIdentToken)
.map((token) => {

5
src/css/property-descriptors/text-shadow.ts
View File

@@ -3,6 +3,7 @@ import {CSSValue, isIdentWithValue, parseFunctionArgs} from '../syntax/parser';
import {ZERO_LENGTH} from '../types/length-percentage';
import {color, Color, COLORS} from '../types/color';
import {isLength, Length} from '../types/length';
import {Context} from '../../core/context';
export type TextShadow = TextShadowItem[];
interface TextShadowItem {
@@ -17,7 +18,7 @@ export const textShadow: IPropertyListDescriptor<TextShadow> = {
initialValue: 'none',
type: PropertyDescriptorParsingType.LIST,
prefix: false,
parse: (tokens: CSSValue[]): TextShadow => {
parse: (context: Context, tokens: CSSValue[]): TextShadow => {
if (tokens.length === 1 && isIdentWithValue(tokens[0], 'none')) {
return [];
}
@@ -42,7 +43,7 @@ export const textShadow: IPropertyListDescriptor<TextShadow> = {
}
c++;
} else {
shadow.color = color.parse(token);
shadow.color = color.parse(context, token);
}
}
return shadow;

3
src/css/property-descriptors/text-transform.ts
View File

@@ -1,4 +1,5 @@
import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {Context} from '../../core/context';
export enum TEXT_TRANSFORM {
NONE = 0,
LOWERCASE = 1,
@@ -11,7 +12,7 @@ export const textTransform: IPropertyIdentValueDescriptor<TEXT_TRANSFORM> = {
initialValue: 'none',
prefix: false,
type: PropertyDescriptorParsingType.IDENT_VALUE,
parse: (textTransform: string) => {
parse: (_context: Context, textTransform: string) => {
switch (textTransform) {
case 'uppercase':
return TEXT_TRANSFORM.UPPERCASE;

3
src/css/property-descriptors/transform-origin.ts
View File

@@ -2,6 +2,7 @@ import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IProper
import {CSSValue} from '../syntax/parser';
import {isLengthPercentage, LengthPercentage} from '../types/length-percentage';
import {FLAG_INTEGER, TokenType} from '../syntax/tokenizer';
import {Context} from '../../core/context';
export type TransformOrigin = [LengthPercentage, LengthPercentage];
const DEFAULT_VALUE: LengthPercentage = {
@@ -16,7 +17,7 @@ export const transformOrigin: IPropertyListDescriptor<TransformOrigin> = {
initialValue: '50% 50%',
prefix: true,
type: PropertyDescriptorParsingType.LIST,
parse: (tokens: CSSValue[]) => {
parse: (_context: Context, tokens: CSSValue[]) => {
const origins: LengthPercentage[] = tokens.filter(isLengthPercentage);
if (origins.length !== 2) {

3
src/css/property-descriptors/transform.ts
View File

@@ -1,6 +1,7 @@
import {IPropertyValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {CSSValue} from '../syntax/parser';
import {NumberValueToken, TokenType} from '../syntax/tokenizer';
import {Context} from '../../core/context';
export type Matrix = [number, number, number, number, number, number];
export type Transform = Matrix | null;
@@ -9,7 +10,7 @@ export const transform: IPropertyValueDescriptor<Transform> = {
initialValue: 'none',
prefix: true,
type: PropertyDescriptorParsingType.VALUE,
parse: (token: CSSValue) => {
parse: (_context: Context, token: CSSValue) => {
if (token.type === TokenType.IDENT_TOKEN && token.value === 'none') {
return null;
}

3
src/css/property-descriptors/visibility.ts
View File

@@ -1,4 +1,5 @@
import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {Context} from '../../core/context';
export enum VISIBILITY {
VISIBLE = 0,
HIDDEN = 1,
@@ -10,7 +11,7 @@ export const visibility: IPropertyIdentValueDescriptor<VISIBILITY> = {
initialValue: 'none',
prefix: false,
type: PropertyDescriptorParsingType.IDENT_VALUE,
parse: (visibility: string) => {
parse: (_context: Context, visibility: string) => {
switch (visibility) {
case 'hidden':
return VISIBILITY.HIDDEN;

3
src/css/property-descriptors/webkit-text-stroke-width.ts
View File

@@ -1,11 +1,12 @@
import {CSSValue, isDimensionToken} from '../syntax/parser';
import {IPropertyValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {Context} from '../../core/context';
export const webkitTextStrokeWidth: IPropertyValueDescriptor<number> = {
name: `-webkit-text-stroke-width`,
initialValue: '0',
type: PropertyDescriptorParsingType.VALUE,
prefix: false,
parse: (token: CSSValue): number => {
parse: (_context: Context, token: CSSValue): number => {
if (isDimensionToken(token)) {
return token.number;
}

3
src/css/property-descriptors/word-break.ts
View File

@@ -1,4 +1,5 @@
import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {Context} from '../../core/context';
export enum WORD_BREAK {
NORMAL = 'normal',
BREAK_ALL = 'break-all',
@@ -10,7 +11,7 @@ export const wordBreak: IPropertyIdentValueDescriptor<WORD_BREAK> = {
initialValue: 'normal',
prefix: false,
type: PropertyDescriptorParsingType.IDENT_VALUE,
parse: (wordBreak: string): WORD_BREAK => {
parse: (_context: Context, wordBreak: string): WORD_BREAK => {
switch (wordBreak) {
case 'break-all':
return WORD_BREAK.BREAK_ALL;

3
src/css/property-descriptors/z-index.ts
View File

@@ -1,6 +1,7 @@
import {IPropertyValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {CSSValue, isNumberToken} from '../syntax/parser';
import {TokenType} from '../syntax/tokenizer';
import {Context} from '../../core/context';
interface zIndex {
order: number;
@@ -12,7 +13,7 @@ export const zIndex: IPropertyValueDescriptor<zIndex> = {
initialValue: 'auto',
prefix: false,
type: PropertyDescriptorParsingType.VALUE,
parse: (token: CSSValue): zIndex => {
parse: (_context: Context, token: CSSValue): zIndex => {
if (token.type === TokenType.IDENT_TOKEN) {
return {auto: true, order: 0};
}

3
src/css/types/__tests__/color-tests.ts
View File

@@ -1,8 +1,9 @@
import {strictEqual} from 'assert';
import {asString, color, isTransparent, pack} from '../color';
import {Parser} from '../../syntax/parser';
import {Context} from '../../../core/context';
const parse = (value: string) => color.parse(Parser.parseValue(value));
const parse = (value: string) => color.parse({} as Context, Parser.parseValue(value));
describe('types', () => {
describe('<color>', () => {

85
src/css/types/__tests__/image-tests.ts
View File

@@ -5,30 +5,38 @@ import {color, pack} from '../color';
import {FLAG_INTEGER, TokenType} from '../../syntax/tokenizer';
import {deg} from '../angle';
const parse = (value: string) => image.parse(Parser.parseValue(value));
const colorParse = (value: string) => color.parse(Parser.parseValue(value));
const parse = (context: Context, value: string) => image.parse(context, Parser.parseValue(value));
const colorParse = (context: Context, value: string) => color.parse(context, Parser.parseValue(value));
jest.mock('../../../core/cache-storage');
jest.mock('../../../core/features');
jest.mock('../../../core/context');
import {Context} from '../../../core/context';
describe('types', () => {
let context: Context;
beforeEach(() => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
context = new Context({} as any, {} as any);
});
describe('<image>', () => {
describe('parsing', () => {
describe('url', () => {
it('url(test.jpg)', () =>
deepStrictEqual(parse('url(http://example.com/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('url("http://example.com/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('linear-gradient(#f69d3c, #3f87a6)'), {
deepStrictEqual(parse(context, 'linear-gradient(#f69d3c, #3f87a6)'), {
angle: deg(180),
type: CSSImageType.LINEAR_GRADIENT,
stops: [
@@ -37,60 +45,60 @@ describe('types', () => {
]
}));
it('linear-gradient(yellow, blue)', () =>
deepStrictEqual(parse('linear-gradient(yellow, blue)'), {
deepStrictEqual(parse(context, 'linear-gradient(yellow, blue)'), {
angle: deg(180),
type: CSSImageType.LINEAR_GRADIENT,
stops: [
{color: colorParse('yellow'), stop: null},
{color: colorParse('blue'), stop: null}
{color: colorParse(context, 'yellow'), stop: null},
{color: colorParse(context, 'blue'), stop: null}
]
}));
it('linear-gradient(to bottom, yellow, blue)', () =>
deepStrictEqual(parse('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('yellow'), stop: null},
{color: colorParse('blue'), stop: null}
{color: colorParse(context, 'yellow'), stop: null},
{color: colorParse(context, 'blue'), stop: null}
]
}));
it('linear-gradient(180deg, yellow, blue)', () =>
deepStrictEqual(parse('linear-gradient(180deg, yellow, blue)'), {
deepStrictEqual(parse(context, 'linear-gradient(180deg, yellow, blue)'), {
angle: deg(180),
type: CSSImageType.LINEAR_GRADIENT,
stops: [
{color: colorParse('yellow'), stop: null},
{color: colorParse('blue'), stop: null}
{color: colorParse(context, 'yellow'), stop: null},
{color: colorParse(context, 'blue'), stop: null}
]
}));
it('linear-gradient(to top, blue, yellow)', () =>
deepStrictEqual(parse('linear-gradient(to top, blue, yellow)'), {
deepStrictEqual(parse(context, 'linear-gradient(to top, blue, yellow)'), {
angle: 0,
type: CSSImageType.LINEAR_GRADIENT,
stops: [
{color: colorParse('blue'), stop: null},
{color: colorParse('yellow'), stop: null}
{color: colorParse(context, 'blue'), stop: null},
{color: colorParse(context, 'yellow'), stop: null}
]
}));
it('linear-gradient(to top right, blue, yellow)', () =>
deepStrictEqual(parse('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('blue'), stop: null},
{color: colorParse('yellow'), stop: null}
{color: colorParse(context, 'blue'), stop: null},
{color: colorParse(context, 'yellow'), stop: null}
]
}));
it('linear-gradient(to bottom, yellow 0%, blue 100%)', () =>
deepStrictEqual(parse('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('yellow'),
color: colorParse(context, 'yellow'),
stop: {
type: TokenType.PERCENTAGE_TOKEN,
number: 0,
@@ -98,7 +106,7 @@ describe('types', () => {
}
},
{
color: colorParse('blue'),
color: colorParse(context, 'blue'),
stop: {
type: TokenType.PERCENTAGE_TOKEN,
number: 100,
@@ -109,7 +117,7 @@ describe('types', () => {
}));
it('linear-gradient(to top left, lightpink, lightpink 5px, white 5px, white 10px)', () =>
deepStrictEqual(
parse('linear-gradient(to top left, lightpink, lightpink 5px, white 5px, white 10px)'),
parse(context, 'linear-gradient(to top left, lightpink, lightpink 5px, white 5px, white 10px)'),
{
angle: [
{type: TokenType.PERCENTAGE_TOKEN, number: 100, flags: 4},
@@ -117,9 +125,9 @@ describe('types', () => {
],
type: CSSImageType.LINEAR_GRADIENT,
stops: [
{color: colorParse('lightpink'), stop: null},
{color: colorParse(context, 'lightpink'), stop: null},
{
color: colorParse('lightpink'),
color: colorParse(context, 'lightpink'),
stop: {
type: TokenType.DIMENSION_TOKEN,
number: 5,
@@ -128,7 +136,7 @@ describe('types', () => {
}
},
{
color: colorParse('white'),
color: colorParse(context, 'white'),
stop: {
type: TokenType.DIMENSION_TOKEN,
number: 5,
@@ -137,7 +145,7 @@ describe('types', () => {
}
},
{
color: colorParse('white'),
color: colorParse(context, 'white'),
stop: {
type: TokenType.DIMENSION_TOKEN,
number: 10,
@@ -152,13 +160,16 @@ describe('types', () => {
describe('-prefix-linear-gradient', () => {
it('-webkit-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #3a8bc2 84%, #26558b 100%)', () =>
deepStrictEqual(
parse('-webkit-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #3a8bc2 84%, #26558b 100%)'),
parse(
context,
'-webkit-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #3a8bc2 84%, #26558b 100%)'
),
{
angle: deg(90),
type: CSSImageType.LINEAR_GRADIENT,
stops: [
{
color: colorParse('#cedbe9'),
color: colorParse(context, '#cedbe9'),
stop: {
type: TokenType.PERCENTAGE_TOKEN,
number: 0,
@@ -166,7 +177,7 @@ describe('types', () => {
}
},
{
color: colorParse('#aac5de'),
color: colorParse(context, '#aac5de'),
stop: {
type: TokenType.PERCENTAGE_TOKEN,
number: 17,
@@ -174,7 +185,7 @@ describe('types', () => {
}
},
{
color: colorParse('#3a8bc2'),
color: colorParse(context, '#3a8bc2'),
stop: {
type: TokenType.PERCENTAGE_TOKEN,
number: 84,
@@ -182,7 +193,7 @@ describe('types', () => {
}
},
{
color: colorParse('#26558b'),
color: colorParse(context, '#26558b'),
stop: {
type: TokenType.PERCENTAGE_TOKEN,
number: 100,
@@ -193,12 +204,12 @@ describe('types', () => {
}
));
it('-moz-linear-gradient(top, #cce5f4 0%, #00263c 100%)', () =>
deepStrictEqual(parse('-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('#cce5f4'),
color: colorParse(context, '#cce5f4'),
stop: {
type: TokenType.PERCENTAGE_TOKEN,
number: 0,
@@ -206,7 +217,7 @@ describe('types', () => {
}
},
{
color: colorParse('#00263c'),
color: colorParse(context, '#00263c'),
stop: {
type: TokenType.PERCENTAGE_TOKEN,
number: 100,

3
src/css/types/angle.ts
View File

@@ -3,6 +3,7 @@ import {TokenType} from '../syntax/tokenizer';
import {ITypeDescriptor} from '../ITypeDescriptor';
import {HUNDRED_PERCENT, ZERO_LENGTH} from './length-percentage';
import {GradientCorner} from './image';
import {Context} from '../../core/context';
const DEG = 'deg';
const GRAD = 'grad';
@@ -11,7 +12,7 @@ const TURN = 'turn';
export const angle: ITypeDescriptor<number> = {
name: 'angle',
parse: (value: CSSValue): number => {
parse: (_context: Context, value: CSSValue): number => {
if (value.type === TokenType.DIMENSION_TOKEN) {
switch (value.unit) {
case DEG:

18
src/css/types/color.ts
View File

@@ -1,19 +1,20 @@
import {CSSValue, nonFunctionArgSeparator} from '../syntax/parser';
import {CSSValue, nonFunctionArgSeparator, Parser} from '../syntax/parser';
import {TokenType} from '../syntax/tokenizer';
import {ITypeDescriptor} from '../ITypeDescriptor';
import {angle, deg} from './angle';
import {getAbsoluteValue, isLengthPercentage} from './length-percentage';
import {Context} from '../../core/context';
export type Color = number;
export const color: ITypeDescriptor<Color> = {
name: 'color',
parse: (value: CSSValue): Color => {
parse: (context: Context, value: CSSValue): Color => {
if (value.type === TokenType.FUNCTION) {
const colorFunction = SUPPORTED_COLOR_FUNCTIONS[value.name];
if (typeof colorFunction === 'undefined') {
throw new Error(`Attempting to parse an unsupported color function "${value.name}"`);
}
return colorFunction(value.values);
return colorFunction(context, value.values);
}
if (value.type === TokenType.HASH_TOKEN) {
@@ -85,7 +86,7 @@ const getTokenColorValue = (token: CSSValue, i: number): number => {
return 0;
};
const rgb = (args: CSSValue[]): number => {
const rgb = (_context: Context, args: CSSValue[]): number => {
const tokens = args.filter(nonFunctionArgSeparator);
if (tokens.length === 3) {
@@ -120,11 +121,11 @@ function hue2rgb(t1: number, t2: number, hue: number): number {
}
}
const hsl = (args: CSSValue[]): number => {
const hsl = (context: Context, args: CSSValue[]): number => {
const tokens = args.filter(nonFunctionArgSeparator);
const [hue, saturation, lightness, alpha] = tokens;
const h = (hue.type === TokenType.NUMBER_TOKEN ? deg(hue.number) : angle.parse(hue)) / (Math.PI * 2);
const h = (hue.type === TokenType.NUMBER_TOKEN ? deg(hue.number) : angle.parse(context, hue)) / (Math.PI * 2);
const s = isLengthPercentage(saturation) ? saturation.number / 100 : 0;
const l = isLengthPercentage(lightness) ? lightness.number / 100 : 0;
const a = typeof alpha !== 'undefined' && isLengthPercentage(alpha) ? getAbsoluteValue(alpha, 1) : 1;
@@ -143,7 +144,7 @@ const hsl = (args: CSSValue[]): number => {
};
const SUPPORTED_COLOR_FUNCTIONS: {
[key: string]: (args: CSSValue[]) => number;
[key: string]: (context: Context, args: CSSValue[]) => number;
} = {
hsl: hsl,
hsla: hsl,
@@ -151,6 +152,9 @@ const SUPPORTED_COLOR_FUNCTIONS: {
rgba: rgb
};
export const parseColor = (context: Context, value: string): Color =>
color.parse(context, Parser.create(value).parseComponentValue());
export const COLORS: {[key: string]: Color} = {
ALICEBLUE: 0xf0f8ffff,
ANTIQUEWHITE: 0xfaebd7ff,

7
src/css/types/functions/-prefix-linear-gradient.ts
View File

@@ -3,8 +3,9 @@ import {CSSImageType, CSSLinearGradientImage, GradientCorner, UnprocessedGradien
import {TokenType} from '../../syntax/tokenizer';
import {isAngle, angle as angleType, parseNamedSide, deg} from '../angle';
import {parseColorStop} from './gradient';
import {Context} from '../../../core/context';
export const prefixLinearGradient = (tokens: CSSValue[]): CSSLinearGradientImage => {
export const prefixLinearGradient = (context: Context, tokens: CSSValue[]): CSSLinearGradientImage => {
let angle: number | GradientCorner = deg(180);
const stops: UnprocessedGradientColorStop[] = [];
@@ -18,11 +19,11 @@ export const prefixLinearGradient = (tokens: CSSValue[]): CSSLinearGradientImage
angle = parseNamedSide(arg);
return;
} else if (isAngle(firstToken)) {
angle = (angleType.parse(firstToken) + deg(270)) % deg(360);
angle = (angleType.parse(context, firstToken) + deg(270)) % deg(360);
return;
}
}
const colorStop = parseColorStop(arg);
const colorStop = parseColorStop(context, arg);
stops.push(colorStop);
});

5
src/css/types/functions/-prefix-radial-gradient.ts
View File

@@ -20,8 +20,9 @@ import {
FARTHEST_CORNER,
FARTHEST_SIDE
} from './radial-gradient';
import {Context} from '../../../core/context';
export const prefixRadialGradient = (tokens: CSSValue[]): CSSRadialGradientImage => {
export const prefixRadialGradient = (context: Context, tokens: CSSValue[]): CSSRadialGradientImage => {
let shape: CSSRadialShape = CSSRadialShape.CIRCLE;
let size: CSSRadialSize = CSSRadialExtent.FARTHEST_CORNER;
const stops: UnprocessedGradientColorStop[] = [];
@@ -90,7 +91,7 @@ export const prefixRadialGradient = (tokens: CSSValue[]): CSSRadialGradientImage
}
if (isColorStop) {
const colorStop = parseColorStop(arg);
const colorStop = parseColorStop(context, arg);
stops.push(colorStop);
}
});

12
src/css/types/functions/-webkit-gradient.ts
View File

@@ -12,8 +12,12 @@ import {deg} from '../angle';
import {TokenType} from '../../syntax/tokenizer';
import {color as colorType} from '../color';
import {HUNDRED_PERCENT, LengthPercentage, ZERO_LENGTH} from '../length-percentage';
import {Context} from '../../../core/context';
export const webkitGradient = (tokens: CSSValue[]): CSSLinearGradientImage | CSSRadialGradientImage => {
export const webkitGradient = (
context: Context,
tokens: CSSValue[]
): CSSLinearGradientImage | CSSRadialGradientImage => {
const angle = deg(180);
const stops: UnprocessedGradientColorStop[] = [];
let type = CSSImageType.LINEAR_GRADIENT;
@@ -34,15 +38,15 @@ export const webkitGradient = (tokens: CSSValue[]): CSSLinearGradientImage | CSS
if (firstToken.type === TokenType.FUNCTION) {
if (firstToken.name === 'from') {
const color = colorType.parse(firstToken.values[0]);
const color = colorType.parse(context, firstToken.values[0]);
stops.push({stop: ZERO_LENGTH, color});
} else if (firstToken.name === 'to') {
const color = colorType.parse(firstToken.values[0]);
const color = colorType.parse(context, firstToken.values[0]);
stops.push({stop: HUNDRED_PERCENT, color});
} else if (firstToken.name === 'color-stop') {
const values = firstToken.values.filter(nonFunctionArgSeparator);
if (values.length === 2) {
const color = colorType.parse(values[1]);
const color = colorType.parse(context, values[1]);
const stop = values[0];
if (isNumberToken(stop)) {
stops.push({

5
src/css/types/functions/__tests__/radial-gradient.ts
View File

@@ -5,9 +5,10 @@ import {CSSImageType, CSSRadialExtent, CSSRadialShape} from '../../image';
import {color} from '../../color';
import {TokenType} from '../../../syntax/tokenizer';
import {FIFTY_PERCENT, HUNDRED_PERCENT} from '../../length-percentage';
import {Context} from '../../../../core/context';
const parse = (value: string) => radialGradient((Parser.parseValues(value)[0] as CSSFunction).values);
const colorParse = (value: string) => color.parse(Parser.parseValue(value));
const parse = (value: string) => radialGradient({} as Context, (Parser.parseValues(value)[0] as CSSFunction).values);
const colorParse = (value: string) => color.parse({} as Context, Parser.parseValue(value));
describe('functions', () => {
describe('radial-gradient', () => {

5
src/css/types/functions/gradient.ts
View File

@@ -9,9 +9,10 @@ import {
} from '../image';
import {color as colorType} from '../color';
import {getAbsoluteValue, HUNDRED_PERCENT, isLengthPercentage, ZERO_LENGTH} from '../length-percentage';
import {Context} from '../../../core/context';
export const parseColorStop = (args: CSSValue[]): UnprocessedGradientColorStop => {
const color = colorType.parse(args[0]);
export const parseColorStop = (context: Context, args: CSSValue[]): UnprocessedGradientColorStop => {
const color = colorType.parse(context, args[0]);
const stop = args[1];
return stop && isLengthPercentage(stop) ? {color, stop} : {color, stop: null};
};

7
src/css/types/functions/linear-gradient.ts
View File

@@ -3,8 +3,9 @@ import {TokenType} from '../../syntax/tokenizer';
import {isAngle, angle as angleType, parseNamedSide, deg} from '../angle';
import {CSSImageType, CSSLinearGradientImage, GradientCorner, UnprocessedGradientColorStop} from '../image';
import {parseColorStop} from './gradient';
import {Context} from '../../../core/context';
export const linearGradient = (tokens: CSSValue[]): CSSLinearGradientImage => {
export const linearGradient = (context: Context, tokens: CSSValue[]): CSSLinearGradientImage => {
let angle: number | GradientCorner = deg(180);
const stops: UnprocessedGradientColorStop[] = [];
@@ -15,11 +16,11 @@ export const linearGradient = (tokens: CSSValue[]): CSSLinearGradientImage => {
angle = parseNamedSide(arg);
return;
} else if (isAngle(firstToken)) {
angle = angleType.parse(firstToken);
angle = angleType.parse(context, firstToken);
return;
}
}
const colorStop = parseColorStop(arg);
const colorStop = parseColorStop(context, arg);
stops.push(colorStop);
});

5
src/css/types/functions/radial-gradient.ts
View File

@@ -10,6 +10,7 @@ import {
import {parseColorStop} from './gradient';
import {FIFTY_PERCENT, HUNDRED_PERCENT, isLengthPercentage, LengthPercentage, ZERO_LENGTH} from '../length-percentage';
import {isLength} from '../length';
import {Context} from '../../../core/context';
export const CLOSEST_SIDE = 'closest-side';
export const FARTHEST_SIDE = 'farthest-side';
export const CLOSEST_CORNER = 'closest-corner';
@@ -19,7 +20,7 @@ export const ELLIPSE = 'ellipse';
export const COVER = 'cover';
export const CONTAIN = 'contain';
export const radialGradient = (tokens: CSSValue[]): CSSRadialGradientImage => {
export const radialGradient = (context: Context, tokens: CSSValue[]): CSSRadialGradientImage => {
let shape: CSSRadialShape = CSSRadialShape.CIRCLE;
let size: CSSRadialSize = CSSRadialExtent.FARTHEST_CORNER;
const stops: UnprocessedGradientColorStop[] = [];
@@ -85,7 +86,7 @@ export const radialGradient = (tokens: CSSValue[]): CSSRadialGradientImage => {
}
if (isColorStop) {
const colorStop = parseColorStop(arg);
const colorStop = parseColorStop(context, arg);
stops.push(colorStop);
}
});

10
src/css/types/image.ts
View File

@@ -4,11 +4,11 @@ import {Color} from './color';
import {linearGradient} from './functions/linear-gradient';
import {prefixLinearGradient} from './functions/-prefix-linear-gradient';
import {ITypeDescriptor} from '../ITypeDescriptor';
import {CacheStorage} from '../../core/cache-storage';
import {LengthPercentage} from './length-percentage';
import {webkitGradient} from './functions/-webkit-gradient';
import {radialGradient} from './functions/radial-gradient';
import {prefixRadialGradient} from './functions/-prefix-radial-gradient';
import {Context} from '../../core/context';
export enum CSSImageType {
URL,
@@ -79,10 +79,10 @@ export interface CSSRadialGradientImage extends ICSSGradientImage {
export const image: ITypeDescriptor<ICSSImage> = {
name: 'image',
parse: (value: CSSValue): ICSSImage => {
parse: (context: Context, value: CSSValue): ICSSImage => {
if (value.type === TokenType.URL_TOKEN) {
const image: CSSURLImage = {url: value.value, type: CSSImageType.URL};
CacheStorage.getInstance().addImage(value.value);
context.cache.addImage(value.value);
return image;
}
@@ -91,7 +91,7 @@ export const image: ITypeDescriptor<ICSSImage> = {
if (typeof imageFunction === 'undefined') {
throw new Error(`Attempting to parse an unsupported image function "${value.name}"`);
}
return imageFunction(value.values);
return imageFunction(context, value.values);
}
throw new Error(`Unsupported image type`);
@@ -102,7 +102,7 @@ export function isSupportedImage(value: CSSValue): boolean {
return value.type !== TokenType.FUNCTION || !!SUPPORTED_IMAGE_FUNCTIONS[value.name];
}
const SUPPORTED_IMAGE_FUNCTIONS: Record<string, (args: CSSValue[]) => ICSSImage> = {
const SUPPORTED_IMAGE_FUNCTIONS: Record<string, (context: Context, args: CSSValue[]) => ICSSImage> = {
'linear-gradient': linearGradient,
'-moz-linear-gradient': prefixLinearGradient,
'-ms-linear-gradient': prefixLinearGradient,