1describe('CanvasKit\'s Path Behavior', function() {
2    let container = document.createElement('div');
3    document.body.appendChild(container);
4    const CANVAS_WIDTH = 600;
5    const CANVAS_HEIGHT = 600;
6
7    beforeEach(function() {
8        container.innerHTML = `
9            <canvas width=600 height=600 id=test></canvas>
10            <canvas width=600 height=600 id=report></canvas>`;
11    });
12
13    afterEach(function() {
14        container.innerHTML = '';
15    });
16
17    it('can draw a path', function(done) {
18        LoadCanvasKit.then(catchException(done, () => {
19            // This is taken from example.html
20            const surface = CanvasKit.MakeCanvasSurface('test');
21            expect(surface).toBeTruthy('Could not make surface')
22            if (!surface) {
23                done();
24                return;
25            }
26            const canvas = surface.getCanvas();
27            const paint = new CanvasKit.SkPaint();
28            paint.setStrokeWidth(1.0);
29            paint.setAntiAlias(true);
30            paint.setColor(CanvasKit.Color(0, 0, 0, 1.0));
31            paint.setStyle(CanvasKit.PaintStyle.Stroke);
32
33            const path = new CanvasKit.SkPath();
34            path.moveTo(20, 5);
35            path.lineTo(30, 20);
36            path.lineTo(40, 10);
37            path.lineTo(50, 20);
38            path.lineTo(60, 0);
39            path.lineTo(20, 5);
40
41            path.moveTo(20, 80);
42            path.cubicTo(90, 10, 160, 150, 190, 10);
43
44            path.moveTo(36, 148);
45            path.quadTo(66, 188, 120, 136);
46            path.lineTo(36, 148);
47
48            path.moveTo(150, 180);
49            path.arcTo(150, 100, 50, 200, 20);
50            path.lineTo(160, 160);
51
52            path.moveTo(20, 120);
53            path.lineTo(20, 120);
54
55            path.transform([2, 0, 0,
56                            0, 2, 0,
57                            0, 0, 1 ])
58
59            canvas.drawPath(path, paint);
60
61            let rrect = new CanvasKit.SkPath()
62                               .addRoundRect(100, 10, 140, 62,
63                                             10, 4, true);
64
65            canvas.drawPath(rrect, paint);
66            rrect.delete();
67
68            surface.flush();
69
70            path.delete();
71            paint.delete();
72
73            reportSurface(surface, 'path_api_example', done);
74        }));
75        // See PathKit for more tests, since they share implementation
76    });
77
78    it('can draw directly to a canvas', function(done) {
79        LoadCanvasKit.then(catchException(done, () => {
80            // This is taken from example.html
81            const surface = CanvasKit.MakeCanvasSurface('test');
82            expect(surface).toBeTruthy('Could not make surface')
83            if (!surface) {
84                done();
85                return;
86            }
87            const canvas = surface.getCanvas();
88            const paint = new CanvasKit.SkPaint();
89            paint.setStrokeWidth(2.0);
90            paint.setAntiAlias(true);
91            paint.setColor(CanvasKit.Color(0, 0, 0, 1.0));
92            paint.setStyle(CanvasKit.PaintStyle.Stroke);
93
94            canvas.drawLine(3, 10, 30, 15, paint);
95            canvas.drawRoundRect(CanvasKit.LTRBRect(5, 35, 45, 80), 15, 10, paint);
96
97            canvas.drawOval(CanvasKit.LTRBRect(5, 35, 45, 80), paint);
98
99            canvas.drawArc(CanvasKit.LTRBRect(55, 35, 95, 80), 15, 270, true, paint);
100
101            const font = new CanvasKit.SkFont(null, 20);
102            canvas.drawText('this is ascii text', 5, 100, paint, font);
103
104            const blob = CanvasKit.SkTextBlob.MakeFromText('Unicode chars �� é É ص', font);
105            canvas.drawTextBlob(blob, 5, 130, paint);
106
107            surface.flush();
108            font.delete();
109            blob.delete();
110            paint.delete();
111
112            reportSurface(surface, 'canvas_api_example', done);
113        }));
114        // See canvas2d for more API tests
115    });
116
117    function starPath(CanvasKit, X=128, Y=128, R=116) {
118        let p = new CanvasKit.SkPath();
119        p.moveTo(X + R, Y);
120        for (let i = 1; i < 8; i++) {
121          let a = 2.6927937 * i;
122          p.lineTo(X + R * Math.cos(a), Y + R * Math.sin(a));
123        }
124        return p;
125      }
126
127    it('can apply an effect and draw text', function(done) {
128        LoadCanvasKit.then(catchException(done, () => {
129            const surface = CanvasKit.MakeCanvasSurface('test');
130            expect(surface).toBeTruthy('Could not make surface')
131            if (!surface) {
132                done();
133                return;
134            }
135            const canvas = surface.getCanvas();
136            const path = starPath(CanvasKit);
137
138            const paint = new CanvasKit.SkPaint();
139
140            const textPaint = new CanvasKit.SkPaint();
141            textPaint.setColor(CanvasKit.Color(40, 0, 0, 1.0));
142            textPaint.setAntiAlias(true);
143
144            const textFont = new CanvasKit.SkFont(null, 30);
145
146            const dpe = CanvasKit.MakeSkDashPathEffect([15, 5, 5, 10], 1);
147
148            paint.setPathEffect(dpe);
149            paint.setStyle(CanvasKit.PaintStyle.Stroke);
150            paint.setStrokeWidth(5.0);
151            paint.setAntiAlias(true);
152            paint.setColor(CanvasKit.Color(66, 129, 164, 1.0));
153
154            canvas.clear(CanvasKit.Color(255, 255, 255, 1.0));
155
156            canvas.drawPath(path, paint);
157            canvas.drawText('This is text', 10, 280, textPaint, textFont);
158            surface.flush();
159            dpe.delete();
160            path.delete();
161
162            reportSurface(surface, 'effect_and_text_example', done);
163        }));
164    });
165
166    it('can create a path from an SVG string', function(done) {
167        LoadCanvasKit.then(catchException(done, () => {
168            //.This is a parallelagram from
169            // https://upload.wikimedia.org/wikipedia/commons/e/e7/Simple_parallelogram.svg
170            let path = CanvasKit.MakePathFromSVGString('M 205,5 L 795,5 L 595,295 L 5,295 L 205,5 z');
171
172            let cmds = path.toCmds();
173            expect(cmds).toBeTruthy();
174            // 1 move, 4 lines, 1 close
175            // each element in cmds is an array, with index 0 being the verb, and the rest being args
176            expect(cmds.length).toBe(6);
177            expect(cmds).toEqual([[CanvasKit.MOVE_VERB, 205, 5],
178                                  [CanvasKit.LINE_VERB, 795, 5],
179                                  [CanvasKit.LINE_VERB, 595, 295],
180                                  [CanvasKit.LINE_VERB, 5, 295],
181                                  [CanvasKit.LINE_VERB, 205, 5],
182                                  [CanvasKit.CLOSE_VERB]]);
183            path.delete();
184            done();
185        }));
186    });
187
188     it('can create an SVG string from a path', function(done) {
189        LoadCanvasKit.then(catchException(done, () => {
190            let cmds = [[CanvasKit.MOVE_VERB, 205, 5],
191                       [CanvasKit.LINE_VERB, 795, 5],
192                       [CanvasKit.LINE_VERB, 595, 295],
193                       [CanvasKit.LINE_VERB, 5, 295],
194                       [CanvasKit.LINE_VERB, 205, 5],
195                       [CanvasKit.CLOSE_VERB]];
196            let path = CanvasKit.MakePathFromCmds(cmds);
197
198            let svgStr = path.toSVGString();
199            // We output it in terse form, which is different than Wikipedia's version
200            expect(svgStr).toEqual('M205 5L795 5L595 295L5 295L205 5Z');
201            path.delete();
202            done();
203        }));
204    });
205});
206