| <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> |
| <html> |
| <head> |
| <script src="../../resources/js-test-pre.js"></script> |
| </head> |
| <body> |
| <p id="description"></p> |
| <div id="console"></div> |
| <script> |
| description("This tests the SVG path parser by parsing and then re-serializing various paths."); |
| |
| var pathElement = document.createElementNS("http://www.w3.org/2000/svg", "path"); |
| |
| var pathProperties = { |
| "M": [ "x", "y" ], |
| "m": [ "x", "y" ], |
| "L": [ "x", "y" ], |
| "l": [ "x", "y" ], |
| "H": [ "x" ], |
| "h": [ "x" ], |
| "V": [ "y" ], |
| "v": [ "y" ], |
| "Z": [ ], |
| "z": [ ], |
| "C": [ "x1", "y1", "x2", "y2", "x", "y" ], |
| "c": [ "x1", "y1", "x2", "y2", "x", "y" ], |
| "S": [ "x2", "y2", "x", "y" ], |
| "s": [ "x2", "y2", "x", "y" ], |
| "Q": [ "x1", "y1", "x", "y" ], |
| "q": [ "x1", "y1", "x", "y" ], |
| "T": [ "x", "y" ], |
| "t": [ "x", "y" ], |
| "A": [ "r1", "r2", "angle", "largeArcFlag", "sweepFlag", "x", "y" ], |
| "a": [ "r1", "r2", "angle", "largeArcFlag", "sweepFlag", "x", "y" ] |
| }; |
| |
| function printSegment(segment) |
| { |
| var letter = segment.pathSegTypeAsLetter; |
| var names = pathProperties[letter]; |
| if (!names) |
| return letter + "?"; |
| var string = letter; |
| for (var i = 0; i < names.length; ++i) { |
| if (i) |
| string += ","; |
| var value = segment[names[i]]; |
| if (value == undefined) { |
| string += "?"; |
| continue; |
| } |
| if (typeof(value) === "boolean") { |
| string += value ? 1 : 0; |
| continue; |
| } |
| string += value.toFixed(1).replace(/\.0$/, ""); |
| } |
| return string; |
| } |
| |
| function parsePath(string) |
| { |
| pathElement.setAttributeNS(null, "d", string); |
| |
| var pathSegList = pathElement.pathSegList; |
| var numberOfItems = pathSegList.numberOfItems; |
| |
| var pathCommands = ""; |
| for (var i = 0; i < numberOfItems; i++) { |
| if (i) |
| pathCommands += " "; |
| pathCommands += printSegment(pathSegList.getItem(i)); |
| } |
| |
| return pathCommands; |
| } |
| |
| shouldBe("parsePath('M1,2')", "'M1,2'"); |
| shouldBe("parsePath('m1,2')", "'m1,2'"); |
| shouldBe("parsePath('M100,200 m3,4')", "'M100,200 m3,4'"); |
| shouldBe("parsePath('M100,200 L3,4')", "'M100,200 L3,4'"); |
| shouldBe("parsePath('M100,200 l3,4')", "'M100,200 l3,4'"); |
| shouldBe("parsePath('M100,200 H3')", "'M100,200 H3'"); |
| shouldBe("parsePath('M100,200 h3')", "'M100,200 h3'"); |
| shouldBe("parsePath('M100,200 V3')", "'M100,200 V3'"); |
| shouldBe("parsePath('M100,200 v3')", "'M100,200 v3'"); |
| shouldBe("parsePath('M100,200 Z')", "'M100,200 Z'"); |
| shouldBe("parsePath('M100,200 z')", "'M100,200 Z'"); |
| shouldBe("parsePath('M100,200 C3,4,5,6,7,8')", "'M100,200 C3,4,5,6,7,8'"); |
| shouldBe("parsePath('M100,200 c3,4,5,6,7,8')", "'M100,200 c3,4,5,6,7,8'"); |
| shouldBe("parsePath('M100,200 S3,4,5,6')", "'M100,200 S3,4,5,6'"); |
| shouldBe("parsePath('M100,200 s3,4,5,6')", "'M100,200 s3,4,5,6'"); |
| shouldBe("parsePath('M100,200 Q3,4,5,6')", "'M100,200 Q3,4,5,6'"); |
| shouldBe("parsePath('M100,200 q3,4,5,6')", "'M100,200 q3,4,5,6'"); |
| shouldBe("parsePath('M100,200 T3,4')", "'M100,200 T3,4'"); |
| shouldBe("parsePath('M100,200 t3,4')", "'M100,200 t3,4'"); |
| shouldBe("parsePath('M100,200 A3,4,5,0,0,6,7')", "'M100,200 A3,4,5,0,0,6,7'"); |
| shouldBe("parsePath('M100,200 A3,4,5,1,0,6,7')", "'M100,200 A3,4,5,1,0,6,7'"); |
| shouldBe("parsePath('M100,200 A3,4,5,0,1,6,7')", "'M100,200 A3,4,5,0,1,6,7'"); |
| shouldBe("parsePath('M100,200 A3,4,5,1,1,6,7')", "'M100,200 A3,4,5,1,1,6,7'"); |
| shouldBe("parsePath('M100,200 a3,4,5,0,0,6,7')", "'M100,200 a3,4,5,0,0,6,7'"); |
| shouldBe("parsePath('M100,200 a3,4,5,0,1,6,7')", "'M100,200 a3,4,5,0,1,6,7'"); |
| shouldBe("parsePath('M100,200 a3,4,5,1,0,6,7')", "'M100,200 a3,4,5,1,0,6,7'"); |
| shouldBe("parsePath('M100,200 a3,4,5,1,1,6,7')", "'M100,200 a3,4,5,1,1,6,7'"); |
| shouldBe("parsePath('M100,200 a3,4,5,006,7')", "'M100,200 a3,4,5,0,0,6,7'"); |
| shouldBe("parsePath('M100,200 a3,4,5,016,7')", "'M100,200 a3,4,5,0,1,6,7'"); |
| shouldBe("parsePath('M100,200 a3,4,5,106,7')", "'M100,200 a3,4,5,1,0,6,7'"); |
| shouldBe("parsePath('M100,200 a3,4,5,116,7')", "'M100,200 a3,4,5,1,1,6,7'"); |
| shouldBe("parsePath('M100,200 a3,4,5,2,1,6,7')", "'M100,200'"); |
| shouldBe("parsePath('M100,200 a3,4,5,1,2,6,7')", "'M100,200'"); |
| |
| // FIXME: This uses 'If rx = 0 or ry = 0 then this arc is treated as a straight line segment (a "lineto") joining the endpoints.' |
| // I think the SVG DOM should still show the arc segment, fix that! |
| shouldBe("parsePath('M100,200 a0,4,5,0,0,10,0 a4,0,5,0,0,0,10 a0,0,5,0,0,-10,0 z')", "'M100,200 l10,0 l0,10 l-10,0 Z'"); |
| |
| shouldBe("parsePath('M1,2,3,4')", "'M1,2 L3,4'"); |
| shouldBe("parsePath('m100,200,3,4')", "'m100,200 l3,4'"); |
| |
| shouldBe("parsePath('M 100-200')", "'M100,-200'"); |
| shouldBe("parsePath('M 0.6.5')", "'M0.6,0.5'"); |
| |
| shouldBe("parsePath(' M1,2')", "'M1,2'"); |
| shouldBe("parsePath(' M1,2')", "'M1,2'"); |
| shouldBe("parsePath('\\tM1,2')", "'M1,2'"); |
| shouldBe("parsePath('\\nM1,2')", "'M1,2'"); |
| shouldBe("parsePath('\\rM1,2')", "'M1,2'"); |
| shouldBe("parsePath('\\vM1,2')", "''"); |
| shouldBe("parsePath('xM1,2')", "''"); |
| shouldBe("parsePath('M1,2 ')", "'M1,2'"); |
| shouldBe("parsePath('M1,2\\t')", "'M1,2'"); |
| shouldBe("parsePath('M1,2\\n')", "'M1,2'"); |
| shouldBe("parsePath('M1,2\\r')", "'M1,2'"); |
| shouldBe("parsePath('M1,2\\v')", "'M1,2'"); |
| shouldBe("parsePath('M1,2x')", "'M1,2'"); |
| shouldBe("parsePath('M1,2 L40,0#90')", "'M1,2 L40,0'"); |
| |
| shouldBe("parsePath('')", "''"); |
| shouldBe("parsePath(' ')", "''"); |
| shouldBe("parsePath('x')", "''"); |
| shouldBe("parsePath('L1,2')", "''"); |
| shouldBe("parsePath('M.1 .2 L.3 .4 .5 .6')", "'M0.1,0.2 L0.3,0.4 L0.5,0.6'"); |
| |
| successfullyParsed = true; |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
