modules/pathkit/tests/path2d.spec.js

describe('PathKit\'s Path2D API', function() {
    it('can do everything in the Path2D API w/o crashing', function(done) {
        LoadPathKit.then(catchException(done, () => {
            // This is taken from example.html
            let path = PathKit.NewPath();

            path.moveTo(20, 5);
            path.lineTo(30, 20);
            path.lineTo(40, 10);
            path.lineTo(50, 20);
            path.lineTo(60, 0);
            path.lineTo(20, 5);

            path.moveTo(20, 80);
            path.bezierCurveTo(90, 10, 160, 150, 190, 10);

            path.moveTo(36, 148);
            path.quadraticCurveTo(66, 188, 120, 136);
            path.lineTo(36, 148);

            path.rect(5, 170, 20, 20);

            path.moveTo(150, 180);
            path.arcTo(150, 100, 50, 200, 20);
            path.lineTo(160, 160);

            path.moveTo(20, 120);
            path.arc(20, 120, 18, 0, 1.75 * Math.PI);
            path.lineTo(20, 120);

            let secondPath = PathKit.NewPath();
            secondPath.ellipse(130, 25, 30, 10, -1*Math.PI/8, Math.PI/6, 1.5*Math.PI, false);

            path.addPath(secondPath);

            let m = document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGMatrix();
            m.a = 1; m.b = 0;
            m.c = 0; m.d = 1;
            m.e = 0; m.f = 20.5;

            path.addPath(secondPath, m);

            let canvas = document.createElement('canvas');
            let canvasCtx = canvas.getContext('2d');
            // Set canvas size and make it a bit bigger to zoom in on the lines
            standardizedCanvasSize(canvasCtx);
            canvasCtx.scale(3.0, 3.0);
            canvasCtx.fillStyle = 'blue';
            canvasCtx.stroke(path.toPath2D());

            let svgPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
            svgPath.setAttribute('stroke', 'black');
            svgPath.setAttribute('fill', 'rgba(255,255,255,0.0)');
            svgPath.setAttribute('transform', 'scale(3.0, 3.0)');
            svgPath.setAttribute('d', path.toSVGString());

            let newSVG = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
            newSVG.appendChild(svgPath);
            newSVG.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
            newSVG.setAttribute('width', 600);
            newSVG.setAttribute('height', 600);

            path.delete();
            secondPath.delete();

            reportCanvas(canvas, 'path2D_api_example').then(() => {
                reportSVG(newSVG, 'path2D_api_example').then(() => {
                    done();
                }).catch(reportError(done));
            }).catch(reportError(done));
        }));
    });

    it('can chain by returning the same object', function(done) {
        LoadPathKit.then(catchException(done, () => {
            let path = PathKit.NewPath();

            let p1 = path.moveTo(20, 5)
                .lineTo(30, 20)
                .quadTo(66, 188, 120, 136)
                .close();

            // these should be the same object
            expect(path === p1).toBe(true);
            p1.delete();
            try {
                // This should throw an exception because
                // the underlying path was already deleted.
                path.delete();
                expect('should not have gotten here').toBe(false);
            } catch (e) {
                // all is well
            }
            done();
        }));
    });

    it('does not leak path objects when chaining', function(done) {
        LoadPathKit.then(catchException(done, () => {
            // By default, we have 16 MB of memory assigned to our PathKit
            // library. This can be configured by -S TOTAL_MEMORY=NN
            // and defaults to 16MB (we likely don't need to touch this).
            // If there's a leak in here, we should OOM pretty quick.
            // Testing showed around 50k is enough to see one if we leak a path,
            // so run 250k times just to be safe.
            for(let i = 0; i < 250000; i++) {
                let path = PathKit.NewPath()
                                  .moveTo(20, 5)
                                  .lineTo(30, 20)
                                  .quadTo(66, 188, 120, 136)
                                  .close();
                path.delete();
            }
            done();
        }));
    });

    function drawTriangle() {
        let path = PathKit.NewPath();
        path.moveTo(0, 0);
        path.lineTo(10, 0);
        path.lineTo(10, 10);
        path.close();
        return path;
    }

    it('has multiple overloads of addPath', function(done) {
        LoadPathKit.then(catchException(done, () => {
            let basePath = PathKit.NewPath();
            let otherPath = drawTriangle();
            // These add path call can be chained.
            // add it unchanged
            basePath.addPath(otherPath)
            // providing the 6 params of an SVG matrix to make it appear 20.5 px down
                    .addPath(otherPath, 1, 0, 0, 1, 0, 20.5)
            // provide the full 9 matrix params to make it appear 30 px to the right
            // and be 3 times as big.
                    .addPath(otherPath, 3, 0, 30,
                                        0, 3, 0,
                                        0, 0, 1);

            reportPath(basePath, 'add_path_3x', done);
            basePath.delete();
            otherPath.delete();
        }));
    });

    it('approximates arcs (conics) with quads', function(done) {
        LoadPathKit.then(catchException(done, () => {
            let path = PathKit.NewPath();
            path.moveTo(50, 120);
            path.arc(50, 120, 45, 0, 1.75 * Math.PI);
            path.lineTo(50, 120);

            let canvas = document.createElement('canvas');
            let canvasCtx = canvas.getContext('2d');
            standardizedCanvasSize(canvasCtx);
            // The and.callThrough is important to make it actually
            // draw the quadratics
            spyOn(canvasCtx, 'quadraticCurveTo').and.callThrough();

            canvasCtx.beginPath();
            path.toCanvas(canvasCtx);
            canvasCtx.stroke();
            // No need to check the whole path, as that's more what the
            // gold correctness tests are for (can account for changes we make
            // to the approximation algorithms).
            expect(canvasCtx.quadraticCurveTo).toHaveBeenCalled();
            path.delete();
            reportCanvas(canvas, 'conics_quads_approx').then(() => {
                done();
            }).catch(reportError(done));
        }));
    });

});