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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
90 changed files with 750 additions and 552 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/__tests__/index.ts
View File

@ -34,6 +34,11 @@ describe('html2canvas', () => {
DocumentCloner.destroy = jest.fn().mockReturnValue(true); DocumentCloner.destroy = jest.fn().mockReturnValue(true);
await html2canvas(element); await html2canvas(element);
expect(CanvasRenderer).toHaveBeenLastCalledWith( expect(CanvasRenderer).toHaveBeenLastCalledWith(
expect.objectContaining({
cache: expect.any(Object),
logger: expect.any(Object),
windowBounds: expect.objectContaining({left: 12, top: 34})
}),
expect.objectContaining({ expect.objectContaining({
backgroundColor: 0xffffffff, backgroundColor: 0xffffffff,
scale: 1, scale: 1,
@ -41,8 +46,6 @@ describe('html2canvas', () => {
width: 200, width: 200,
x: 0, x: 0,
y: 0, y: 0,
scrollX: 12,
scrollY: 34,
canvas: undefined canvas: undefined
}) })
); );
@ -52,6 +55,7 @@ describe('html2canvas', () => {
it('should have transparent background with backgroundColor: null', async () => { it('should have transparent background with backgroundColor: null', async () => {
await html2canvas(element, {backgroundColor: null}); await html2canvas(element, {backgroundColor: null});
expect(CanvasRenderer).toHaveBeenLastCalledWith( expect(CanvasRenderer).toHaveBeenLastCalledWith(
expect.anything(),
expect.objectContaining({ expect.objectContaining({
backgroundColor: COLORS.TRANSPARENT backgroundColor: COLORS.TRANSPARENT
}) })
@ -62,6 +66,7 @@ describe('html2canvas', () => {
const canvas = {} as HTMLCanvasElement; const canvas = {} as HTMLCanvasElement;
await html2canvas(element, {canvas}); await html2canvas(element, {canvas});
expect(CanvasRenderer).toHaveBeenLastCalledWith( expect(CanvasRenderer).toHaveBeenLastCalledWith(
expect.anything(),
expect.objectContaining({ expect.objectContaining({
canvas canvas
}) })
@ -72,6 +77,7 @@ describe('html2canvas', () => {
DocumentCloner.destroy = jest.fn(); DocumentCloner.destroy = jest.fn();
await html2canvas(element, {removeContainer: false}); await html2canvas(element, {removeContainer: false});
expect(CanvasRenderer).toHaveBeenLastCalledWith( expect(CanvasRenderer).toHaveBeenLastCalledWith(
expect.anything(),
expect.objectContaining({ expect.objectContaining({
backgroundColor: 0xffffffff, backgroundColor: 0xffffffff,
scale: 1, scale: 1,
@ -79,8 +85,6 @@ describe('html2canvas', () => {
width: 200, width: 200,
x: 0, x: 0,
y: 0, y: 0,
scrollX: 12,
scrollY: 34,
canvas: undefined canvas: undefined
}) })
); );

23
src/core/__mocks__/cache-storage.ts
View File

@ -1,22 +1 @@
class MockCache { export class CacheStorage {}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
private readonly _cache: {[key: string]: Promise<any>};
constructor() {
this._cache = {};
}
addImage(src: string): Promise<void> {
const result = Promise.resolve();
this._cache[src] = result;
return result;
}
}
const current = new MockCache();
export class CacheStorage {
static getInstance(): MockCache {
return current;
}
}

19
src/core/__mocks__/context.ts Normal file
View File

@ -0,0 +1,19 @@
import {logger, Logger} from './logger';
export class Context {
readonly logger: Logger = logger;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
readonly _cache: {[key: string]: Promise<any>} = {};
// eslint-disable-next-line @typescript-eslint/no-explicit-any
readonly cache: any;
constructor() {
this.cache = {
addImage: jest.fn().mockImplementation((src: string): Promise<void> => {
const result = Promise.resolve();
this._cache[src] = result;
return result;
})
};
}
}

2
src/core/__mocks__/logger.ts
View File

@ -19,4 +19,4 @@ export class Logger {
error(): void {} error(): void {}
} }
const logger = new Logger(); export const logger = new Logger();

49
src/core/__tests__/cache-storage.ts
View File

@ -1,7 +1,8 @@
import {deepStrictEqual, fail} from 'assert'; import {deepStrictEqual, fail} from 'assert';
import {FEATURES} from '../features'; import {FEATURES} from '../features';
import {CacheStorage} from '../cache-storage'; import {CacheStorage} from '../cache-storage';
import {Logger} from '../logger'; import {Context} from '../context';
import {Bounds} from '../../css/layout/bounds';
const proxy = 'http://example.com/proxy'; const proxy = 'http://example.com/proxy';
@ -35,14 +36,18 @@ const createMockContext = (origin: string, opts = {}) => {
}; };
CacheStorage.setContext(context as Window); CacheStorage.setContext(context as Window);
Logger.create({id: 'test', enabled: false});
return CacheStorage.create('test', { return new Context(
imageTimeout: 0, {
useCORS: false, logging: false,
allowTaint: false, imageTimeout: 0,
proxy, useCORS: false,
...opts allowTaint: false,
}); proxy,
...opts
},
new Bounds(0, 0, 0, 0)
);
}; };
const images: ImageMock[] = []; const images: ImageMock[] = [];
@ -121,7 +126,7 @@ describe('cache-storage', () => {
images.splice(0, images.length); images.splice(0, images.length);
}); });
it('addImage adds images to cache', async () => { it('addImage adds images to cache', async () => {
const cache = createMockContext('http://example.com', {proxy: null}); const {cache} = createMockContext('http://example.com', {proxy: null});
await cache.addImage('http://example.com/test.jpg'); await cache.addImage('http://example.com/test.jpg');
await cache.addImage('http://example.com/test2.jpg'); await cache.addImage('http://example.com/test2.jpg');
@ -131,7 +136,7 @@ describe('cache-storage', () => {
}); });
it('addImage should not add duplicate entries', async () => { it('addImage should not add duplicate entries', async () => {
const cache = createMockContext('http://example.com'); const {cache} = createMockContext('http://example.com');
await cache.addImage('http://example.com/test.jpg'); await cache.addImage('http://example.com/test.jpg');
await cache.addImage('http://example.com/test.jpg'); await cache.addImage('http://example.com/test.jpg');
@ -141,7 +146,7 @@ describe('cache-storage', () => {
describe('svg', () => { describe('svg', () => {
it('should add svg images correctly', async () => { it('should add svg images correctly', async () => {
const cache = createMockContext('http://example.com'); const {cache} = createMockContext('http://example.com');
await cache.addImage('http://example.com/test.svg'); await cache.addImage('http://example.com/test.svg');
await cache.addImage('http://example.com/test2.svg'); await cache.addImage('http://example.com/test2.svg');
@ -152,7 +157,7 @@ describe('cache-storage', () => {
it('should omit svg images if not supported', async () => { it('should omit svg images if not supported', async () => {
setFeatures({SUPPORT_SVG_DRAWING: false}); setFeatures({SUPPORT_SVG_DRAWING: false});
const cache = createMockContext('http://example.com'); const {cache} = createMockContext('http://example.com');
await cache.addImage('http://example.com/test.svg'); await cache.addImage('http://example.com/test.svg');
await cache.addImage('http://example.com/test2.svg'); await cache.addImage('http://example.com/test2.svg');
@ -162,7 +167,7 @@ describe('cache-storage', () => {
describe('cross-origin', () => { describe('cross-origin', () => {
it('addImage should not add images it cannot load/render', async () => { it('addImage should not add images it cannot load/render', async () => {
const cache = createMockContext('http://example.com', { const {cache} = createMockContext('http://example.com', {
proxy: undefined proxy: undefined
}); });
await cache.addImage('http://html2canvas.hertzen.com/test.jpg'); await cache.addImage('http://html2canvas.hertzen.com/test.jpg');
@ -170,7 +175,7 @@ describe('cache-storage', () => {
}); });
it('addImage should add images if tainting enabled', async () => { it('addImage should add images if tainting enabled', async () => {
const cache = createMockContext('http://example.com', { const {cache} = createMockContext('http://example.com', {
allowTaint: true, allowTaint: true,
proxy: undefined proxy: undefined
}); });
@ -181,7 +186,7 @@ describe('cache-storage', () => {
}); });
it('addImage should add images if cors enabled', async () => { it('addImage should add images if cors enabled', async () => {
const cache = createMockContext('http://example.com', {useCORS: true}); const {cache} = createMockContext('http://example.com', {useCORS: true});
await cache.addImage('http://html2canvas.hertzen.com/test.jpg'); await cache.addImage('http://html2canvas.hertzen.com/test.jpg');
deepStrictEqual(images.length, 1); deepStrictEqual(images.length, 1);
deepStrictEqual(images[0].src, 'http://html2canvas.hertzen.com/test.jpg'); deepStrictEqual(images[0].src, 'http://html2canvas.hertzen.com/test.jpg');
@ -191,7 +196,7 @@ describe('cache-storage', () => {
it('addImage should not add images if cors enabled but not supported', async () => { it('addImage should not add images if cors enabled but not supported', async () => {
setFeatures({SUPPORT_CORS_IMAGES: false}); setFeatures({SUPPORT_CORS_IMAGES: false});
const cache = createMockContext('http://example.com', { const {cache} = createMockContext('http://example.com', {
useCORS: true, useCORS: true,
proxy: undefined proxy: undefined
}); });
@ -200,7 +205,7 @@ describe('cache-storage', () => {
}); });
it('addImage should not add images to proxy if cors enabled', async () => { it('addImage should not add images to proxy if cors enabled', async () => {
const cache = createMockContext('http://example.com', {useCORS: true}); const {cache} = createMockContext('http://example.com', {useCORS: true});
await cache.addImage('http://html2canvas.hertzen.com/test.jpg'); await cache.addImage('http://html2canvas.hertzen.com/test.jpg');
deepStrictEqual(images.length, 1); deepStrictEqual(images.length, 1);
deepStrictEqual(images[0].src, 'http://html2canvas.hertzen.com/test.jpg'); deepStrictEqual(images[0].src, 'http://html2canvas.hertzen.com/test.jpg');
@ -208,7 +213,7 @@ describe('cache-storage', () => {
}); });
it('addImage should use proxy ', async () => { it('addImage should use proxy ', async () => {
const cache = createMockContext('http://example.com'); const {cache} = createMockContext('http://example.com');
await cache.addImage('http://html2canvas.hertzen.com/test.jpg'); await cache.addImage('http://html2canvas.hertzen.com/test.jpg');
deepStrictEqual(xhr.length, 1); deepStrictEqual(xhr.length, 1);
deepStrictEqual( deepStrictEqual(
@ -222,7 +227,7 @@ describe('cache-storage', () => {
}); });
it('proxy should respect imageTimeout', async () => { it('proxy should respect imageTimeout', async () => {
const cache = createMockContext('http://example.com', { const {cache} = createMockContext('http://example.com', {
imageTimeout: 10 imageTimeout: 10
}); });
await cache.addImage('http://html2canvas.hertzen.com/test.jpg'); await cache.addImage('http://html2canvas.hertzen.com/test.jpg');
@ -244,7 +249,7 @@ describe('cache-storage', () => {
}); });
it('match should return cache entry', async () => { it('match should return cache entry', async () => {
const cache = createMockContext('http://example.com'); const {cache} = createMockContext('http://example.com');
await cache.addImage('http://example.com/test.jpg'); await cache.addImage('http://example.com/test.jpg');
if (images[0].onload) { if (images[0].onload) {
@ -257,7 +262,7 @@ describe('cache-storage', () => {
}); });
it('image should respect imageTimeout', async () => { it('image should respect imageTimeout', async () => {
const cache = createMockContext('http://example.com', {imageTimeout: 10}); const {cache} = createMockContext('http://example.com', {imageTimeout: 10});
cache.addImage('http://example.com/test.jpg'); cache.addImage('http://example.com/test.jpg');
try { try {

49
src/core/cache-storage.ts
View File

@ -1,28 +1,9 @@
import {FEATURES} from './features'; import {FEATURES} from './features';
import {Logger} from './logger'; import type {Context} from './context';
export class CacheStorage { export class CacheStorage {
private static _caches: {[key: string]: Cache} = {};
private static _link?: HTMLAnchorElement; private static _link?: HTMLAnchorElement;
private static _origin = 'about:blank'; private static _origin = 'about:blank';
private static _current: Cache | null = null;
static create(name: string, options: ResourceOptions): Cache {
return (CacheStorage._caches[name] = new Cache(name, options));
}
static destroy(name: string): void {
delete CacheStorage._caches[name];
}
static open(name: string): Cache {
const cache = CacheStorage._caches[name];
if (typeof cache !== 'undefined') {
return cache;
}
throw new Error(`Cache with key "${name}" not found`);
}
static getOrigin(url: string): string { static getOrigin(url: string): string {
const link = CacheStorage._link; const link = CacheStorage._link;
@ -43,22 +24,6 @@ export class CacheStorage {
CacheStorage._link = window.document.createElement('a'); CacheStorage._link = window.document.createElement('a');
CacheStorage._origin = CacheStorage.getOrigin(window.location.href); CacheStorage._origin = CacheStorage.getOrigin(window.location.href);
} }
static getInstance(): Cache {
const current = CacheStorage._current;
if (current === null) {
throw new Error(`No cache instance attached`);
}
return current;
}
static attachInstance(cache: Cache): void {
CacheStorage._current = cache;
}
static detachInstance(): void {
CacheStorage._current = null;
}
} }
export interface ResourceOptions { export interface ResourceOptions {
@ -70,15 +35,9 @@ export interface ResourceOptions {
export class Cache { export class Cache {
// eslint-disable-next-line @typescript-eslint/no-explicit-any // eslint-disable-next-line @typescript-eslint/no-explicit-any
private readonly _cache: {[key: string]: Promise<any>}; private readonly _cache: {[key: string]: Promise<any>} = {};
private readonly _options: ResourceOptions;
private readonly id: string;
constructor(id: string, options: ResourceOptions) { constructor(private readonly context: Context, private readonly _options: ResourceOptions) {}
this.id = id;
this._options = options;
this._cache = {};
}
addImage(src: string): Promise<void> { addImage(src: string): Promise<void> {
const result = Promise.resolve(); const result = Promise.resolve();
@ -128,7 +87,7 @@ export class Cache {
src = await this.proxy(src); src = await this.proxy(src);
} }
Logger.getInstance(this.id).debug(`Added image ${key.substring(0, 256)}`); this.context.logger.debug(`Added image ${key.substring(0, 256)}`);
return await new Promise((resolve, reject) => { return await new Promise((resolve, reject) => {
const img = new Image(); const img = new Image();

21
src/core/context.ts Normal file
View File

@ -0,0 +1,21 @@
import {Logger} from './logger';
import {Cache, ResourceOptions} from './cache-storage';
import {Bounds} from '../css/layout/bounds';
export type ContextOptions = {
logging: boolean;
cache?: Cache;
} & ResourceOptions;
export class Context {
private readonly instanceName = `#${Context.instanceCount++}`;
readonly logger: Logger;
readonly cache: Cache;
private static instanceCount = 1;
constructor(options: ContextOptions, public windowBounds: Bounds) {
this.logger = new Logger({id: this.instanceName, enabled: options.logging});
this.cache = options.cache ?? new Cache(this, options);
}
}

29
src/core/logger.ts
View File

@ -33,22 +33,6 @@ export class Logger {
return Date.now() - this.start; return Date.now() - this.start;
} }
static create(options: LoggerOptions): void {
Logger.instances[options.id] = new Logger(options);
}
static destroy(id: string): void {
delete Logger.instances[id];
}
static getInstance(id: string): Logger {
const instance = Logger.instances[id];
if (typeof instance === 'undefined') {
throw new Error(`No logger instance found with id ${id}`);
}
return instance;
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any // eslint-disable-next-line @typescript-eslint/no-explicit-any
info(...args: unknown[]): void { info(...args: unknown[]): void {
if (this.enabled) { if (this.enabled) {
@ -60,6 +44,19 @@ export class Logger {
} }
} }
// eslint-disable-next-line @typescript-eslint/no-explicit-any
warn(...args: unknown[]): void {
if (this.enabled) {
// eslint-disable-next-line no-console
if (typeof window !== 'undefined' && window.console && typeof console.warn === 'function') {
// eslint-disable-next-line no-console
console.warn(this.id, `${this.getTime()}ms`, ...args);
} else {
this.info(...args);
}
}
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any // eslint-disable-next-line @typescript-eslint/no-explicit-any
error(...args: unknown[]): void { error(...args: unknown[]): void {
if (this.enabled) { if (this.enabled) {

7
src/css/IPropertyDescriptor.ts
View File

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

3
src/css/ITypeDescriptor.ts
View File

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

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

@ -1,27 +1,24 @@
export class Bounds { import {Context} from '../../core/context';
readonly top: number;
readonly left: number;
readonly width: number;
readonly height: number;
constructor(x: number, y: number, w: number, h: number) { export class Bounds {
this.left = x; constructor(readonly left: number, readonly top: number, readonly width: number, readonly height: number) {}
this.top = y;
this.width = w;
this.height = h;
}
add(x: number, y: number, w: number, h: number): Bounds { 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); return new Bounds(this.left + x, this.top + y, this.width + w, this.height + h);
} }
static fromClientRect(clientRect: ClientRect): Bounds { static fromClientRect(context: Context, clientRect: ClientRect): Bounds {
return new Bounds(clientRect.left, clientRect.top, clientRect.width, clientRect.height); return new Bounds(
clientRect.left + context.windowBounds.left,
clientRect.top + context.windowBounds.top,
clientRect.width,
clientRect.height
);
} }
} }
export const parseBounds = (node: Element): Bounds => { export const parseBounds = (context: Context, node: Element): Bounds => {
return Bounds.fromClientRect(node.getBoundingClientRect()); return Bounds.fromClientRect(context, node.getBoundingClientRect());
}; };
export const parseDocumentSize = (document: Document): Bounds => { 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 {fromCodePoint, LineBreaker, toCodePoints} from 'css-line-break';
import {Bounds, parseBounds} from './bounds'; import {Bounds, parseBounds} from './bounds';
import {FEATURES} from '../../core/features'; import {FEATURES} from '../../core/features';
import {Context} from '../../core/context';
export class TextBounds { export class TextBounds {
readonly text: string; 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 textList = breakText(value, styles);
const textBounds: TextBounds[] = []; const textBounds: TextBounds[] = [];
let offset = 0; let offset = 0;
textList.forEach((text) => { textList.forEach((text) => {
if (styles.textDecorationLine.length || text.trim().length > 0) { if (styles.textDecorationLine.length || text.trim().length > 0) {
if (FEATURES.SUPPORT_RANGE_BOUNDS) { 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 { } else {
const replacementNode = node.splitText(text.length); const replacementNode = node.splitText(text.length);
textBounds.push(new TextBounds(text, getWrapperBounds(node))); textBounds.push(new TextBounds(text, getWrapperBounds(context, node)));
node = replacementNode; node = replacementNode;
} }
} else if (!FEATURES.SUPPORT_RANGE_BOUNDS) { } else if (!FEATURES.SUPPORT_RANGE_BOUNDS) {
@ -36,7 +42,7 @@ export const parseTextBounds = (value: string, styles: CSSParsedDeclaration, nod
return textBounds; return textBounds;
}; };
const getWrapperBounds = (node: Text): Bounds => { const getWrapperBounds = (context: Context, node: Text): Bounds => {
const ownerDocument = node.ownerDocument; const ownerDocument = node.ownerDocument;
if (ownerDocument) { if (ownerDocument) {
const wrapper = ownerDocument.createElement('html2canvaswrapper'); const wrapper = ownerDocument.createElement('html2canvaswrapper');
@ -44,7 +50,7 @@ const getWrapperBounds = (node: Text): Bounds => {
const parentNode = node.parentNode; const parentNode = node.parentNode;
if (parentNode) { if (parentNode) {
parentNode.replaceChild(wrapper, node); parentNode.replaceChild(wrapper, node);
const bounds = parseBounds(wrapper); const bounds = parseBounds(context, wrapper);
if (wrapper.firstChild) { if (wrapper.firstChild) {
parentNode.replaceChild(wrapper.firstChild, wrapper); parentNode.replaceChild(wrapper.firstChild, wrapper);
} }
@ -55,7 +61,7 @@ const getWrapperBounds = (node: Text): Bounds => {
return new Bounds(0, 0, 0, 0); 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; const ownerDocument = node.ownerDocument;
if (!ownerDocument) { if (!ownerDocument) {
throw new Error('Node has no owner document'); 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(); const range = ownerDocument.createRange();
range.setStart(node, offset); range.setStart(node, offset);
range.setEnd(node, offset + length); range.setEnd(node, offset + length);
return Bounds.fromClientRect(range.getBoundingClientRect()); return Bounds.fromClientRect(context, range.getBoundingClientRect());
}; };
const breakText = (value: string, styles: CSSParsedDeclaration): string[] => { 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 {pack} from '../../types/color';
import {deg} from '../../types/angle'; import {deg} from '../../types/angle';
jest.mock('../../../core/cache-storage'); jest.mock('../../../core/context');
import {Context} from '../../../core/context';
jest.mock('../../../core/features'); 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', () => { 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', () => { 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( 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/test.jpg', type: CSSImageType.URL},
{url: 'http://example.com/test2.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')`, () => it(`linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)), url('https://html2canvas.hertzen.com')`, () =>
deepStrictEqual( deepStrictEqual(
backgroundImageParse( backgroundImageParse(
context,
`linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)), url('https://html2canvas.hertzen.com')` `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 {deepEqual} from 'assert';
import {Parser} from '../../syntax/parser'; import {Parser} from '../../syntax/parser';
import {fontFamily} from '../font-family'; 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('property-descriptors', () => {
describe('font-family', () => { describe('font-family', () => {

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

@ -1,8 +1,9 @@
import {deepStrictEqual} from 'assert'; import {deepStrictEqual} from 'assert';
import {Parser} from '../../syntax/parser'; import {Parser} from '../../syntax/parser';
import {paintOrder, PAINT_ORDER_LAYER} from '../paint-order'; 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('property-descriptors', () => {
describe('paint-order', () => { 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 {textShadow} from '../text-shadow';
import {FLAG_INTEGER, DimensionToken, TokenType} from '../../syntax/tokenizer'; import {FLAG_INTEGER, DimensionToken, TokenType} from '../../syntax/tokenizer';
import {ZERO_LENGTH} from '../../types/length-percentage'; import {ZERO_LENGTH} from '../../types/length-percentage';
import {Context} from '../../../core/context';
const textShadowParse = (value: string) => textShadow.parse(Parser.parseValues(value)); const textShadowParse = (value: string) => textShadow.parse({} as Context, Parser.parseValues(value));
const colorParse = (value: string) => color.parse(Parser.parseValue(value)); const colorParse = (value: string) => color.parse({} as Context, Parser.parseValue(value));
const dimension = (number: number, unit: string): DimensionToken => ({ const dimension = (number: number, unit: string): DimensionToken => ({
flags: FLAG_INTEGER, flags: FLAG_INTEGER,
number, number,

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

@ -1,7 +1,8 @@
import {transform} from '../transform'; import {transform} from '../transform';
import {Parser} from '../../syntax/parser'; import {Parser} from '../../syntax/parser';
import {deepStrictEqual} from 'assert'; 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('property-descriptors', () => {
describe('transform', () => { describe('transform', () => {

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

@ -1,5 +1,6 @@
import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor'; import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {CSSValue, isIdentToken} from '../syntax/parser'; import {CSSValue, isIdentToken} from '../syntax/parser';
import {Context} from '../../core/context';
export enum BACKGROUND_CLIP { export enum BACKGROUND_CLIP {
BORDER_BOX = 0, BORDER_BOX = 0,
PADDING_BOX = 1, PADDING_BOX = 1,
@ -13,7 +14,7 @@ export const backgroundClip: IPropertyListDescriptor<BackgroundClip> = {
initialValue: 'border-box', initialValue: 'border-box',
prefix: false, prefix: false,
type: PropertyDescriptorParsingType.LIST, type: PropertyDescriptorParsingType.LIST,
parse: (tokens: CSSValue[]): BackgroundClip => { parse: (_context: Context, tokens: CSSValue[]): BackgroundClip => {
return tokens.map((token) => { return tokens.map((token) => {
if (isIdentToken(token)) { if (isIdentToken(token)) {
switch (token.value) { 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 {ICSSImage, image, isSupportedImage} from '../types/image';
import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor'; import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {CSSValue, nonFunctionArgSeparator} from '../syntax/parser'; import {CSSValue, nonFunctionArgSeparator} from '../syntax/parser';
import {Context} from '../../core/context';
export const backgroundImage: IPropertyListDescriptor<ICSSImage[]> = { export const backgroundImage: IPropertyListDescriptor<ICSSImage[]> = {
name: 'background-image', name: 'background-image',
initialValue: 'none', initialValue: 'none',
type: PropertyDescriptorParsingType.LIST, type: PropertyDescriptorParsingType.LIST,
prefix: false, prefix: false,
parse: (tokens: CSSValue[]) => { parse: (context: Context, tokens: CSSValue[]) => {
if (tokens.length === 0) { if (tokens.length === 0) {
return []; return [];
} }
@ -19,6 +20,8 @@ export const backgroundImage: IPropertyListDescriptor<ICSSImage[]> = {
return []; 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 {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {CSSValue, isIdentToken} from '../syntax/parser'; import {CSSValue, isIdentToken} from '../syntax/parser';
import {Context} from '../../core/context';
export const enum BACKGROUND_ORIGIN { export const enum BACKGROUND_ORIGIN {
BORDER_BOX = 0, BORDER_BOX = 0,
@ -14,7 +15,7 @@ export const backgroundOrigin: IPropertyListDescriptor<BackgroundOrigin> = {
initialValue: 'border-box', initialValue: 'border-box',
prefix: false, prefix: false,
type: PropertyDescriptorParsingType.LIST, type: PropertyDescriptorParsingType.LIST,
parse: (tokens: CSSValue[]): BackgroundOrigin => { parse: (_context: Context, tokens: CSSValue[]): BackgroundOrigin => {
return tokens.map((token) => { return tokens.map((token) => {
if (isIdentToken(token)) { if (isIdentToken(token)) {
switch (token.value) { switch (token.value) {

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

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

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

@ -1,5 +1,6 @@
import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor'; import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {CSSValue, isIdentToken, parseFunctionArgs} from '../syntax/parser'; import {CSSValue, isIdentToken, parseFunctionArgs} from '../syntax/parser';
import {Context} from '../../core/context';
export type BackgroundRepeat = BACKGROUND_REPEAT[]; export type BackgroundRepeat = BACKGROUND_REPEAT[];
export enum BACKGROUND_REPEAT { export enum BACKGROUND_REPEAT {
@ -14,7 +15,7 @@ export const backgroundRepeat: IPropertyListDescriptor<BackgroundRepeat> = {
initialValue: 'repeat', initialValue: 'repeat',
prefix: false, prefix: false,
type: PropertyDescriptorParsingType.LIST, type: PropertyDescriptorParsingType.LIST,
parse: (tokens: CSSValue[]): BackgroundRepeat => { parse: (_context: Context, tokens: CSSValue[]): BackgroundRepeat => {
return parseFunctionArgs(tokens) return parseFunctionArgs(tokens)
.map((values) => .map((values) =>
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 {CSSValue, isIdentToken, parseFunctionArgs} from '../syntax/parser';
import {isLengthPercentage, LengthPercentage} from '../types/length-percentage'; import {isLengthPercentage, LengthPercentage} from '../types/length-percentage';
import {StringValueToken} from '../syntax/tokenizer'; import {StringValueToken} from '../syntax/tokenizer';
import {Context} from '../../core/context';
export enum BACKGROUND_SIZE { export enum BACKGROUND_SIZE {
AUTO = 'auto', AUTO = 'auto',
@ -17,7 +18,7 @@ export const backgroundSize: IPropertyListDescriptor<BackgroundSize> = {
initialValue: '0', initialValue: '0',
prefix: false, prefix: false,
type: PropertyDescriptorParsingType.LIST, type: PropertyDescriptorParsingType.LIST,
parse: (tokens: CSSValue[]): BackgroundSize => { parse: (_context: Context, tokens: CSSValue[]): BackgroundSize => {
return parseFunctionArgs(tokens).map((values) => values.filter(isBackgroundSizeInfoToken)); 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 {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {CSSValue} from '../syntax/parser'; import {CSSValue} from '../syntax/parser';
import {isLengthPercentage, LengthPercentageTuple, parseLengthPercentageTuple} from '../types/length-percentage'; import {isLengthPercentage, LengthPercentageTuple, parseLengthPercentageTuple} from '../types/length-percentage';
import {Context} from '../../core/context';
export type BorderRadius = LengthPercentageTuple; export type BorderRadius = LengthPercentageTuple;
const borderRadiusForSide = (side: string): IPropertyListDescriptor<BorderRadius> => ({ const borderRadiusForSide = (side: string): IPropertyListDescriptor<BorderRadius> => ({
@ -8,7 +9,8 @@ const borderRadiusForSide = (side: string): IPropertyListDescriptor<BorderRadius
initialValue: '0 0', initialValue: '0 0',
prefix: false, prefix: false,
type: PropertyDescriptorParsingType.LIST, 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'); 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 {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {Context} from '../../core/context';
export enum BORDER_STYLE { export enum BORDER_STYLE {
NONE = 0, NONE = 0,
SOLID = 1, SOLID = 1,
@ -12,7 +13,7 @@ const borderStyleForSide = (side: string): IPropertyIdentValueDescriptor<BORDER_
initialValue: 'solid', initialValue: 'solid',
prefix: false, prefix: false,
type: PropertyDescriptorParsingType.IDENT_VALUE, type: PropertyDescriptorParsingType.IDENT_VALUE,
parse: (style: string): BORDER_STYLE => { parse: (_context: Context, style: string): BORDER_STYLE => {
switch (style) { switch (style) {
case 'none': case 'none':
return BORDER_STYLE.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 {IPropertyValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {CSSValue, isDimensionToken} from '../syntax/parser'; import {CSSValue, isDimensionToken} from '../syntax/parser';
import {Context} from '../../core/context';
const borderWidthForSide = (side: string): IPropertyValueDescriptor<number> => ({ const borderWidthForSide = (side: string): IPropertyValueDescriptor<number> => ({
name: `border-${side}-width`, name: `border-${side}-width`,
initialValue: '0', initialValue: '0',
type: PropertyDescriptorParsingType.VALUE, type: PropertyDescriptorParsingType.VALUE,
prefix: false, prefix: false,
parse: (token: CSSValue): number => { parse: (_context: Context, token: CSSValue): number => {
if (isDimensionToken(token)) { if (isDimensionToken(token)) {
return token.number; 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 {ZERO_LENGTH} from '../types/length-percentage';
import {color, Color} from '../types/color'; import {color, Color} from '../types/color';
import {isLength, Length} from '../types/length'; import {isLength, Length} from '../types/length';
import {Context} from '../../core/context';
export type BoxShadow = BoxShadowItem[]; export type BoxShadow = BoxShadowItem[];
interface BoxShadowItem { interface BoxShadowItem {
@ -19,7 +20,7 @@ export const boxShadow: IPropertyListDescriptor<BoxShadow> = {
initialValue: 'none', initialValue: 'none',
type: PropertyDescriptorParsingType.LIST, type: PropertyDescriptorParsingType.LIST,
prefix: false, prefix: false,
parse: (tokens: CSSValue[]): BoxShadow => { parse: (context: Context, tokens: CSSValue[]): BoxShadow => {
if (tokens.length === 1 && isIdentWithValue(tokens[0], 'none')) { if (tokens.length === 1 && isIdentWithValue(tokens[0], 'none')) {
return []; return [];
} }
@ -50,7 +51,7 @@ export const boxShadow: IPropertyListDescriptor<BoxShadow> = {
} }
c++; c++;
} else { } else {
shadow.color = color.parse(token); shadow.color = color.parse(context, token);
} }
} }
return shadow; return shadow;

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -1,4 +1,5 @@
import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor'; import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {Context} from '../../core/context';
export enum FONT_STYLE { export enum FONT_STYLE {
NORMAL = 'normal', NORMAL = 'normal',
ITALIC = 'italic', ITALIC = 'italic',
@ -10,7 +11,7 @@ export const fontStyle: IPropertyIdentValueDescriptor<FONT_STYLE> = {
initialValue: 'normal', initialValue: 'normal',
prefix: false, prefix: false,
type: PropertyDescriptorParsingType.IDENT_VALUE, type: PropertyDescriptorParsingType.IDENT_VALUE,
parse: (overflow: string) => { parse: (_context: Context, overflow: string) => {
switch (overflow) { switch (overflow) {
case 'oblique': case 'oblique':
return FONT_STYLE.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 {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {CSSValue, isIdentToken} from '../syntax/parser'; import {CSSValue, isIdentToken} from '../syntax/parser';
import {Context} from '../../core/context';
export const fontVariant: IPropertyListDescriptor<string[]> = { export const fontVariant: IPropertyListDescriptor<string[]> = {
name: 'font-variant', name: 'font-variant',
initialValue: 'none', initialValue: 'none',
type: PropertyDescriptorParsingType.LIST, type: PropertyDescriptorParsingType.LIST,
prefix: false, prefix: false,
parse: (tokens: CSSValue[]): string[] => { parse: (_context: Context, tokens: CSSValue[]): string[] => {
return tokens.filter(isIdentToken).map((token) => token.value); 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 {IPropertyValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {CSSValue, isIdentToken, isNumberToken} from '../syntax/parser'; import {CSSValue, isIdentToken, isNumberToken} from '../syntax/parser';
import {Context} from '../../core/context';
export const fontWeight: IPropertyValueDescriptor<number> = { export const fontWeight: IPropertyValueDescriptor<number> = {
name: 'font-weight', name: 'font-weight',
initialValue: 'normal', initialValue: 'normal',
type: PropertyDescriptorParsingType.VALUE, type: PropertyDescriptorParsingType.VALUE,
prefix: false, prefix: false,
parse: (token: CSSValue): number => { parse: (_context: Context, token: CSSValue): number => {
if (isNumberToken(token)) { if (isNumberToken(token)) {
return token.number; return token.number;
} }

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

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

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

@ -1,4 +1,5 @@
import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor'; import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {Context} from '../../core/context';
export enum LINE_BREAK { export enum LINE_BREAK {
NORMAL = 'normal', NORMAL = 'normal',
STRICT = 'strict' STRICT = 'strict'
@ -9,7 +10,7 @@ export const lineBreak: IPropertyIdentValueDescriptor<LINE_BREAK> = {
initialValue: 'normal', initialValue: 'normal',
prefix: false, prefix: false,
type: PropertyDescriptorParsingType.IDENT_VALUE, type: PropertyDescriptorParsingType.IDENT_VALUE,
parse: (lineBreak: string): LINE_BREAK => { parse: (_context: Context, lineBreak: string): LINE_BREAK => {
switch (lineBreak) { switch (lineBreak) {
case 'strict': case 'strict':
return LINE_BREAK.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 {ICSSImage, image} from '../types/image';
import {IPropertyValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor'; import {IPropertyValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {CSSValue} from '../syntax/parser'; import {CSSValue} from '../syntax/parser';
import {Context} from '../../core/context';
export const listStyleImage: IPropertyValueDescriptor<ICSSImage | null> = { export const listStyleImage: IPropertyValueDescriptor<ICSSImage | null> = {
name: 'list-style-image', name: 'list-style-image',
initialValue: 'none', initialValue: 'none',
type: PropertyDescriptorParsingType.VALUE, type: PropertyDescriptorParsingType.VALUE,
prefix: false, prefix: false,
parse: (token: CSSValue) => { parse: (context: Context, token: CSSValue) => {
if (token.type === TokenType.IDENT_TOKEN && token.value === 'none') { if (token.type === TokenType.IDENT_TOKEN && token.value === 'none') {
return null; 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 {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {Context} from '../../core/context';
export enum LIST_STYLE_POSITION { export enum LIST_STYLE_POSITION {
INSIDE = 0, INSIDE = 0,
OUTSIDE = 1 OUTSIDE = 1
@ -9,7 +10,7 @@ export const listStylePosition: IPropertyIdentValueDescriptor<LIST_STYLE_POSITIO
initialValue: 'outside', initialValue: 'outside',
prefix: false, prefix: false,
type: PropertyDescriptorParsingType.IDENT_VALUE, type: PropertyDescriptorParsingType.IDENT_VALUE,
parse: (position: string) => { parse: (_context: Context, position: string) => {
switch (position) { switch (position) {
case 'inside': case 'inside':
return LIST_STYLE_POSITION.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 {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {Context} from '../../core/context';
export enum LIST_STYLE_TYPE { export enum LIST_STYLE_TYPE {
NONE = -1, NONE = -1,
DISC = 0, DISC = 0,
@ -61,7 +62,7 @@ export const listStyleType: IPropertyIdentValueDescriptor<LIST_STYLE_TYPE> = {
initialValue: 'none', initialValue: 'none',
prefix: false, prefix: false,
type: PropertyDescriptorParsingType.IDENT_VALUE, type: PropertyDescriptorParsingType.IDENT_VALUE,
parse: (type: string) => { parse: (_context: Context, type: string) => {
switch (type) { switch (type) {
case 'disc': case 'disc':
return LIST_STYLE_TYPE.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 {IPropertyValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {CSSValue, isNumberToken} from '../syntax/parser'; import {CSSValue, isNumberToken} from '../syntax/parser';
import {Context} from '../../core/context';
export const opacity: IPropertyValueDescriptor<number> = { export const opacity: IPropertyValueDescriptor<number> = {
name: 'opacity', name: 'opacity',
initialValue: '1', initialValue: '1',
type: PropertyDescriptorParsingType.VALUE, type: PropertyDescriptorParsingType.VALUE,
prefix: false, prefix: false,
parse: (token: CSSValue): number => { parse: (_context: Context, token: CSSValue): number => {
if (isNumberToken(token)) { if (isNumberToken(token)) {
return token.number; return token.number;
} }

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

@ -1,4 +1,5 @@
import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor'; import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {Context} from '../../core/context';
export enum OVERFLOW_WRAP { export enum OVERFLOW_WRAP {
NORMAL = 'normal', NORMAL = 'normal',
BREAK_WORD = 'break-word' BREAK_WORD = 'break-word'
@ -9,7 +10,7 @@ export const overflowWrap: IPropertyIdentValueDescriptor<OVERFLOW_WRAP> = {
initialValue: 'normal', initialValue: 'normal',
prefix: false, prefix: false,
type: PropertyDescriptorParsingType.IDENT_VALUE, type: PropertyDescriptorParsingType.IDENT_VALUE,
parse: (overflow: string) => { parse: (_context: Context, overflow: string) => {
switch (overflow) { switch (overflow) {
case 'break-word': case 'break-word':
return OVERFLOW_WRAP.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 {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {CSSValue, isIdentToken} from '../syntax/parser'; import {CSSValue, isIdentToken} from '../syntax/parser';
import {Context} from '../../core/context';
export enum OVERFLOW { export enum OVERFLOW {
VISIBLE = 0, VISIBLE = 0,
HIDDEN = 1, HIDDEN = 1,
@ -12,7 +13,7 @@ export const overflow: IPropertyListDescriptor<OVERFLOW[]> = {
initialValue: 'visible', initialValue: 'visible',
prefix: false, prefix: false,
type: PropertyDescriptorParsingType.LIST, type: PropertyDescriptorParsingType.LIST,
parse: (tokens: CSSValue[]): OVERFLOW[] => { parse: (_context: Context, tokens: CSSValue[]): OVERFLOW[] => {
return tokens.filter(isIdentToken).map((overflow) => { return tokens.filter(isIdentToken).map((overflow) => {
switch (overflow.value) { switch (overflow.value) {
case 'hidden': case 'hidden':

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

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

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

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

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

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

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

@ -1,4 +1,5 @@
import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor'; import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {Context} from '../../core/context';
export enum TEXT_ALIGN { export enum TEXT_ALIGN {
LEFT = 0, LEFT = 0,
CENTER = 1, CENTER = 1,
@ -10,7 +11,7 @@ export const textAlign: IPropertyIdentValueDescriptor<TEXT_ALIGN> = {
initialValue: 'left', initialValue: 'left',
prefix: false, prefix: false,
type: PropertyDescriptorParsingType.IDENT_VALUE, type: PropertyDescriptorParsingType.IDENT_VALUE,
parse: (textAlign: string) => { parse: (_context: Context, textAlign: string) => {
switch (textAlign) { switch (textAlign) {
case 'right': case 'right':
return TEXT_ALIGN.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 {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {CSSValue, isIdentToken} from '../syntax/parser'; import {CSSValue, isIdentToken} from '../syntax/parser';
import {Context} from '../../core/context';
export const enum TEXT_DECORATION_LINE { export const enum TEXT_DECORATION_LINE {
NONE = 0, NONE = 0,
@ -16,7 +17,7 @@ export const textDecorationLine: IPropertyListDescriptor<TextDecorationLine> = {
initialValue: 'none', initialValue: 'none',
prefix: false, prefix: false,
type: PropertyDescriptorParsingType.LIST, type: PropertyDescriptorParsingType.LIST,
parse: (tokens: CSSValue[]): TextDecorationLine => { parse: (_context: Context, tokens: CSSValue[]): TextDecorationLine => {
return tokens return tokens
.filter(isIdentToken) .filter(isIdentToken)
.map((token) => { .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 {ZERO_LENGTH} from '../types/length-percentage';
import {color, Color, COLORS} from '../types/color'; import {color, Color, COLORS} from '../types/color';
import {isLength, Length} from '../types/length'; import {isLength, Length} from '../types/length';
import {Context} from '../../core/context';
export type TextShadow = TextShadowItem[]; export type TextShadow = TextShadowItem[];
interface TextShadowItem { interface TextShadowItem {
@ -17,7 +18,7 @@ export const textShadow: IPropertyListDescriptor<TextShadow> = {
initialValue: 'none', initialValue: 'none',
type: PropertyDescriptorParsingType.LIST, type: PropertyDescriptorParsingType.LIST,
prefix: false, prefix: false,
parse: (tokens: CSSValue[]): TextShadow => { parse: (context: Context, tokens: CSSValue[]): TextShadow => {
if (tokens.length === 1 && isIdentWithValue(tokens[0], 'none')) { if (tokens.length === 1 && isIdentWithValue(tokens[0], 'none')) {
return []; return [];
} }
@ -42,7 +43,7 @@ export const textShadow: IPropertyListDescriptor<TextShadow> = {
} }
c++; c++;
} else { } else {
shadow.color = color.parse(token); shadow.color = color.parse(context, token);
} }
} }
return shadow; return shadow;

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

@ -1,4 +1,5 @@
import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor'; import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {Context} from '../../core/context';
export enum TEXT_TRANSFORM { export enum TEXT_TRANSFORM {
NONE = 0, NONE = 0,
LOWERCASE = 1, LOWERCASE = 1,
@ -11,7 +12,7 @@ export const textTransform: IPropertyIdentValueDescriptor<TEXT_TRANSFORM> = {
initialValue: 'none', initialValue: 'none',
prefix: false, prefix: false,
type: PropertyDescriptorParsingType.IDENT_VALUE, type: PropertyDescriptorParsingType.IDENT_VALUE,
parse: (textTransform: string) => { parse: (_context: Context, textTransform: string) => {
switch (textTransform) { switch (textTransform) {
case 'uppercase': case 'uppercase':
return TEXT_TRANSFORM.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 {CSSValue} from '../syntax/parser';
import {isLengthPercentage, LengthPercentage} from '../types/length-percentage'; import {isLengthPercentage, LengthPercentage} from '../types/length-percentage';
import {FLAG_INTEGER, TokenType} from '../syntax/tokenizer'; import {FLAG_INTEGER, TokenType} from '../syntax/tokenizer';
import {Context} from '../../core/context';
export type TransformOrigin = [LengthPercentage, LengthPercentage]; export type TransformOrigin = [LengthPercentage, LengthPercentage];
const DEFAULT_VALUE: LengthPercentage = { const DEFAULT_VALUE: LengthPercentage = {
@ -16,7 +17,7 @@ export const transformOrigin: IPropertyListDescriptor<TransformOrigin> = {
initialValue: '50% 50%', initialValue: '50% 50%',
prefix: true, prefix: true,
type: PropertyDescriptorParsingType.LIST, type: PropertyDescriptorParsingType.LIST,
parse: (tokens: CSSValue[]) => { parse: (_context: Context, tokens: CSSValue[]) => {
const origins: LengthPercentage[] = tokens.filter(isLengthPercentage); const origins: LengthPercentage[] = tokens.filter(isLengthPercentage);
if (origins.length !== 2) { if (origins.length !== 2) {

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

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

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

@ -1,4 +1,5 @@
import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor'; import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {Context} from '../../core/context';
export enum VISIBILITY { export enum VISIBILITY {
VISIBLE = 0, VISIBLE = 0,
HIDDEN = 1, HIDDEN = 1,
@ -10,7 +11,7 @@ export const visibility: IPropertyIdentValueDescriptor<VISIBILITY> = {
initialValue: 'none', initialValue: 'none',
prefix: false, prefix: false,
type: PropertyDescriptorParsingType.IDENT_VALUE, type: PropertyDescriptorParsingType.IDENT_VALUE,
parse: (visibility: string) => { parse: (_context: Context, visibility: string) => {
switch (visibility) { switch (visibility) {
case 'hidden': case 'hidden':
return VISIBILITY.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 {CSSValue, isDimensionToken} from '../syntax/parser';
import {IPropertyValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor'; import {IPropertyValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {Context} from '../../core/context';
export const webkitTextStrokeWidth: IPropertyValueDescriptor<number> = { export const webkitTextStrokeWidth: IPropertyValueDescriptor<number> = {
name: `-webkit-text-stroke-width`, name: `-webkit-text-stroke-width`,
initialValue: '0', initialValue: '0',
type: PropertyDescriptorParsingType.VALUE, type: PropertyDescriptorParsingType.VALUE,
prefix: false, prefix: false,
parse: (token: CSSValue): number => { parse: (_context: Context, token: CSSValue): number => {
if (isDimensionToken(token)) { if (isDimensionToken(token)) {
return token.number; return token.number;
} }

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

@ -1,4 +1,5 @@
import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor'; import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {Context} from '../../core/context';
export enum WORD_BREAK { export enum WORD_BREAK {
NORMAL = 'normal', NORMAL = 'normal',
BREAK_ALL = 'break-all', BREAK_ALL = 'break-all',
@ -10,7 +11,7 @@ export const wordBreak: IPropertyIdentValueDescriptor<WORD_BREAK> = {
initialValue: 'normal', initialValue: 'normal',
prefix: false, prefix: false,
type: PropertyDescriptorParsingType.IDENT_VALUE, type: PropertyDescriptorParsingType.IDENT_VALUE,
parse: (wordBreak: string): WORD_BREAK => { parse: (_context: Context, wordBreak: string): WORD_BREAK => {
switch (wordBreak) { switch (wordBreak) {
case 'break-all': case 'break-all':
return WORD_BREAK.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 {IPropertyValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {CSSValue, isNumberToken} from '../syntax/parser'; import {CSSValue, isNumberToken} from '../syntax/parser';
import {TokenType} from '../syntax/tokenizer'; import {TokenType} from '../syntax/tokenizer';
import {Context} from '../../core/context';
interface zIndex { interface zIndex {
order: number; order: number;
@ -12,7 +13,7 @@ export const zIndex: IPropertyValueDescriptor<zIndex> = {
initialValue: 'auto', initialValue: 'auto',
prefix: false, prefix: false,
type: PropertyDescriptorParsingType.VALUE, type: PropertyDescriptorParsingType.VALUE,
parse: (token: CSSValue): zIndex => { parse: (_context: Context, token: CSSValue): zIndex => {
if (token.type === TokenType.IDENT_TOKEN) { if (token.type === TokenType.IDENT_TOKEN) {
return {auto: true, order: 0}; return {auto: true, order: 0};
} }

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

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

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

@ -3,6 +3,7 @@ import {TokenType} from '../syntax/tokenizer';
import {ITypeDescriptor} from '../ITypeDescriptor'; import {ITypeDescriptor} from '../ITypeDescriptor';
import {HUNDRED_PERCENT, ZERO_LENGTH} from './length-percentage'; import {HUNDRED_PERCENT, ZERO_LENGTH} from './length-percentage';
import {GradientCorner} from './image'; import {GradientCorner} from './image';
import {Context} from '../../core/context';
const DEG = 'deg'; const DEG = 'deg';
const GRAD = 'grad'; const GRAD = 'grad';
@ -11,7 +12,7 @@ const TURN = 'turn';
export const angle: ITypeDescriptor<number> = { export const angle: ITypeDescriptor<number> = {
name: 'angle', name: 'angle',
parse: (value: CSSValue): number => { parse: (_context: Context, value: CSSValue): number => {
if (value.type === TokenType.DIMENSION_TOKEN) { if (value.type === TokenType.DIMENSION_TOKEN) {
switch (value.unit) { switch (value.unit) {
case DEG: 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 {TokenType} from '../syntax/tokenizer';
import {ITypeDescriptor} from '../ITypeDescriptor'; import {ITypeDescriptor} from '../ITypeDescriptor';
import {angle, deg} from './angle'; import {angle, deg} from './angle';
import {getAbsoluteValue, isLengthPercentage} from './length-percentage'; import {getAbsoluteValue, isLengthPercentage} from './length-percentage';
import {Context} from '../../core/context';
export type Color = number; export type Color = number;
export const color: ITypeDescriptor<Color> = { export const color: ITypeDescriptor<Color> = {
name: 'color', name: 'color',
parse: (value: CSSValue): Color => { parse: (context: Context, value: CSSValue): Color => {
if (value.type === TokenType.FUNCTION) { if (value.type === TokenType.FUNCTION) {
const colorFunction = SUPPORTED_COLOR_FUNCTIONS[value.name]; const colorFunction = SUPPORTED_COLOR_FUNCTIONS[value.name];
if (typeof colorFunction === 'undefined') { if (typeof colorFunction === 'undefined') {
throw new Error(`Attempting to parse an unsupported color function "${value.name}"`); 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) { if (value.type === TokenType.HASH_TOKEN) {
@ -85,7 +86,7 @@ const getTokenColorValue = (token: CSSValue, i: number): number => {
return 0; return 0;
}; };
const rgb = (args: CSSValue[]): number => { const rgb = (_context: Context, args: CSSValue[]): number => {
const tokens = args.filter(nonFunctionArgSeparator); const tokens = args.filter(nonFunctionArgSeparator);
if (tokens.length === 3) { 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 tokens = args.filter(nonFunctionArgSeparator);
const [hue, saturation, lightness, alpha] = tokens; 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 s = isLengthPercentage(saturation) ? saturation.number / 100 : 0;
const l = isLengthPercentage(lightness) ? lightness.number / 100 : 0; const l = isLengthPercentage(lightness) ? lightness.number / 100 : 0;
const a = typeof alpha !== 'undefined' && isLengthPercentage(alpha) ? getAbsoluteValue(alpha, 1) : 1; const a = typeof alpha !== 'undefined' && isLengthPercentage(alpha) ? getAbsoluteValue(alpha, 1) : 1;
@ -143,7 +144,7 @@ const hsl = (args: CSSValue[]): number => {
}; };
const SUPPORTED_COLOR_FUNCTIONS: { const SUPPORTED_COLOR_FUNCTIONS: {
[key: string]: (args: CSSValue[]) => number; [key: string]: (context: Context, args: CSSValue[]) => number;
} = { } = {
hsl: hsl, hsl: hsl,
hsla: hsl, hsla: hsl,
@ -151,6 +152,9 @@ const SUPPORTED_COLOR_FUNCTIONS: {
rgba: rgb rgba: rgb
}; };
export const parseColor = (context: Context, value: string): Color =>
color.parse(context, Parser.create(value).parseComponentValue());
export const COLORS: {[key: string]: Color} = { export const COLORS: {[key: string]: Color} = {
ALICEBLUE: 0xf0f8ffff, ALICEBLUE: 0xf0f8ffff,
ANTIQUEWHITE: 0xfaebd7ff, 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 {TokenType} from '../../syntax/tokenizer';
import {isAngle, angle as angleType, parseNamedSide, deg} from '../angle'; import {isAngle, angle as angleType, parseNamedSide, deg} from '../angle';
import {parseColorStop} from './gradient'; 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); let angle: number | GradientCorner = deg(180);
const stops: UnprocessedGradientColorStop[] = []; const stops: UnprocessedGradientColorStop[] = [];
@ -18,11 +19,11 @@ export const prefixLinearGradient = (tokens: CSSValue[]): CSSLinearGradientImage
angle = parseNamedSide(arg); angle = parseNamedSide(arg);
return; return;
} else if (isAngle(firstToken)) { } else if (isAngle(firstToken)) {
angle = (angleType.parse(firstToken) + deg(270)) % deg(360); angle = (angleType.parse(context, firstToken) + deg(270)) % deg(360);
return; return;
} }
} }
const colorStop = parseColorStop(arg); const colorStop = parseColorStop(context, arg);
stops.push(colorStop); stops.push(colorStop);
}); });

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

@ -20,8 +20,9 @@ import {
FARTHEST_CORNER, FARTHEST_CORNER,
FARTHEST_SIDE FARTHEST_SIDE
} from './radial-gradient'; } 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 shape: CSSRadialShape = CSSRadialShape.CIRCLE;
let size: CSSRadialSize = CSSRadialExtent.FARTHEST_CORNER; let size: CSSRadialSize = CSSRadialExtent.FARTHEST_CORNER;
const stops: UnprocessedGradientColorStop[] = []; const stops: UnprocessedGradientColorStop[] = [];
@ -90,7 +91,7 @@ export const prefixRadialGradient = (tokens: CSSValue[]): CSSRadialGradientImage
} }
if (isColorStop) { if (isColorStop) {
const colorStop = parseColorStop(arg); const colorStop = parseColorStop(context, arg);
stops.push(colorStop); 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 {TokenType} from '../../syntax/tokenizer';
import {color as colorType} from '../color'; import {color as colorType} from '../color';
import {HUNDRED_PERCENT, LengthPercentage, ZERO_LENGTH} from '../length-percentage'; 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 angle = deg(180);
const stops: UnprocessedGradientColorStop[] = []; const stops: UnprocessedGradientColorStop[] = [];
let type = CSSImageType.LINEAR_GRADIENT; let type = CSSImageType.LINEAR_GRADIENT;
@ -34,15 +38,15 @@ export const webkitGradient = (tokens: CSSValue[]): CSSLinearGradientImage | CSS
if (firstToken.type === TokenType.FUNCTION) { if (firstToken.type === TokenType.FUNCTION) {
if (firstToken.name === 'from') { 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}); stops.push({stop: ZERO_LENGTH, color});
} else if (firstToken.name === 'to') { } 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}); stops.push({stop: HUNDRED_PERCENT, color});
} else if (firstToken.name === 'color-stop') { } else if (firstToken.name === 'color-stop') {
const values = firstToken.values.filter(nonFunctionArgSeparator); const values = firstToken.values.filter(nonFunctionArgSeparator);
if (values.length === 2) { if (values.length === 2) {
const color = colorType.parse(values[1]); const color = colorType.parse(context, values[1]);
const stop = values[0]; const stop = values[0];
if (isNumberToken(stop)) { if (isNumberToken(stop)) {
stops.push({ 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 {color} from '../../color';
import {TokenType} from '../../../syntax/tokenizer'; import {TokenType} from '../../../syntax/tokenizer';
import {FIFTY_PERCENT, HUNDRED_PERCENT} from '../../length-percentage'; 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 parse = (value: string) => radialGradient({} as Context, (Parser.parseValues(value)[0] as CSSFunction).values);
const colorParse = (value: string) => color.parse(Parser.parseValue(value)); const colorParse = (value: string) => color.parse({} as Context, Parser.parseValue(value));
describe('functions', () => { describe('functions', () => {
describe('radial-gradient', () => { describe('radial-gradient', () => {

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

@ -9,9 +9,10 @@ import {
} from '../image'; } from '../image';
import {color as colorType} from '../color'; import {color as colorType} from '../color';
import {getAbsoluteValue, HUNDRED_PERCENT, isLengthPercentage, ZERO_LENGTH} from '../length-percentage'; import {getAbsoluteValue, HUNDRED_PERCENT, isLengthPercentage, ZERO_LENGTH} from '../length-percentage';
import {Context} from '../../../core/context';
export const parseColorStop = (args: CSSValue[]): UnprocessedGradientColorStop => { export const parseColorStop = (context: Context, args: CSSValue[]): UnprocessedGradientColorStop => {
const color = colorType.parse(args[0]); const color = colorType.parse(context, args[0]);
const stop = args[1]; const stop = args[1];
return stop && isLengthPercentage(stop) ? {color, stop} : {color, stop: null}; 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 {isAngle, angle as angleType, parseNamedSide, deg} from '../angle';
import {CSSImageType, CSSLinearGradientImage, GradientCorner, UnprocessedGradientColorStop} from '../image'; import {CSSImageType, CSSLinearGradientImage, GradientCorner, UnprocessedGradientColorStop} from '../image';
import {parseColorStop} from './gradient'; 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); let angle: number | GradientCorner = deg(180);
const stops: UnprocessedGradientColorStop[] = []; const stops: UnprocessedGradientColorStop[] = [];
@ -15,11 +16,11 @@ export const linearGradient = (tokens: CSSValue[]): CSSLinearGradientImage => {
angle = parseNamedSide(arg); angle = parseNamedSide(arg);
return; return;
} else if (isAngle(firstToken)) { } else if (isAngle(firstToken)) {
angle = angleType.parse(firstToken); angle = angleType.parse(context, firstToken);
return; return;
} }
} }
const colorStop = parseColorStop(arg); const colorStop = parseColorStop(context, arg);
stops.push(colorStop); stops.push(colorStop);
}); });

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

@ -10,6 +10,7 @@ import {
import {parseColorStop} from './gradient'; import {parseColorStop} from './gradient';
import {FIFTY_PERCENT, HUNDRED_PERCENT, isLengthPercentage, LengthPercentage, ZERO_LENGTH} from '../length-percentage'; import {FIFTY_PERCENT, HUNDRED_PERCENT, isLengthPercentage, LengthPercentage, ZERO_LENGTH} from '../length-percentage';
import {isLength} from '../length'; import {isLength} from '../length';
import {Context} from '../../../core/context';
export const CLOSEST_SIDE = 'closest-side'; export const CLOSEST_SIDE = 'closest-side';
export const FARTHEST_SIDE = 'farthest-side'; export const FARTHEST_SIDE = 'farthest-side';
export const CLOSEST_CORNER = 'closest-corner'; export const CLOSEST_CORNER = 'closest-corner';
@ -19,7 +20,7 @@ export const ELLIPSE = 'ellipse';
export const COVER = 'cover'; export const COVER = 'cover';
export const CONTAIN = 'contain'; export const CONTAIN = 'contain';
export const radialGradient = (tokens: CSSValue[]): CSSRadialGradientImage => { export const radialGradient = (context: Context, tokens: CSSValue[]): CSSRadialGradientImage => {
let shape: CSSRadialShape = CSSRadialShape.CIRCLE; let shape: CSSRadialShape = CSSRadialShape.CIRCLE;
let size: CSSRadialSize = CSSRadialExtent.FARTHEST_CORNER; let size: CSSRadialSize = CSSRadialExtent.FARTHEST_CORNER;
const stops: UnprocessedGradientColorStop[] = []; const stops: UnprocessedGradientColorStop[] = [];
@ -85,7 +86,7 @@ export const radialGradient = (tokens: CSSValue[]): CSSRadialGradientImage => {
} }
if (isColorStop) { if (isColorStop) {
const colorStop = parseColorStop(arg); const colorStop = parseColorStop(context, arg);
stops.push(colorStop); 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 {linearGradient} from './functions/linear-gradient';
import {prefixLinearGradient} from './functions/-prefix-linear-gradient'; import {prefixLinearGradient} from './functions/-prefix-linear-gradient';
import {ITypeDescriptor} from '../ITypeDescriptor'; import {ITypeDescriptor} from '../ITypeDescriptor';
import {CacheStorage} from '../../core/cache-storage';
import {LengthPercentage} from './length-percentage'; import {LengthPercentage} from './length-percentage';
import {webkitGradient} from './functions/-webkit-gradient'; import {webkitGradient} from './functions/-webkit-gradient';
import {radialGradient} from './functions/radial-gradient'; import {radialGradient} from './functions/radial-gradient';
import {prefixRadialGradient} from './functions/-prefix-radial-gradient'; import {prefixRadialGradient} from './functions/-prefix-radial-gradient';
import {Context} from '../../core/context';
export enum CSSImageType { export enum CSSImageType {
URL, URL,
@ -79,10 +79,10 @@ export interface CSSRadialGradientImage extends ICSSGradientImage {
export const image: ITypeDescriptor<ICSSImage> = { export const image: ITypeDescriptor<ICSSImage> = {
name: 'image', name: 'image',
parse: (value: CSSValue): ICSSImage => { parse: (context: Context, value: CSSValue): ICSSImage => {
if (value.type === TokenType.URL_TOKEN) { if (value.type === TokenType.URL_TOKEN) {
const image: CSSURLImage = {url: value.value, type: CSSImageType.URL}; const image: CSSURLImage = {url: value.value, type: CSSImageType.URL};
CacheStorage.getInstance().addImage(value.value); context.cache.addImage(value.value);
return image; return image;
} }
@ -91,7 +91,7 @@ export const image: ITypeDescriptor<ICSSImage> = {
if (typeof imageFunction === 'undefined') { if (typeof imageFunction === 'undefined') {
throw new Error(`Attempting to parse an unsupported image function "${value.name}"`); 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`); 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]; 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, 'linear-gradient': linearGradient,
'-moz-linear-gradient': prefixLinearGradient, '-moz-linear-gradient': prefixLinearGradient,
'-ms-linear-gradient': prefixLinearGradient, '-ms-linear-gradient': prefixLinearGradient,

9
src/dom/__mocks__/document-cloner.ts
View File

@ -2,7 +2,14 @@ export class DocumentCloner {
clonedReferenceElement?: HTMLElement; clonedReferenceElement?: HTMLElement;
constructor() { constructor() {
this.clonedReferenceElement = {} as HTMLElement; this.clonedReferenceElement = {
ownerDocument: {
defaultView: {
pageXOffset: 12,
pageYOffset: 34
}
}
} as HTMLElement;
} }
toIFrame(): Promise<HTMLIFrameElement> { toIFrame(): Promise<HTMLIFrameElement> {

42
src/dom/document-cloner.ts
View File

@ -13,20 +13,26 @@ import {
isTextareaElement, isTextareaElement,
isTextNode isTextNode
} from './node-parser'; } from './node-parser';
import {Logger} from '../core/logger';
import {isIdentToken, nonFunctionArgSeparator} from '../css/syntax/parser'; import {isIdentToken, nonFunctionArgSeparator} from '../css/syntax/parser';
import {TokenType} from '../css/syntax/tokenizer'; import {TokenType} from '../css/syntax/tokenizer';
import {CounterState, createCounterText} from '../css/types/functions/counter'; import {CounterState, createCounterText} from '../css/types/functions/counter';
import {LIST_STYLE_TYPE, listStyleType} from '../css/property-descriptors/list-style-type'; import {LIST_STYLE_TYPE, listStyleType} from '../css/property-descriptors/list-style-type';
import {CSSParsedCounterDeclaration, CSSParsedPseudoDeclaration} from '../css/index'; import {CSSParsedCounterDeclaration, CSSParsedPseudoDeclaration} from '../css/index';
import {getQuote} from '../css/property-descriptors/quotes'; import {getQuote} from '../css/property-descriptors/quotes';
import {Context} from '../core/context';
export interface CloneOptions { export interface CloneOptions {
id: string;
ignoreElements?: (element: Element) => boolean; ignoreElements?: (element: Element) => boolean;
onclone?: (document: Document, element: HTMLElement) => void; onclone?: (document: Document, element: HTMLElement) => void;
} }
export interface WindowOptions {
scrollX: number;
scrollY: number;
windowWidth: number;
windowHeight: number;
}
export type CloneConfigurations = CloneOptions & { export type CloneConfigurations = CloneOptions & {
inlineImages: boolean; inlineImages: boolean;
copyStyles: boolean; copyStyles: boolean;
@ -36,15 +42,17 @@ const IGNORE_ATTRIBUTE = 'data-html2canvas-ignore';
export class DocumentCloner { export class DocumentCloner {
private readonly scrolledElements: [Element, number, number][]; private readonly scrolledElements: [Element, number, number][];
private readonly options: CloneConfigurations;
private readonly referenceElement: HTMLElement; private readonly referenceElement: HTMLElement;
clonedReferenceElement?: HTMLElement; clonedReferenceElement?: HTMLElement;
private readonly documentElement: HTMLElement; private readonly documentElement: HTMLElement;
private readonly counters: CounterState; private readonly counters: CounterState;
private quoteDepth: number; private quoteDepth: number;
constructor(element: HTMLElement, options: CloneConfigurations) { constructor(
this.options = options; private readonly context: Context,
element: HTMLElement,
private readonly options: CloneConfigurations
) {
this.scrolledElements = []; this.scrolledElements = [];
this.referenceElement = element; this.referenceElement = element;
this.counters = new CounterState(); this.counters = new CounterState();
@ -81,9 +89,13 @@ export class DocumentCloner {
/(iPad|iPhone|iPod)/g.test(navigator.userAgent) && /(iPad|iPhone|iPod)/g.test(navigator.userAgent) &&
(cloneWindow.scrollY !== windowSize.top || cloneWindow.scrollX !== windowSize.left) (cloneWindow.scrollY !== windowSize.top || cloneWindow.scrollX !== windowSize.left)
) { ) {
documentClone.documentElement.style.top = -windowSize.top + 'px'; this.context.logger.warn('Unable to restore scroll position for cloned document');
documentClone.documentElement.style.left = -windowSize.left + 'px'; this.context.windowBounds = this.context.windowBounds.add(
documentClone.documentElement.style.position = 'absolute'; cloneWindow.scrollX - windowSize.left,
cloneWindow.scrollY - windowSize.top,
0,
0
);
} }
} }
@ -162,7 +174,7 @@ export class DocumentCloner {
} }
} catch (e) { } catch (e) {
// accessing node.sheet.cssRules throws a DOMException // accessing node.sheet.cssRules throws a DOMException
Logger.getInstance(this.options.id).error('Unable to access cssRules property', e); this.context.logger.error('Unable to access cssRules property', e);
if (e.name !== 'SecurityError') { if (e.name !== 'SecurityError') {
throw e; throw e;
} }
@ -177,7 +189,7 @@ export class DocumentCloner {
img.src = canvas.toDataURL(); img.src = canvas.toDataURL();
return img; return img;
} catch (e) { } catch (e) {
Logger.getInstance(this.options.id).info(`Unable to clone canvas contents, canvas is tainted`); this.context.logger.info(`Unable to clone canvas contents, canvas is tainted`);
} }
} }
@ -226,7 +238,7 @@ export class DocumentCloner {
createPseudoHideStyles(clone); createPseudoHideStyles(clone);
} }
const counters = this.counters.parse(new CSSParsedCounterDeclaration(style)); const counters = this.counters.parse(new CSSParsedCounterDeclaration(this.context, style));
const before = this.resolvePseudoContent(node, clone, styleBefore, PseudoElementType.BEFORE); const before = this.resolvePseudoContent(node, clone, styleBefore, PseudoElementType.BEFORE);
for (let child = node.firstChild; child; child = child.nextSibling) { for (let child = node.firstChild; child; child = child.nextSibling) {
@ -290,8 +302,8 @@ export class DocumentCloner {
return; return;
} }
this.counters.parse(new CSSParsedCounterDeclaration(style)); this.counters.parse(new CSSParsedCounterDeclaration(this.context, style));
const declaration = new CSSParsedPseudoDeclaration(style); const declaration = new CSSParsedPseudoDeclaration(this.context, style);
const anonymousReplacedElement = document.createElement('html2canvaspseudoelement'); const anonymousReplacedElement = document.createElement('html2canvaspseudoelement');
copyCSSStyles(style, anonymousReplacedElement); copyCSSStyles(style, anonymousReplacedElement);
@ -318,7 +330,7 @@ export class DocumentCloner {
const counterState = this.counters.getCounterValue(counter.value); const counterState = this.counters.getCounterValue(counter.value);
const counterType = const counterType =
counterStyle && isIdentToken(counterStyle) counterStyle && isIdentToken(counterStyle)
? listStyleType.parse(counterStyle.value) ? listStyleType.parse(this.context, counterStyle.value)
: LIST_STYLE_TYPE.DECIMAL; : LIST_STYLE_TYPE.DECIMAL;
anonymousReplacedElement.appendChild( anonymousReplacedElement.appendChild(
@ -331,7 +343,7 @@ export class DocumentCloner {
const counterStates = this.counters.getCounterValues(counter.value); const counterStates = this.counters.getCounterValues(counter.value);
const counterType = const counterType =
counterStyle && isIdentToken(counterStyle) counterStyle && isIdentToken(counterStyle)
? listStyleType.parse(counterStyle.value) ? listStyleType.parse(this.context, counterStyle.value)
: LIST_STYLE_TYPE.DECIMAL; : LIST_STYLE_TYPE.DECIMAL;
const separator = delim && delim.type === TokenType.STRING_TOKEN ? delim.value : ''; const separator = delim && delim.type === TokenType.STRING_TOKEN ? delim.value : '';
const text = counterStates const text = counterStates

7
src/dom/element-container.ts
View File

@ -2,6 +2,7 @@ import {CSSParsedDeclaration} from '../css/index';
import {TextContainer} from './text-container'; import {TextContainer} from './text-container';
import {Bounds, parseBounds} from '../css/layout/bounds'; import {Bounds, parseBounds} from '../css/layout/bounds';
import {isHTMLElementNode} from './node-parser'; import {isHTMLElementNode} from './node-parser';
import {Context} from '../core/context';
export const enum FLAGS { export const enum FLAGS {
CREATES_STACKING_CONTEXT = 1 << 1, CREATES_STACKING_CONTEXT = 1 << 1,
@ -16,15 +17,15 @@ export class ElementContainer {
bounds: Bounds; bounds: Bounds;
flags: number; flags: number;
constructor(element: Element) { constructor(protected readonly context: Context, element: Element) {
this.styles = new CSSParsedDeclaration(window.getComputedStyle(element, null)); this.styles = new CSSParsedDeclaration(context, window.getComputedStyle(element, null));
this.textNodes = []; this.textNodes = [];
this.elements = []; this.elements = [];
if (this.styles.transform !== null && isHTMLElementNode(element)) { if (this.styles.transform !== null && isHTMLElementNode(element)) {
// getBoundingClientRect takes transforms into account // getBoundingClientRect takes transforms into account
element.style.transform = 'none'; element.style.transform = 'none';
} }
this.bounds = parseBounds(element); this.bounds = parseBounds(this.context, element);
this.flags = 0; this.flags = 0;
} }
} }

5
src/dom/elements/li-element-container.ts
View File

@ -1,9 +1,10 @@
import {ElementContainer} from '../element-container'; import {ElementContainer} from '../element-container';
import {Context} from '../../core/context';
export class LIElementContainer extends ElementContainer { export class LIElementContainer extends ElementContainer {
readonly value: number; readonly value: number;
constructor(element: HTMLLIElement) { constructor(context: Context, element: HTMLLIElement) {
super(element); super(context, element);
this.value = element.value; this.value = element.value;
} }
} }

5
src/dom/elements/ol-element-container.ts
View File

@ -1,10 +1,11 @@
import {ElementContainer} from '../element-container'; import {ElementContainer} from '../element-container';
import {Context} from '../../core/context';
export class OLElementContainer extends ElementContainer { export class OLElementContainer extends ElementContainer {
readonly start: number; readonly start: number;
readonly reversed: boolean; readonly reversed: boolean;
constructor(element: HTMLOListElement) { constructor(context: Context, element: HTMLOListElement) {
super(element); super(context, element);
this.start = element.start; this.start = element.start;
this.reversed = typeof element.reversed === 'boolean' && element.reversed === true; this.reversed = typeof element.reversed === 'boolean' && element.reversed === true;
} }

5
src/dom/elements/select-element-container.ts
View File

@ -1,8 +1,9 @@
import {ElementContainer} from '../element-container'; import {ElementContainer} from '../element-container';
import {Context} from '../../core/context';
export class SelectElementContainer extends ElementContainer { export class SelectElementContainer extends ElementContainer {
readonly value: string; readonly value: string;
constructor(element: HTMLSelectElement) { constructor(context: Context, element: HTMLSelectElement) {
super(element); super(context, element);
const option = element.options[element.selectedIndex || 0]; const option = element.options[element.selectedIndex || 0];
this.value = option ? option.text || '' : ''; this.value = option ? option.text || '' : '';
} }

5
src/dom/elements/textarea-element-container.ts
View File

@ -1,8 +1,9 @@
import {ElementContainer} from '../element-container'; import {ElementContainer} from '../element-container';
import {Context} from '../../core/context';
export class TextareaElementContainer extends ElementContainer { export class TextareaElementContainer extends ElementContainer {
readonly value: string; readonly value: string;
constructor(element: HTMLTextAreaElement) { constructor(context: Context, element: HTMLTextAreaElement) {
super(element); super(context, element);
this.value = element.value; this.value = element.value;
} }
} }

43
src/dom/node-parser.ts
View File

@ -1,4 +1,4 @@
import {CSSParsedDeclaration} from '../css/index'; import {CSSParsedDeclaration} from '../css';
import {ElementContainer, FLAGS} from './element-container'; import {ElementContainer, FLAGS} from './element-container';
import {TextContainer} from './text-container'; import {TextContainer} from './text-container';
import {ImageElementContainer} from './replaced-elements/image-element-container'; import {ImageElementContainer} from './replaced-elements/image-element-container';
@ -10,20 +10,21 @@ import {InputElementContainer} from './replaced-elements/input-element-container
import {SelectElementContainer} from './elements/select-element-container'; import {SelectElementContainer} from './elements/select-element-container';
import {TextareaElementContainer} from './elements/textarea-element-container'; import {TextareaElementContainer} from './elements/textarea-element-container';
import {IFrameElementContainer} from './replaced-elements/iframe-element-container'; import {IFrameElementContainer} from './replaced-elements/iframe-element-container';
import {Context} from '../core/context';
const LIST_OWNERS = ['OL', 'UL', 'MENU']; const LIST_OWNERS = ['OL', 'UL', 'MENU'];
const parseNodeTree = (node: Node, parent: ElementContainer, root: ElementContainer) => { const parseNodeTree = (context: Context, node: Node, parent: ElementContainer, root: ElementContainer) => {
for (let childNode = node.firstChild, nextNode; childNode; childNode = nextNode) { for (let childNode = node.firstChild, nextNode; childNode; childNode = nextNode) {
nextNode = childNode.nextSibling; nextNode = childNode.nextSibling;
if (isTextNode(childNode) && childNode.data.trim().length > 0) { if (isTextNode(childNode) && childNode.data.trim().length > 0) {
parent.textNodes.push(new TextContainer(childNode, parent.styles)); parent.textNodes.push(new TextContainer(context, childNode, parent.styles));
} else if (isElementNode(childNode)) { } else if (isElementNode(childNode)) {
if (isSlotElement(childNode) && childNode.assignedNodes) { if (isSlotElement(childNode) && childNode.assignedNodes) {
childNode.assignedNodes().forEach((childNode) => parseNodeTree(childNode, parent, root)); childNode.assignedNodes().forEach((childNode) => parseNodeTree(context, childNode, parent, root));
} else { } else {
const container = createContainer(childNode); const container = createContainer(context, childNode);
if (container.styles.isVisible()) { if (container.styles.isVisible()) {
if (createsRealStackingContext(childNode, container, root)) { if (createsRealStackingContext(childNode, container, root)) {
container.flags |= FLAGS.CREATES_REAL_STACKING_CONTEXT; container.flags |= FLAGS.CREATES_REAL_STACKING_CONTEXT;
@ -38,13 +39,13 @@ const parseNodeTree = (node: Node, parent: ElementContainer, root: ElementContai
parent.elements.push(container); parent.elements.push(container);
childNode.slot; childNode.slot;
if (childNode.shadowRoot) { if (childNode.shadowRoot) {
parseNodeTree(childNode.shadowRoot, container, root); parseNodeTree(context, childNode.shadowRoot, container, root);
} else if ( } else if (
!isTextareaElement(childNode) && !isTextareaElement(childNode) &&
!isSVGElement(childNode) && !isSVGElement(childNode) &&
!isSelectElement(childNode) !isSelectElement(childNode)
) { ) {
parseNodeTree(childNode, container, root); parseNodeTree(context, childNode, container, root);
} }
} }
} }
@ -52,50 +53,50 @@ const parseNodeTree = (node: Node, parent: ElementContainer, root: ElementContai
} }
}; };
const createContainer = (element: Element): ElementContainer => { const createContainer = (context: Context, element: Element): ElementContainer => {
if (isImageElement(element)) { if (isImageElement(element)) {
return new ImageElementContainer(element); return new ImageElementContainer(context, element);
} }
if (isCanvasElement(element)) { if (isCanvasElement(element)) {
return new CanvasElementContainer(element); return new CanvasElementContainer(context, element);
} }
if (isSVGElement(element)) { if (isSVGElement(element)) {
return new SVGElementContainer(element); return new SVGElementContainer(context, element);
} }
if (isLIElement(element)) { if (isLIElement(element)) {
return new LIElementContainer(element); return new LIElementContainer(context, element);
} }
if (isOLElement(element)) { if (isOLElement(element)) {
return new OLElementContainer(element); return new OLElementContainer(context, element);
} }
if (isInputElement(element)) { if (isInputElement(element)) {
return new InputElementContainer(element); return new InputElementContainer(context, element);
} }
if (isSelectElement(element)) { if (isSelectElement(element)) {
return new SelectElementContainer(element); return new SelectElementContainer(context, element);
} }
if (isTextareaElement(element)) { if (isTextareaElement(element)) {
return new TextareaElementContainer(element); return new TextareaElementContainer(context, element);
} }
if (isIFrameElement(element)) { if (isIFrameElement(element)) {
return new IFrameElementContainer(element); return new IFrameElementContainer(context, element);
} }
return new ElementContainer(element); return new ElementContainer(context, element);
}; };
export const parseTree = (element: HTMLElement): ElementContainer => { export const parseTree = (context: Context, element: HTMLElement): ElementContainer => {
const container = createContainer(element); const container = createContainer(context, element);
container.flags |= FLAGS.CREATES_REAL_STACKING_CONTEXT; container.flags |= FLAGS.CREATES_REAL_STACKING_CONTEXT;
parseNodeTree(element, container, container); parseNodeTree(context, element, container, container);
return container; return container;
}; };

5
src/dom/replaced-elements/canvas-element-container.ts
View File

@ -1,12 +1,13 @@
import {ElementContainer} from '../element-container'; import {ElementContainer} from '../element-container';
import {Context} from '../../core/context';
export class CanvasElementContainer extends ElementContainer { export class CanvasElementContainer extends ElementContainer {
canvas: HTMLCanvasElement; canvas: HTMLCanvasElement;
intrinsicWidth: number; intrinsicWidth: number;
intrinsicHeight: number; intrinsicHeight: number;
constructor(canvas: HTMLCanvasElement) { constructor(context: Context, canvas: HTMLCanvasElement) {
super(canvas); super(context, canvas);
this.canvas = canvas; this.canvas = canvas;
this.intrinsicWidth = canvas.width; this.intrinsicWidth = canvas.width;
this.intrinsicHeight = canvas.height; this.intrinsicHeight = canvas.height;

18
src/dom/replaced-elements/iframe-element-container.ts
View File

@ -1,9 +1,7 @@
import {ElementContainer} from '../element-container'; import {ElementContainer} from '../element-container';
import {parseTree} from '../node-parser'; import {parseTree} from '../node-parser';
import {Color, color, COLORS, isTransparent} from '../../css/types/color'; import {Color, parseColor, COLORS, isTransparent} from '../../css/types/color';
import {Parser} from '../../css/syntax/parser'; import {Context} from '../../core/context';
const parseColor = (value: string): Color => color.parse(Parser.create(value).parseComponentValue());
export class IFrameElementContainer extends ElementContainer { export class IFrameElementContainer extends ElementContainer {
src: string; src: string;
@ -12,8 +10,8 @@ export class IFrameElementContainer extends ElementContainer {
tree?: ElementContainer; tree?: ElementContainer;
backgroundColor: Color; backgroundColor: Color;
constructor(iframe: HTMLIFrameElement) { constructor(context: Context, iframe: HTMLIFrameElement) {
super(iframe); super(context, iframe);
this.src = iframe.src; this.src = iframe.src;
this.width = parseInt(iframe.width, 10) || 0; this.width = parseInt(iframe.width, 10) || 0;
this.height = parseInt(iframe.height, 10) || 0; this.height = parseInt(iframe.height, 10) || 0;
@ -24,16 +22,20 @@ export class IFrameElementContainer extends ElementContainer {
iframe.contentWindow.document && iframe.contentWindow.document &&
iframe.contentWindow.document.documentElement iframe.contentWindow.document.documentElement
) { ) {
this.tree = parseTree(iframe.contentWindow.document.documentElement); this.tree = parseTree(context, iframe.contentWindow.document.documentElement);
// http://www.w3.org/TR/css3-background/#special-backgrounds // http://www.w3.org/TR/css3-background/#special-backgrounds
const documentBackgroundColor = iframe.contentWindow.document.documentElement const documentBackgroundColor = iframe.contentWindow.document.documentElement
? parseColor( ? parseColor(
context,
getComputedStyle(iframe.contentWindow.document.documentElement).backgroundColor as string getComputedStyle(iframe.contentWindow.document.documentElement).backgroundColor as string
) )
: COLORS.TRANSPARENT; : COLORS.TRANSPARENT;
const bodyBackgroundColor = iframe.contentWindow.document.body const bodyBackgroundColor = iframe.contentWindow.document.body
? parseColor(getComputedStyle(iframe.contentWindow.document.body).backgroundColor as string) ? parseColor(
context,
getComputedStyle(iframe.contentWindow.document.body).backgroundColor as string
)
: COLORS.TRANSPARENT; : COLORS.TRANSPARENT;
this.backgroundColor = isTransparent(documentBackgroundColor) this.backgroundColor = isTransparent(documentBackgroundColor)

8
src/dom/replaced-elements/image-element-container.ts
View File

@ -1,16 +1,16 @@
import {ElementContainer} from '../element-container'; import {ElementContainer} from '../element-container';
import {CacheStorage} from '../../core/cache-storage'; import {Context} from '../../core/context';
export class ImageElementContainer extends ElementContainer { export class ImageElementContainer extends ElementContainer {
src: string; src: string;
intrinsicWidth: number; intrinsicWidth: number;
intrinsicHeight: number; intrinsicHeight: number;
constructor(img: HTMLImageElement) { constructor(context: Context, img: HTMLImageElement) {
super(img); super(context, img);
this.src = img.currentSrc || img.src; this.src = img.currentSrc || img.src;
this.intrinsicWidth = img.naturalWidth; this.intrinsicWidth = img.naturalWidth;
this.intrinsicHeight = img.naturalHeight; this.intrinsicHeight = img.naturalHeight;
CacheStorage.getInstance().addImage(this.src); this.context.cache.addImage(this.src);
} }
} }

5
src/dom/replaced-elements/input-element-container.ts
View File

@ -5,6 +5,7 @@ import {BACKGROUND_ORIGIN} from '../../css/property-descriptors/background-origi
import {TokenType} from '../../css/syntax/tokenizer'; import {TokenType} from '../../css/syntax/tokenizer';
import {LengthPercentageTuple} from '../../css/types/length-percentage'; import {LengthPercentageTuple} from '../../css/types/length-percentage';
import {Bounds} from '../../css/layout/bounds'; import {Bounds} from '../../css/layout/bounds';
import {Context} from '../../core/context';
const CHECKBOX_BORDER_RADIUS: LengthPercentageTuple = [ const CHECKBOX_BORDER_RADIUS: LengthPercentageTuple = [
{ {
@ -48,8 +49,8 @@ export class InputElementContainer extends ElementContainer {
readonly checked: boolean; readonly checked: boolean;
readonly value: string; readonly value: string;
constructor(input: HTMLInputElement) { constructor(context: Context, input: HTMLInputElement) {
super(input); super(context, input);
this.type = input.type.toLowerCase(); this.type = input.type.toLowerCase();
this.checked = input.checked; this.checked = input.checked;
this.value = getInputValue(input); this.value = getInputValue(input);

10
src/dom/replaced-elements/svg-element-container.ts
View File

@ -1,16 +1,16 @@
import {ElementContainer} from '../element-container'; import {ElementContainer} from '../element-container';
import {CacheStorage} from '../../core/cache-storage';
import {parseBounds} from '../../css/layout/bounds'; import {parseBounds} from '../../css/layout/bounds';
import {Context} from '../../core/context';
export class SVGElementContainer extends ElementContainer { export class SVGElementContainer extends ElementContainer {
svg: string; svg: string;
intrinsicWidth: number; intrinsicWidth: number;
intrinsicHeight: number; intrinsicHeight: number;
constructor(img: SVGSVGElement) { constructor(context: Context, img: SVGSVGElement) {
super(img); super(context, img);
const s = new XMLSerializer(); const s = new XMLSerializer();
const bounds = parseBounds(img); const bounds = parseBounds(context, img);
img.setAttribute('width', `${bounds.width}px`); img.setAttribute('width', `${bounds.width}px`);
img.setAttribute('height', `${bounds.height}px`); img.setAttribute('height', `${bounds.height}px`);
@ -18,6 +18,6 @@ export class SVGElementContainer extends ElementContainer {
this.intrinsicWidth = img.width.baseVal.value; this.intrinsicWidth = img.width.baseVal.value;
this.intrinsicHeight = img.height.baseVal.value; this.intrinsicHeight = img.height.baseVal.value;
CacheStorage.getInstance().addImage(this.svg); this.context.cache.addImage(this.svg);
} }
} }

5
src/dom/text-container.ts
View File

@ -1,14 +1,15 @@
import {CSSParsedDeclaration} from '../css/index'; import {CSSParsedDeclaration} from '../css/index';
import {TEXT_TRANSFORM} from '../css/property-descriptors/text-transform'; import {TEXT_TRANSFORM} from '../css/property-descriptors/text-transform';
import {parseTextBounds, TextBounds} from '../css/layout/text'; import {parseTextBounds, TextBounds} from '../css/layout/text';
import {Context} from '../core/context';
export class TextContainer { export class TextContainer {
text: string; text: string;
textBounds: TextBounds[]; textBounds: TextBounds[];
constructor(node: Text, styles: CSSParsedDeclaration) { constructor(context: Context, node: Text, styles: CSSParsedDeclaration) {
this.text = transform(node.data, styles.textTransform); this.text = transform(node.data, styles.textTransform);
this.textBounds = parseTextBounds(this.text, styles, node); this.textBounds = parseTextBounds(context, this.text, styles, node);
} }
} }

197
src/index.ts
View File

@ -1,24 +1,21 @@
import {Bounds, parseBounds, parseDocumentSize} from './css/layout/bounds'; import {Bounds, parseBounds, parseDocumentSize} from './css/layout/bounds';
import {color, Color, COLORS, isTransparent} from './css/types/color'; import {COLORS, isTransparent, parseColor} from './css/types/color';
import {Parser} from './css/syntax/parser'; import {CloneConfigurations, CloneOptions, DocumentCloner, WindowOptions} from './dom/document-cloner';
import {CloneOptions, DocumentCloner} from './dom/document-cloner';
import {isBodyElement, isHTMLElement, parseTree} from './dom/node-parser'; import {isBodyElement, isHTMLElement, parseTree} from './dom/node-parser';
import {Logger} from './core/logger'; import {CacheStorage} from './core/cache-storage';
import {CacheStorage, ResourceOptions} from './core/cache-storage'; import {CanvasRenderer, RenderConfigurations, RenderOptions} from './render/canvas/canvas-renderer';
import {CanvasRenderer, RenderOptions} from './render/canvas/canvas-renderer';
import {ForeignObjectRenderer} from './render/canvas/foreignobject-renderer'; import {ForeignObjectRenderer} from './render/canvas/foreignobject-renderer';
import {Context, ContextOptions} from './core/context';
export type Options = CloneOptions & export type Options = CloneOptions &
WindowOptions &
RenderOptions & RenderOptions &
ResourceOptions & { ContextOptions & {
backgroundColor: string | null; backgroundColor: string | null;
foreignObjectRendering: boolean; foreignObjectRendering: boolean;
logging: boolean;
removeContainer?: boolean; removeContainer?: boolean;
}; };
const parseColor = (value: string): Color => color.parse(Parser.create(value).parseComponentValue());
const html2canvas = (element: HTMLElement, options: Partial<Options> = {}): Promise<HTMLCanvasElement> => { const html2canvas = (element: HTMLElement, options: Partial<Options> = {}): Promise<HTMLCanvasElement> => {
return renderElement(element, options); return renderElement(element, options);
}; };
@ -29,8 +26,6 @@ if (typeof window !== 'undefined') {
CacheStorage.setContext(window); CacheStorage.setContext(window);
} }
let instanceCount = 1;
const renderElement = async (element: HTMLElement, opts: Partial<Options>): Promise<HTMLCanvasElement> => { const renderElement = async (element: HTMLElement, opts: Partial<Options>): Promise<HTMLCanvasElement> => {
if (!element || typeof element !== 'object') { if (!element || typeof element !== 'object') {
return Promise.reject('Invalid element provided as first argument'); return Promise.reject('Invalid element provided as first argument');
@ -47,51 +42,51 @@ const renderElement = async (element: HTMLElement, opts: Partial<Options>): Prom
throw new Error(`Document is not attached to a Window`); throw new Error(`Document is not attached to a Window`);
} }
const instanceName = `#${instanceCount++}`; const resourceOptions = {
allowTaint: opts.allowTaint ?? false,
const {width, height, left, top} = imageTimeout: opts.imageTimeout ?? 15000,
isBodyElement(element) || isHTMLElement(element) ? parseDocumentSize(ownerDocument) : parseBounds(element); proxy: opts.proxy,
useCORS: opts.useCORS ?? false
const defaultResourceOptions = {
allowTaint: false,
imageTimeout: 15000,
proxy: undefined,
useCORS: false
}; };
const resourceOptions: ResourceOptions = {...defaultResourceOptions, ...opts}; const contextOptions = {
logging: opts.logging ?? true,
const defaultOptions = { cache: opts.cache,
backgroundColor: '#ffffff', ...resourceOptions
cache: opts.cache ? opts.cache : CacheStorage.create(instanceName, resourceOptions),
logging: true,
removeContainer: true,
foreignObjectRendering: false,
scale: defaultView.devicePixelRatio || 1,
windowWidth: defaultView.innerWidth,
windowHeight: defaultView.innerHeight,
scrollX: defaultView.pageXOffset,
scrollY: defaultView.pageYOffset,
x: left,
y: top,
width: Math.ceil(width),
height: Math.ceil(height),
id: instanceName
}; };
const options: Options = {...defaultOptions, ...resourceOptions, ...opts}; const windowOptions = {
windowWidth: opts.windowWidth ?? defaultView.innerWidth,
windowHeight: opts.windowHeight ?? defaultView.innerHeight,
scrollX: opts.scrollX ?? defaultView.pageXOffset,
scrollY: opts.scrollY ?? defaultView.pageYOffset
};
const windowBounds = new Bounds(options.scrollX, options.scrollY, options.windowWidth, options.windowHeight); const windowBounds = new Bounds(
windowOptions.scrollX,
windowOptions.scrollY,
windowOptions.windowWidth,
windowOptions.windowHeight
);
Logger.create({id: instanceName, enabled: options.logging}); const context = new Context(contextOptions, windowBounds);
Logger.getInstance(instanceName).debug(`Starting document clone`);
const documentCloner = new DocumentCloner(element, { const foreignObjectRendering = opts.foreignObjectRendering ?? false;
id: instanceName,
onclone: options.onclone, const cloneOptions: CloneConfigurations = {
ignoreElements: options.ignoreElements, onclone: opts.onclone,
inlineImages: options.foreignObjectRendering, ignoreElements: opts.ignoreElements,
copyStyles: options.foreignObjectRendering inlineImages: foreignObjectRendering,
}); copyStyles: foreignObjectRendering
};
context.logger.debug(
`Starting document clone with size ${windowBounds.width}x${
windowBounds.height
} scrolled to ${-windowBounds.left},${-windowBounds.top}`
);
const documentCloner = new DocumentCloner(context, element, cloneOptions);
const clonedElement = documentCloner.clonedReferenceElement; const clonedElement = documentCloner.clonedReferenceElement;
if (!clonedElement) { if (!clonedElement) {
return Promise.reject(`Unable to find element in cloned iframe`); return Promise.reject(`Unable to find element in cloned iframe`);
@ -99,75 +94,81 @@ const renderElement = async (element: HTMLElement, opts: Partial<Options>): Prom
const container = await documentCloner.toIFrame(ownerDocument, windowBounds); const container = await documentCloner.toIFrame(ownerDocument, windowBounds);
// http://www.w3.org/TR/css3-background/#special-backgrounds const {width, height, left, top} =
const documentBackgroundColor = ownerDocument.documentElement isBodyElement(clonedElement) || isHTMLElement(clonedElement)
? parseColor(getComputedStyle(ownerDocument.documentElement).backgroundColor as string) ? parseDocumentSize(clonedElement.ownerDocument)
: COLORS.TRANSPARENT; : parseBounds(context, clonedElement);
const bodyBackgroundColor = ownerDocument.body
? parseColor(getComputedStyle(ownerDocument.body).backgroundColor as string)
: COLORS.TRANSPARENT;
const bgColor = opts.backgroundColor; const backgroundColor = parseBackgroundColor(context, clonedElement, opts.backgroundColor);
const defaultBackgroundColor =
typeof bgColor === 'string' ? parseColor(bgColor) : bgColor === null ? COLORS.TRANSPARENT : 0xffffffff;
const backgroundColor = const renderOptions: RenderConfigurations = {
element === ownerDocument.documentElement canvas: opts.canvas,
? isTransparent(documentBackgroundColor)
? isTransparent(bodyBackgroundColor)
? defaultBackgroundColor
: bodyBackgroundColor
: documentBackgroundColor
: defaultBackgroundColor;
const renderOptions = {
id: instanceName,
cache: options.cache,
canvas: options.canvas,
backgroundColor, backgroundColor,
scale: options.scale, scale: opts.scale ?? defaultView.devicePixelRatio ?? 1,
x: options.x, x: (opts.x ?? 0) + left,
y: options.y, y: (opts.y ?? 0) + top,
scrollX: options.scrollX, width: opts.width ?? Math.ceil(width),
scrollY: options.scrollY, height: opts.height ?? Math.ceil(height)
width: options.width,
height: options.height,
windowWidth: options.windowWidth,
windowHeight: options.windowHeight
}; };
let canvas; let canvas;
if (options.foreignObjectRendering) { if (foreignObjectRendering) {
Logger.getInstance(instanceName).debug(`Document cloned, using foreign object rendering`); context.logger.debug(`Document cloned, using foreign object rendering`);
const renderer = new ForeignObjectRenderer(renderOptions); const renderer = new ForeignObjectRenderer(context, renderOptions);
canvas = await renderer.render(clonedElement); canvas = await renderer.render(clonedElement);
} else { } else {
Logger.getInstance(instanceName).debug(`Document cloned, using computed rendering`); context.logger.debug(
`Document cloned, element located at ${left},${top} with size ${width}x${height} using computed rendering`
);
CacheStorage.attachInstance(options.cache); context.logger.debug(`Starting DOM parsing`);
Logger.getInstance(instanceName).debug(`Starting DOM parsing`); const root = parseTree(context, clonedElement);
const root = parseTree(clonedElement);
CacheStorage.detachInstance();
if (backgroundColor === root.styles.backgroundColor) { if (backgroundColor === root.styles.backgroundColor) {
root.styles.backgroundColor = COLORS.TRANSPARENT; root.styles.backgroundColor = COLORS.TRANSPARENT;
} }
Logger.getInstance(instanceName).debug(`Starting renderer`); context.logger.debug(
`Starting renderer for element at ${renderOptions.x},${renderOptions.y} with size ${renderOptions.width}x${renderOptions.height}`
);
const renderer = new CanvasRenderer(renderOptions); const renderer = new CanvasRenderer(context, renderOptions);
canvas = await renderer.render(root); canvas = await renderer.render(root);
} }
if (options.removeContainer === true) { if (opts.removeContainer ?? true) {
if (!DocumentCloner.destroy(container)) { if (!DocumentCloner.destroy(container)) {
Logger.getInstance(instanceName).error(`Cannot detach cloned iframe as it is not in the DOM anymore`); context.logger.error(`Cannot detach cloned iframe as it is not in the DOM anymore`);
} }
} }
Logger.getInstance(instanceName).debug(`Finished rendering`); context.logger.debug(`Finished rendering`);
Logger.destroy(instanceName);
CacheStorage.destroy(instanceName);
return canvas; return canvas;
}; };
const parseBackgroundColor = (context: Context, element: HTMLElement, backgroundColorOverride?: string | null) => {
const ownerDocument = element.ownerDocument;
// http://www.w3.org/TR/css3-background/#special-backgrounds
const documentBackgroundColor = ownerDocument.documentElement
? parseColor(context, getComputedStyle(ownerDocument.documentElement).backgroundColor as string)
: COLORS.TRANSPARENT;
const bodyBackgroundColor = ownerDocument.body
? parseColor(context, getComputedStyle(ownerDocument.body).backgroundColor as string)
: COLORS.TRANSPARENT;
const defaultBackgroundColor =
typeof backgroundColorOverride === 'string'
? parseColor(context, backgroundColorOverride)
: backgroundColorOverride === null
? COLORS.TRANSPARENT
: 0xffffffff;
return element === ownerDocument.documentElement
? isTransparent(documentBackgroundColor)
? isTransparent(bodyBackgroundColor)
? defaultBackgroundColor
: bodyBackgroundColor
: documentBackgroundColor
: defaultBackgroundColor;
};

57
src/render/canvas/canvas-renderer.ts
View File

@ -1,6 +1,5 @@
import {ElementPaint, parseStackingContexts, StackingContext} from '../stacking-context'; import {ElementPaint, parseStackingContexts, StackingContext} from '../stacking-context';
import {asString, Color, isTransparent} from '../../css/types/color'; import {asString, Color, isTransparent} from '../../css/types/color';
import {Logger} from '../../core/logger';
import {ElementContainer} from '../../dom/element-container'; import {ElementContainer} from '../../dom/element-container';
import {BORDER_STYLE} from '../../css/property-descriptors/border-style'; import {BORDER_STYLE} from '../../css/property-descriptors/border-style';
import {CSSParsedDeclaration} from '../../css/index'; import {CSSParsedDeclaration} from '../../css/index';
@ -17,7 +16,6 @@ import {
parsePathForBorderDoubleOuter, parsePathForBorderDoubleOuter,
parsePathForBorderStroke parsePathForBorderStroke
} from '../border'; } from '../border';
import {Cache} from '../../core/cache-storage';
import {calculateBackgroundRendering, getBackgroundValueForIndex} from '../background'; import {calculateBackgroundRendering, getBackgroundValueForIndex} from '../background';
import {isDimensionToken} from '../../css/syntax/parser'; import {isDimensionToken} from '../../css/syntax/parser';
import {TextBounds} from '../../css/layout/text'; import {TextBounds} from '../../css/layout/text';
@ -44,39 +42,34 @@ import {SelectElementContainer} from '../../dom/elements/select-element-containe
import {IFrameElementContainer} from '../../dom/replaced-elements/iframe-element-container'; import {IFrameElementContainer} from '../../dom/replaced-elements/iframe-element-container';
import {TextShadow} from '../../css/property-descriptors/text-shadow'; import {TextShadow} from '../../css/property-descriptors/text-shadow';
import {PAINT_ORDER_LAYER} from '../../css/property-descriptors/paint-order'; import {PAINT_ORDER_LAYER} from '../../css/property-descriptors/paint-order';
import {Renderer} from '../renderer';
import {Context} from '../../core/context';
export type RenderConfigurations = RenderOptions & { export type RenderConfigurations = RenderOptions & {
backgroundColor: Color | null; backgroundColor: Color | null;
}; };
export interface RenderOptions { export interface RenderOptions {
id: string;
scale: number; scale: number;
canvas?: HTMLCanvasElement; canvas?: HTMLCanvasElement;
x: number; x: number;
y: number; y: number;
scrollX: number;
scrollY: number;
width: number; width: number;
height: number; height: number;
windowWidth: number;
windowHeight: number;
cache: Cache;
} }
const MASK_OFFSET = 10000; const MASK_OFFSET = 10000;
export class CanvasRenderer { export class CanvasRenderer extends Renderer {
canvas: HTMLCanvasElement; canvas: HTMLCanvasElement;
ctx: CanvasRenderingContext2D; ctx: CanvasRenderingContext2D;
options: RenderConfigurations;
private readonly _activeEffects: IElementEffect[] = []; private readonly _activeEffects: IElementEffect[] = [];
private readonly fontMetrics: FontMetrics; private readonly fontMetrics: FontMetrics;
constructor(options: RenderConfigurations) { constructor(context: Context, options: RenderConfigurations) {
super(context, options);
this.canvas = options.canvas ? options.canvas : document.createElement('canvas'); this.canvas = options.canvas ? options.canvas : document.createElement('canvas');
this.ctx = this.canvas.getContext('2d') as CanvasRenderingContext2D; this.ctx = this.canvas.getContext('2d') as CanvasRenderingContext2D;
this.options = options;
if (!options.canvas) { if (!options.canvas) {
this.canvas.width = Math.floor(options.width * options.scale); this.canvas.width = Math.floor(options.width * options.scale);
this.canvas.height = Math.floor(options.height * options.scale); this.canvas.height = Math.floor(options.height * options.scale);
@ -85,11 +78,11 @@ export class CanvasRenderer {
} }
this.fontMetrics = new FontMetrics(document); this.fontMetrics = new FontMetrics(document);
this.ctx.scale(this.options.scale, this.options.scale); this.ctx.scale(this.options.scale, this.options.scale);
this.ctx.translate(-options.x + options.scrollX, -options.y + options.scrollY); this.ctx.translate(-options.x, -options.y);
this.ctx.textBaseline = 'bottom'; this.ctx.textBaseline = 'bottom';
this._activeEffects = []; this._activeEffects = [];
Logger.getInstance(options.id).debug( this.context.logger.debug(
`Canvas renderer initialized (${options.width}x${options.height} at ${options.x},${options.y}) with scale ${options.scale}` `Canvas renderer initialized (${options.width}x${options.height}) with scale ${options.scale}`
); );
} }
@ -253,6 +246,7 @@ export class CanvasRenderer {
if (styles.webkitTextStrokeWidth && text.text.trim().length) { if (styles.webkitTextStrokeWidth && text.text.trim().length) {
this.ctx.strokeStyle = asString(styles.webkitTextStrokeColor); this.ctx.strokeStyle = asString(styles.webkitTextStrokeColor);
this.ctx.lineWidth = styles.webkitTextStrokeWidth; this.ctx.lineWidth = styles.webkitTextStrokeWidth;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
this.ctx.lineJoin = !!(window as any).chrome ? 'miter' : 'round'; this.ctx.lineJoin = !!(window as any).chrome ? 'miter' : 'round';
this.ctx.strokeText(text.text, text.bounds.left, text.bounds.top + baseline); this.ctx.strokeText(text.text, text.bounds.left, text.bounds.top + baseline);
} }
@ -302,10 +296,10 @@ export class CanvasRenderer {
if (container instanceof ImageElementContainer) { if (container instanceof ImageElementContainer) {
try { try {
const image = await this.options.cache.match(container.src); const image = await this.context.cache.match(container.src);
this.renderReplacedElement(container, curves, image); this.renderReplacedElement(container, curves, image);
} catch (e) { } catch (e) {
Logger.getInstance(this.options.id).error(`Error loading image ${container.src}`); this.context.logger.error(`Error loading image ${container.src}`);
} }
} }
@ -315,27 +309,21 @@ export class CanvasRenderer {
if (container instanceof SVGElementContainer) { if (container instanceof SVGElementContainer) {
try { try {
const image = await this.options.cache.match(container.svg); const image = await this.context.cache.match(container.svg);
this.renderReplacedElement(container, curves, image); this.renderReplacedElement(container, curves, image);
} catch (e) { } catch (e) {
Logger.getInstance(this.options.id).error(`Error loading svg ${container.svg.substring(0, 255)}`); this.context.logger.error(`Error loading svg ${container.svg.substring(0, 255)}`);
} }
} }
if (container instanceof IFrameElementContainer && container.tree) { if (container instanceof IFrameElementContainer && container.tree) {
const iframeRenderer = new CanvasRenderer({ const iframeRenderer = new CanvasRenderer(this.context, {
id: this.options.id,
scale: this.options.scale, scale: this.options.scale,
backgroundColor: container.backgroundColor, backgroundColor: container.backgroundColor,
x: 0, x: 0,
y: 0, y: 0,
scrollX: 0,
scrollY: 0,
width: container.width, width: container.width,
height: container.height, height: container.height
cache: this.options.cache,
windowWidth: container.width,
windowHeight: container.height
}); });
const canvas = await iframeRenderer.render(container.tree); const canvas = await iframeRenderer.render(container.tree);
@ -444,10 +432,10 @@ export class CanvasRenderer {
let image; let image;
const url = (img as CSSURLImage).url; const url = (img as CSSURLImage).url;
try { try {
image = await this.options.cache.match(url); image = await this.context.cache.match(url);
this.ctx.drawImage(image, container.bounds.left - (image.width + 10), container.bounds.top); this.ctx.drawImage(image, container.bounds.left - (image.width + 10), container.bounds.top);
} catch (e) { } catch (e) {
Logger.getInstance(this.options.id).error(`Error loading list-style-image ${url}`); this.context.logger.error(`Error loading list-style-image ${url}`);
} }
} }
} else if (paint.listValue && container.styles.listStyleType !== LIST_STYLE_TYPE.NONE) { } else if (paint.listValue && container.styles.listStyleType !== LIST_STYLE_TYPE.NONE) {
@ -592,9 +580,9 @@ export class CanvasRenderer {
let image; let image;
const url = (backgroundImage as CSSURLImage).url; const url = (backgroundImage as CSSURLImage).url;
try { try {
image = await this.options.cache.match(url); image = await this.context.cache.match(url);
} catch (e) { } catch (e) {
Logger.getInstance(this.options.id).error(`Error loading background-image ${url}`); this.context.logger.error(`Error loading background-image ${url}`);
} }
if (image) { if (image) {
@ -902,12 +890,7 @@ export class CanvasRenderer {
async render(element: ElementContainer): Promise<HTMLCanvasElement> { async render(element: ElementContainer): Promise<HTMLCanvasElement> {
if (this.options.backgroundColor) { if (this.options.backgroundColor) {
this.ctx.fillStyle = asString(this.options.backgroundColor); this.ctx.fillStyle = asString(this.options.backgroundColor);
this.ctx.fillRect( this.ctx.fillRect(this.options.x, this.options.y, this.options.width, this.options.height);
this.options.x - this.options.scrollX,
this.options.y - this.options.scrollY,
this.options.width,
this.options.height
);
} }
const stack = parseStackingContexts(element); const stack = parseStackingContexts(element);

20
src/render/canvas/foreignobject-renderer.ts
View File

@ -1,14 +1,16 @@
import {RenderConfigurations} from './canvas-renderer'; import {RenderConfigurations} from './canvas-renderer';
import {Logger} from '../../core/logger';
import {createForeignObjectSVG} from '../../core/features'; import {createForeignObjectSVG} from '../../core/features';
import {asString} from '../../css/types/color'; import {asString} from '../../css/types/color';
import {Renderer} from '../renderer';
import {Context} from '../../core/context';
export class ForeignObjectRenderer { export class ForeignObjectRenderer extends Renderer {
canvas: HTMLCanvasElement; canvas: HTMLCanvasElement;
ctx: CanvasRenderingContext2D; ctx: CanvasRenderingContext2D;
options: RenderConfigurations; options: RenderConfigurations;
constructor(options: RenderConfigurations) { constructor(context: Context, options: RenderConfigurations) {
super(context, options);
this.canvas = options.canvas ? options.canvas : document.createElement('canvas'); this.canvas = options.canvas ? options.canvas : document.createElement('canvas');
this.ctx = this.canvas.getContext('2d') as CanvasRenderingContext2D; this.ctx = this.canvas.getContext('2d') as CanvasRenderingContext2D;
this.options = options; this.options = options;
@ -18,18 +20,18 @@ export class ForeignObjectRenderer {
this.canvas.style.height = `${options.height}px`; this.canvas.style.height = `${options.height}px`;
this.ctx.scale(this.options.scale, this.options.scale); this.ctx.scale(this.options.scale, this.options.scale);
this.ctx.translate(-options.x + options.scrollX, -options.y + options.scrollY); this.ctx.translate(-options.x, -options.y);
Logger.getInstance(options.id).debug( this.context.logger.debug(
`EXPERIMENTAL ForeignObject renderer initialized (${options.width}x${options.height} at ${options.x},${options.y}) with scale ${options.scale}` `EXPERIMENTAL ForeignObject renderer initialized (${options.width}x${options.height} at ${options.x},${options.y}) with scale ${options.scale}`
); );
} }
async render(element: HTMLElement): Promise<HTMLCanvasElement> { async render(element: HTMLElement): Promise<HTMLCanvasElement> {
const svg = createForeignObjectSVG( const svg = createForeignObjectSVG(
Math.max(this.options.windowWidth, this.options.width) * this.options.scale, this.options.width * this.options.scale,
Math.max(this.options.windowHeight, this.options.height) * this.options.scale, this.options.height * this.options.scale,
this.options.scrollX * this.options.scale, this.options.scale,
this.options.scrollY * this.options.scale, this.options.scale,
element element
); );

6
src/render/renderer.ts Normal file
View File

@ -0,0 +1,6 @@
import {Context} from '../core/context';
import {RenderConfigurations} from './canvas/canvas-renderer';
export class Renderer {
constructor(protected readonly context: Context, protected readonly options: RenderConfigurations) {}
}

44
tests/reftests/options/crop-2.html Normal file
View File

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html>
<head>
<title>crop test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
h2cOptions = {
x: 30,
y: 50,
width: 100,
height: 100
};
</script>
<script type="text/javascript" src="../../test.js"></script>
<style>
#div1 {
position: absolute;
left: 250px;
top: 250px;
width: 100px;
height: 100px;
background: green;
border-width: 50px 20px 100px 30px;
border-color: red;
border-style: solid;
}
body, html {
background: red;
}
</style>
</head>
<body>
<div id="div1">
great success
</div>
<script>
var forceElement = document.querySelector('#div1');
h2cSelector = forceElement;
</script>
</body>
</html>

48
tests/reftests/options/ignore-2.html Normal file
View File

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html>
<head>
<title>element render test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
h2cOptions = {ignoreElements: function(element) {
return element.className === 'ignored';
}};
</script>
<script type="text/javascript" src="../../test.js"></script>
<style>
#div1 {
width: 100px;
height: 100px;
background: green;
}
#ignored, .ignored {
background: red;
width: 100px;
height: 100px;
}
body, html {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="ignored" data-html2canvas-ignore>
great failure
</div>
<div class="ignored">
ignore predicate
</div>
<div id="div1">
great success
</div>
<script>
var forceElement = document.querySelector('#div1');
h2cSelector = forceElement;
</script>
</body>
</html>