diff --git a/CHANGELOG.md b/CHANGELOG.md index 1ed467ee158..fe6bbae6675 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## [next] +- test(): Rename svg tests [#9775](https://github.com/fabricjs/fabric.js/pull/9775) - refactor(): `_findTargetCorner` is now called `findControl` and returns the key and the control and the coordinates [#9668](https://github.com/fabricjs/fabric.js/pull/9668) - feat(LayoutManager): Handle the case of activeSelection with objects inside different groups [#9651](https://github.com/fabricjs/fabric.js/pull/9651) diff --git a/test/visual/clippath.js b/test/visual/clippath.js index ae529e3b58e..e2c950f6133 100644 --- a/test/visual/clippath.js +++ b/test/visual/clippath.js @@ -238,31 +238,30 @@ percentage: 0.06, }); - // function clipping7(canvas, callback) { - // var clipPath = new fabric.Circle({ radius: 30, strokeWidth: 0, top: -30, left: -30, skewY: 45 }); - // var obj1 = new fabric.Rect({ top: 0, left: 100, strokeWidth: 0, width: 100, height: 100, fill: 'rgba(0,255,0,0.8)'}); - // var obj2 = new fabric.Rect({ top: 0, left: 0, strokeWidth: 0, width: 100, height: 100, fill: 'rgba(255,255,0,0.8)'}); - // var obj3 = new fabric.Rect({ top: 100, left: 0, strokeWidth: 0, width: 100, height: 100, fill: 'rgba(0,255,255,0.8)'}); - // var obj4 = new fabric.Rect({ top: 100, left: 100, strokeWidth: 0, width: 100, height: 100, fill: 'rgba(255,0,0,0.8)'}); - // obj1.clipPath = clipPath; - // obj2.clipPath = clipPath; - // obj3.clipPath = clipPath; - // obj4.clipPath = clipPath; - // canvas.add(obj1); - // canvas.add(obj2); - // canvas.add(obj3); - // canvas.add(obj4); - // canvas.renderAll(); - // callback(canvas.lowerCanvasEl); - // } + function clipping7(canvas, callback) { + var clipPath = new fabric.Circle({ radius: 30, strokeWidth: 0, top: -30, left: -30, skewY: 45 }); + var obj1 = new fabric.Rect({ top: 0, left: 100, strokeWidth: 0, width: 100, height: 100, fill: 'rgba(0,255,0,0.8)'}); + var obj2 = new fabric.Rect({ top: 0, left: 0, strokeWidth: 0, width: 100, height: 100, fill: 'rgba(255,255,0,0.8)'}); + var obj3 = new fabric.Rect({ top: 100, left: 0, strokeWidth: 0, width: 100, height: 100, fill: 'rgba(0,255,255,0.8)'}); + var obj4 = new fabric.Rect({ top: 100, left: 100, strokeWidth: 0, width: 100, height: 100, fill: 'rgba(255,0,0,0.8)'}); + obj1.clipPath = clipPath; + obj2.clipPath = clipPath; + obj3.clipPath = clipPath; + obj4.clipPath = clipPath; + canvas.add(obj1); + canvas.add(obj2); + canvas.add(obj3); + canvas.add(obj4); + canvas.renderAll(); + callback(canvas.lowerCanvasEl); + } - // FIX ON NODE - // tests.push({ - // test: 'Many Objects can share the same clipPath', - // code: clipping7, - // golden: 'clipping7.png', - // percentage: 0.06, - // }); + tests.push({ + test: 'Many Objects can share the same clipPath', + code: clipping7, + golden: 'clipping7.png', + percentage: 0.06, + }); function clipping8(canvas, callback) { var clipPath = new fabric.Circle({ radius: 60, strokeWidth: 0, top: 40, left: 40, absolutePositioned: true }); diff --git a/test/visual/golden/clippath-5.png b/test/visual/golden/clippath-5.png index 8611fb7b2c2..cf7ca9abf3c 100644 Binary files a/test/visual/golden/clippath-5.png and b/test/visual/golden/clippath-5.png differ diff --git a/test/visual/golden/clippath-6.png b/test/visual/golden/clippath-6.png index 013eb1fd46c..4b4bd4c4cdd 100644 Binary files a/test/visual/golden/clippath-6.png and b/test/visual/golden/clippath-6.png differ diff --git a/test/visual/golden/clippath-7.png b/test/visual/golden/clippath-7.png index bc9a5db3c1a..98fb4ff1cc0 100644 Binary files a/test/visual/golden/clippath-7.png and b/test/visual/golden/clippath-7.png differ diff --git a/test/visual/golden/clippath-8.png b/test/visual/golden/clippath-8.png deleted file mode 100644 index d77a6414078..00000000000 Binary files a/test/visual/golden/clippath-8.png and /dev/null differ diff --git a/test/visual/golden/clippath-9.png b/test/visual/golden/clippath-9.png index 139ab9dac0a..89fef4d842c 100644 Binary files a/test/visual/golden/clippath-9.png and b/test/visual/golden/clippath-9.png differ diff --git a/test/visual/golden/clippath-9_SVG.png b/test/visual/golden/clippath-9_SVG.png new file mode 100644 index 00000000000..d3527a446e9 Binary files /dev/null and b/test/visual/golden/clippath-9_SVG.png differ diff --git a/test/visual/golden/clipping01_SVG.png b/test/visual/golden/clipping01_SVG.png new file mode 100644 index 00000000000..0882d7dfad6 Binary files /dev/null and b/test/visual/golden/clipping01_SVG.png differ diff --git a/test/visual/golden/clipping0_SVG.png b/test/visual/golden/clipping0_SVG.png new file mode 100644 index 00000000000..b5facae1acb Binary files /dev/null and b/test/visual/golden/clipping0_SVG.png differ diff --git a/test/visual/golden/clipping10.png b/test/visual/golden/clipping10.png index 59041fb5632..2a893d3eef2 100644 Binary files a/test/visual/golden/clipping10.png and b/test/visual/golden/clipping10.png differ diff --git a/test/visual/golden/clipping10_SVG.png b/test/visual/golden/clipping10_SVG.png new file mode 100644 index 00000000000..43b1e03cb55 Binary files /dev/null and b/test/visual/golden/clipping10_SVG.png differ diff --git a/test/visual/golden/clipping12.png b/test/visual/golden/clipping12.png deleted file mode 100644 index 82b41527224..00000000000 Binary files a/test/visual/golden/clipping12.png and /dev/null differ diff --git a/test/visual/golden/clipping13.png b/test/visual/golden/clipping13.png deleted file mode 100644 index 40b983bbd92..00000000000 Binary files a/test/visual/golden/clipping13.png and /dev/null differ diff --git a/test/visual/golden/clipping1_SVG.png b/test/visual/golden/clipping1_SVG.png new file mode 100644 index 00000000000..fc24ad0cf75 Binary files /dev/null and b/test/visual/golden/clipping1_SVG.png differ diff --git a/test/visual/golden/clipping2_SVG.png b/test/visual/golden/clipping2_SVG.png new file mode 100644 index 00000000000..2bef9cee45d Binary files /dev/null and b/test/visual/golden/clipping2_SVG.png differ diff --git a/test/visual/golden/clipping3.png b/test/visual/golden/clipping3.png index e62010e417f..e6021c3dffe 100644 Binary files a/test/visual/golden/clipping3.png and b/test/visual/golden/clipping3.png differ diff --git a/test/visual/golden/clipping3_SVG.png b/test/visual/golden/clipping3_SVG.png new file mode 100644 index 00000000000..13619b64a84 Binary files /dev/null and b/test/visual/golden/clipping3_SVG.png differ diff --git a/test/visual/golden/clipping4.png b/test/visual/golden/clipping4.png index 3e28b489008..4678760cd08 100644 Binary files a/test/visual/golden/clipping4.png and b/test/visual/golden/clipping4.png differ diff --git a/test/visual/golden/clipping4_SVG.png b/test/visual/golden/clipping4_SVG.png new file mode 100644 index 00000000000..e203e7b562f Binary files /dev/null and b/test/visual/golden/clipping4_SVG.png differ diff --git a/test/visual/golden/clipping5_SVG.png b/test/visual/golden/clipping5_SVG.png new file mode 100644 index 00000000000..5175760a1db Binary files /dev/null and b/test/visual/golden/clipping5_SVG.png differ diff --git a/test/visual/golden/clipping7.png b/test/visual/golden/clipping7.png index da7f253e517..1a048907535 100644 Binary files a/test/visual/golden/clipping7.png and b/test/visual/golden/clipping7.png differ diff --git a/test/visual/golden/clipping7_SVG.png b/test/visual/golden/clipping7_SVG.png new file mode 100644 index 00000000000..3ae5388797c Binary files /dev/null and b/test/visual/golden/clipping7_SVG.png differ diff --git a/test/visual/golden/clipping8.png b/test/visual/golden/clipping8.png index 16b569389bd..b44198ec19b 100644 Binary files a/test/visual/golden/clipping8.png and b/test/visual/golden/clipping8.png differ diff --git a/test/visual/golden/clipping8_SVG.png b/test/visual/golden/clipping8_SVG.png new file mode 100644 index 00000000000..b44198ec19b Binary files /dev/null and b/test/visual/golden/clipping8_SVG.png differ diff --git a/test/visual/golden/clipping9_SVG.png b/test/visual/golden/clipping9_SVG.png new file mode 100644 index 00000000000..0aad2c8cdca Binary files /dev/null and b/test/visual/golden/clipping9_SVG.png differ diff --git a/test/visual/golden/export12_SVG.png b/test/visual/golden/export12_SVG.png new file mode 100644 index 00000000000..2e15489332e Binary files /dev/null and b/test/visual/golden/export12_SVG.png differ diff --git a/test/visual/golden/export13_SVG.png b/test/visual/golden/export13_SVG.png new file mode 100644 index 00000000000..ab447a9822f Binary files /dev/null and b/test/visual/golden/export13_SVG.png differ diff --git a/test/visual/golden/notoemoji-person.png b/test/visual/golden/notoemoji-person.png index d0f4e71a397..44d142ac9fd 100644 Binary files a/test/visual/golden/notoemoji-person.png and b/test/visual/golden/notoemoji-person.png differ diff --git a/test/visual/z_svg_export.js b/test/visual/z_svg_export.js index 6ac75db35da..6d526491675 100644 --- a/test/visual/z_svg_export.js +++ b/test/visual/z_svg_export.js @@ -53,7 +53,7 @@ tests.push({ test: 'Clip a rect with a circle, no zoom', code: clipping0, - golden: 'clipping0.png', + golden: 'clipping0_SVG.png', newModule: 'Export clippaths to SVG', percentage: 0.06, beforeEachHandler: function() { @@ -73,7 +73,7 @@ tests.push({ test: 'A clippath ignores fill and stroke for drawing, not positioning', code: clipping01, - golden: 'clipping01.png', + golden: 'clipping01_SVG.png', percentage: 0.06, }); @@ -90,7 +90,7 @@ tests.push({ test: 'Clip a rect with a circle, with zoom', code: clipping1, - golden: 'clipping1.png', + golden: 'clipping1_SVG.png', percentage: 0.06, }); @@ -113,7 +113,7 @@ tests.push({ test: 'Clip a group with a circle', code: clipping2, - golden: 'clipping2.png', + golden: 'clipping2_SVG.png', percentage: 0.06, }); @@ -134,7 +134,7 @@ tests.push({ test: 'Isolation of clipPath of group and inner objects', code: clipping3, - golden: 'clipping3.png', + golden: 'clipping3_SVG.png', percentage: 0.06, disabled: false, }); @@ -169,7 +169,7 @@ tests.push({ test: 'ClipPath can be transformed', code: clipping4, - golden: 'clipping4.png', + golden: 'clipping4_SVG.png', percentage: 0.06, }); @@ -206,7 +206,7 @@ tests.push({ test: 'ClipPath can be a group with many objects', code: clipping5, - golden: 'clipping5.png', + golden: 'clipping5_SVG.png', percentage: 0.06, disabled: false, }); @@ -245,7 +245,7 @@ tests.push({ test: 'ClipPath can be inverted, it will clip what is outside the clipPath', code: clipping6, - golden: 'clipping6.png', + golden: 'clipping6_SVG.png', percentage: 0.06, disabled: true, }); @@ -270,7 +270,7 @@ tests.push({ test: 'Many Objects can share the same clipPath', code: clipping7, - golden: 'clipping7.png', + golden: 'clipping7_SVG.png', percentage: 0.06, disabled: false, }); @@ -294,7 +294,7 @@ tests.push({ test: 'an absolute positioned clipPath, shared', code: clipping8, - golden: 'clipping8.png', + golden: 'clipping8_SVG.png', percentage: 0.06, disabled: false, }); @@ -316,7 +316,7 @@ tests.push({ test: 'a clipPath on the canvas', code: clipping9, - golden: 'clipping9.png', + golden: 'clipping9_SVG.png', percentage: 0.06, disabled: false, }); @@ -331,7 +331,7 @@ tests.push({ test: 'clipPath with a path on a simple elements', code: clipping10, - golden: 'clipping10.png', + golden: 'clipping10_SVG.png', percentage: 0.06, }); @@ -345,13 +345,13 @@ tests.push({ test: 'clipPath made of polygons and paths', code: clipping11, - golden: 'clippath-9.png', + golden: 'clippath-9_SVG.png', percentage: 0.06, width: 400, height: 400, }); - function clipping12(canvas, callback) { + function export12(canvas, callback) { var jsonData = '{"version":"2.4.6","objects":[{"type":"Ellipse","version":"2.4.6","left":2.5,"top":-56.5,"width":220,"height":300,"fill":{"type":"radial","coords":{"x1":110.00000000000001,"y1":110.00000000000001,"x2":110.00000000000001,"y2":110.00000000000001,"r1":0,"r2":110.00000000000001},"colorStops":[{"offset":1,"color":"rgb(0,0,255)","opacity":1},{"offset":0.6,"color":"rgb(0,153,153)","opacity":0.5},{"offset":0.3,"color":"rgb(0,0,255)","opacity":1},{"offset":0,"color":"rgb(255,0,0)","opacity":0.8}],"offsetX":0,"offsetY":0,"gradientTransform":[1,0,0,1.3636363636363635,0,0]},"scaleX":0.69,"scaleY":1.07,"skewY":-32.03,"rx":110,"ry":150}]}'; canvas.loadFromJSON(jsonData).then(function() { toSVGCanvas(canvas, callback); @@ -360,14 +360,14 @@ tests.push({ test: 'Export a radial svg with scaling', - code: clipping12, - golden: 'clipping12.png', + code: export12, + golden: 'export12_SVG.png', percentage: 0.06, width: 220, height: 300, }); - function clipping13(canvas, callback) { + function export13(canvas, callback) { var jsonData = '{"version":"2.4.6","objects":[{"type":"Path","version":"2.4.6","left":84.63385601266276,"top":385.11623376730074,"width":3.14,"height":10.44,"fill":{"type":"linear","coords":{"x1":481.066,"y1":785.465,"x2":480.953,"y2":793.102},"colorStops":[{"offset":1,"color":"rgb(160,137,44)","opacity":1},{"offset":0.9,"color":"rgb(85,68,0)","opacity":1},{"offset":0.78,"color":"rgb(80,68,22)","opacity":1},{"offset":0.607,"color":"rgb(160,137,44)","opacity":1},{"offset":0.467,"color":"rgb(255,255,255)","opacity":1},{"offset":0.299,"color":"rgb(200,171,55)","opacity":1},{"offset":0.24,"color":"rgb(160,137,44)","opacity":1},{"offset":0.096,"color":"rgb(120,103,33)","opacity":1},{"offset":0,"color":"rgb(211,188,95)","opacity":1}],"offsetX":-439.1113425994523,"offsetY":-783.951,"gradientTransform":[-1,0,0,1,921.58,0]},"scaleX":9.32,"scaleY":10.58,"angle":-90,"path":[["M",442.142,794.394],["l",-2.583,-1.46],["c",-0.644,-2.39,-0.512,-5.004,-0.113,-7.693],["l",2.808,-1.29]]},{"type":"Path","version":"2.4.6","left":78.08737427855635,"top":315.5127636903678,"width":2.42,"height":11.51,"fill":{"type":"linear","coords":{"x1":473.934,"y1":792.821,"x2":473.822,"y2":784.005},"colorStops":[{"offset":1,"color":"rgb(211,188,95)","opacity":1},{"offset":0.904,"color":"rgb(120,103,33)","opacity":1},{"offset":0.76,"color":"rgb(160,137,44)","opacity":1},{"offset":0.701,"color":"rgb(200,171,55)","opacity":1},{"offset":0.533,"color":"rgb(255,255,255)","opacity":1},{"offset":0.393,"color":"rgb(160,137,44)","opacity":1},{"offset":0.22,"color":"rgb(80,68,22)","opacity":1},{"offset":0.1,"color":"rgb(85,68,0)","opacity":1},{"offset":0,"color":"rgb(160,137,44)","opacity":1}],"offsetX":-446.578,"offsetY":-783.332,"gradientTransform":[-1,0,0,1,921.58,0]},"scaleX":9.32,"scaleY":10.58,"angle":-90,"path":[["M",448.32,783.332],["l",0.673,2.02],["c",-0.885,1.242,-0.83,2.952,-0.075,7.92],["l",-1.16,1.57],["l",-1.18,-4.49],["l",0.17,-5.673],["z"]]},{"type":"Path","version":"2.4.6","left":92.34368668174653,"top":366.5275069557187,"width":6.57,"height":5.67,"fill":{"type":"linear","coords":{"x1":475.081,"y1":785.381,"x2":479.3,"y2":788.975},"colorStops":[{"offset":1,"color":"rgb(120,103,33)","opacity":1},{"offset":0,"color":"rgb(200,171,55)","opacity":1}],"offsetX":-441.1054336190674,"offsetY":-784.68,"gradientTransform":[-1,0,0,1,921.58,0]},"scaleX":9.32,"scaleY":10.58,"angle":-90,"path":[["M",447.365,784.68],["h",-5.616],["c",-0.592,1.87,-0.812,3.743,-0.506,5.615],["l",5.952,0.056],["c",0.658,-1.976,0.554,-3.843,0.17,-5.67],["z"]]},{"type":"Path","version":"2.4.6","left":151.23029459047214,"top":365.75783100618594,"width":6.58,"height":4.48,"fill":{"type":"linear","coords":{"x1":476.181,"y1":791.235,"x2":477.099,"y2":794.257},"colorStops":[{"offset":1,"color":"rgb(120,103,33)","opacity":1},{"offset":0,"color":"rgb(200,171,55)","opacity":1}],"offsetX":-441.18800000000005,"offsetY":-790.248,"gradientTransform":[-1,0,0,1,921.58,0]},"scaleX":9.32,"scaleY":10.58,"angle":-90,"path":[["M",447.196,790.248],["c",0.397,1.492,0.613,3.14,0.562,4.483],["l",-5.503,-0.056],["c",-0.974,-1.853,-0.957,-3.128,-1.067,-4.406],["z"]]},{"type":"Path","version":"2.4.6","left":78.67962464545468,"top":360.50959855742764,"width":6.4,"height":1.35,"fill":{"type":"linear","coords":{"x1":473.32,"y1":784.06,"x2":479.896,"y2":784.06},"colorStops":[{"offset":1,"color":"rgb(200,171,55)","opacity":1},{"offset":0,"color":"rgb(120,103,33)","opacity":1}],"offsetX":-441.751,"offsetY":-783.3879999999999,"gradientTransform":[-1,0,0,1,921.58,0]},"scaleX":9.32,"scaleY":10.58,"angle":-90,"path":[["M",447.196,784.68],["c",0.783,-0.43,0.715,-0.862,0.955,-1.292],["l",-5.67,0.224],["c",-0.308,0.343,-0.704,0.64,-0.73,1.123],["z"]]},{"type":"Path","version":"2.4.6","left":195.70884317712697,"top":264.26532049868615,"width":2.99,"height":8.78,"fill":{"type":"linear","coords":{"x1":481.066,"y1":785.465,"x2":480.953,"y2":793.102},"colorStops":[{"offset":1,"color":"rgb(160,137,44)","opacity":1},{"offset":0.9,"color":"rgb(85,68,0)","opacity":1},{"offset":0.78,"color":"rgb(80,68,22)","opacity":1},{"offset":0.607,"color":"rgb(160,137,44)","opacity":1},{"offset":0.467,"color":"rgb(255,255,255)","opacity":1},{"offset":0.299,"color":"rgb(200,171,55)","opacity":1},{"offset":0.24,"color":"rgb(160,137,44)","opacity":1},{"offset":0.096,"color":"rgb(120,103,33)","opacity":1},{"offset":0,"color":"rgb(211,188,95)","opacity":1}],"offsetX":-228.298,"offsetY":-835.244,"gradientTransform":[0.93343,0,0,0.85628,-219.064,163.965]},"scaleX":9.32,"scaleY":10.58,"angle":90,"flipY":true,"path":[["M",228.298,844.02],["l",2.57,-1.083],["c",0.6,-2.048,0.477,-4.285,0.104,-6.587],["l",-2.62,-1.106]]},{"type":"Circle","version":"2.4.6","left":-28.49,"top":-28.49,"width":4.64,"height":4.64,"fill":{"type":"radial","coords":{"x1":193.676,"y1":141.252,"x2":193.676,"y2":141.252,"r1":0,"r2":4.082},"colorStops":[{"offset":1,"color":"rgb(0,0,0)","opacity":1},{"offset":0.969,"color":"rgb(0,0,0)","opacity":1},{"offset":0.904,"color":"rgb(236,236,236)","opacity":1},{"offset":0.874,"color":"rgb(77,77,77)","opacity":1},{"offset":0.837,"color":"rgb(237,237,237)","opacity":1},{"offset":0.817,"color":"rgb(0,0,0)","opacity":1},{"offset":0,"color":"rgb(0,0,0)","opacity":1}],"offsetX":-116.293,"offsetY":-166.167,"gradientTransform":[0.3487,0.40483,-0.40345,0.34752,108.054,40.97]},"scaleX":59.8,"scaleY":59.8,"radius":2.321,"startAngle":0,"endAngle":360},{"type":"Circle","version":"2.4.6","left":32.24,"top":30.43,"width":3.58,"height":3.58,"fill":{"type":"linear","coords":{"x1":195.171,"y1":143.461,"x2":191.574,"y2":138.568},"colorStops":[{"offset":1,"color":"rgb(204,204,204)","opacity":1},{"offset":0.687,"color":"rgb(255,255,255)","opacity":1},{"offset":0,"color":"rgb(255,255,255)","opacity":1}],"offsetX":-116.817,"offsetY":-166.661,"gradientTransform":[0.52872,0,0,0.52872,16.3,93.714]},"stroke":"#b3b3b3","strokeWidth":0.02,"strokeLineCap":"round","scaleX":59.8,"scaleY":59.8,"radius":1.789,"startAngle":0,"endAngle":360},{"type":"Circle","version":"2.4.6","left":125.91,"top":124.11,"width":0.46,"height":0.46,"fill":{"type":"linear","coords":{"x1":656.429,"y1":320.934,"x2":506.429,"y2":131.648},"colorStops":[{"offset":1,"color":"rgb(242,242,242)","opacity":1},{"offset":0,"color":"rgb(102,102,102)","opacity":1}],"offsetX":-118.37599999999999,"offsetY":-168.22,"gradientTransform":[0.0017,0,0,0.0017,117.64,168.082]},"stroke":"#999","strokeWidth":0,"strokeLineCap":"round","scaleX":59.8,"scaleY":59.8,"radius":0.23,"startAngle":0,"endAngle":360}]}'; canvas.loadFromJSON(jsonData).then(function() { toSVGCanvas(canvas, callback); @@ -376,8 +376,8 @@ tests.push({ test: 'Export complex gradients', - code: clipping13, - golden: 'clipping13.png', + code: export13, + golden: 'export13_SVG.png', percentage: 0.06, width: 290, height: 400,