mirror of
https://github.com/niklasvh/html2canvas.git
synced 2023-08-10 21:13:10 +03:00
deps: update dependencies with lint fixes (#2565)
This commit is contained in:
Niklas von Hertzen
GitHub
parent
e7a021ab93
commit
b2902ec31c
@ -2,8 +2,7 @@
|
||||
"parser": "@typescript-eslint/parser",
|
||||
"extends": [
|
||||
"plugin:@typescript-eslint/recommended",
|
||||
"prettier/@typescript-eslint",
|
||||
"plugin:prettier/recommended",
|
||||
"prettier"
|
||||
],
|
||||
"parserOptions": {
|
||||
"project": "./tsconfig.json",
|
||||
|
||||
25632
package-lock.json
generated
25632
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
65
package.json
65
package.json
@ -27,36 +27,40 @@
|
||||
"@babel/core": "^7.4.3",
|
||||
"@babel/preset-env": "^7.4.3",
|
||||
"@babel/preset-flow": "^7.0.0",
|
||||
"@rollup/plugin-commonjs": "^19.0.0",
|
||||
"@rollup/plugin-json": "^4.1.0",
|
||||
"@rollup/plugin-node-resolve": "^13.0.0",
|
||||
"@rollup/plugin-typescript": "^8.2.1",
|
||||
"@types/chai": "^4.1.7",
|
||||
"@types/express": "^4.17.11",
|
||||
"@types/express": "^4.17.13",
|
||||
"@types/glob": "^7.1.1",
|
||||
"@types/jest": "^24.0.18",
|
||||
"@types/jest": "^26.0.24",
|
||||
"@types/karma": "^6.3.0",
|
||||
"@types/mocha": "^5.2.6",
|
||||
"@types/node": "^11.13.2",
|
||||
"@types/platform": "^1.3.2",
|
||||
"@types/mocha": "^8.2.3",
|
||||
"@types/node": "^16.3.1",
|
||||
"@types/platform": "^1.3.4",
|
||||
"@types/promise-polyfill": "^6.0.3",
|
||||
"@typescript-eslint/eslint-plugin": "^1.7.0",
|
||||
"@typescript-eslint/parser": "^1.7.0",
|
||||
"@typescript-eslint/eslint-plugin": "^4.28.2",
|
||||
"@typescript-eslint/parser": "^4.28.2",
|
||||
"appium-ios-simulator": "^3.10.0",
|
||||
"babel-eslint": "^10.0.1",
|
||||
"babel-loader": "^8.0.5",
|
||||
"babel-plugin-add-module-exports": "^1.0.2",
|
||||
"babel-plugin-dev-expression": "^0.2.1",
|
||||
"base64-arraybuffer": "0.2.0",
|
||||
"body-parser": "^1.18.3",
|
||||
"body-parser": "^1.19.0",
|
||||
"chai": "4.1.1",
|
||||
"chromeless": "^1.5.2",
|
||||
"cors": "2.8.4",
|
||||
"es6-promise": "^4.2.6",
|
||||
"eslint": "^5.16.0",
|
||||
"eslint-config-prettier": "^4.2.0",
|
||||
"eslint-plugin-prettier": "3.0.1",
|
||||
"cors": "^2.8.5",
|
||||
"es6-promise": "^4.2.8",
|
||||
"eslint": "^7.30.0",
|
||||
"eslint-config-prettier": "^8.3.0",
|
||||
"eslint-plugin-prettier": "3.4.0",
|
||||
"express": "^4.17.1",
|
||||
"filenamify-url": "1.0.0",
|
||||
"glob": "7.1.3",
|
||||
"html2canvas-proxy": "1.0.1",
|
||||
"jest": "^24.9.0",
|
||||
"jest": "^27.0.6",
|
||||
"jquery": "^3.5.1",
|
||||
"js-polyfills": "^0.1.42",
|
||||
"karma": "^6.3.2",
|
||||
@ -68,28 +72,25 @@
|
||||
"karma-mocha": "^2.0.1",
|
||||
"karma-safarinative-launcher": "^1.1.0",
|
||||
"karma-sauce-launcher": "^2.0.2",
|
||||
"mocha": "^6.1.4",
|
||||
"mocha": "^9.0.2",
|
||||
"node-simctl": "^5.3.0",
|
||||
"platform": "1.3.4",
|
||||
"prettier": "1.17.0",
|
||||
"platform": "^1.3.6",
|
||||
"prettier": "^2.3.2",
|
||||
"replace-in-file": "^3.0.0",
|
||||
"rimraf": "2.6.1",
|
||||
"rollup": "^1.10.1",
|
||||
"rollup-plugin-commonjs": "^9.3.4",
|
||||
"rollup-plugin-json": "^4.0.0",
|
||||
"rollup-plugin-node-resolve": "^4.2.3",
|
||||
"rollup-plugin-sourcemaps": "^0.4.2",
|
||||
"rollup-plugin-typescript2": "^0.21.0",
|
||||
"rimraf": "^3.0.2",
|
||||
"rollup": "^2.53.1",
|
||||
"rollup-plugin-sourcemaps": "^0.6.3",
|
||||
"serve-index": "^1.9.1",
|
||||
"slash": "1.0.0",
|
||||
"standard-version": "^8.0.2",
|
||||
"ts-jest": "^24.1.0",
|
||||
"ts-loader": "^5.3.3",
|
||||
"ts-node": "^8.0.3",
|
||||
"typescript": "^3.4.3",
|
||||
"uglify-js": "^3.5.11",
|
||||
"uglifyjs-webpack-plugin": "^1.1.2",
|
||||
"webpack": "^4.29.6",
|
||||
"ts-jest": "^27.0.3",
|
||||
"ts-loader": "^8.3.0",
|
||||
"ts-node": "^10.1.0",
|
||||
"tslib": "^2.3.0",
|
||||
"typescript": "^4.3.5",
|
||||
"uglify-js": "^3.13.10",
|
||||
"uglifyjs-webpack-plugin": "^2.2.0",
|
||||
"webpack": "^4.46.0",
|
||||
"webpack-cli": "^3.3.12",
|
||||
"yargs": "^17.0.1"
|
||||
},
|
||||
@ -103,7 +104,7 @@
|
||||
"build:reftest-preview": "webpack --config www/webpack.config.js",
|
||||
"release": "standard-version",
|
||||
"format": "prettier --write \"{src,www/src,tests,scripts}/**/*.ts\"",
|
||||
"lint": "eslint src/**/*.ts",
|
||||
"lint": "eslint src/**/*.ts --max-warnings 0",
|
||||
"test": "npm run lint && npm run unittest && npm run karma",
|
||||
"unittest": "jest",
|
||||
"karma": "ts-node tests/karma",
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import resolve from 'rollup-plugin-node-resolve';
|
||||
import commonjs from 'rollup-plugin-commonjs';
|
||||
import resolve from '@rollup/plugin-node-resolve';
|
||||
import commonjs from '@rollup/plugin-commonjs';
|
||||
import sourceMaps from 'rollup-plugin-sourcemaps';
|
||||
import typescript from 'rollup-plugin-typescript2';
|
||||
import json from 'rollup-plugin-json';
|
||||
import typescript from '@rollup/plugin-typescript';
|
||||
import json from '@rollup/plugin-json';
|
||||
|
||||
const pkg = require('./package.json');
|
||||
|
||||
@ -30,7 +30,7 @@ export default {
|
||||
// Allow json resolution
|
||||
json(),
|
||||
// Compile TypeScript files
|
||||
typescript({ useTsconfigDeclarationDir: true }),
|
||||
typescript(),
|
||||
// Allow bundling cjs modules (unlike webpack, rollup doesn't understand cjs)
|
||||
commonjs({
|
||||
include: 'node_modules/**'
|
||||
|
||||
@ -21,7 +21,7 @@ const outputPath = resolve(__dirname, '../', process.argv[3]);
|
||||
const ignoredTests = readFileSync(path)
|
||||
.toString()
|
||||
.split(/\r\n|\r|\n/)
|
||||
.filter(l => l.length)
|
||||
.filter((l) => l.length)
|
||||
.reduce((acc: {[key: string]: string[]}, l) => {
|
||||
const m = l.match(/^(\[(.+)\])?(.+)$/i);
|
||||
if (m) {
|
||||
|
||||
@ -17,7 +17,7 @@ const files = readdirSync(path);
|
||||
interface RefTestMetadata {}
|
||||
|
||||
interface RefTestSingleMetadata extends RefTestMetadata {
|
||||
test: string;
|
||||
test?: string;
|
||||
}
|
||||
|
||||
interface RefTestResults {
|
||||
@ -26,12 +26,14 @@ interface RefTestResults {
|
||||
|
||||
const result: RefTestResults = files.reduce((result: RefTestResults, file) => {
|
||||
const json: RefTestSingleMetadata = JSON.parse(readFileSync(resolve(__dirname, path, file)).toString());
|
||||
if (!result[json.test]) {
|
||||
result[json.test] = [];
|
||||
}
|
||||
if (json.test) {
|
||||
if (!result[json.test]) {
|
||||
result[json.test] = [];
|
||||
}
|
||||
|
||||
result[json.test].push(json);
|
||||
delete json.test;
|
||||
result[json.test].push(json);
|
||||
delete json.test;
|
||||
}
|
||||
|
||||
return result;
|
||||
}, {});
|
||||
|
||||
@ -21,7 +21,6 @@ jest.mock('../render/stacking-context');
|
||||
jest.mock('../render/canvas/canvas-renderer');
|
||||
|
||||
describe('html2canvas', () => {
|
||||
// eslint-disable-next-line @typescript-eslint/no-object-literal-type-assertion
|
||||
const element = {
|
||||
ownerDocument: {
|
||||
defaultView: {
|
||||
@ -60,7 +59,6 @@ describe('html2canvas', () => {
|
||||
});
|
||||
|
||||
it('should use existing canvas when given as option', async () => {
|
||||
// eslint-disable-next-line @typescript-eslint/no-object-literal-type-assertion
|
||||
const canvas = {} as HTMLCanvasElement;
|
||||
await html2canvas(element, {canvas});
|
||||
expect(CanvasRenderer).toHaveBeenLastCalledWith(
|
||||
|
||||
@ -1,17 +1,22 @@
|
||||
export class Logger {
|
||||
debug() {}
|
||||
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
||||
debug(): void {}
|
||||
|
||||
static create() {}
|
||||
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
||||
static create(): void {}
|
||||
|
||||
static destroy() {}
|
||||
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
||||
static destroy(): void {}
|
||||
|
||||
static getInstance(): Logger {
|
||||
return logger;
|
||||
}
|
||||
|
||||
info() {}
|
||||
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
||||
info(): void {}
|
||||
|
||||
error() {}
|
||||
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
||||
error(): void {}
|
||||
}
|
||||
|
||||
const logger = new Logger();
|
||||
|
||||
@ -47,12 +47,12 @@ const createMockContext = (origin: string, opts = {}) => {
|
||||
|
||||
const images: ImageMock[] = [];
|
||||
const xhr: XMLHttpRequestMock[] = [];
|
||||
const sleep = async (timeout: number) => await new Promise(resolve => setTimeout(resolve, timeout));
|
||||
const sleep = async (timeout: number) => await new Promise((resolve) => setTimeout(resolve, timeout));
|
||||
|
||||
class ImageMock {
|
||||
src?: string;
|
||||
crossOrigin?: string;
|
||||
onload?: () => {};
|
||||
onload?: () => void;
|
||||
constructor() {
|
||||
images.push(this);
|
||||
}
|
||||
@ -65,8 +65,8 @@ class XMLHttpRequestMock {
|
||||
method?: string;
|
||||
url?: string;
|
||||
response?: string;
|
||||
onload?: () => {};
|
||||
ontimeout?: () => {};
|
||||
onload?: () => void;
|
||||
ontimeout?: () => void;
|
||||
constructor() {
|
||||
this.sent = false;
|
||||
this.status = 500;
|
||||
@ -106,7 +106,7 @@ const setFeatures = (opts: {[key: string]: boolean} = {}) => {
|
||||
SUPPORT_RESPONSE_TYPE: false
|
||||
};
|
||||
|
||||
Object.keys(defaults).forEach(key => {
|
||||
Object.keys(defaults).forEach((key) => {
|
||||
Object.defineProperty(FEATURES, key, {
|
||||
value: typeof opts[key] === 'boolean' ? opts[key] : defaults[key],
|
||||
writable: true
|
||||
|
||||
@ -1,10 +1,13 @@
|
||||
import {Logger} from '../logger';
|
||||
|
||||
describe('logger', () => {
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
let infoSpy: any;
|
||||
|
||||
beforeEach(() => {
|
||||
infoSpy = jest.spyOn(console, 'info').mockImplementation(() => {});
|
||||
infoSpy = jest.spyOn(console, 'info').mockImplementation(() => {
|
||||
// do nothing
|
||||
});
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
|
||||
@ -4,7 +4,7 @@ import {Logger} from './logger';
|
||||
export class CacheStorage {
|
||||
private static _caches: {[key: string]: Cache} = {};
|
||||
private static _link?: HTMLAnchorElement;
|
||||
private static _origin: string = 'about:blank';
|
||||
private static _origin = 'about:blank';
|
||||
private static _current: Cache | null = null;
|
||||
|
||||
static create(name: string, options: ResourceOptions): Cache {
|
||||
@ -39,7 +39,7 @@ export class CacheStorage {
|
||||
return CacheStorage.getOrigin(src) === CacheStorage._origin;
|
||||
}
|
||||
|
||||
static setContext(window: Window) {
|
||||
static setContext(window: Window): void {
|
||||
CacheStorage._link = window.document.createElement('a');
|
||||
CacheStorage._origin = CacheStorage.getOrigin(window.location.href);
|
||||
}
|
||||
@ -52,11 +52,11 @@ export class CacheStorage {
|
||||
return current;
|
||||
}
|
||||
|
||||
static attachInstance(cache: Cache) {
|
||||
static attachInstance(cache: Cache): void {
|
||||
CacheStorage._current = cache;
|
||||
}
|
||||
|
||||
static detachInstance() {
|
||||
static detachInstance(): void {
|
||||
CacheStorage._current = null;
|
||||
}
|
||||
}
|
||||
@ -169,7 +169,7 @@ export class Cache {
|
||||
} else {
|
||||
const reader = new FileReader();
|
||||
reader.addEventListener('load', () => resolve(reader.result as string), false);
|
||||
reader.addEventListener('error', e => reject(e), false);
|
||||
reader.addEventListener('error', (e) => reject(e), false);
|
||||
reader.readAsDataURL(xhr.response);
|
||||
}
|
||||
} else {
|
||||
|
||||
@ -90,7 +90,13 @@ const testForeignObject = (document: Document): Promise<boolean> => {
|
||||
.catch(() => false);
|
||||
};
|
||||
|
||||
export const createForeignObjectSVG = (width: number, height: number, x: number, y: number, node: Node) => {
|
||||
export const createForeignObjectSVG = (
|
||||
width: number,
|
||||
height: number,
|
||||
x: number,
|
||||
y: number,
|
||||
node: Node
|
||||
): SVGForeignObjectElement => {
|
||||
const xmlns = 'http://www.w3.org/2000/svg';
|
||||
const svg = document.createElementNS(xmlns, 'svg');
|
||||
const foreignObject = document.createElementNS(xmlns, 'foreignObject');
|
||||
@ -120,19 +126,19 @@ export const loadSerializedSVG = (svg: Node): Promise<HTMLImageElement> => {
|
||||
};
|
||||
|
||||
export const FEATURES = {
|
||||
get SUPPORT_RANGE_BOUNDS() {
|
||||
get SUPPORT_RANGE_BOUNDS(): boolean {
|
||||
'use strict';
|
||||
const value = testRangeBounds(document);
|
||||
Object.defineProperty(FEATURES, 'SUPPORT_RANGE_BOUNDS', {value});
|
||||
return value;
|
||||
},
|
||||
get SUPPORT_SVG_DRAWING() {
|
||||
get SUPPORT_SVG_DRAWING(): boolean {
|
||||
'use strict';
|
||||
const value = testSVG(document);
|
||||
Object.defineProperty(FEATURES, 'SUPPORT_SVG_DRAWING', {value});
|
||||
return value;
|
||||
},
|
||||
get SUPPORT_FOREIGNOBJECT_DRAWING() {
|
||||
get SUPPORT_FOREIGNOBJECT_DRAWING(): Promise<boolean> {
|
||||
'use strict';
|
||||
const value =
|
||||
typeof Array.from === 'function' && typeof window.fetch === 'function'
|
||||
@ -141,19 +147,19 @@ export const FEATURES = {
|
||||
Object.defineProperty(FEATURES, 'SUPPORT_FOREIGNOBJECT_DRAWING', {value});
|
||||
return value;
|
||||
},
|
||||
get SUPPORT_CORS_IMAGES() {
|
||||
get SUPPORT_CORS_IMAGES(): boolean {
|
||||
'use strict';
|
||||
const value = testCORS();
|
||||
Object.defineProperty(FEATURES, 'SUPPORT_CORS_IMAGES', {value});
|
||||
return value;
|
||||
},
|
||||
get SUPPORT_RESPONSE_TYPE() {
|
||||
get SUPPORT_RESPONSE_TYPE(): boolean {
|
||||
'use strict';
|
||||
const value = testResponseType();
|
||||
Object.defineProperty(FEATURES, 'SUPPORT_RESPONSE_TYPE', {value});
|
||||
return value;
|
||||
},
|
||||
get SUPPORT_CORS_XHR() {
|
||||
get SUPPORT_CORS_XHR(): boolean {
|
||||
'use strict';
|
||||
const value = 'withCredentials' in new XMLHttpRequest();
|
||||
Object.defineProperty(FEATURES, 'SUPPORT_CORS_XHR', {value});
|
||||
|
||||
@ -17,7 +17,7 @@ export class Logger {
|
||||
}
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
debug(...args: any) {
|
||||
debug(...args: unknown[]): void {
|
||||
if (this.enabled) {
|
||||
// eslint-disable-next-line no-console
|
||||
if (typeof window !== 'undefined' && window.console && typeof console.debug === 'function') {
|
||||
@ -33,11 +33,11 @@ export class Logger {
|
||||
return Date.now() - this.start;
|
||||
}
|
||||
|
||||
static create(options: LoggerOptions) {
|
||||
static create(options: LoggerOptions): void {
|
||||
Logger.instances[options.id] = new Logger(options);
|
||||
}
|
||||
|
||||
static destroy(id: string) {
|
||||
static destroy(id: string): void {
|
||||
delete Logger.instances[id];
|
||||
}
|
||||
|
||||
@ -50,7 +50,7 @@ export class Logger {
|
||||
}
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
info(...args: any) {
|
||||
info(...args: unknown[]): void {
|
||||
if (this.enabled) {
|
||||
// eslint-disable-next-line no-console
|
||||
if (typeof window !== 'undefined' && window.console && typeof console.info === 'function') {
|
||||
@ -61,7 +61,7 @@ export class Logger {
|
||||
}
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
error(...args: any) {
|
||||
error(...args: unknown[]): void {
|
||||
if (this.enabled) {
|
||||
// eslint-disable-next-line no-console
|
||||
if (typeof window !== 'undefined' && window.console && typeof console.error === 'function') {
|
||||
|
||||
@ -289,7 +289,6 @@ const parse = (descriptor: CSSPropertyDescriptor<any>, style?: string | null) =>
|
||||
const value = parser.parseComponentValue();
|
||||
return isLengthPercentage(value) ? value : ZERO_LENGTH;
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
throw new Error(`Attempting to parse unsupported css format type ${descriptor.format}`);
|
||||
};
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
export const {Bounds} = jest.requireActual('../bounds');
|
||||
export const parseBounds = () => {
|
||||
export const parseBounds = (): typeof Bounds => {
|
||||
return new Bounds(0, 0, 200, 50);
|
||||
};
|
||||
|
||||
@ -18,7 +18,7 @@ export const parseTextBounds = (value: string, styles: CSSParsedDeclaration, nod
|
||||
const textList = breakText(value, styles);
|
||||
const textBounds: TextBounds[] = [];
|
||||
let offset = 0;
|
||||
textList.forEach(text => {
|
||||
textList.forEach((text) => {
|
||||
if (styles.textDecorationLine.length || text.trim().length > 0) {
|
||||
if (FEATURES.SUPPORT_RANGE_BOUNDS) {
|
||||
textBounds.push(new TextBounds(text, getRangeBounds(node, offset, text.length)));
|
||||
@ -67,7 +67,7 @@ const getRangeBounds = (node: Text, offset: number, length: number): Bounds => {
|
||||
};
|
||||
|
||||
const breakText = (value: string, styles: CSSParsedDeclaration): string[] => {
|
||||
return styles.letterSpacing !== 0 ? toCodePoints(value).map(i => fromCodePoint(i)) : breakWords(value, styles);
|
||||
return styles.letterSpacing !== 0 ? toCodePoints(value).map((i) => fromCodePoint(i)) : breakWords(value, styles);
|
||||
};
|
||||
|
||||
const breakWords = (str: string, styles: CSSParsedDeclaration): string[] => {
|
||||
|
||||
@ -32,7 +32,10 @@ describe('property-descriptors', () => {
|
||||
{
|
||||
angle: deg(180),
|
||||
type: CSSImageType.LINEAR_GRADIENT,
|
||||
stops: [{color: pack(255, 255, 0, 0.5), stop: null}, {color: pack(0, 0, 255, 0.5), stop: null}]
|
||||
stops: [
|
||||
{color: pack(255, 255, 0, 0.5), stop: null},
|
||||
{color: pack(0, 0, 255, 0.5), stop: null}
|
||||
]
|
||||
},
|
||||
{url: 'https://html2canvas.hertzen.com', type: CSSImageType.URL}
|
||||
]
|
||||
|
||||
@ -9,13 +9,9 @@ describe('property-descriptors', () => {
|
||||
it('matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0)', () =>
|
||||
deepStrictEqual(parseValue('matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0)'), [1, 2, 3, 4, 5, 6]));
|
||||
it('matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)', () =>
|
||||
deepStrictEqual(parseValue('matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'), [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0
|
||||
]));
|
||||
deepStrictEqual(
|
||||
parseValue('matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'),
|
||||
[1, 0, 0, 1, 0, 0]
|
||||
));
|
||||
});
|
||||
});
|
||||
|
||||
@ -14,7 +14,7 @@ export const backgroundClip: IPropertyListDescriptor<BackgroundClip> = {
|
||||
prefix: false,
|
||||
type: PropertyDescriptorParsingType.LIST,
|
||||
parse: (tokens: CSSValue[]): BackgroundClip => {
|
||||
return tokens.map(token => {
|
||||
return tokens.map((token) => {
|
||||
if (isIdentToken(token)) {
|
||||
switch (token.value) {
|
||||
case 'padding-box':
|
||||
|
||||
@ -19,6 +19,6 @@ export const backgroundImage: IPropertyListDescriptor<ICSSImage[]> = {
|
||||
return [];
|
||||
}
|
||||
|
||||
return tokens.filter(value => nonFunctionArgSeparator(value) && isSupportedImage(value)).map(image.parse);
|
||||
return tokens.filter((value) => nonFunctionArgSeparator(value) && isSupportedImage(value)).map(image.parse);
|
||||
}
|
||||
};
|
||||
|
||||
@ -15,7 +15,7 @@ export const backgroundOrigin: IPropertyListDescriptor<BackgroundOrigin> = {
|
||||
prefix: false,
|
||||
type: PropertyDescriptorParsingType.LIST,
|
||||
parse: (tokens: CSSValue[]): BackgroundOrigin => {
|
||||
return tokens.map(token => {
|
||||
return tokens.map((token) => {
|
||||
if (isIdentToken(token)) {
|
||||
switch (token.value) {
|
||||
case 'padding-box':
|
||||
|
||||
@ -16,10 +16,10 @@ export const backgroundRepeat: IPropertyListDescriptor<BackgroundRepeat> = {
|
||||
type: PropertyDescriptorParsingType.LIST,
|
||||
parse: (tokens: CSSValue[]): BackgroundRepeat => {
|
||||
return parseFunctionArgs(tokens)
|
||||
.map(values =>
|
||||
.map((values) =>
|
||||
values
|
||||
.filter(isIdentToken)
|
||||
.map(token => token.value)
|
||||
.map((token) => token.value)
|
||||
.join(' ')
|
||||
)
|
||||
.map(parseBackgroundRepeat);
|
||||
|
||||
@ -18,7 +18,7 @@ export const backgroundSize: IPropertyListDescriptor<BackgroundSize> = {
|
||||
prefix: false,
|
||||
type: PropertyDescriptorParsingType.LIST,
|
||||
parse: (tokens: CSSValue[]): BackgroundSize => {
|
||||
return parseFunctionArgs(tokens).map(values => values.filter(isBackgroundSizeInfoToken));
|
||||
return parseFunctionArgs(tokens).map((values) => values.filter(isBackgroundSizeInfoToken));
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -14,7 +14,7 @@ export const fontFamily: IPropertyListDescriptor<FontFamily> = {
|
||||
parse: (tokens: CSSValue[]) => {
|
||||
const accumulator: string[] = [];
|
||||
const results: string[] = [];
|
||||
tokens.forEach(token => {
|
||||
tokens.forEach((token) => {
|
||||
switch (token.type) {
|
||||
case TokenType.IDENT_TOKEN:
|
||||
case TokenType.STRING_TOKEN:
|
||||
@ -32,6 +32,6 @@ export const fontFamily: IPropertyListDescriptor<FontFamily> = {
|
||||
if (accumulator.length) {
|
||||
results.push(accumulator.join(' '));
|
||||
}
|
||||
return results.map(result => (result.indexOf(' ') === -1 ? result : `'${result}'`));
|
||||
return results.map((result) => (result.indexOf(' ') === -1 ? result : `'${result}'`));
|
||||
}
|
||||
};
|
||||
|
||||
@ -6,6 +6,6 @@ export const fontVariant: IPropertyListDescriptor<string[]> = {
|
||||
type: PropertyDescriptorParsingType.LIST,
|
||||
prefix: false,
|
||||
parse: (tokens: CSSValue[]): string[] => {
|
||||
return tokens.filter(isIdentToken).map(token => token.value);
|
||||
return tokens.filter(isIdentToken).map((token) => token.value);
|
||||
}
|
||||
};
|
||||
|
||||
@ -13,7 +13,7 @@ export const overflow: IPropertyListDescriptor<OVERFLOW[]> = {
|
||||
prefix: false,
|
||||
type: PropertyDescriptorParsingType.LIST,
|
||||
parse: (tokens: CSSValue[]): OVERFLOW[] => {
|
||||
return tokens.filter(isIdentToken).map(overflow => {
|
||||
return tokens.filter(isIdentToken).map((overflow) => {
|
||||
switch (overflow.value) {
|
||||
case 'hidden':
|
||||
return OVERFLOW.HIDDEN;
|
||||
|
||||
@ -19,7 +19,7 @@ export const textDecorationLine: IPropertyListDescriptor<TextDecorationLine> = {
|
||||
parse: (tokens: CSSValue[]): TextDecorationLine => {
|
||||
return tokens
|
||||
.filter(isIdentToken)
|
||||
.map(token => {
|
||||
.map((token) => {
|
||||
switch (token.value) {
|
||||
case 'underline':
|
||||
return TEXT_DECORATION_LINE.UNDERLINE;
|
||||
@ -32,6 +32,6 @@ export const textDecorationLine: IPropertyListDescriptor<TextDecorationLine> = {
|
||||
}
|
||||
return TEXT_DECORATION_LINE.NONE;
|
||||
})
|
||||
.filter(line => line !== TEXT_DECORATION_LINE.NONE);
|
||||
.filter((line) => line !== TEXT_DECORATION_LINE.NONE);
|
||||
}
|
||||
};
|
||||
|
||||
@ -27,14 +27,14 @@ export const transform: IPropertyValueDescriptor<Transform> = {
|
||||
};
|
||||
|
||||
const matrix = (args: CSSValue[]): Transform => {
|
||||
const values = args.filter(arg => arg.type === TokenType.NUMBER_TOKEN).map((arg: NumberValueToken) => arg.number);
|
||||
const values = args.filter((arg) => arg.type === TokenType.NUMBER_TOKEN).map((arg: NumberValueToken) => arg.number);
|
||||
|
||||
return values.length === 6 ? (values as Matrix) : null;
|
||||
};
|
||||
|
||||
// doesn't support 3D transforms at the moment
|
||||
const matrix3d = (args: CSSValue[]): Transform => {
|
||||
const values = args.filter(arg => arg.type === TokenType.NUMBER_TOKEN).map((arg: NumberValueToken) => arg.number);
|
||||
const values = args.filter((arg) => arg.type === TokenType.NUMBER_TOKEN).map((arg: NumberValueToken) => arg.number);
|
||||
|
||||
const [a1, b1, {}, {}, a2, b2, {}, {}, {}, {}, {}, {}, a4, b4, {}, {}] = values;
|
||||
|
||||
|
||||
@ -74,7 +74,7 @@ export class Parser {
|
||||
parseComponentValues(): CSSValue[] {
|
||||
const values = [];
|
||||
while (true) {
|
||||
let value = this.consumeComponentValue();
|
||||
const value = this.consumeComponentValue();
|
||||
if (value.type === TokenType.EOF_TOKEN) {
|
||||
return values;
|
||||
}
|
||||
@ -148,14 +148,14 @@ export const isStringToken = (token: CSSValue): token is StringValueToken => tok
|
||||
export const isIdentWithValue = (token: CSSValue, value: string): boolean =>
|
||||
isIdentToken(token) && token.value === value;
|
||||
|
||||
export const nonWhiteSpace = (token: CSSValue) => token.type !== TokenType.WHITESPACE_TOKEN;
|
||||
export const nonFunctionArgSeparator = (token: CSSValue) =>
|
||||
export const nonWhiteSpace = (token: CSSValue): boolean => token.type !== TokenType.WHITESPACE_TOKEN;
|
||||
export const nonFunctionArgSeparator = (token: CSSValue): boolean =>
|
||||
token.type !== TokenType.WHITESPACE_TOKEN && token.type !== TokenType.COMMA_TOKEN;
|
||||
|
||||
export const parseFunctionArgs = (tokens: CSSValue[]): CSSValue[][] => {
|
||||
const args: CSSValue[][] = [];
|
||||
let arg: CSSValue[] = [];
|
||||
tokens.forEach(token => {
|
||||
tokens.forEach((token) => {
|
||||
if (token.type === TokenType.COMMA_TOKEN) {
|
||||
if (arg.length === 0) {
|
||||
throw new Error(`Error parsing function args, zero tokens for arg`);
|
||||
|
||||
@ -315,7 +315,7 @@ export class Tokenizer {
|
||||
this._value = [];
|
||||
}
|
||||
|
||||
write(chunk: string) {
|
||||
write(chunk: string): void {
|
||||
this._value = this._value.concat(toCodePoints(chunk));
|
||||
}
|
||||
|
||||
@ -542,8 +542,11 @@ export class Tokenizer {
|
||||
}
|
||||
|
||||
if (questionMarks) {
|
||||
const start = parseInt(fromCodePoint(...digits.map(digit => (digit === QUESTION_MARK ? ZERO : digit))), 16);
|
||||
const end = parseInt(fromCodePoint(...digits.map(digit => (digit === QUESTION_MARK ? F : digit))), 16);
|
||||
const start = parseInt(
|
||||
fromCodePoint(...digits.map((digit) => (digit === QUESTION_MARK ? ZERO : digit))),
|
||||
16
|
||||
);
|
||||
const end = parseInt(fromCodePoint(...digits.map((digit) => (digit === QUESTION_MARK ? F : digit))), 16);
|
||||
return {type: TokenType.UNICODE_RANGE_TOKEN, start, end};
|
||||
}
|
||||
|
||||
@ -642,7 +645,7 @@ export class Tokenizer {
|
||||
|
||||
private consumeBadUrlRemnants(): void {
|
||||
while (true) {
|
||||
let codePoint = this.consumeCodePoint();
|
||||
const codePoint = this.consumeCodePoint();
|
||||
if (codePoint === RIGHT_PARENTHESIS || codePoint === EOF) {
|
||||
return;
|
||||
}
|
||||
@ -702,7 +705,7 @@ export class Tokenizer {
|
||||
}
|
||||
|
||||
private consumeNumber() {
|
||||
let repr = [];
|
||||
const repr = [];
|
||||
let type = FLAG_INTEGER;
|
||||
let c1 = this.peekCodePoint(0);
|
||||
if (c1 === PLUS_SIGN || c1 === HYPHEN_MINUS) {
|
||||
@ -724,7 +727,7 @@ export class Tokenizer {
|
||||
|
||||
c1 = this.peekCodePoint(0);
|
||||
c2 = this.peekCodePoint(1);
|
||||
let c3 = this.peekCodePoint(2);
|
||||
const c3 = this.peekCodePoint(2);
|
||||
if ((c1 === E || c1 === e) && (((c2 === PLUS_SIGN || c2 === HYPHEN_MINUS) && isDigit(c3)) || isDigit(c2))) {
|
||||
repr.push(this.consumeCodePoint(), this.consumeCodePoint());
|
||||
type = FLAG_NUMBER;
|
||||
@ -743,7 +746,7 @@ export class Tokenizer {
|
||||
const c3 = this.peekCodePoint(2);
|
||||
|
||||
if (isIdentifierStart(c1, c2, c3)) {
|
||||
let unit = this.consumeName();
|
||||
const unit = this.consumeName();
|
||||
return {type: TokenType.DIMENSION_TOKEN, number, flags, unit};
|
||||
}
|
||||
|
||||
|
||||
@ -40,25 +40,37 @@ describe('types', () => {
|
||||
deepStrictEqual(parse('linear-gradient(yellow, blue)'), {
|
||||
angle: deg(180),
|
||||
type: CSSImageType.LINEAR_GRADIENT,
|
||||
stops: [{color: colorParse('yellow'), stop: null}, {color: colorParse('blue'), stop: null}]
|
||||
stops: [
|
||||
{color: colorParse('yellow'), stop: null},
|
||||
{color: colorParse('blue'), stop: null}
|
||||
]
|
||||
}));
|
||||
it('linear-gradient(to bottom, yellow, blue)', () =>
|
||||
deepStrictEqual(parse('linear-gradient(to bottom, yellow, blue)'), {
|
||||
angle: deg(180),
|
||||
type: CSSImageType.LINEAR_GRADIENT,
|
||||
stops: [{color: colorParse('yellow'), stop: null}, {color: colorParse('blue'), stop: null}]
|
||||
stops: [
|
||||
{color: colorParse('yellow'), stop: null},
|
||||
{color: colorParse('blue'), stop: null}
|
||||
]
|
||||
}));
|
||||
it('linear-gradient(180deg, yellow, blue)', () =>
|
||||
deepStrictEqual(parse('linear-gradient(180deg, yellow, blue)'), {
|
||||
angle: deg(180),
|
||||
type: CSSImageType.LINEAR_GRADIENT,
|
||||
stops: [{color: colorParse('yellow'), stop: null}, {color: colorParse('blue'), stop: null}]
|
||||
stops: [
|
||||
{color: colorParse('yellow'), stop: null},
|
||||
{color: colorParse('blue'), stop: null}
|
||||
]
|
||||
}));
|
||||
it('linear-gradient(to top, blue, yellow)', () =>
|
||||
deepStrictEqual(parse('linear-gradient(to top, blue, yellow)'), {
|
||||
angle: 0,
|
||||
type: CSSImageType.LINEAR_GRADIENT,
|
||||
stops: [{color: colorParse('blue'), stop: null}, {color: colorParse('yellow'), stop: null}]
|
||||
stops: [
|
||||
{color: colorParse('blue'), stop: null},
|
||||
{color: colorParse('yellow'), stop: null}
|
||||
]
|
||||
}));
|
||||
it('linear-gradient(to top right, blue, yellow)', () =>
|
||||
deepStrictEqual(parse('linear-gradient(to top right, blue, yellow)'), {
|
||||
@ -67,7 +79,10 @@ describe('types', () => {
|
||||
{type: TokenType.NUMBER_TOKEN, number: 0, flags: 4}
|
||||
],
|
||||
type: CSSImageType.LINEAR_GRADIENT,
|
||||
stops: [{color: colorParse('blue'), stop: null}, {color: colorParse('yellow'), stop: null}]
|
||||
stops: [
|
||||
{color: colorParse('blue'), stop: null},
|
||||
{color: colorParse('yellow'), stop: null}
|
||||
]
|
||||
}));
|
||||
it('linear-gradient(to bottom, yellow 0%, blue 100%)', () =>
|
||||
deepStrictEqual(parse('linear-gradient(to bottom, yellow 0%, blue 100%)'), {
|
||||
|
||||
@ -41,7 +41,7 @@ export const isAngle = (value: CSSValue): boolean => {
|
||||
export const parseNamedSide = (tokens: CSSValue[]): number | GradientCorner => {
|
||||
const sideOrCorner = tokens
|
||||
.filter(isIdentToken)
|
||||
.map(ident => ident.value)
|
||||
.map((ident) => ident.value)
|
||||
.join(' ');
|
||||
|
||||
switch (sideOrCorner) {
|
||||
|
||||
@ -59,9 +59,9 @@ export const color: ITypeDescriptor<Color> = {
|
||||
}
|
||||
};
|
||||
|
||||
export const isTransparent = (color: Color) => (0xff & color) === 0;
|
||||
export const isTransparent = (color: Color): boolean => (0xff & color) === 0;
|
||||
|
||||
export const asString = (color: Color) => {
|
||||
export const asString = (color: Color): string => {
|
||||
const alpha = 0xff & color;
|
||||
const blue = 0xff & (color >> 8);
|
||||
const green = 0xff & (color >> 16);
|
||||
|
||||
@ -14,11 +14,11 @@ import {color as colorType} from '../color';
|
||||
import {HUNDRED_PERCENT, LengthPercentage, ZERO_LENGTH} from '../length-percentage';
|
||||
|
||||
export const webkitGradient = (tokens: CSSValue[]): CSSLinearGradientImage | CSSRadialGradientImage => {
|
||||
let angle = deg(180);
|
||||
const angle = deg(180);
|
||||
const stops: UnprocessedGradientColorStop[] = [];
|
||||
let type = CSSImageType.LINEAR_GRADIENT;
|
||||
let shape: CSSRadialShape = CSSRadialShape.CIRCLE;
|
||||
let size: CSSRadialSize = CSSRadialExtent.FARTHEST_CORNER;
|
||||
const shape: CSSRadialShape = CSSRadialShape.CIRCLE;
|
||||
const size: CSSRadialSize = CSSRadialExtent.FARTHEST_CORNER;
|
||||
const position: LengthPercentage[] = [];
|
||||
parseFunctionArgs(tokens).forEach((arg, i) => {
|
||||
const firstToken = arg[0];
|
||||
|
||||
@ -55,7 +55,10 @@ describe('functions', () => {
|
||||
shape: CSSRadialShape.CIRCLE,
|
||||
size: [{type: TokenType.DIMENSION_TOKEN, number: 20, flags: 4, unit: 'px'}],
|
||||
position: [],
|
||||
stops: [{color: colorParse('red'), stop: null}, {color: colorParse('blue'), stop: null}]
|
||||
stops: [
|
||||
{color: colorParse('red'), stop: null},
|
||||
{color: colorParse('blue'), stop: null}
|
||||
]
|
||||
}));
|
||||
});
|
||||
});
|
||||
|
||||
@ -9,7 +9,7 @@ export class CounterState {
|
||||
this.counters = {};
|
||||
}
|
||||
|
||||
getCounterValue(name: string) {
|
||||
getCounterValue(name: string): number {
|
||||
const counter = this.counters[name];
|
||||
|
||||
if (counter && counter.length) {
|
||||
@ -23,8 +23,8 @@ export class CounterState {
|
||||
return counter ? counter : [];
|
||||
}
|
||||
|
||||
pop(counters: string[]) {
|
||||
counters.forEach(counter => this.counters[counter].pop());
|
||||
pop(counters: string[]): void {
|
||||
counters.forEach((counter) => this.counters[counter].pop());
|
||||
}
|
||||
|
||||
parse(style: CSSParsedCounterDeclaration): string[] {
|
||||
@ -33,7 +33,7 @@ export class CounterState {
|
||||
let canReset = true;
|
||||
|
||||
if (counterIncrement !== null) {
|
||||
counterIncrement.forEach(entry => {
|
||||
counterIncrement.forEach((entry) => {
|
||||
const counter = this.counters[entry.counter];
|
||||
if (counter && entry.increment !== 0) {
|
||||
canReset = false;
|
||||
@ -44,7 +44,7 @@ export class CounterState {
|
||||
|
||||
const counterNames: string[] = [];
|
||||
if (canReset) {
|
||||
counterReset.forEach(entry => {
|
||||
counterReset.forEach((entry) => {
|
||||
let counter = this.counters[entry.counter];
|
||||
counterNames.push(entry.counter);
|
||||
if (!counter) {
|
||||
@ -70,42 +70,8 @@ const ROMAN_UPPER: CounterSymbols = {
|
||||
|
||||
const ARMENIAN: CounterSymbols = {
|
||||
integers: [
|
||||
9000,
|
||||
8000,
|
||||
7000,
|
||||
6000,
|
||||
5000,
|
||||
4000,
|
||||
3000,
|
||||
2000,
|
||||
1000,
|
||||
900,
|
||||
800,
|
||||
700,
|
||||
600,
|
||||
500,
|
||||
400,
|
||||
300,
|
||||
200,
|
||||
100,
|
||||
90,
|
||||
80,
|
||||
70,
|
||||
60,
|
||||
50,
|
||||
40,
|
||||
30,
|
||||
20,
|
||||
10,
|
||||
9,
|
||||
8,
|
||||
7,
|
||||
6,
|
||||
5,
|
||||
4,
|
||||
3,
|
||||
2,
|
||||
1
|
||||
9000, 8000, 7000, 6000, 5000, 4000, 3000, 2000, 1000, 900, 800, 700, 600, 500, 400, 300, 200, 100, 90, 80, 70,
|
||||
60, 50, 40, 30, 20, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1
|
||||
],
|
||||
values: [
|
||||
'Ք',
|
||||
@ -149,43 +115,8 @@ const ARMENIAN: CounterSymbols = {
|
||||
|
||||
const HEBREW: CounterSymbols = {
|
||||
integers: [
|
||||
10000,
|
||||
9000,
|
||||
8000,
|
||||
7000,
|
||||
6000,
|
||||
5000,
|
||||
4000,
|
||||
3000,
|
||||
2000,
|
||||
1000,
|
||||
400,
|
||||
300,
|
||||
200,
|
||||
100,
|
||||
90,
|
||||
80,
|
||||
70,
|
||||
60,
|
||||
50,
|
||||
40,
|
||||
30,
|
||||
20,
|
||||
19,
|
||||
18,
|
||||
17,
|
||||
16,
|
||||
15,
|
||||
10,
|
||||
9,
|
||||
8,
|
||||
7,
|
||||
6,
|
||||
5,
|
||||
4,
|
||||
3,
|
||||
2,
|
||||
1
|
||||
10000, 9000, 8000, 7000, 6000, 5000, 4000, 3000, 2000, 1000, 400, 300, 200, 100, 90, 80, 70, 60, 50, 40, 30, 20,
|
||||
19, 18, 17, 16, 15, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1
|
||||
],
|
||||
values: [
|
||||
'י׳',
|
||||
@ -230,43 +161,8 @@ const HEBREW: CounterSymbols = {
|
||||
|
||||
const GEORGIAN: CounterSymbols = {
|
||||
integers: [
|
||||
10000,
|
||||
9000,
|
||||
8000,
|
||||
7000,
|
||||
6000,
|
||||
5000,
|
||||
4000,
|
||||
3000,
|
||||
2000,
|
||||
1000,
|
||||
900,
|
||||
800,
|
||||
700,
|
||||
600,
|
||||
500,
|
||||
400,
|
||||
300,
|
||||
200,
|
||||
100,
|
||||
90,
|
||||
80,
|
||||
70,
|
||||
60,
|
||||
50,
|
||||
40,
|
||||
30,
|
||||
20,
|
||||
10,
|
||||
9,
|
||||
8,
|
||||
7,
|
||||
6,
|
||||
5,
|
||||
4,
|
||||
3,
|
||||
2,
|
||||
1
|
||||
10000, 9000, 8000, 7000, 6000, 5000, 4000, 3000, 2000, 1000, 900, 800, 700, 600, 500, 400, 300, 200, 100, 90,
|
||||
80, 70, 60, 50, 40, 30, 20, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1
|
||||
],
|
||||
values: [
|
||||
'ჵ',
|
||||
@ -362,21 +258,21 @@ const createCounterStyleFromRange = (
|
||||
|
||||
return (
|
||||
(value < 0 ? '-' : '') +
|
||||
(createCounterStyleWithSymbolResolver(Math.abs(value), codePointRangeLength, isNumeric, codePoint =>
|
||||
(createCounterStyleWithSymbolResolver(Math.abs(value), codePointRangeLength, isNumeric, (codePoint) =>
|
||||
fromCodePoint(Math.floor(codePoint % codePointRangeLength) + codePointRangeStart)
|
||||
) +
|
||||
suffix)
|
||||
);
|
||||
};
|
||||
|
||||
const createCounterStyleFromSymbols = (value: number, symbols: string, suffix: string = '. '): string => {
|
||||
const createCounterStyleFromSymbols = (value: number, symbols: string, suffix = '. '): string => {
|
||||
const codePointRangeLength = symbols.length;
|
||||
return (
|
||||
createCounterStyleWithSymbolResolver(
|
||||
Math.abs(value),
|
||||
codePointRangeLength,
|
||||
false,
|
||||
codePoint => symbols[Math.floor(codePoint % codePointRangeLength)]
|
||||
(codePoint) => symbols[Math.floor(codePoint % codePointRangeLength)]
|
||||
) + suffix
|
||||
);
|
||||
};
|
||||
@ -405,7 +301,7 @@ const createCJKCounter = (
|
||||
}
|
||||
|
||||
for (let digit = 0; tmp > 0 && digit <= 4; digit++) {
|
||||
let coefficient = tmp % 10;
|
||||
const coefficient = tmp % 10;
|
||||
|
||||
if (coefficient === 0 && contains(flags, CJK_ZEROS) && string !== '') {
|
||||
string = numbers[coefficient] + string;
|
||||
|
||||
@ -98,7 +98,12 @@ export const calculateGradientDirection = (
|
||||
const distance = (a: number, b: number): number => Math.sqrt(a * a + b * b);
|
||||
|
||||
const findCorner = (width: number, height: number, x: number, y: number, closest: boolean): [number, number] => {
|
||||
const corners = [[0, 0], [0, height], [width, 0], [width, height]];
|
||||
const corners = [
|
||||
[0, 0],
|
||||
[0, height],
|
||||
[width, 0],
|
||||
[width, height]
|
||||
];
|
||||
|
||||
return corners.reduce(
|
||||
(stat, corner) => {
|
||||
|
||||
@ -98,8 +98,8 @@ export const image: ITypeDescriptor<ICSSImage> = {
|
||||
}
|
||||
};
|
||||
|
||||
export function isSupportedImage(value: CSSValue) {
|
||||
return value.type !== TokenType.FUNCTION || SUPPORTED_IMAGE_FUNCTIONS[value.name];
|
||||
export function isSupportedImage(value: CSSValue): boolean {
|
||||
return value.type !== TokenType.FUNCTION || !!SUPPORTED_IMAGE_FUNCTIONS[value.name];
|
||||
}
|
||||
|
||||
const SUPPORTED_IMAGE_FUNCTIONS: Record<string, (args: CSSValue[]) => ICSSImage> = {
|
||||
|
||||
@ -31,10 +31,10 @@ export const getAbsoluteValueForTuple = (
|
||||
width: number,
|
||||
height: number
|
||||
): [number, number] => {
|
||||
let [x, y] = tuple;
|
||||
const [x, y] = tuple;
|
||||
return [getAbsoluteValue(x, width), getAbsoluteValue(typeof y !== 'undefined' ? y : x, height)];
|
||||
};
|
||||
export const getAbsoluteValue = (token: LengthPercentage, parent: number) => {
|
||||
export const getAbsoluteValue = (token: LengthPercentage, parent: number): number => {
|
||||
if (token.type === TokenType.PERCENTAGE_TOKEN) {
|
||||
return (token.number / 100) * parent;
|
||||
}
|
||||
|
||||
@ -2,15 +2,14 @@ export class DocumentCloner {
|
||||
clonedReferenceElement?: HTMLElement;
|
||||
|
||||
constructor() {
|
||||
// eslint-disable-next-line @typescript-eslint/no-object-literal-type-assertion
|
||||
this.clonedReferenceElement = {} as HTMLElement;
|
||||
}
|
||||
|
||||
toIFrame() {
|
||||
return Promise.resolve({});
|
||||
toIFrame(): Promise<HTMLIFrameElement> {
|
||||
return Promise.resolve({} as HTMLIFrameElement);
|
||||
}
|
||||
|
||||
static destroy() {
|
||||
static destroy(): boolean {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
@ -130,9 +130,7 @@ export class DocumentCloner {
|
||||
}
|
||||
|
||||
const clone = node.cloneNode(false) as T;
|
||||
// @ts-ignore
|
||||
if (isImageElement(clone) && clone.loading === 'lazy') {
|
||||
// @ts-ignore
|
||||
clone.loading = 'eager';
|
||||
}
|
||||
|
||||
@ -351,7 +349,7 @@ export class DocumentCloner {
|
||||
const anonymousReplacedElement = document.createElement('html2canvaspseudoelement');
|
||||
copyCSSStyles(style, anonymousReplacedElement);
|
||||
|
||||
declaration.content.forEach(token => {
|
||||
declaration.content.forEach((token) => {
|
||||
if (token.type === TokenType.STRING_TOKEN) {
|
||||
anonymousReplacedElement.appendChild(document.createTextNode(token.value));
|
||||
} else if (token.type === TokenType.URL_TOKEN) {
|
||||
@ -390,7 +388,7 @@ export class DocumentCloner {
|
||||
: LIST_STYLE_TYPE.DECIMAL;
|
||||
const separator = delim && delim.type === TokenType.STRING_TOKEN ? delim.value : '';
|
||||
const text = counterStates
|
||||
.map(value => createCounterText(value, counterType, false))
|
||||
.map((value) => createCounterText(value, counterType, false))
|
||||
.join(separator);
|
||||
|
||||
anonymousReplacedElement.appendChild(document.createTextNode(text));
|
||||
@ -474,15 +472,18 @@ const iframeLoader = (iframe: HTMLIFrameElement): Promise<HTMLIFrameElement> =>
|
||||
|
||||
const documentClone = cloneWindow.document;
|
||||
|
||||
cloneWindow.onload = iframe.onload = documentClone.onreadystatechange = () => {
|
||||
cloneWindow.onload = iframe.onload = documentClone.onreadystatechange = null;
|
||||
const interval = setInterval(() => {
|
||||
if (documentClone.body.childNodes.length > 0 && documentClone.readyState === 'complete') {
|
||||
clearInterval(interval);
|
||||
resolve(iframe);
|
||||
}
|
||||
}, 50);
|
||||
};
|
||||
cloneWindow.onload =
|
||||
iframe.onload =
|
||||
documentClone.onreadystatechange =
|
||||
() => {
|
||||
cloneWindow.onload = iframe.onload = documentClone.onreadystatechange = null;
|
||||
const interval = setInterval(() => {
|
||||
if (documentClone.body.childNodes.length > 0 && documentClone.readyState === 'complete') {
|
||||
clearInterval(interval);
|
||||
resolve(iframe);
|
||||
}
|
||||
}, 50);
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
@ -28,8 +28,9 @@ export class IFrameElementContainer extends ElementContainer {
|
||||
|
||||
// http://www.w3.org/TR/css3-background/#special-backgrounds
|
||||
const documentBackgroundColor = iframe.contentWindow.document.documentElement
|
||||
? parseColor(getComputedStyle(iframe.contentWindow.document.documentElement)
|
||||
.backgroundColor as string)
|
||||
? parseColor(
|
||||
getComputedStyle(iframe.contentWindow.document.documentElement).backgroundColor as string
|
||||
)
|
||||
: COLORS.TRANSPARENT;
|
||||
const bodyBackgroundColor = iframe.contentWindow.document.body
|
||||
? parseColor(getComputedStyle(iframe.contentWindow.document.body).backgroundColor as string)
|
||||
|
||||
@ -56,10 +56,21 @@ export class InputElementContainer extends ElementContainer {
|
||||
|
||||
if (this.type === CHECKBOX || this.type === RADIO) {
|
||||
this.styles.backgroundColor = 0xdededeff;
|
||||
this.styles.borderTopColor = this.styles.borderRightColor = this.styles.borderBottomColor = this.styles.borderLeftColor = 0xa5a5a5ff;
|
||||
this.styles.borderTopWidth = this.styles.borderRightWidth = this.styles.borderBottomWidth = this.styles.borderLeftWidth = 1;
|
||||
this.styles.borderTopStyle = this.styles.borderRightStyle = this.styles.borderBottomStyle = this.styles.borderLeftStyle =
|
||||
BORDER_STYLE.SOLID;
|
||||
this.styles.borderTopColor =
|
||||
this.styles.borderRightColor =
|
||||
this.styles.borderBottomColor =
|
||||
this.styles.borderLeftColor =
|
||||
0xa5a5a5ff;
|
||||
this.styles.borderTopWidth =
|
||||
this.styles.borderRightWidth =
|
||||
this.styles.borderBottomWidth =
|
||||
this.styles.borderLeftWidth =
|
||||
1;
|
||||
this.styles.borderTopStyle =
|
||||
this.styles.borderRightStyle =
|
||||
this.styles.borderBottomStyle =
|
||||
this.styles.borderLeftStyle =
|
||||
BORDER_STYLE.SOLID;
|
||||
this.styles.backgroundClip = [BACKGROUND_CLIP.BORDER_BOX];
|
||||
this.styles.backgroundOrigin = [BACKGROUND_ORIGIN.BORDER_BOX];
|
||||
this.bounds = reformatInputBounds(this.bounds);
|
||||
@ -67,10 +78,18 @@ export class InputElementContainer extends ElementContainer {
|
||||
|
||||
switch (this.type) {
|
||||
case CHECKBOX:
|
||||
this.styles.borderTopRightRadius = this.styles.borderTopLeftRadius = this.styles.borderBottomRightRadius = this.styles.borderBottomLeftRadius = CHECKBOX_BORDER_RADIUS;
|
||||
this.styles.borderTopRightRadius =
|
||||
this.styles.borderTopLeftRadius =
|
||||
this.styles.borderBottomRightRadius =
|
||||
this.styles.borderBottomLeftRadius =
|
||||
CHECKBOX_BORDER_RADIUS;
|
||||
break;
|
||||
case RADIO:
|
||||
this.styles.borderTopRightRadius = this.styles.borderTopLeftRadius = this.styles.borderBottomRightRadius = this.styles.borderBottomLeftRadius = RADIO_BORDER_RADIUS;
|
||||
this.styles.borderTopRightRadius =
|
||||
this.styles.borderTopLeftRadius =
|
||||
this.styles.borderBottomRightRadius =
|
||||
this.styles.borderBottomLeftRadius =
|
||||
RADIO_BORDER_RADIUS;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
1
src/global.d.ts
vendored
1
src/global.d.ts
vendored
@ -9,5 +9,6 @@ interface DocumentType extends Node, ChildNode {
|
||||
}
|
||||
|
||||
interface Document {
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
fonts: any;
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
export const invariant = (assertion: boolean, error: string) => {
|
||||
export const invariant = (assertion: boolean, error: string): void => {
|
||||
if (!assertion) {
|
||||
console.error(error);
|
||||
}
|
||||
|
||||
@ -218,7 +218,7 @@ export const calculateBackgroundRepeatPath = (
|
||||
[width, height]: [number, number],
|
||||
backgroundPositioningArea: Bounds,
|
||||
backgroundPaintingArea: Bounds
|
||||
) => {
|
||||
): [Vector, Vector, Vector, Vector] => {
|
||||
switch (repeat) {
|
||||
case BACKGROUND_REPEAT.REPEAT_X:
|
||||
return [
|
||||
|
||||
@ -88,21 +88,19 @@ export class CanvasRenderer {
|
||||
this.ctx.textBaseline = 'bottom';
|
||||
this._activeEffects = [];
|
||||
Logger.getInstance(options.id).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} at ${options.x},${options.y}) with scale ${options.scale}`
|
||||
);
|
||||
}
|
||||
|
||||
applyEffects(effects: IElementEffect[], target: EffectTarget) {
|
||||
applyEffects(effects: IElementEffect[], target: EffectTarget): void {
|
||||
while (this._activeEffects.length) {
|
||||
this.popEffect();
|
||||
}
|
||||
|
||||
effects.filter(effect => contains(effect.target, target)).forEach(effect => this.applyEffect(effect));
|
||||
effects.filter((effect) => contains(effect.target, target)).forEach((effect) => this.applyEffect(effect));
|
||||
}
|
||||
|
||||
applyEffect(effect: IElementEffect) {
|
||||
applyEffect(effect: IElementEffect): void {
|
||||
this.ctx.save();
|
||||
if (isOpacityEffect(effect)) {
|
||||
this.ctx.globalAlpha = effect.opacity;
|
||||
@ -129,30 +127,30 @@ export class CanvasRenderer {
|
||||
this._activeEffects.push(effect);
|
||||
}
|
||||
|
||||
popEffect() {
|
||||
popEffect(): void {
|
||||
this._activeEffects.pop();
|
||||
this.ctx.restore();
|
||||
}
|
||||
|
||||
async renderStack(stack: StackingContext) {
|
||||
async renderStack(stack: StackingContext): Promise<void> {
|
||||
const styles = stack.element.container.styles;
|
||||
if (styles.isVisible()) {
|
||||
await this.renderStackContent(stack);
|
||||
}
|
||||
}
|
||||
|
||||
async renderNode(paint: ElementPaint) {
|
||||
async renderNode(paint: ElementPaint): Promise<void> {
|
||||
if (paint.container.styles.isVisible()) {
|
||||
await this.renderNodeBackgroundAndBorders(paint);
|
||||
await this.renderNodeContent(paint);
|
||||
}
|
||||
}
|
||||
|
||||
renderTextWithLetterSpacing(text: TextBounds, letterSpacing: number, baseline: number) {
|
||||
renderTextWithLetterSpacing(text: TextBounds, letterSpacing: number, baseline: number): void {
|
||||
if (letterSpacing === 0) {
|
||||
this.ctx.fillText(text.text, text.bounds.left, text.bounds.top + baseline);
|
||||
} else {
|
||||
const letters = toCodePoints(text.text).map(i => fromCodePoint(i));
|
||||
const letters = toCodePoints(text.text).map((i) => fromCodePoint(i));
|
||||
letters.reduce((left, letter) => {
|
||||
this.ctx.fillText(letter, left, text.bounds.top + baseline);
|
||||
|
||||
@ -163,7 +161,7 @@ export class CanvasRenderer {
|
||||
|
||||
private createFontStyle(styles: CSSParsedDeclaration): string[] {
|
||||
const fontVariant = styles.fontVariant
|
||||
.filter(variant => variant === 'normal' || variant === 'small-caps')
|
||||
.filter((variant) => variant === 'normal' || variant === 'small-caps')
|
||||
.join('');
|
||||
const fontFamily = styles.fontFamily.join(', ');
|
||||
const fontSize = isDimensionToken(styles.fontSize)
|
||||
@ -177,7 +175,7 @@ export class CanvasRenderer {
|
||||
];
|
||||
}
|
||||
|
||||
async renderTextNode(text: TextContainer, styles: CSSParsedDeclaration) {
|
||||
async renderTextNode(text: TextContainer, styles: CSSParsedDeclaration): Promise<void> {
|
||||
const [font, fontFamily, fontSize] = this.createFontStyle(styles);
|
||||
|
||||
this.ctx.font = font;
|
||||
@ -185,7 +183,7 @@ export class CanvasRenderer {
|
||||
|
||||
const {baseline, middle} = this.fontMetrics.getMetrics(fontFamily, fontSize);
|
||||
|
||||
text.textBounds.forEach(text => {
|
||||
text.textBounds.forEach((text) => {
|
||||
this.ctx.fillStyle = asString(styles.color);
|
||||
this.renderTextWithLetterSpacing(text, styles.letterSpacing, baseline);
|
||||
const textShadows: TextShadow = styles.textShadow;
|
||||
@ -194,7 +192,7 @@ export class CanvasRenderer {
|
||||
textShadows
|
||||
.slice(0)
|
||||
.reverse()
|
||||
.forEach(textShadow => {
|
||||
.forEach((textShadow) => {
|
||||
this.ctx.shadowColor = asString(textShadow.color);
|
||||
this.ctx.shadowOffsetX = textShadow.offsetX.number * this.options.scale;
|
||||
this.ctx.shadowOffsetY = textShadow.offsetY.number * this.options.scale;
|
||||
@ -211,7 +209,7 @@ export class CanvasRenderer {
|
||||
|
||||
if (styles.textDecorationLine.length) {
|
||||
this.ctx.fillStyle = asString(styles.textDecorationColor || styles.color);
|
||||
styles.textDecorationLine.forEach(textDecorationLine => {
|
||||
styles.textDecorationLine.forEach((textDecorationLine) => {
|
||||
switch (textDecorationLine) {
|
||||
case TEXT_DECORATION_LINE.UNDERLINE:
|
||||
// Draws a line at the baseline of the font
|
||||
@ -247,7 +245,7 @@ export class CanvasRenderer {
|
||||
container: ReplacedElementContainer,
|
||||
curves: BoundCurves,
|
||||
image: HTMLImageElement | HTMLCanvasElement
|
||||
) {
|
||||
): void {
|
||||
if (image && container.intrinsicWidth > 0 && container.intrinsicHeight > 0) {
|
||||
const box = contentBox(container);
|
||||
const path = calculatePaddingBoxPath(curves);
|
||||
@ -269,7 +267,7 @@ export class CanvasRenderer {
|
||||
}
|
||||
}
|
||||
|
||||
async renderNodeContent(paint: ElementPaint) {
|
||||
async renderNodeContent(paint: ElementPaint): Promise<void> {
|
||||
this.applyEffects(paint.effects, EffectTarget.CONTENT);
|
||||
const container = paint.container;
|
||||
const curves = paint.curves;
|
||||
@ -456,7 +454,7 @@ export class CanvasRenderer {
|
||||
}
|
||||
}
|
||||
|
||||
async renderStackContent(stack: StackingContext) {
|
||||
async renderStackContent(stack: StackingContext): Promise<void> {
|
||||
// https://www.w3.org/TR/css-position-3/#painting-order
|
||||
// 1. the background and borders of the element forming the stacking context.
|
||||
await this.renderNodeBackgroundAndBorders(stack.element);
|
||||
@ -504,7 +502,7 @@ export class CanvasRenderer {
|
||||
}
|
||||
}
|
||||
|
||||
mask(paths: Path[]) {
|
||||
mask(paths: Path[]): void {
|
||||
this.ctx.beginPath();
|
||||
this.ctx.moveTo(0, 0);
|
||||
this.ctx.lineTo(this.canvas.width, 0);
|
||||
@ -515,13 +513,13 @@ export class CanvasRenderer {
|
||||
this.ctx.closePath();
|
||||
}
|
||||
|
||||
path(paths: Path[]) {
|
||||
path(paths: Path[]): void {
|
||||
this.ctx.beginPath();
|
||||
this.formatPath(paths);
|
||||
this.ctx.closePath();
|
||||
}
|
||||
|
||||
formatPath(paths: Path[]) {
|
||||
formatPath(paths: Path[]): void {
|
||||
paths.forEach((point, index) => {
|
||||
const start: Vector = isBezierCurve(point) ? point.start : point;
|
||||
if (index === 0) {
|
||||
@ -543,7 +541,7 @@ export class CanvasRenderer {
|
||||
});
|
||||
}
|
||||
|
||||
renderRepeat(path: Path[], pattern: CanvasPattern | CanvasGradient, offsetX: number, offsetY: number) {
|
||||
renderRepeat(path: Path[], pattern: CanvasPattern | CanvasGradient, offsetX: number, offsetY: number): void {
|
||||
this.path(path);
|
||||
this.ctx.fillStyle = pattern;
|
||||
this.ctx.translate(offsetX, offsetY);
|
||||
@ -564,7 +562,7 @@ export class CanvasRenderer {
|
||||
return canvas;
|
||||
}
|
||||
|
||||
async renderBackgroundImage(container: ElementContainer) {
|
||||
async renderBackgroundImage(container: ElementContainer): Promise<void> {
|
||||
let index = container.styles.backgroundImage.length - 1;
|
||||
for (const backgroundImage of container.styles.backgroundImage.slice(0).reverse()) {
|
||||
if (backgroundImage.type === CSSImageType.URL) {
|
||||
@ -598,7 +596,7 @@ export class CanvasRenderer {
|
||||
const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
|
||||
const gradient = ctx.createLinearGradient(x0, y0, x1, y1);
|
||||
|
||||
processColorStops(backgroundImage.stops, lineLength).forEach(colorStop =>
|
||||
processColorStops(backgroundImage.stops, lineLength).forEach((colorStop) =>
|
||||
gradient.addColorStop(colorStop.stop, asString(colorStop.color))
|
||||
);
|
||||
|
||||
@ -622,7 +620,7 @@ export class CanvasRenderer {
|
||||
if (rx > 0 && rx > 0) {
|
||||
const radialGradient = this.ctx.createRadialGradient(left + x, top + y, 0, left + x, top + y, rx);
|
||||
|
||||
processColorStops(backgroundImage.stops, rx * 2).forEach(colorStop =>
|
||||
processColorStops(backgroundImage.stops, rx * 2).forEach((colorStop) =>
|
||||
radialGradient.addColorStop(colorStop.stop, asString(colorStop.color))
|
||||
);
|
||||
|
||||
@ -651,13 +649,13 @@ export class CanvasRenderer {
|
||||
}
|
||||
}
|
||||
|
||||
async renderSolidBorder(color: Color, side: number, curvePoints: BoundCurves) {
|
||||
async renderSolidBorder(color: Color, side: number, curvePoints: BoundCurves): Promise<void> {
|
||||
this.path(parsePathForBorder(curvePoints, side));
|
||||
this.ctx.fillStyle = asString(color);
|
||||
this.ctx.fill();
|
||||
}
|
||||
|
||||
async renderDoubleBorder(color: Color, width: number, side: number, curvePoints: BoundCurves) {
|
||||
async renderDoubleBorder(color: Color, width: number, side: number, curvePoints: BoundCurves): Promise<void> {
|
||||
if (width < 3) {
|
||||
await this.renderSolidBorder(color, side, curvePoints);
|
||||
return;
|
||||
@ -672,7 +670,7 @@ export class CanvasRenderer {
|
||||
this.ctx.fill();
|
||||
}
|
||||
|
||||
async renderNodeBackgroundAndBorders(paint: ElementPaint) {
|
||||
async renderNodeBackgroundAndBorders(paint: ElementPaint): Promise<void> {
|
||||
this.applyEffects(paint.effects, EffectTarget.BACKGROUND_BORDERS);
|
||||
const styles = paint.container.styles;
|
||||
const hasBackground = !isTransparent(styles.backgroundColor) || styles.backgroundImage.length;
|
||||
@ -706,7 +704,7 @@ export class CanvasRenderer {
|
||||
styles.boxShadow
|
||||
.slice(0)
|
||||
.reverse()
|
||||
.forEach(shadow => {
|
||||
.forEach((shadow) => {
|
||||
this.ctx.save();
|
||||
const borderBoxArea = calculateBorderBoxPath(paint.curves);
|
||||
const maskOffset = shadow.inset ? 0 : MASK_OFFSET;
|
||||
@ -774,7 +772,7 @@ export class CanvasRenderer {
|
||||
side: number,
|
||||
curvePoints: BoundCurves,
|
||||
style: BORDER_STYLE
|
||||
) {
|
||||
): Promise<void> {
|
||||
this.ctx.save();
|
||||
|
||||
const strokePaths = parsePathForBorderStroke(curvePoints, side);
|
||||
|
||||
@ -20,13 +20,11 @@ export class ForeignObjectRenderer {
|
||||
this.ctx.scale(this.options.scale, this.options.scale);
|
||||
this.ctx.translate(-options.x + options.scrollX, -options.y + options.scrollY);
|
||||
Logger.getInstance(options.id).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) {
|
||||
async render(element: HTMLElement): Promise<HTMLCanvasElement> {
|
||||
const svg = createForeignObjectSVG(
|
||||
Math.max(this.options.windowWidth, this.options.width) * this.options.scale,
|
||||
Math.max(this.options.windowHeight, this.options.height) * this.options.scale,
|
||||
|
||||
@ -84,7 +84,7 @@ const parseStackTree = (
|
||||
realStackingContext: StackingContext,
|
||||
listItems: ElementPaint[]
|
||||
) => {
|
||||
parent.container.elements.forEach(child => {
|
||||
parent.container.elements.forEach((child) => {
|
||||
const treatAsRealStackingContext = contains(child.flags, FLAGS.CREATES_REAL_STACKING_CONTEXT);
|
||||
const createsStackingContext = contains(child.flags, FLAGS.CREATES_STACKING_CONTEXT);
|
||||
const paintContainer = new ElementPaint(child, parent.getParentEffects());
|
||||
|
||||
@ -25,9 +25,9 @@ servers.push(corsApp.listen(8081));
|
||||
|
||||
karmaTestRunner()
|
||||
.then(() => {
|
||||
servers.forEach(server => server.close());
|
||||
servers.forEach((server) => server.close());
|
||||
})
|
||||
.catch(e => {
|
||||
.catch((e) => {
|
||||
console.error(e);
|
||||
process.exit(1);
|
||||
});
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import nodeResolve from 'rollup-plugin-node-resolve';
|
||||
import commonjs from 'rollup-plugin-commonjs';
|
||||
import nodeResolve from '@rollup/plugin-node-resolve';
|
||||
import commonjs from '@rollup/plugin-commonjs';
|
||||
import sourceMaps from 'rollup-plugin-sourcemaps';
|
||||
import typescript from 'rollup-plugin-typescript2';
|
||||
import json from 'rollup-plugin-json';
|
||||
import typescript from '@rollup/plugin-typescript';
|
||||
import json from '@rollup/plugin-json';
|
||||
import {resolve} from 'path';
|
||||
|
||||
const pkg = require('../package.json');
|
||||
@ -36,14 +36,12 @@ export default {
|
||||
// Allow json resolution
|
||||
json(),
|
||||
// Compile TypeScript files
|
||||
typescript({useTsconfigDeclarationDir: true, tsconfig: resolve(__dirname, 'tsconfig.json')}),
|
||||
typescript({
|
||||
tsconfig: resolve(__dirname, 'tsconfig.json')
|
||||
}),
|
||||
// Allow bundling cjs modules (unlike webpack, rollup doesn't understand cjs)
|
||||
commonjs({
|
||||
include: 'node_modules/**',
|
||||
namedModules: {
|
||||
'node_modules/platform/platform.js': ['name', 'version'],
|
||||
'node_modules/es6-promise/dist/es6-promise.js': ['Promise']
|
||||
}
|
||||
include: 'node_modules/**'
|
||||
}),
|
||||
|
||||
// Resolve source maps to the original source
|
||||
|
||||
@ -42,11 +42,11 @@ const uploadResults = (canvas: HTMLCanvasElement, url: string) => {
|
||||
};
|
||||
|
||||
testList
|
||||
.filter(test => {
|
||||
.filter((test) => {
|
||||
return !Array.isArray(ignoredTests[test]) || ignoredTests[test].indexOf(platform.name || '') === -1;
|
||||
})
|
||||
.forEach(url => {
|
||||
describe(url, function() {
|
||||
.forEach((url) => {
|
||||
describe(url, function () {
|
||||
this.timeout(60000);
|
||||
this.retries(2);
|
||||
const windowWidth = 800;
|
||||
@ -58,7 +58,7 @@ testList
|
||||
testContainer.style.position = 'fixed';
|
||||
testContainer.style.left = '10000px';
|
||||
|
||||
before(done => {
|
||||
before((done) => {
|
||||
testContainer.onload = () => done();
|
||||
|
||||
testContainer.src = url + '?selenium&run=false&reftest&' + Math.random();
|
||||
|
||||
@ -1,6 +1,9 @@
|
||||
{
|
||||
"extends": "../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"types": ["node", "mocha"]
|
||||
}
|
||||
"types": ["node", "mocha"],
|
||||
"rootDir": "../",
|
||||
"declaration": false
|
||||
},
|
||||
"include": ["**/*.ts"]
|
||||
}
|
||||
|
||||
@ -6,14 +6,14 @@
|
||||
"noUnusedParameters": true,
|
||||
"strictNullChecks": true,
|
||||
"strictPropertyInitialization": true,
|
||||
"resolveJsonModule": true,
|
||||
"types": ["node", "jest"],
|
||||
"target": "es5",
|
||||
"lib": ["es2015", "dom"],
|
||||
"sourceMap": true,
|
||||
"outDir": "dist/lib",
|
||||
"declaration": true,
|
||||
"declarationDir": "dist/types"
|
||||
"declarationDir": "dist/types",
|
||||
"resolveJsonModule": true
|
||||
},
|
||||
"include": [
|
||||
"src"
|
||||
|
||||
@ -62,7 +62,7 @@ const DOWN_ARROW = 40;
|
||||
const LEFT_ARROW = 37;
|
||||
const RIGHT_ARROW = 39;
|
||||
|
||||
window.addEventListener('keydown', e => {
|
||||
window.addEventListener('keydown', (e) => {
|
||||
if (testSelector && browserSelector) {
|
||||
if (e.keyCode === UP_ARROW) {
|
||||
testSelector.selectedIndex = Math.max(0, testSelector.selectedIndex - 1);
|
||||
@ -103,7 +103,7 @@ if (testSelector && browserSelector) {
|
||||
browserSelector.addEventListener(
|
||||
'change',
|
||||
() => {
|
||||
testList[testSelector.value].some(browser => {
|
||||
testList[testSelector.value].some((browser) => {
|
||||
if (browser.id === browserSelector.value) {
|
||||
if (browser) {
|
||||
onBrowserChange(browser);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user