Kevin Lubick | 92c9171 | 2018-08-09 10:00:02 -0400 | [diff] [blame] | 1 | |
| 2 | describe('PathKit\'s SVG Behavior', function() { |
| 3 | // Note, don't try to print the PathKit object - it can cause Karma/Jasmine to lock up. |
| 4 | var PathKit = null; |
Kevin Lubick | 97d6d98 | 2018-08-10 15:53:16 -0400 | [diff] [blame] | 5 | const LoadPathKit = new Promise(function(resolve, reject) { |
Kevin Lubick | 92c9171 | 2018-08-09 10:00:02 -0400 | [diff] [blame] | 6 | if (PathKit) { |
| 7 | resolve(); |
| 8 | } else { |
| 9 | PathKitInit({ |
Kevin Lubick | 97d6d98 | 2018-08-10 15:53:16 -0400 | [diff] [blame] | 10 | locateFile: (file) => '/pathkit/'+file, |
Kevin Lubick | 92c9171 | 2018-08-09 10:00:02 -0400 | [diff] [blame] | 11 | }).then((_PathKit) => { |
| 12 | PathKit = _PathKit; |
| 13 | resolve(); |
| 14 | }); |
| 15 | } |
| 16 | }); |
| 17 | |
Kevin Lubick | 97d6d98 | 2018-08-10 15:53:16 -0400 | [diff] [blame] | 18 | it('can create a path from an SVG string', function(done) { |
Kevin Lubick | 92c9171 | 2018-08-09 10:00:02 -0400 | [diff] [blame] | 19 | LoadPathKit.then(() => { |
| 20 | //.This is a parallelagram from |
| 21 | // https://upload.wikimedia.org/wikipedia/commons/e/e7/Simple_parallelogram.svg |
| 22 | let path = PathKit.FromSVGString('M 205,5 L 795,5 L 595,295 L 5,295 L 205,5 z'); |
| 23 | |
| 24 | let cmds = path.toCmds(); |
| 25 | expect(cmds).toBeTruthy(); |
| 26 | // 1 move, 4 lines, 1 close |
| 27 | // each element in cmds is an array, with index 0 being the verb, and the rest being args |
| 28 | expect(cmds.length).toBe(6); |
| 29 | expect(cmds).toEqual([[PathKit.MOVE_VERB, 205, 5], |
| 30 | [PathKit.LINE_VERB, 795, 5], |
| 31 | [PathKit.LINE_VERB, 595, 295], |
| 32 | [PathKit.LINE_VERB, 5, 295], |
| 33 | [PathKit.LINE_VERB, 205, 5], |
| 34 | [PathKit.CLOSE_VERB]]); |
| 35 | path.delete(); |
| 36 | done(); |
| 37 | }); |
| 38 | }); |
| 39 | |
Kevin Lubick | 97d6d98 | 2018-08-10 15:53:16 -0400 | [diff] [blame] | 40 | it('can create an SVG string from a path', function(done) { |
Kevin Lubick | 92c9171 | 2018-08-09 10:00:02 -0400 | [diff] [blame] | 41 | LoadPathKit.then(() => { |
Kevin Lubick | 644d8e7 | 2018-08-09 13:58:04 -0400 | [diff] [blame] | 42 | let cmds = [[PathKit.MOVE_VERB, 205, 5], |
| 43 | [PathKit.LINE_VERB, 795, 5], |
| 44 | [PathKit.LINE_VERB, 595, 295], |
| 45 | [PathKit.LINE_VERB, 5, 295], |
| 46 | [PathKit.LINE_VERB, 205, 5], |
| 47 | [PathKit.CLOSE_VERB]]; |
| 48 | let [ptr, len] = PathKit.loadCmdsTypedArray(cmds); |
| 49 | let path = PathKit.FromCmds(ptr, len); |
Kevin Lubick | 92c9171 | 2018-08-09 10:00:02 -0400 | [diff] [blame] | 50 | |
| 51 | let svgStr = path.toSVGString(); |
| 52 | // We output it in terse form, which is different than Wikipedia's version |
| 53 | expect(svgStr).toEqual('M205 5L795 5L595 295L5 295L205 5Z'); |
| 54 | path.delete(); |
| 55 | done(); |
| 56 | }); |
| 57 | }); |
| 58 | |
Kevin Lubick | 97d6d98 | 2018-08-10 15:53:16 -0400 | [diff] [blame] | 59 | it('can create an SVG string from hex values', function(done) { |
Kevin Lubick | 644d8e7 | 2018-08-09 13:58:04 -0400 | [diff] [blame] | 60 | LoadPathKit.then(() => { |
| 61 | let cmds = [[PathKit.MOVE_VERB, "0x15e80300", "0x400004dc"], // 9.37088e-26f, 2.0003f |
| 62 | [PathKit.LINE_VERB, 795, 5], |
| 63 | [PathKit.LINE_VERB, 595, 295], |
| 64 | [PathKit.LINE_VERB, 5, 295], |
| 65 | [PathKit.LINE_VERB, "0x15e80300", "0x400004dc"], // 9.37088e-26f, 2.0003f |
| 66 | [PathKit.CLOSE_VERB]]; |
| 67 | let [ptr, len] = PathKit.loadCmdsTypedArray(cmds); |
| 68 | let path = PathKit.FromCmds(ptr, len); |
| 69 | |
| 70 | let svgStr = path.toSVGString(); |
| 71 | expect(svgStr).toEqual('M9.37088e-26 2.0003L795 5L595 295L5 295L9.37088e-26 2.0003Z'); |
| 72 | path.delete(); |
| 73 | done(); |
| 74 | }); |
| 75 | }); |
| 76 | |
Kevin Lubick | 97d6d98 | 2018-08-10 15:53:16 -0400 | [diff] [blame] | 77 | it('should have input and the output be the same', function(done) { |
Kevin Lubick | 92c9171 | 2018-08-09 10:00:02 -0400 | [diff] [blame] | 78 | LoadPathKit.then(() => { |
| 79 | let testCases = [ |
| 80 | 'M0 0L1075 0L1075 242L0 242L0 0Z' |
| 81 | ]; |
| 82 | |
| 83 | for(let svg of testCases) { |
| 84 | let path = PathKit.FromSVGString(svg); |
| 85 | let output = path.toSVGString(); |
| 86 | |
| 87 | expect(svg).toEqual(output); |
| 88 | |
| 89 | path.delete(); |
| 90 | } |
| 91 | done(); |
| 92 | }); |
| 93 | }); |
| 94 | |
Kevin Lubick | 97d6d98 | 2018-08-10 15:53:16 -0400 | [diff] [blame] | 95 | it('approximates arcs (conics) with quads', function(done) { |
| 96 | LoadPathKit.then(() => { |
| 97 | let path = PathKit.NewPath(); |
| 98 | path.moveTo(20, 120); |
| 99 | path.arc(20, 120, 18, 0, 1.75 * Math.PI); |
| 100 | path.lineTo(20, 120); |
| 101 | let svgStr = path.toSVGString(); |
| 102 | // Q stands for quad. No need to check the whole path, as that's more |
| 103 | // what the gold correctness tests are for (can account for changes we make |
| 104 | // to the approximation algorithms). |
| 105 | expect(svgStr).toContain('Q'); |
| 106 | path.delete(); |
| 107 | done(); |
| 108 | }); |
| 109 | }); |
| 110 | |
Kevin Lubick | 644d8e7 | 2018-08-09 13:58:04 -0400 | [diff] [blame] | 111 | }); |