1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 | (function(scope, testing) {
|
16 |
|
17 | var canvas = document.createElementNS('http://www.w3.org/1999/xhtml', 'canvas');
|
18 | canvas.width = canvas.height = 1;
|
19 | var context = canvas.getContext('2d');
|
20 |
|
21 | function parseColor(string) {
|
22 | string = string.trim();
|
23 |
|
24 | context.fillStyle = '#000';
|
25 | context.fillStyle = string;
|
26 | var contextSerializedFillStyle = context.fillStyle;
|
27 | context.fillStyle = '#fff';
|
28 | context.fillStyle = string;
|
29 | if (contextSerializedFillStyle != context.fillStyle)
|
30 | return;
|
31 | context.fillRect(0, 0, 1, 1);
|
32 | var pixelColor = context.getImageData(0, 0, 1, 1).data;
|
33 | context.clearRect(0, 0, 1, 1);
|
34 | var alpha = pixelColor[3] / 255;
|
35 | return [pixelColor[0] * alpha, pixelColor[1] * alpha, pixelColor[2] * alpha, alpha];
|
36 | }
|
37 |
|
38 | function mergeColors(left, right) {
|
39 | return [left, right, function(x) {
|
40 | function clamp(v) {
|
41 | return Math.max(0, Math.min(255, v));
|
42 | }
|
43 | if (x[3]) {
|
44 | for (var i = 0; i < 3; i++)
|
45 | x[i] = Math.round(clamp(x[i] / x[3]));
|
46 | }
|
47 | x[3] = scope.numberToString(scope.clamp(0, 1, x[3]));
|
48 | return 'rgba(' + x.join(',') + ')';
|
49 | }];
|
50 | }
|
51 |
|
52 | scope.addPropertiesHandler(parseColor, mergeColors,
|
53 | ['background-color', 'border-bottom-color', 'border-left-color', 'border-right-color',
|
54 | 'border-top-color', 'color', 'fill', 'flood-color', 'lighting-color',
|
55 | 'outline-color', 'stop-color', 'stroke', 'text-decoration-color']);
|
56 | scope.consumeColor = scope.consumeParenthesised.bind(null, parseColor);
|
57 | scope.mergeColors = mergeColors;
|
58 |
|
59 | if (WEB_ANIMATIONS_TESTING) {
|
60 | testing.parseColor = parseColor;
|
61 | }
|
62 |
|
63 | })(webAnimations1, webAnimationsTesting);
|