lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-12-21 19:27:08 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

tests for line-through

Browse Source
This commit is contained in:
Anton Lavrenov
2017-02-07 11:37:01 -05:00
parent 878a007d67
commit 1184bb7e71
3 changed files with 596 additions and 602 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
CHANGELOG.md
View File

@@ -4,6 +4,9 @@ This project adheres to [Semantic Versioning](http://semver.org/).
## [Not released][Not released]
## Added
- `textDecoration` of `Konva.Text` now supports `line-through`
## [1.3.0][2017-01-10]
## Added

2
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

49
test/unit/shapes/Text-test.js
View File

@@ -14,7 +14,9 @@ suite('Text', function(){
});
// ======================================================
test('text with undefined text property should not throw an error', function() {
test(
'text with undefined text property should not throw an error',
function() {
var stage = addStage();
var layer = new Konva.Layer();
@@ -25,7 +27,8 @@ suite('Text', function(){
layer.draw();
assert.equal(text.getWidth(), 0);
});
}
);
test('add text with shadows', function() {
var stage = addStage();
@@ -98,24 +101,21 @@ suite('Text', function(){
shadowBlur: 0
});
layer.add(text);
stage.add(layer);
var canvas = createCanvas();
var context = canvas.getContext('2d');
context.textBaseline = 'middle';
context.font = "normal normal 50px Arial";
context.font = 'normal normal 50px Arial';
context.fillStyle = 'darkgrey';
context.fillText('Hello World!', 10, 10 + 50 + 25);
context.fillStyle = 'black';
context.fillText('Hello World!', 10, 10 + 25);
compareLayerAndCanvas(layer, canvas, 254);
});
test('text cache with fill and shadow', function() {
var stage = addStage();
var layer1 = new Konva.Layer();
@@ -303,7 +303,6 @@ suite('Text', function(){
//layer.setListening(false);
layer.drawHit();
});
// ======================================================
@@ -342,7 +341,7 @@ suite('Text', function(){
var text = new Konva.Text({
x: 10,
y: 10,
text: 'HEADING\n\nAll the world\'s a stage, merely players. They have their exits and their entrances; And one man in his time plays many parts.',
text: "HEADING\n\nAll the world's a stage, merely players. They have their exits and their entrances; And one man in his time plays many parts.",
//text: 'HEADING\n\nThis is a really cool paragraph. \n And this is a footer.',
fontSize: 14,
fontFamily: 'Calibri',
@@ -368,7 +367,6 @@ suite('Text', function(){
assert.equal(text.getLineHeight(), 20);
});
// ======================================================
test('text multi line with justify align', function() {
var stage = addStage();
@@ -385,7 +383,7 @@ suite('Text', function(){
var text = new Konva.Text({
x: 10,
y: 10,
text: 'HEADING\n\n All the world\'s a stage, merely players. They have their exits and their entrances; And one man in his time plays many parts.',
text: "HEADING\n\n All the world's a stage, merely players. They have their exits and their entrances; And one man in his time plays many parts.",
fontSize: 14,
fontFamily: 'Calibri',
fontStyle: 'normal',
@@ -399,7 +397,6 @@ suite('Text', function(){
rect.height(text.getHeight());
layer.add(rect).add(text);
// var text2 = new Konva.Text({
// x: 10,
// y: 110,
@@ -417,8 +414,6 @@ suite('Text', function(){
stage.add(layer);
var trace = 'fillStyle;fillText();translate();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();restore();translate();save();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();restore();translate();restore();restore();';
assert.equal(layer.getContext().getTrace(true), trace);
@@ -434,7 +429,7 @@ suite('Text', function(){
y: 10,
//stroke: '#555',
//strokeWidth: 5,
text: 'HEADING\n\nAll the world\'s a stage, and all the men and women merely players. They have their exits and their entrances; And one man in his time plays many parts.',
text: "HEADING\n\nAll the world's a stage, and all the men and women merely players. They have their exits and their entrances; And one man in his time plays many parts.",
//text: 'HEADING\n\nThis is a really cool paragraph. \n And this is a footer.',
fontSize: 16,
fontFamily: 'Calibri',
@@ -454,12 +449,9 @@ suite('Text', function(){
layer.add(text);
stage.add(layer);
//console.log(layer.getContext().getTrace());
});
// ======================================================
// skiping this test for now. It fails on travis. WHYYY??!?!?!
// TODO: restore it
@@ -483,9 +475,7 @@ suite('Text', function(){
var trace = 'clearRect(0,0,578,200);save();transform(1,0,0,1,10,10);font=normal normal 15px Arial;textBaseline=middle;textAlign=left;save();translate(0,7.5);save();save();beginPath();moveTo(0,8);lineTo(52,8);stroke();restore();fillStyle=red;fillText(h,0,0);translate(13,0);fillStyle=red;fillText(e,0,0);translate(13,0);fillStyle=red;fillText(l,0,0);translate(8,0);fillStyle=red;fillText(l,0,0);translate(8,0);fillStyle=red;fillText(o,0,0);translate(13,0);restore();translate(0,15);save();save();beginPath();moveTo(0,8);lineTo(56,8);stroke();restore();fillStyle=red;fillText(w,0,0);translate(16,0);fillStyle=red;fillText(o,0,0);translate(13,0);fillStyle=red;fillText(r,0,0);translate(10,0);fillStyle=red;fillText(l,0,0);translate(8,0);fillStyle=red;fillText(d,0,0);translate(13,0);restore();translate(0,15);restore();restore();';
assert.equal(layer.getContext().getTrace(), trace);
});
test('text multi line with strike', function() {
@@ -503,9 +493,11 @@ suite('Text', function(){
layer.add(text);
stage.add(layer);
// TODO
// assert.equal(layer.getContext().getTrace(), trace);
var trace = 'clearRect(0,0,578,200);save();transform(1,0,0,1,10,10);font=normal normal 80px Arial;textBaseline=middle;textAlign=left;save();translate(0,40);save();save();beginPath();moveTo(0,0);lineTo(169,0);stroke();restore();fillStyle=red;fillText(hello,0,0);restore();translate(0,80);save();save();beginPath();moveTo(0,0);lineTo(191,0);stroke();restore();fillStyle=red;fillText(world,0,0);restore();translate(0,80);restore();restore();';
// console.log(layer.getContext().getTrace());
assert.equal(layer.getContext().getTrace(), trace);
});
test('text multi line with underline and strike', function() {
@@ -524,8 +516,9 @@ suite('Text', function(){
layer.add(text);
stage.add(layer);
// TODO
// assert.equal(layer.getContext().getTrace(), trace);
var trace = 'clearRect(0,0,578,200);save();transform(1,0,0,1,10,10);font=normal normal 80px Arial;textBaseline=middle;textAlign=left;save();translate(0,40);save();save();beginPath();moveTo(0,40);lineTo(169,40);stroke();restore();save();beginPath();moveTo(0,0);lineTo(169,0);stroke();restore();fillStyle=red;fillText(hello,0,0);restore();translate(0,80);save();save();beginPath();moveTo(0,40);lineTo(191,40);stroke();restore();save();beginPath();moveTo(0,0);lineTo(191,0);stroke();restore();fillStyle=red;fillText(world,0,0);restore();translate(0,80);restore();restore();';
assert.equal(layer.getContext().getTrace(), trace);
});
// ======================================================
@@ -549,8 +542,6 @@ suite('Text', function(){
var width = text.getWidth();
var height = text.getHeight();
layer.add(text);
stage.add(layer);
@@ -561,7 +552,6 @@ suite('Text', function(){
assert(text.getWidth() > width, 'width should have increased');
assert(text.getHeight() > height, 'height should have increased');
});
test('get text width', function() {
var stage = addStage();
@@ -576,7 +566,6 @@ suite('Text', function(){
layer.add(text);
layer.draw();
assert.equal(text.getTextWidth() > 0 && text.getTextWidth() < 100, true);
});
test('default text color should be black', function() {
@@ -633,7 +622,10 @@ suite('Text', function(){
var rect = text.getSelfRect();
assert.deepEqual(rect, {
x : 0,y : 0, width : text.width(), height : 50
x: 0,
y: 0,
width: text.width(),
height: 50
});
});
@@ -693,5 +685,4 @@ suite('Text', function(){
assert.equal(data[2], 0, 'no blue');
assert.equal(data[3], 255, '255 alpha - fully visible');
});
});