html2canvas-pro 2.1.0 → 2.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/html2canvas-pro.esm.js +21 -7
- package/dist/html2canvas-pro.esm.js.map +1 -1
- package/dist/html2canvas-pro.js +21 -7
- package/dist/html2canvas-pro.js.map +1 -1
- package/dist/html2canvas-pro.min.js +3 -3
- package/dist/lib/core/cache-storage.js +2 -2
- package/dist/lib/core/features.js +2 -2
- package/dist/lib/render/canvas/background-renderer.js +6 -0
- package/dist/lib/render/canvas/canvas-renderer.js +5 -1
- package/dist/lib/render/canvas/foreignobject-renderer.js +5 -1
- package/package.json +3 -11
- package/dist/lib/invariant.js +0 -9
- package/dist/types/invariant.d.ts +0 -1
- package/src/__tests__/index.ts +0 -99
- package/src/config.ts +0 -107
- package/src/core/__mocks__/cache-storage.ts +0 -1
- package/src/core/__mocks__/context.ts +0 -19
- package/src/core/__mocks__/features.ts +0 -8
- package/src/core/__mocks__/logger.ts +0 -17
- package/src/core/__tests__/cache-storage.test.ts +0 -205
- package/src/core/__tests__/cache-storage.ts +0 -278
- package/src/core/__tests__/logger.ts +0 -29
- package/src/core/__tests__/validator.ts +0 -359
- package/src/core/bitwise.ts +0 -1
- package/src/core/cache-storage.ts +0 -315
- package/src/core/context.ts +0 -31
- package/src/core/debugger.ts +0 -32
- package/src/core/features.ts +0 -222
- package/src/core/logger.ts +0 -64
- package/src/core/origin-checker.ts +0 -57
- package/src/core/performance-monitor.ts +0 -241
- package/src/core/render-element.ts +0 -272
- package/src/core/util.ts +0 -1
- package/src/core/validator.ts +0 -593
- package/src/css/index.ts +0 -427
- package/src/css/layout/__mocks__/bounds.ts +0 -6
- package/src/css/layout/bounds.ts +0 -79
- package/src/css/layout/text.ts +0 -161
- package/src/css/property-descriptor.ts +0 -49
- package/src/css/property-descriptors/__tests__/background-tests.ts +0 -65
- package/src/css/property-descriptors/__tests__/clip-path.test.ts +0 -280
- package/src/css/property-descriptors/__tests__/font-family.ts +0 -25
- package/src/css/property-descriptors/__tests__/image-rendering-integration.test.ts +0 -153
- package/src/css/property-descriptors/__tests__/image-rendering-performance.test.ts +0 -175
- package/src/css/property-descriptors/__tests__/image-rendering.test.ts +0 -72
- package/src/css/property-descriptors/__tests__/paint-order.ts +0 -87
- package/src/css/property-descriptors/__tests__/text-shadow.ts +0 -94
- package/src/css/property-descriptors/__tests__/transform-tests.ts +0 -18
- package/src/css/property-descriptors/background-clip.ts +0 -30
- package/src/css/property-descriptors/background-color.ts +0 -9
- package/src/css/property-descriptors/background-image.ts +0 -27
- package/src/css/property-descriptors/background-origin.ts +0 -31
- package/src/css/property-descriptors/background-position.ts +0 -38
- package/src/css/property-descriptors/background-repeat.ts +0 -44
- package/src/css/property-descriptors/background-size.ts +0 -27
- package/src/css/property-descriptors/border-color.ts +0 -13
- package/src/css/property-descriptors/border-radius.ts +0 -19
- package/src/css/property-descriptors/border-style.ts +0 -34
- package/src/css/property-descriptors/border-width.ts +0 -20
- package/src/css/property-descriptors/box-shadow.ts +0 -60
- package/src/css/property-descriptors/clip-path.ts +0 -271
- package/src/css/property-descriptors/color.ts +0 -9
- package/src/css/property-descriptors/content.ts +0 -26
- package/src/css/property-descriptors/counter-increment.ts +0 -43
- package/src/css/property-descriptors/counter-reset.ts +0 -36
- package/src/css/property-descriptors/direction.ts +0 -23
- package/src/css/property-descriptors/display.ts +0 -117
- package/src/css/property-descriptors/duration.ts +0 -14
- package/src/css/property-descriptors/float.ts +0 -29
- package/src/css/property-descriptors/font-family.ts +0 -38
- package/src/css/property-descriptors/font-size.ts +0 -9
- package/src/css/property-descriptors/font-style.ts +0 -25
- package/src/css/property-descriptors/font-variant.ts +0 -12
- package/src/css/property-descriptors/font-weight.ts +0 -26
- package/src/css/property-descriptors/image-rendering.ts +0 -33
- package/src/css/property-descriptors/letter-spacing.ts +0 -25
- package/src/css/property-descriptors/line-break.ts +0 -22
- package/src/css/property-descriptors/line-height.ts +0 -22
- package/src/css/property-descriptors/list-style-image.ts +0 -19
- package/src/css/property-descriptors/list-style-position.ts +0 -22
- package/src/css/property-descriptors/list-style-type.ts +0 -179
- package/src/css/property-descriptors/margin.ts +0 -13
- package/src/css/property-descriptors/mix-blend-mode.ts +0 -35
- package/src/css/property-descriptors/object-fit.ts +0 -39
- package/src/css/property-descriptors/opacity.ts +0 -15
- package/src/css/property-descriptors/overflow-wrap.ts +0 -22
- package/src/css/property-descriptors/overflow.ts +0 -34
- package/src/css/property-descriptors/padding.ts +0 -14
- package/src/css/property-descriptors/paint-order.ts +0 -42
- package/src/css/property-descriptors/position.ts +0 -30
- package/src/css/property-descriptors/quotes.ts +0 -57
- package/src/css/property-descriptors/rotate.ts +0 -34
- package/src/css/property-descriptors/text-align.ts +0 -26
- package/src/css/property-descriptors/text-decoration-color.ts +0 -9
- package/src/css/property-descriptors/text-decoration-line.ts +0 -38
- package/src/css/property-descriptors/text-decoration-style.ts +0 -32
- package/src/css/property-descriptors/text-decoration-thickness.ts +0 -30
- package/src/css/property-descriptors/text-overflow.ts +0 -23
- package/src/css/property-descriptors/text-shadow.ts +0 -52
- package/src/css/property-descriptors/text-transform.ts +0 -27
- package/src/css/property-descriptors/text-underline-offset.ts +0 -27
- package/src/css/property-descriptors/transform-origin.ts +0 -29
- package/src/css/property-descriptors/transform.ts +0 -74
- package/src/css/property-descriptors/visibility.ts +0 -25
- package/src/css/property-descriptors/webkit-line-clamp.ts +0 -30
- package/src/css/property-descriptors/webkit-text-stroke-color.ts +0 -8
- package/src/css/property-descriptors/webkit-text-stroke-width.ts +0 -15
- package/src/css/property-descriptors/word-break.ts +0 -25
- package/src/css/property-descriptors/writing-mode.ts +0 -37
- package/src/css/property-descriptors/z-index.ts +0 -27
- package/src/css/syntax/__tests__/tokernizer-tests.ts +0 -29
- package/src/css/syntax/parser.ts +0 -188
- package/src/css/syntax/tokenizer.ts +0 -822
- package/src/css/type-descriptor.ts +0 -7
- package/src/css/types/__tests__/color-tests.ts +0 -147
- package/src/css/types/__tests__/image-tests.ts +0 -239
- package/src/css/types/angle.ts +0 -86
- package/src/css/types/color-math.ts +0 -22
- package/src/css/types/color-spaces/a98.ts +0 -86
- package/src/css/types/color-spaces/p3.ts +0 -92
- package/src/css/types/color-spaces/pro-photo.ts +0 -87
- package/src/css/types/color-spaces/rec2020.ts +0 -90
- package/src/css/types/color-spaces/srgb.ts +0 -87
- package/src/css/types/color-utilities.ts +0 -452
- package/src/css/types/color.ts +0 -485
- package/src/css/types/functions/-prefix-linear-gradient.ts +0 -35
- package/src/css/types/functions/-prefix-radial-gradient.ts +0 -106
- package/src/css/types/functions/-webkit-gradient.ts +0 -69
- package/src/css/types/functions/__tests__/radial-gradient.ts +0 -69
- package/src/css/types/functions/counter.ts +0 -511
- package/src/css/types/functions/gradient.ts +0 -206
- package/src/css/types/functions/linear-gradient.ts +0 -28
- package/src/css/types/functions/radial-gradient.ts +0 -101
- package/src/css/types/image.ts +0 -120
- package/src/css/types/index.ts +0 -1
- package/src/css/types/length-percentage.ts +0 -137
- package/src/css/types/length.ts +0 -7
- package/src/css/types/time.ts +0 -20
- package/src/dom/__mocks__/document-cloner.ts +0 -22
- package/src/dom/__tests__/dom-normalizer.test.ts +0 -133
- package/src/dom/__tests__/element-container.test.ts +0 -129
- package/src/dom/document-cloner.ts +0 -929
- package/src/dom/dom-normalizer.ts +0 -133
- package/src/dom/element-container.ts +0 -75
- package/src/dom/elements/li-element-container.ts +0 -10
- package/src/dom/elements/ol-element-container.ts +0 -12
- package/src/dom/elements/select-element-container.ts +0 -10
- package/src/dom/elements/textarea-element-container.ts +0 -9
- package/src/dom/node-parser.ts +0 -177
- package/src/dom/node-type-guards.ts +0 -70
- package/src/dom/replaced-elements/canvas-element-container.ts +0 -15
- package/src/dom/replaced-elements/iframe-element-container.ts +0 -55
- package/src/dom/replaced-elements/image-element-container.ts +0 -16
- package/src/dom/replaced-elements/index.ts +0 -5
- package/src/dom/replaced-elements/input-element-container.ts +0 -105
- package/src/dom/replaced-elements/pseudo-elements.ts +0 -0
- package/src/dom/replaced-elements/svg-element-container.ts +0 -23
- package/src/dom/text-container.ts +0 -42
- package/src/global.d.ts +0 -19
- package/src/index.ts +0 -82
- package/src/invariant.ts +0 -5
- package/src/options.ts +0 -55
- package/src/render/__tests__/object-fit.test.ts +0 -85
- package/src/render/background.ts +0 -298
- package/src/render/bezier-curve.ts +0 -47
- package/src/render/border.ts +0 -165
- package/src/render/bound-curves.ts +0 -388
- package/src/render/box-sizing.ts +0 -31
- package/src/render/canvas/__tests__/background-renderer.test.ts +0 -72
- package/src/render/canvas/__tests__/border-renderer.test.ts +0 -24
- package/src/render/canvas/__tests__/effects-renderer.test.ts +0 -32
- package/src/render/canvas/__tests__/text-renderer.test.ts +0 -471
- package/src/render/canvas/background-renderer.ts +0 -271
- package/src/render/canvas/border-renderer.ts +0 -224
- package/src/render/canvas/canvas-path.ts +0 -31
- package/src/render/canvas/canvas-renderer.ts +0 -641
- package/src/render/canvas/effects-renderer.ts +0 -130
- package/src/render/canvas/foreignobject-renderer.ts +0 -53
- package/src/render/canvas/text-renderer.ts +0 -700
- package/src/render/effects.ts +0 -75
- package/src/render/font-metrics.ts +0 -72
- package/src/render/object-fit.ts +0 -100
- package/src/render/path.ts +0 -37
- package/src/render/renderer-interface.ts +0 -28
- package/src/render/stacking-context.ts +0 -386
- package/src/render/vector.ts +0 -19
|
@@ -1,175 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Performance tests for image smoothing
|
|
3
|
-
* Measures the performance impact of enabling/disabling image smoothing
|
|
4
|
-
*/
|
|
5
|
-
describe('image-rendering performance', () => {
|
|
6
|
-
let canvas: HTMLCanvasElement;
|
|
7
|
-
let ctx: CanvasRenderingContext2D | null = null;
|
|
8
|
-
let testImage: HTMLCanvasElement;
|
|
9
|
-
|
|
10
|
-
beforeEach(() => {
|
|
11
|
-
ctx = null;
|
|
12
|
-
// Create test canvas (JSDOM throws on getContext('2d'), so catch and skip)
|
|
13
|
-
canvas = document.createElement('canvas');
|
|
14
|
-
canvas.width = 800;
|
|
15
|
-
canvas.height = 600;
|
|
16
|
-
let context: CanvasRenderingContext2D | null = null;
|
|
17
|
-
try {
|
|
18
|
-
context = canvas.getContext('2d');
|
|
19
|
-
} catch {
|
|
20
|
-
return;
|
|
21
|
-
}
|
|
22
|
-
if (!context) {
|
|
23
|
-
return;
|
|
24
|
-
}
|
|
25
|
-
ctx = context;
|
|
26
|
-
|
|
27
|
-
// Create a test image (using canvas as source)
|
|
28
|
-
testImage = document.createElement('canvas');
|
|
29
|
-
testImage.width = 100;
|
|
30
|
-
testImage.height = 100;
|
|
31
|
-
let testCtx: CanvasRenderingContext2D | null = null;
|
|
32
|
-
try {
|
|
33
|
-
testCtx = testImage.getContext('2d');
|
|
34
|
-
} catch {
|
|
35
|
-
// JSDOM: no canvas
|
|
36
|
-
}
|
|
37
|
-
if (testCtx) {
|
|
38
|
-
// Draw some test pattern
|
|
39
|
-
testCtx.fillStyle = 'red';
|
|
40
|
-
testCtx.fillRect(0, 0, 50, 50);
|
|
41
|
-
testCtx.fillStyle = 'blue';
|
|
42
|
-
testCtx.fillRect(50, 0, 50, 50);
|
|
43
|
-
testCtx.fillStyle = 'green';
|
|
44
|
-
testCtx.fillRect(0, 50, 50, 50);
|
|
45
|
-
testCtx.fillStyle = 'yellow';
|
|
46
|
-
testCtx.fillRect(50, 50, 50, 50);
|
|
47
|
-
}
|
|
48
|
-
});
|
|
49
|
-
|
|
50
|
-
const measureDrawTime = (smoothing: boolean, quality?: 'low' | 'medium' | 'high'): number => {
|
|
51
|
-
if (!ctx) return 0; // Skip if canvas not available
|
|
52
|
-
|
|
53
|
-
ctx.imageSmoothingEnabled = smoothing;
|
|
54
|
-
if (quality) {
|
|
55
|
-
ctx.imageSmoothingQuality = quality;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
const iterations = 100;
|
|
59
|
-
const startTime = performance.now();
|
|
60
|
-
|
|
61
|
-
for (let i = 0; i < iterations; i++) {
|
|
62
|
-
// Scale up the image (this is where smoothing matters)
|
|
63
|
-
ctx.drawImage(testImage, 0, 0, 100, 100, 0, 0, 400, 400);
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
const endTime = performance.now();
|
|
67
|
-
return (endTime - startTime) / iterations; // Average time per draw
|
|
68
|
-
};
|
|
69
|
-
|
|
70
|
-
it('should measure performance with smoothing disabled', () => {
|
|
71
|
-
if (!ctx) return; // Skip if canvas not available
|
|
72
|
-
const avgTime = measureDrawTime(false);
|
|
73
|
-
expect(avgTime).toBeGreaterThan(0);
|
|
74
|
-
expect(avgTime).toBeLessThan(100); // Should complete quickly
|
|
75
|
-
});
|
|
76
|
-
|
|
77
|
-
it('should measure performance with smoothing enabled', () => {
|
|
78
|
-
if (!ctx) return;
|
|
79
|
-
const avgTime = measureDrawTime(true);
|
|
80
|
-
expect(avgTime).toBeGreaterThan(0);
|
|
81
|
-
expect(avgTime).toBeLessThan(100);
|
|
82
|
-
});
|
|
83
|
-
|
|
84
|
-
it('should measure performance with low quality smoothing', () => {
|
|
85
|
-
if (!ctx) return;
|
|
86
|
-
const avgTime = measureDrawTime(true, 'low');
|
|
87
|
-
expect(avgTime).toBeGreaterThan(0);
|
|
88
|
-
});
|
|
89
|
-
|
|
90
|
-
it('should measure performance with medium quality smoothing', () => {
|
|
91
|
-
if (!ctx) return;
|
|
92
|
-
const avgTime = measureDrawTime(true, 'medium');
|
|
93
|
-
expect(avgTime).toBeGreaterThan(0);
|
|
94
|
-
});
|
|
95
|
-
|
|
96
|
-
it('should measure performance with high quality smoothing', () => {
|
|
97
|
-
if (!ctx) return;
|
|
98
|
-
const avgTime = measureDrawTime(true, 'high');
|
|
99
|
-
expect(avgTime).toBeGreaterThan(0);
|
|
100
|
-
});
|
|
101
|
-
|
|
102
|
-
it('should compare performance: disabled vs enabled', () => {
|
|
103
|
-
if (!ctx) return;
|
|
104
|
-
const disabledTime = measureDrawTime(false);
|
|
105
|
-
const enabledTime = measureDrawTime(true);
|
|
106
|
-
|
|
107
|
-
// Performance should be reasonable in both cases
|
|
108
|
-
expect(disabledTime).toBeLessThan(50);
|
|
109
|
-
expect(enabledTime).toBeLessThan(50);
|
|
110
|
-
|
|
111
|
-
// Verify difference is within acceptable range
|
|
112
|
-
const difference = enabledTime - disabledTime;
|
|
113
|
-
expect(Math.abs(difference)).toBeLessThan(30);
|
|
114
|
-
});
|
|
115
|
-
|
|
116
|
-
it('should compare quality levels', () => {
|
|
117
|
-
if (!ctx) return;
|
|
118
|
-
const lowTime = measureDrawTime(true, 'low');
|
|
119
|
-
const mediumTime = measureDrawTime(true, 'medium');
|
|
120
|
-
const highTime = measureDrawTime(true, 'high');
|
|
121
|
-
|
|
122
|
-
// All quality levels should complete reasonably fast
|
|
123
|
-
expect(lowTime).toBeLessThan(50);
|
|
124
|
-
expect(mediumTime).toBeLessThan(50);
|
|
125
|
-
expect(highTime).toBeLessThan(50);
|
|
126
|
-
});
|
|
127
|
-
|
|
128
|
-
describe('Large image performance', () => {
|
|
129
|
-
let largeTestImage: HTMLCanvasElement;
|
|
130
|
-
|
|
131
|
-
beforeEach(() => {
|
|
132
|
-
largeTestImage = document.createElement('canvas');
|
|
133
|
-
largeTestImage.width = 500;
|
|
134
|
-
largeTestImage.height = 500;
|
|
135
|
-
let testCtx: CanvasRenderingContext2D | null = null;
|
|
136
|
-
try {
|
|
137
|
-
testCtx = largeTestImage.getContext('2d');
|
|
138
|
-
} catch {
|
|
139
|
-
// JSDOM: no canvas
|
|
140
|
-
}
|
|
141
|
-
if (testCtx) {
|
|
142
|
-
// Draw a gradient pattern
|
|
143
|
-
const gradient = testCtx.createLinearGradient(0, 0, 500, 500);
|
|
144
|
-
gradient.addColorStop(0, 'red');
|
|
145
|
-
gradient.addColorStop(0.5, 'blue');
|
|
146
|
-
gradient.addColorStop(1, 'green');
|
|
147
|
-
testCtx.fillStyle = gradient;
|
|
148
|
-
testCtx.fillRect(0, 0, 500, 500);
|
|
149
|
-
}
|
|
150
|
-
});
|
|
151
|
-
|
|
152
|
-
it('should handle large image with smoothing disabled', () => {
|
|
153
|
-
if (!ctx) return;
|
|
154
|
-
ctx.imageSmoothingEnabled = false;
|
|
155
|
-
|
|
156
|
-
const startTime = performance.now();
|
|
157
|
-
ctx.drawImage(largeTestImage, 0, 0, 500, 500, 0, 0, 800, 600);
|
|
158
|
-
const duration = performance.now() - startTime;
|
|
159
|
-
|
|
160
|
-
expect(duration).toBeLessThan(100);
|
|
161
|
-
});
|
|
162
|
-
|
|
163
|
-
it('should handle large image with smoothing enabled', () => {
|
|
164
|
-
if (!ctx) return;
|
|
165
|
-
ctx.imageSmoothingEnabled = true;
|
|
166
|
-
ctx.imageSmoothingQuality = 'high';
|
|
167
|
-
|
|
168
|
-
const startTime = performance.now();
|
|
169
|
-
ctx.drawImage(largeTestImage, 0, 0, 500, 500, 0, 0, 800, 600);
|
|
170
|
-
const duration = performance.now() - startTime;
|
|
171
|
-
|
|
172
|
-
expect(duration).toBeLessThan(200); // Allow more time for high quality
|
|
173
|
-
});
|
|
174
|
-
});
|
|
175
|
-
});
|
|
@@ -1,72 +0,0 @@
|
|
|
1
|
-
import { imageRendering, IMAGE_RENDERING } from '../image-rendering';
|
|
2
|
-
import { Context } from '../../../core/context';
|
|
3
|
-
import { Html2CanvasConfig } from '../../../config';
|
|
4
|
-
|
|
5
|
-
describe('property-descriptors', () => {
|
|
6
|
-
let context: Context;
|
|
7
|
-
|
|
8
|
-
beforeEach(() => {
|
|
9
|
-
const mockWindow = {
|
|
10
|
-
location: { href: 'http://example.com' },
|
|
11
|
-
document: { createElement: () => ({ href: '' }) }
|
|
12
|
-
} as any;
|
|
13
|
-
const config = new Html2CanvasConfig({ window: mockWindow });
|
|
14
|
-
context = new Context({} as any, {} as any, config);
|
|
15
|
-
});
|
|
16
|
-
|
|
17
|
-
describe('image-rendering', () => {
|
|
18
|
-
it('should parse "auto" as AUTO', () => {
|
|
19
|
-
expect(imageRendering.parse(context, 'auto')).toBe(IMAGE_RENDERING.AUTO);
|
|
20
|
-
});
|
|
21
|
-
|
|
22
|
-
it('should parse "pixelated" as PIXELATED', () => {
|
|
23
|
-
expect(imageRendering.parse(context, 'pixelated')).toBe(IMAGE_RENDERING.PIXELATED);
|
|
24
|
-
});
|
|
25
|
-
|
|
26
|
-
it('should parse "crisp-edges" as CRISP_EDGES', () => {
|
|
27
|
-
expect(imageRendering.parse(context, 'crisp-edges')).toBe(IMAGE_RENDERING.CRISP_EDGES);
|
|
28
|
-
});
|
|
29
|
-
|
|
30
|
-
it('should parse "-webkit-crisp-edges" as CRISP_EDGES', () => {
|
|
31
|
-
expect(imageRendering.parse(context, '-webkit-crisp-edges')).toBe(IMAGE_RENDERING.CRISP_EDGES);
|
|
32
|
-
});
|
|
33
|
-
|
|
34
|
-
it('should parse "-webkit-optimize-contrast" as PIXELATED', () => {
|
|
35
|
-
expect(imageRendering.parse(context, '-webkit-optimize-contrast')).toBe(IMAGE_RENDERING.PIXELATED);
|
|
36
|
-
});
|
|
37
|
-
|
|
38
|
-
it('should parse "smooth" as SMOOTH', () => {
|
|
39
|
-
expect(imageRendering.parse(context, 'smooth')).toBe(IMAGE_RENDERING.SMOOTH);
|
|
40
|
-
});
|
|
41
|
-
|
|
42
|
-
it('should parse unknown values as AUTO', () => {
|
|
43
|
-
expect(imageRendering.parse(context, 'invalid')).toBe(IMAGE_RENDERING.AUTO);
|
|
44
|
-
});
|
|
45
|
-
|
|
46
|
-
it('should be case-insensitive', () => {
|
|
47
|
-
expect(imageRendering.parse(context, 'PIXELATED')).toBe(IMAGE_RENDERING.PIXELATED);
|
|
48
|
-
expect(imageRendering.parse(context, 'Crisp-Edges')).toBe(IMAGE_RENDERING.CRISP_EDGES);
|
|
49
|
-
});
|
|
50
|
-
|
|
51
|
-
// Edge case tests
|
|
52
|
-
it('should handle empty string as AUTO', () => {
|
|
53
|
-
expect(imageRendering.parse(context, '')).toBe(IMAGE_RENDERING.AUTO);
|
|
54
|
-
});
|
|
55
|
-
|
|
56
|
-
it('should handle whitespace as AUTO', () => {
|
|
57
|
-
expect(imageRendering.parse(context, ' ')).toBe(IMAGE_RENDERING.AUTO);
|
|
58
|
-
});
|
|
59
|
-
|
|
60
|
-
it('should handle special characters as AUTO', () => {
|
|
61
|
-
expect(imageRendering.parse(context, '@#$%')).toBe(IMAGE_RENDERING.AUTO);
|
|
62
|
-
});
|
|
63
|
-
|
|
64
|
-
it('should parse "-moz-crisp-edges" as CRISP_EDGES', () => {
|
|
65
|
-
expect(imageRendering.parse(context, '-moz-crisp-edges')).toBe(IMAGE_RENDERING.CRISP_EDGES);
|
|
66
|
-
});
|
|
67
|
-
|
|
68
|
-
it('should parse "high-quality" as SMOOTH', () => {
|
|
69
|
-
expect(imageRendering.parse(context, 'high-quality')).toBe(IMAGE_RENDERING.SMOOTH);
|
|
70
|
-
});
|
|
71
|
-
});
|
|
72
|
-
});
|
|
@@ -1,87 +0,0 @@
|
|
|
1
|
-
import { deepStrictEqual } from 'assert';
|
|
2
|
-
import { Parser } from '../../syntax/parser';
|
|
3
|
-
import { paintOrder, PAINT_ORDER_LAYER } from '../paint-order';
|
|
4
|
-
import { Context } from '../../../core/context';
|
|
5
|
-
|
|
6
|
-
const paintOrderParse = (value: string) => paintOrder.parse({} as Context, Parser.parseValues(value));
|
|
7
|
-
|
|
8
|
-
describe('property-descriptors', () => {
|
|
9
|
-
describe('paint-order', () => {
|
|
10
|
-
it('none', () =>
|
|
11
|
-
deepStrictEqual(paintOrderParse('none'), [
|
|
12
|
-
PAINT_ORDER_LAYER.FILL,
|
|
13
|
-
PAINT_ORDER_LAYER.STROKE,
|
|
14
|
-
PAINT_ORDER_LAYER.MARKERS
|
|
15
|
-
]));
|
|
16
|
-
|
|
17
|
-
it('EMPTY', () =>
|
|
18
|
-
deepStrictEqual(paintOrderParse(''), [
|
|
19
|
-
PAINT_ORDER_LAYER.FILL,
|
|
20
|
-
PAINT_ORDER_LAYER.STROKE,
|
|
21
|
-
PAINT_ORDER_LAYER.MARKERS
|
|
22
|
-
]));
|
|
23
|
-
|
|
24
|
-
it('other values', () =>
|
|
25
|
-
deepStrictEqual(paintOrderParse('other values'), [
|
|
26
|
-
PAINT_ORDER_LAYER.FILL,
|
|
27
|
-
PAINT_ORDER_LAYER.STROKE,
|
|
28
|
-
PAINT_ORDER_LAYER.MARKERS
|
|
29
|
-
]));
|
|
30
|
-
|
|
31
|
-
it('normal', () =>
|
|
32
|
-
deepStrictEqual(paintOrderParse('normal'), [
|
|
33
|
-
PAINT_ORDER_LAYER.FILL,
|
|
34
|
-
PAINT_ORDER_LAYER.STROKE,
|
|
35
|
-
PAINT_ORDER_LAYER.MARKERS
|
|
36
|
-
]));
|
|
37
|
-
|
|
38
|
-
it('stroke', () =>
|
|
39
|
-
deepStrictEqual(paintOrderParse('stroke'), [
|
|
40
|
-
PAINT_ORDER_LAYER.STROKE,
|
|
41
|
-
PAINT_ORDER_LAYER.FILL,
|
|
42
|
-
PAINT_ORDER_LAYER.MARKERS
|
|
43
|
-
]));
|
|
44
|
-
|
|
45
|
-
it('fill', () =>
|
|
46
|
-
deepStrictEqual(paintOrderParse('fill'), [
|
|
47
|
-
PAINT_ORDER_LAYER.FILL,
|
|
48
|
-
PAINT_ORDER_LAYER.STROKE,
|
|
49
|
-
PAINT_ORDER_LAYER.MARKERS
|
|
50
|
-
]));
|
|
51
|
-
|
|
52
|
-
it('markers', () =>
|
|
53
|
-
deepStrictEqual(paintOrderParse('markers'), [
|
|
54
|
-
PAINT_ORDER_LAYER.MARKERS,
|
|
55
|
-
PAINT_ORDER_LAYER.FILL,
|
|
56
|
-
PAINT_ORDER_LAYER.STROKE
|
|
57
|
-
]));
|
|
58
|
-
|
|
59
|
-
it('stroke fill', () =>
|
|
60
|
-
deepStrictEqual(paintOrderParse('stroke fill'), [
|
|
61
|
-
PAINT_ORDER_LAYER.STROKE,
|
|
62
|
-
PAINT_ORDER_LAYER.FILL,
|
|
63
|
-
PAINT_ORDER_LAYER.MARKERS
|
|
64
|
-
]));
|
|
65
|
-
|
|
66
|
-
it('markers stroke', () =>
|
|
67
|
-
deepStrictEqual(paintOrderParse('markers stroke'), [
|
|
68
|
-
PAINT_ORDER_LAYER.MARKERS,
|
|
69
|
-
PAINT_ORDER_LAYER.STROKE,
|
|
70
|
-
PAINT_ORDER_LAYER.FILL
|
|
71
|
-
]));
|
|
72
|
-
|
|
73
|
-
it('markers stroke fill', () =>
|
|
74
|
-
deepStrictEqual(paintOrderParse('markers stroke fill'), [
|
|
75
|
-
PAINT_ORDER_LAYER.MARKERS,
|
|
76
|
-
PAINT_ORDER_LAYER.STROKE,
|
|
77
|
-
PAINT_ORDER_LAYER.FILL
|
|
78
|
-
]));
|
|
79
|
-
|
|
80
|
-
it('stroke fill markers', () =>
|
|
81
|
-
deepStrictEqual(paintOrderParse('stroke fill markers'), [
|
|
82
|
-
PAINT_ORDER_LAYER.STROKE,
|
|
83
|
-
PAINT_ORDER_LAYER.FILL,
|
|
84
|
-
PAINT_ORDER_LAYER.MARKERS
|
|
85
|
-
]));
|
|
86
|
-
});
|
|
87
|
-
});
|
|
@@ -1,94 +0,0 @@
|
|
|
1
|
-
import { deepStrictEqual } from 'assert';
|
|
2
|
-
import { Parser } from '../../syntax/parser';
|
|
3
|
-
import { color, COLORS } from '../../types/color';
|
|
4
|
-
import { textShadow } from '../text-shadow';
|
|
5
|
-
import { FLAG_INTEGER, DimensionToken, TokenType } from '../../syntax/tokenizer';
|
|
6
|
-
import { ZERO_LENGTH } from '../../types/length-percentage';
|
|
7
|
-
import { Context } from '../../../core/context';
|
|
8
|
-
|
|
9
|
-
const textShadowParse = (value: string) => textShadow.parse({} as Context, Parser.parseValues(value));
|
|
10
|
-
const colorParse = (value: string) => color.parse({} as Context, Parser.parseValue(value));
|
|
11
|
-
const dimension = (number: number, unit: string): DimensionToken => ({
|
|
12
|
-
flags: FLAG_INTEGER,
|
|
13
|
-
number,
|
|
14
|
-
unit,
|
|
15
|
-
type: TokenType.DIMENSION_TOKEN
|
|
16
|
-
});
|
|
17
|
-
|
|
18
|
-
describe('property-descriptors', () => {
|
|
19
|
-
describe('text-shadow', () => {
|
|
20
|
-
it('none', () => deepStrictEqual(textShadowParse('none'), []));
|
|
21
|
-
|
|
22
|
-
it('1px 1px 2px pink', () =>
|
|
23
|
-
deepStrictEqual(textShadowParse('1px 1px 2px pink'), [
|
|
24
|
-
{
|
|
25
|
-
color: colorParse('pink'),
|
|
26
|
-
offsetX: dimension(1, 'px'),
|
|
27
|
-
offsetY: dimension(1, 'px'),
|
|
28
|
-
blur: dimension(2, 'px')
|
|
29
|
-
}
|
|
30
|
-
]));
|
|
31
|
-
|
|
32
|
-
it('#fc0 1px 0 10px', () =>
|
|
33
|
-
deepStrictEqual(textShadowParse('#fc0 1px 0 10px'), [
|
|
34
|
-
{
|
|
35
|
-
color: colorParse('#fc0'),
|
|
36
|
-
offsetX: dimension(1, 'px'),
|
|
37
|
-
offsetY: ZERO_LENGTH,
|
|
38
|
-
blur: dimension(10, 'px')
|
|
39
|
-
}
|
|
40
|
-
]));
|
|
41
|
-
|
|
42
|
-
it('5px 5px #558abb', () =>
|
|
43
|
-
deepStrictEqual(textShadowParse('5px 5px #558abb'), [
|
|
44
|
-
{
|
|
45
|
-
color: colorParse('#558abb'),
|
|
46
|
-
offsetX: dimension(5, 'px'),
|
|
47
|
-
offsetY: dimension(5, 'px'),
|
|
48
|
-
blur: ZERO_LENGTH
|
|
49
|
-
}
|
|
50
|
-
]));
|
|
51
|
-
|
|
52
|
-
it('white 2px 5px', () =>
|
|
53
|
-
deepStrictEqual(textShadowParse('white 2px 5px'), [
|
|
54
|
-
{
|
|
55
|
-
color: colorParse('#fff'),
|
|
56
|
-
offsetX: dimension(2, 'px'),
|
|
57
|
-
offsetY: dimension(5, 'px'),
|
|
58
|
-
blur: ZERO_LENGTH
|
|
59
|
-
}
|
|
60
|
-
]));
|
|
61
|
-
|
|
62
|
-
it('white 2px 5px', () =>
|
|
63
|
-
deepStrictEqual(textShadowParse('5px 10px'), [
|
|
64
|
-
{
|
|
65
|
-
color: COLORS.TRANSPARENT,
|
|
66
|
-
offsetX: dimension(5, 'px'),
|
|
67
|
-
offsetY: dimension(10, 'px'),
|
|
68
|
-
blur: ZERO_LENGTH
|
|
69
|
-
}
|
|
70
|
-
]));
|
|
71
|
-
|
|
72
|
-
it('1px 1px 2px red, 0 0 1em blue, 0 0 2em blue', () =>
|
|
73
|
-
deepStrictEqual(textShadowParse('1px 1px 2px red, 0 0 1em blue, 0 0 2em blue'), [
|
|
74
|
-
{
|
|
75
|
-
color: colorParse('red'),
|
|
76
|
-
offsetX: dimension(1, 'px'),
|
|
77
|
-
offsetY: dimension(1, 'px'),
|
|
78
|
-
blur: dimension(2, 'px')
|
|
79
|
-
},
|
|
80
|
-
{
|
|
81
|
-
color: colorParse('blue'),
|
|
82
|
-
offsetX: ZERO_LENGTH,
|
|
83
|
-
offsetY: ZERO_LENGTH,
|
|
84
|
-
blur: dimension(1, 'em')
|
|
85
|
-
},
|
|
86
|
-
{
|
|
87
|
-
color: colorParse('blue'),
|
|
88
|
-
offsetX: ZERO_LENGTH,
|
|
89
|
-
offsetY: ZERO_LENGTH,
|
|
90
|
-
blur: dimension(2, 'em')
|
|
91
|
-
}
|
|
92
|
-
]));
|
|
93
|
-
});
|
|
94
|
-
});
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { transform } from '../transform';
|
|
2
|
-
import { Parser } from '../../syntax/parser';
|
|
3
|
-
import { deepStrictEqual } from 'assert';
|
|
4
|
-
import { Context } from '../../../core/context';
|
|
5
|
-
const parseValue = (value: string) => transform.parse({} as Context, Parser.parseValue(value));
|
|
6
|
-
|
|
7
|
-
describe('property-descriptors', () => {
|
|
8
|
-
describe('transform', () => {
|
|
9
|
-
it('none', () => deepStrictEqual(parseValue('none'), null));
|
|
10
|
-
it('matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0)', () =>
|
|
11
|
-
deepStrictEqual(parseValue('matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0)'), [1, 2, 3, 4, 5, 6]));
|
|
12
|
-
it('matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)', () =>
|
|
13
|
-
deepStrictEqual(
|
|
14
|
-
parseValue('matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'),
|
|
15
|
-
[1, 0, 0, 1, 0, 0]
|
|
16
|
-
));
|
|
17
|
-
});
|
|
18
|
-
});
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import { IPropertyListDescriptor, PropertyDescriptorParsingType } from '../property-descriptor';
|
|
2
|
-
import { CSSValue, isIdentToken } from '../syntax/parser';
|
|
3
|
-
import { Context } from '../../core/context';
|
|
4
|
-
export const enum BACKGROUND_CLIP {
|
|
5
|
-
BORDER_BOX = 0,
|
|
6
|
-
PADDING_BOX = 1,
|
|
7
|
-
CONTENT_BOX = 2
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
export type BackgroundClip = BACKGROUND_CLIP[];
|
|
11
|
-
|
|
12
|
-
export const backgroundClip: IPropertyListDescriptor<BackgroundClip> = {
|
|
13
|
-
name: 'background-clip',
|
|
14
|
-
initialValue: 'border-box',
|
|
15
|
-
prefix: false,
|
|
16
|
-
type: PropertyDescriptorParsingType.LIST,
|
|
17
|
-
parse: (_context: Context, tokens: CSSValue[]): BackgroundClip => {
|
|
18
|
-
return tokens.map((token) => {
|
|
19
|
-
if (isIdentToken(token)) {
|
|
20
|
-
switch (token.value) {
|
|
21
|
-
case 'padding-box':
|
|
22
|
-
return BACKGROUND_CLIP.PADDING_BOX;
|
|
23
|
-
case 'content-box':
|
|
24
|
-
return BACKGROUND_CLIP.CONTENT_BOX;
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
return BACKGROUND_CLIP.BORDER_BOX;
|
|
28
|
-
});
|
|
29
|
-
}
|
|
30
|
-
};
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { IPropertyTypeValueDescriptor, PropertyDescriptorParsingType } from '../property-descriptor';
|
|
2
|
-
|
|
3
|
-
export const backgroundColor: IPropertyTypeValueDescriptor = {
|
|
4
|
-
name: `background-color`,
|
|
5
|
-
initialValue: 'transparent',
|
|
6
|
-
prefix: false,
|
|
7
|
-
type: PropertyDescriptorParsingType.TYPE_VALUE,
|
|
8
|
-
format: 'color'
|
|
9
|
-
};
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import { TokenType } from '../syntax/tokenizer';
|
|
2
|
-
import { ICSSImage, image, isSupportedImage } from '../types/image';
|
|
3
|
-
import { IPropertyListDescriptor, PropertyDescriptorParsingType } from '../property-descriptor';
|
|
4
|
-
import { CSSValue, nonFunctionArgSeparator } from '../syntax/parser';
|
|
5
|
-
import { Context } from '../../core/context';
|
|
6
|
-
|
|
7
|
-
export const backgroundImage: IPropertyListDescriptor<ICSSImage[]> = {
|
|
8
|
-
name: 'background-image',
|
|
9
|
-
initialValue: 'none',
|
|
10
|
-
type: PropertyDescriptorParsingType.LIST,
|
|
11
|
-
prefix: false,
|
|
12
|
-
parse: (context: Context, tokens: CSSValue[]) => {
|
|
13
|
-
if (tokens.length === 0) {
|
|
14
|
-
return [];
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
const first = tokens[0];
|
|
18
|
-
|
|
19
|
-
if (first.type === TokenType.IDENT_TOKEN && first.value === 'none') {
|
|
20
|
-
return [];
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
return tokens
|
|
24
|
-
.filter((value) => nonFunctionArgSeparator(value) && isSupportedImage(value))
|
|
25
|
-
.map((value) => image.parse(context, value));
|
|
26
|
-
}
|
|
27
|
-
};
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import { IPropertyListDescriptor, PropertyDescriptorParsingType } from '../property-descriptor';
|
|
2
|
-
import { CSSValue, isIdentToken } from '../syntax/parser';
|
|
3
|
-
import { Context } from '../../core/context';
|
|
4
|
-
|
|
5
|
-
export const enum BACKGROUND_ORIGIN {
|
|
6
|
-
BORDER_BOX = 0,
|
|
7
|
-
PADDING_BOX = 1,
|
|
8
|
-
CONTENT_BOX = 2
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
export type BackgroundOrigin = BACKGROUND_ORIGIN[];
|
|
12
|
-
|
|
13
|
-
export const backgroundOrigin: IPropertyListDescriptor<BackgroundOrigin> = {
|
|
14
|
-
name: 'background-origin',
|
|
15
|
-
initialValue: 'border-box',
|
|
16
|
-
prefix: false,
|
|
17
|
-
type: PropertyDescriptorParsingType.LIST,
|
|
18
|
-
parse: (_context: Context, tokens: CSSValue[]): BackgroundOrigin => {
|
|
19
|
-
return tokens.map((token) => {
|
|
20
|
-
if (isIdentToken(token)) {
|
|
21
|
-
switch (token.value) {
|
|
22
|
-
case 'padding-box':
|
|
23
|
-
return BACKGROUND_ORIGIN.PADDING_BOX;
|
|
24
|
-
case 'content-box':
|
|
25
|
-
return BACKGROUND_ORIGIN.CONTENT_BOX;
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
return BACKGROUND_ORIGIN.BORDER_BOX;
|
|
29
|
-
});
|
|
30
|
-
}
|
|
31
|
-
};
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import { PropertyDescriptorParsingType, IPropertyListDescriptor } from '../property-descriptor';
|
|
2
|
-
import { CSSValue, parseFunctionArgs } from '../syntax/parser';
|
|
3
|
-
import {
|
|
4
|
-
isLengthPercentage,
|
|
5
|
-
isCalcFunction,
|
|
6
|
-
evaluateCalcToLengthPercentage,
|
|
7
|
-
LengthPercentageTuple,
|
|
8
|
-
parseLengthPercentageTuple
|
|
9
|
-
} from '../types/length-percentage';
|
|
10
|
-
import { Context } from '../../core/context';
|
|
11
|
-
export type BackgroundPosition = BackgroundImagePosition[];
|
|
12
|
-
|
|
13
|
-
export type BackgroundImagePosition = LengthPercentageTuple;
|
|
14
|
-
|
|
15
|
-
export const backgroundPosition: IPropertyListDescriptor<BackgroundPosition> = {
|
|
16
|
-
name: 'background-position',
|
|
17
|
-
initialValue: '0% 0%',
|
|
18
|
-
type: PropertyDescriptorParsingType.LIST,
|
|
19
|
-
prefix: false,
|
|
20
|
-
parse: (_context: Context, tokens: CSSValue[]): BackgroundPosition => {
|
|
21
|
-
return parseFunctionArgs(tokens)
|
|
22
|
-
.map((values: CSSValue[]) => {
|
|
23
|
-
// Convert calc() to length-percentage tokens, keep other length-percentage as is
|
|
24
|
-
return values
|
|
25
|
-
.map((value) => {
|
|
26
|
-
if (isCalcFunction(value)) {
|
|
27
|
-
// For calc() at parse time, we can't know the container size
|
|
28
|
-
// So we evaluate with 0 context which will work for px-only calc()
|
|
29
|
-
// Percentage-based calc() will need special handling
|
|
30
|
-
return evaluateCalcToLengthPercentage(value, 0);
|
|
31
|
-
}
|
|
32
|
-
return isLengthPercentage(value) ? value : null;
|
|
33
|
-
})
|
|
34
|
-
.filter((v): v is NonNullable<typeof v> => v !== null);
|
|
35
|
-
})
|
|
36
|
-
.map(parseLengthPercentageTuple);
|
|
37
|
-
}
|
|
38
|
-
};
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import { IPropertyListDescriptor, PropertyDescriptorParsingType } from '../property-descriptor';
|
|
2
|
-
import { CSSValue, isIdentToken, parseFunctionArgs } from '../syntax/parser';
|
|
3
|
-
import { Context } from '../../core/context';
|
|
4
|
-
export type BackgroundRepeat = BACKGROUND_REPEAT[];
|
|
5
|
-
|
|
6
|
-
export const enum BACKGROUND_REPEAT {
|
|
7
|
-
REPEAT = 0,
|
|
8
|
-
NO_REPEAT = 1,
|
|
9
|
-
REPEAT_X = 2,
|
|
10
|
-
REPEAT_Y = 3
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
export const backgroundRepeat: IPropertyListDescriptor<BackgroundRepeat> = {
|
|
14
|
-
name: 'background-repeat',
|
|
15
|
-
initialValue: 'repeat',
|
|
16
|
-
prefix: false,
|
|
17
|
-
type: PropertyDescriptorParsingType.LIST,
|
|
18
|
-
parse: (_context: Context, tokens: CSSValue[]): BackgroundRepeat => {
|
|
19
|
-
return parseFunctionArgs(tokens)
|
|
20
|
-
.map((values) =>
|
|
21
|
-
values
|
|
22
|
-
.filter(isIdentToken)
|
|
23
|
-
.map((token) => token.value)
|
|
24
|
-
.join(' ')
|
|
25
|
-
)
|
|
26
|
-
.map(parseBackgroundRepeat);
|
|
27
|
-
}
|
|
28
|
-
};
|
|
29
|
-
|
|
30
|
-
const parseBackgroundRepeat = (value: string): BACKGROUND_REPEAT => {
|
|
31
|
-
switch (value) {
|
|
32
|
-
case 'no-repeat':
|
|
33
|
-
return BACKGROUND_REPEAT.NO_REPEAT;
|
|
34
|
-
case 'repeat-x':
|
|
35
|
-
case 'repeat no-repeat':
|
|
36
|
-
return BACKGROUND_REPEAT.REPEAT_X;
|
|
37
|
-
case 'repeat-y':
|
|
38
|
-
case 'no-repeat repeat':
|
|
39
|
-
return BACKGROUND_REPEAT.REPEAT_Y;
|
|
40
|
-
case 'repeat':
|
|
41
|
-
default:
|
|
42
|
-
return BACKGROUND_REPEAT.REPEAT;
|
|
43
|
-
}
|
|
44
|
-
};
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import { IPropertyListDescriptor, PropertyDescriptorParsingType } from '../property-descriptor';
|
|
2
|
-
import { CSSValue, isIdentToken, parseFunctionArgs } from '../syntax/parser';
|
|
3
|
-
import { isLengthPercentage, LengthPercentage } from '../types/length-percentage';
|
|
4
|
-
import { StringValueToken } from '../syntax/tokenizer';
|
|
5
|
-
import { Context } from '../../core/context';
|
|
6
|
-
|
|
7
|
-
export enum BACKGROUND_SIZE {
|
|
8
|
-
AUTO = 'auto',
|
|
9
|
-
CONTAIN = 'contain',
|
|
10
|
-
COVER = 'cover'
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
export type BackgroundSizeInfo = LengthPercentage | StringValueToken;
|
|
14
|
-
export type BackgroundSize = BackgroundSizeInfo[][];
|
|
15
|
-
|
|
16
|
-
export const backgroundSize: IPropertyListDescriptor<BackgroundSize> = {
|
|
17
|
-
name: 'background-size',
|
|
18
|
-
initialValue: '0',
|
|
19
|
-
prefix: false,
|
|
20
|
-
type: PropertyDescriptorParsingType.LIST,
|
|
21
|
-
parse: (_context: Context, tokens: CSSValue[]): BackgroundSize => {
|
|
22
|
-
return parseFunctionArgs(tokens).map((values) => values.filter(isBackgroundSizeInfoToken));
|
|
23
|
-
}
|
|
24
|
-
};
|
|
25
|
-
|
|
26
|
-
const isBackgroundSizeInfoToken = (value: CSSValue): value is BackgroundSizeInfo =>
|
|
27
|
-
isIdentToken(value) || isLengthPercentage(value);
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { IPropertyTypeValueDescriptor, PropertyDescriptorParsingType } from '../property-descriptor';
|
|
2
|
-
const borderColorForSide = (side: string): IPropertyTypeValueDescriptor => ({
|
|
3
|
-
name: `border-${side}-color`,
|
|
4
|
-
initialValue: 'transparent',
|
|
5
|
-
prefix: false,
|
|
6
|
-
type: PropertyDescriptorParsingType.TYPE_VALUE,
|
|
7
|
-
format: 'color'
|
|
8
|
-
});
|
|
9
|
-
|
|
10
|
-
export const borderTopColor: IPropertyTypeValueDescriptor = borderColorForSide('top');
|
|
11
|
-
export const borderRightColor: IPropertyTypeValueDescriptor = borderColorForSide('right');
|
|
12
|
-
export const borderBottomColor: IPropertyTypeValueDescriptor = borderColorForSide('bottom');
|
|
13
|
-
export const borderLeftColor: IPropertyTypeValueDescriptor = borderColorForSide('left');
|