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 shaped and unshaped text', function(done) {
18        let fontBuffer = null;
19
20        // This font is known to support kerning
21        const skFontLoaded = fetch('/assets/NotoSerif-Regular.ttf').then(
22            (response) => response.arrayBuffer()).then(
23            (buffer) => {
24                fontBuffer = buffer;
25            });
26
27        LoadCanvasKit.then(catchException(done, () => {
28            skFontLoaded.then(() => {
29                // This is taken from example.html
30                const surface = CanvasKit.MakeCanvasSurface('test');
31                expect(surface).toBeTruthy('Could not make surface')
32                if (!surface) {
33                    done();
34                    return;
35                }
36                const canvas = surface.getCanvas();
37                const paint = new CanvasKit.SkPaint();
38
39                paint.setColor(CanvasKit.BLUE);
40                paint.setStyle(CanvasKit.PaintStyle.Stroke);
41
42                const fontMgr = CanvasKit.SkFontMgr.RefDefault();
43                const notoSerif = fontMgr.MakeTypefaceFromData(fontBuffer);
44
45                const textPaint = new CanvasKit.SkPaint();
46                // use the built-in monospace typeface.
47                const textFont = new CanvasKit.SkFont(notoSerif, 20);
48
49                canvas.drawRect(CanvasKit.LTRBRect(30, 30, 200, 200), paint);
50                canvas.drawText('This text is not shaped, and overflows the boundry',
51                                35, 50, textPaint, textFont);
52
53                const shapedText = new CanvasKit.ShapedText({
54                  font: textFont,
55                  leftToRight: true,
56                  text: 'This text *is* shaped, and wraps to the right width.',
57                  width: 160,
58                });
59                const textBoxX = 35;
60                const textBoxY = 55;
61                canvas.drawText(shapedText, textBoxX, textBoxY, textPaint);
62                const bounds = shapedText.getBounds();
63
64                bounds.fLeft += textBoxX;
65                bounds.fRight += textBoxX;
66                bounds.fTop += textBoxY;
67                bounds.fBottom += textBoxY
68
69                canvas.drawRect(bounds, paint);
70                const SHAPE_TEST_TEXT = 'VAVAVAVAVAFIfi';
71                const textFont2 = new CanvasKit.SkFont(notoSerif, 60);
72                const shapedText2 = new CanvasKit.ShapedText({
73                  font: textFont2,
74                  leftToRight: true,
75                  text: SHAPE_TEST_TEXT,
76                  width: 600,
77                });
78
79                canvas.drawText('no kerning ↓', 10, 240, textPaint, textFont);
80                canvas.drawText(SHAPE_TEST_TEXT, 10, 300, textPaint, textFont2);
81                canvas.drawText(shapedText2, 10, 300, textPaint);
82                canvas.drawText('kerning ↑', 10, 390, textPaint, textFont);
83
84                surface.flush();
85
86                paint.delete();
87                notoSerif.delete();
88                textPaint.delete();
89                textFont.delete();
90                shapedText.delete();
91                textFont2.delete();
92                shapedText2.delete();
93                reportSurface(surface, 'text_shaping', done);
94            });
95        }));
96    });
97
98    // TODO more tests
99});
100