scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2025-01-01 02:38:43 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add more unit tests for SvgImport.

Browse source 
Some currently failing.
This commit is contained in:
Jürg Lehni 2016-03-15 18:52:38 +01:00
parent 484d696df3
commit 7a4794dacf
7 changed files with 170 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
examples/SVG Import/Arcs.html
View file

@ -11,13 +11,12 @@
</script> </script>
</head> </head>
<body> <body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1000" height="500" id="svg"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1000" height="500" id="svg" viewBox="0 0 1000 500">
<g transform="scale(0.5)"> <g transform="scale(0.5)">
<path d="M300,200 h-150 a150,150 0 1,0 150,-150 z" <path d="M300,200 h-150 a150,150 0 1,0 150,-150 z"
fill="red" stroke="blue" stroke-width="5" /> fill="red" stroke="blue" stroke-width="5" />
<path d="M275,175 v-150 a150,150 0 0,0 -150,150 z" <path d="M275,175 v-150 a150,150 0 0,0 -150,150 z"
fill="yellow" stroke="blue" stroke-width="5" /> fill="yellow" stroke="blue" stroke-width="5" />
<path d="M600,350 l 50,-25 <path d="M600,350 l 50,-25
a25,25 -30 0,1 50,-25 l 50,-25 a25,25 -30 0,1 50,-25 l 50,-25
a25,50 -30 0,1 50,-25 l 50,-25 a25,50 -30 0,1 50,-25 l 50,-25
@ -72,6 +71,7 @@
</g> </g>
</g> </g>
</g> </g>
</g>
</svg> </svg>
<canvas id="canvas" width="1000" height="500"></canvas> <canvas id="canvas" width="1000" height="500"></canvas>
</body> </body>

13
examples/SVG Import/Symbols.html
View file

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Multiple Paths Test 2</title> <title>Symbols Test</title>
<link rel="stylesheet" href="../css/style.css"> <link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script> <script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas"> <script type="text/paperscript" canvas="canvas">
@ -10,15 +10,14 @@
</script> </script>
</head> </head>
<body> <body>
<svg version="1.1" id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" <svg version="1.1" id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="595" height="841">
width="595" height="841" xml:space="preserve">
<symbol id="circle" viewBox="0 0 48 48" overflow="visible"> <symbol id="circle" viewBox="0 0 48 48" overflow="visible">
<path fill="#FF0049" d="M24,0c0-13.255-10.745-24-24-24S-24-13.255-24,0s10.745,24,24,24S24,13.255,24,0z"/> <path fill="#FF0049" d="M24,0c0-13.255-10.745-24-24-24S-24-13.255-24,0s10.745,24,24,24S24,13.255,24,0z"/>
</symbol> </symbol>
<use xlink:href="#circle" width="48" height="48" x="-24" y="-24" transform="matrix(1.1667 1.1667 1.1667 -1.1667 177.0005 96)" overflow="visible"/> <use xlink:href="#circle" width="48" height="48" x="-24" y="-24" transform="matrix(1.1667 1.1667 1.1667 -1.1667 177.0005 96)"/>
<use xlink:href="#circle" width="48" height="48" x="-24" y="-24" transform="matrix(0.5625 0 0 -0.5625 92 152)" overflow="visible"/> <use xlink:href="#circle" width="48" height="48" x="-24" y="-24" transform="matrix(0.5625 0 0 -0.5625 92 152)"/>
<use xlink:href="#circle" width="48" height="48" x="-24" y="-24" transform="matrix(2.2415 -2.0119 -2.0119 -2.2415 176.9971 246.9941)" overflow="visible"/> <use xlink:href="#circle" width="48" height="48" x="-24" y="-24" transform="matrix(2.2415 -2.0119 -2.0119 -2.2415 176.9971 246.9941)"/>
<use xlink:href="#circle" width="48" height="48" x="-24" y="-24" transform="matrix(1 0 0 -1 84 65)" overflow="visible"/> <use xlink:href="#circle" width="48" height="48" x="-24" y="-24" transform="matrix(1 0 0 -1 84 65)"/>
</svg> </svg>
<canvas id="canvas" width="595" height="841"></canvas> <canvas id="canvas" width="595" height="841"></canvas>
</body> </body>

83
test/assets/blendModes.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 182 KiB

8
test/assets/symbol.svg Normal file
View file

@ -0,0 +1,8 @@
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="150" height="150">
<defs>
<symbol viewBox="-75,-75,150,150" id="symbol-1">
<path d="M-75,75l0,-150l150,0l0,150z" fill="red"></path>
</symbol>
</defs>
<use x="0" y="0" xlink:href="#symbol-1" width="150" height="150" overflow="visible"></use>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 392 B

9
test/assets/symbols.svg Normal file
View file

@ -0,0 +1,9 @@
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="595" height="841" viewBox="0 0 595 841">
<symbol id="circle" viewBox="0 0 48 48" overflow="visible">
<path fill="#FF0049" d="M24,0c0-13.255-10.745-24-24-24S-24-13.255-24,0s10.745,24,24,24S24,13.255,24,0z"/>
</symbol>
<use xlink:href="#circle" width="48" height="48" x="-24" y="-24" transform="matrix(1.1667 1.1667 1.1667 -1.1667 177.0005 96)"/>
<use xlink:href="#circle" width="48" height="48" x="-24" y="-24" transform="matrix(0.5625 0 0 -0.5625 92 152)"/>
<use xlink:href="#circle" width="48" height="48" x="-24" y="-24" transform="matrix(2.2415 -2.0119 -2.0119 -2.2415 176.9971 246.9941)"/>
<use xlink:href="#circle" width="48" height="48" x="-24" y="-24" transform="matrix(1 0 0 -1 84 65)"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 839 B

2
test/helpers.js
View file

@ -490,7 +490,7 @@ var compareSVG = function(done, actual, expected, message, options) {
function compare() { function compare() {
comparePixels(actual, expected, message, Base.set({ comparePixels(actual, expected, message, Base.set({
tolerance: 1e-2, tolerance: 1e-3,
resolution: 72 resolution: 72
}, options)); }, options));
done(); done();

5
test/tests/SvgImport.js
View file

@ -135,6 +135,8 @@ test('Import SVG without insertion', function() {
function importSVG(assert, url, message, options) { function importSVG(assert, url, message, options) {
var done = assert.async(); var done = assert.async();
project.importSVG(url, { project.importSVG(url, {
applyMatrix: false,
onLoad: function(item, svg) { onLoad: function(item, svg) {
if (!message) { if (!message) {
message = 'The imported SVG "' + url + '" should visually be ' message = 'The imported SVG "' + url + '" should visually be '
@ -142,6 +144,7 @@ function importSVG(assert, url, message, options) {
} }
compareSVG(done, item, svg, message, options); compareSVG(done, item, svg, message, options);
}, },
onError: function(error) { onError: function(error) {
var ok = !!(options && options.expectError); var ok = !!(options && options.expectError);
QUnit.push(ok, false, !ok, ok && message QUnit.push(ok, false, !ok, ok && message
@ -154,7 +157,7 @@ function importSVG(assert, url, message, options) {
if (!isNode) { if (!isNode) {
// JSDom does not have SVG rendering, so we can't test there. // JSDom does not have SVG rendering, so we can't test there.
var svgFiles = ['viewbox', 'clipping', 'gradients-1']; var svgFiles = ['viewbox', 'clipping', 'symbol', 'symbols', 'blendModes', 'gradients-1'];
// TODO: Investigate why Phantom struggles with this file: // TODO: Investigate why Phantom struggles with this file:
if (!isPhantom) if (!isPhantom)
svgFiles.push('gradients-2'); svgFiles.push('gradients-2');