diff --git a/test/visual/golden/text1.png b/test/visual/golden/text1.png new file mode 100644 index 00000000..b802ee9c Binary files /dev/null and b/test/visual/golden/text1.png differ diff --git a/test/visual/golden/text2.png b/test/visual/golden/text2.png new file mode 100644 index 00000000..d1850bd9 Binary files /dev/null and b/test/visual/golden/text2.png differ diff --git a/test/visual/golden/text3.png b/test/visual/golden/text3.png new file mode 100644 index 00000000..c8ba86fc Binary files /dev/null and b/test/visual/golden/text3.png differ diff --git a/test/visual/golden/text4.png b/test/visual/golden/text4.png new file mode 100644 index 00000000..ca62ca6f Binary files /dev/null and b/test/visual/golden/text4.png differ diff --git a/test/visual/golden/text5.png b/test/visual/golden/text5.png new file mode 100644 index 00000000..15cd8dda Binary files /dev/null and b/test/visual/golden/text5.png differ diff --git a/test/visual/text.js b/test/visual/text.js new file mode 100644 index 00000000..ba8bc141 --- /dev/null +++ b/test/visual/text.js @@ -0,0 +1,159 @@ +(function() { + fabric.enableGLFiltering = false; + fabric.isWebglSupported = false; + fabric.Object.prototype.objectCaching = false; + var visualTestLoop; + if (fabric.isLikelyNode) { + visualTestLoop = global.visualTestLoop; + } + else { + visualTestLoop = window.visualTestLoop; + } + var fabricCanvas = this.canvas = new fabric.Canvas(null, { + enableRetinaScaling: false, renderOnAddRemove: false, width: 200, height: 200, + }); + + var tests = []; + + function text1(canvas, callback) { + canvas.setDimensions({ width: 300, height: 300 }); + var text = new fabric.Text('Kerning: VAVAWA', + { fontSize: 20, objectCaching: false, strokeWidth: 0 } + ); + var text2 = new fabric.Text('multi line\ntext\nwith lot of space on some lines', + { fontSize: 20, objectCaching: false, angle: 45, top: 40, left: 40, strokeWidth: 0 } + ); + var text3 = new fabric.Text('multi line\ntext\nwith lot of space on some lines', + { fontSize: 20, objectCaching: false, angle: -45, top: 200, left: 0, textAlign: 'right', strokeWidth: 0 } + ); + canvas.add(text, text2, text3); + canvas.renderAll(); + callback(canvas.lowerCanvasEl); + } + + tests.push({ + test: 'simple text test', + code: text1, + golden: 'text1.png', + newModule: 'Text', + percentage: 0.06, + }); + + function text2(canvas, callback) { + var text4 = new fabric.Text('2 spaces trailing \nno trailing spance\n5 spaces trailing ', + { fontSize: 20, objectCaching: false, top: 200, left: 0, textAlign: 'right', strokeWidth: 0 } + ); + var rect = new fabric.Rect({ + width: text4.width, + height: text4.height, + strokeWidth: 2, + stroke: 'blue', + fill: 'rgba(255, 255, 0, 0.4)', + top: text4.top, + left: text4.left + }); + var text5 = new fabric.Text(' 2 spaces both sides \nno trailing spance\n 5 spaces both sides ', + { fontSize: 20, objectCaching: false, top: 250, angle: -90, left: 200, strokeWidth: 0 } + ); + var rect2 = new fabric.Rect({ + width: text5.width, + height: text5.height, + strokeWidth: 2, + stroke: 'green', + fill: 'rgba(255, 0, 255, 0.4)', + top: text5.top, + left: text5.left, + angle: text5.angle + }); + var text = new fabric.Text('text with all decorations\nmultiline', + { underline: true, overline: true, linethrough: true, fontSize: 30, strokeWidth: 0 } + ); + canvas.add(rect, text4, rect2, text5, text); + canvas.renderAll(); + callback(canvas.lowerCanvasEl); + } + + tests.push({ + test: 'Text with trailing spaces', + code: text2, + golden: 'text2.png', + percentage: 0.06, + }); + + function text3(canvas, callback) { + var text = new fabric.Text('lorem ipsum\ndolor\nsit Amet2\nconsectgetur', + { objectCaching: false, fontFamily: 'Arial', styles: + {"0":{"0":{"fill":"red","fontSize":20},"1":{"fill":"red","fontSize":30},"2":{"fill":"red","fontSize":40},"3":{"fill":"red","fontSize":50},"4":{"fill":"red","fontSize":60},"6":{"textBackgroundColor":"yellow"},"7":{"textBackgroundColor":"yellow","textDecoration":" line-through","linethrough":true},"8":{"textBackgroundColor":"yellow","textDecoration":" line-through","linethrough":true},"9":{"textBackgroundColor":"yellow"}},"1":{"0":{"textDecoration":"underline"},"1":{"textDecoration":"underline"},"2":{"fill":"green","fontStyle":"italic","textDecoration":"underline"},"3":{"fill":"green","fontStyle":"italic","textDecoration":"underline"},"4":{"fill":"green","fontStyle":"italic","textDecoration":"underline"}},"2":{"0":{"fill":"blue","fontWeight":"bold"},"1":{"fill":"blue","fontWeight":"bold"},"2":{"fill":"blue","fontWeight":"bold","fontSize":63},"4":{"fontFamily":"Courier","textDecoration":" underline","underline":true},"5":{"fontFamily":"Courier","textDecoration":" underline","underline":true},"6":{"fontFamily":"Courier","textDecoration":" overline","overline":true},"7":{"fontFamily":"Courier","textDecoration":" overline","overline":true},"8":{"fontFamily":"Courier","textDecoration":" overline","overline":true}},"3":{"0":{"fill":"#666","textDecoration":"line-through"},"1":{"fill":"#666","textDecoration":"line-through"},"2":{"fill":"#666","textDecoration":"line-through"},"3":{"fill":"#666","textDecoration":"line-through"},"4":{"fill":"#666","textDecoration":"line-through"},"7":{"textDecoration":" underline","underline":true},"8":{"stroke":"#ff1e15","strokeWidth":2},"9":{"stroke":"#ff1e15","strokeWidth":2}}} + } + ); + canvas.add(text); + canvas.renderAll(); + callback(canvas.lowerCanvasEl); + } + + tests.push({ + test: 'Text with styles', + code: text3, + golden: 'text3.png', + percentage: 0.06, + }); + + function text4(canvas, callback) { + var text = new fabric.Text('lorem ipsum\ndolor\nsit Amet2\nconsectgetur', { + fontSize: 30, scaleX: 20, scaleY: 30, skewX: 30, skewY: 25, skewY: 15, angle: 25 + }); + var matrix = text.calcTransformMatrix(); + canvas.viewportTransform = fabric.util.invertTransform(matrix); + canvas.viewportTransform[4] = 0; + canvas.viewportTransform[5] = 0; + canvas.add(text); + canvas.renderAll(); + callback(canvas.lowerCanvasEl); + } + + tests.push({ + test: 'Text on a transformed canvas', + code: text4, + golden: 'text4.png', + percentage: 0.06, + }); + + function text5(canvas, callback) { + var text = new fabric.Text('Scaling', { + fontSize: 10, scaleX: 2, scaleY: 2, fill: 'rgba(0,0,255,0.4)', strokeWidth: 0 + }); + var text2 = new fabric.Text('Scaling', { + fontSize: 10, scaleX: 3, scaleY: 3, fill: 'rgba(0,0,255,0.4)', top: 10, strokeWidth: 0 + }); + var text3 = new fabric.Text('Scaling', { + fontSize: 10, scaleX: 4, scaleY: 4, fill: 'rgba(0,0,255,0.4)', top: 20, strokeWidth: 0 + }); + var text4 = new fabric.Text('Scaling', { + fontSize: 10, scaleX: 5, scaleY: 5, fill: 'rgba(0,0,255,0.4)', top: 30, strokeWidth: 0 + }); + var text5 = new fabric.Text('Scaling', { + fontSize: 10, scaleX: 6, scaleY: 6, fill: 'rgba(0,0,255,0.4)', top: 40, strokeWidth: 0 + }); + var text6 = new fabric.Text('Scaling', { + fontSize: 10, scaleX: 7, scaleY: 7, fill: 'rgba(0,0,255,0.4)', top: 50, strokeWidth: 0 + }); + var text7 = new fabric.Text('A', { + fontSize: 80, scaleX: 1, scaleY: 1, fill: 'rgb(0,0,255)', left: 190, strokeWidth: 12, stroke: 'rgba(255,0,0,0.2)' + }); + var text8 = new fabric.Text('A', { + fontSize: 65, scaleX: 8, scaleY: 8, fill: 'rgb(0,0,255)', top: -100, left: -100, strokeWidth: 12, stroke: 'rgba(255,0,0,0.2)' + }); + canvas.add(text8, text, text2, text3, text4, text5, text6, text7); + canvas.renderAll(); + callback(canvas.lowerCanvasEl); + } + + tests.push({ + test: 'Text with strokeWidths', + code: text5, + golden: 'text5.png', + percentage: 0.06, + }); + + tests.forEach(visualTestLoop(fabricCanvas, QUnit)); +})();