mirror of
https://github.com/konvajs/konva.git
synced 2025-04-05 20:48:28 +08:00
pulled all integration tests out of the unit test suite and put them into integrationTests.js. updated test suite index page
This commit is contained in:
parent
98dff50c93
commit
a3fe5b05ca
48
tests/assets/dataUrls.js
Normal file
48
tests/assets/dataUrls.js
Normal file
File diff suppressed because one or more lines are too long
@ -2,9 +2,11 @@
|
||||
<html>
|
||||
<body>
|
||||
<h1>KineticJS Test Suite</h1>
|
||||
<p>atomated test counts updated on 06-02-2013</p>
|
||||
<ul>
|
||||
<li><a href="unitTests.html">Unit Tests</a></li>
|
||||
<li><a href="functionalTests.html">Functional Tests</a></li>
|
||||
<li><a href="unitTests.html">Unit Tests (724)</a></li>
|
||||
<li><a href="functionalTests.html">Functional Tests (168)</a></li>
|
||||
<li><a href="integrationTests.html">Integration Tests (46)</a></li>
|
||||
<li><a href="manualTests.html">Manual Tests</a></li>
|
||||
<li><a href="performanceTests.html">Performance Tests</a></li>
|
||||
<li><a href="special/index.html">Special Tests</a></li>
|
||||
|
26
tests/html/integrationTests.html
Normal file
26
tests/html/integrationTests.html
Normal file
@ -0,0 +1,26 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
/* overwrite CSS */
|
||||
|
||||
</style>
|
||||
<link rel="stylesheet" type="text/css"href="../base.css">
|
||||
<script src="../../dist/kinetic-v0.0.0.js"></script>
|
||||
<script src="../assets/dataUrls.js"></script>
|
||||
<script src="../js/Test.js"></script>
|
||||
<script src="../js/integrationTests.js"></script>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
var test = new Test();
|
||||
test.run();
|
||||
|
||||
document.getElementsByTagName('body')[0].addEventListener('mousemove', function(evt) {
|
||||
//console.log(evt.clientX + ',' + evt.clientY);
|
||||
}, false);
|
||||
};
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
@ -7,7 +7,6 @@
|
||||
<!-- assets -->
|
||||
<script src="../assets/worldMap.js"></script>
|
||||
<script src="../assets/tiger.js"></script>
|
||||
<script src="../assets/unitDataUrls.js"></script>
|
||||
|
||||
<script src="../js/Test.js"></script>
|
||||
<script src="../js/unitTests.js"></script>
|
||||
|
@ -42,13 +42,7 @@ function testDataUrl(actual, key, message) {
|
||||
testCounter.style.backgroundColor = 'orange';
|
||||
testCounter.style.color = 'black';
|
||||
}
|
||||
console.warn(message + ' (NOTE: use Google Chrome for data url comparisons, run on web server for caching and filtering)');
|
||||
|
||||
console.log('key: ' + key);
|
||||
console.log('actual:');
|
||||
console.log(actual);
|
||||
console.log('expected:');
|
||||
console.log(expected);
|
||||
console.warn(message + ' (NOTE: use Google Chrome for data url comparisons, run on web server for caching and filtering)');
|
||||
}
|
||||
numTests++;
|
||||
testCounter.innerHTML = numTests;
|
||||
|
1819
tests/js/integrationTests.js
Normal file
1819
tests/js/integrationTests.js
Normal file
File diff suppressed because it is too large
Load Diff
@ -604,15 +604,6 @@ Test.Modules.CONTAINER = {
|
||||
test(group.get('Group').length === 0, 'group should have 0 groups');
|
||||
test(group.get('Rect').length === 1, 'group should have 1 rects');
|
||||
test(group.get('Circle').length === 1, 'gropu should have 1 circles');
|
||||
|
||||
//console.log(dataUrls['node shape type selector']);
|
||||
|
||||
stage.toDataURL({
|
||||
callback: function(dataUrl) {
|
||||
//console.log(dataUrl)
|
||||
testDataUrl(dataUrl,'node shape type selector', 'problem with node and shape type selector render.');
|
||||
}
|
||||
});
|
||||
},
|
||||
'test get() selector by adding shape, then group, then layer': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
@ -864,13 +855,6 @@ Test.Modules.CONTAINER = {
|
||||
|
||||
test(greenLayer.getZIndex() === 0, 'green layer should have z index of 0');
|
||||
test(blueLayer.getZIndex() === 1, 'blue layer should have z index of 1');
|
||||
|
||||
stage.toDataURL({
|
||||
callback: function(dataUrl) {
|
||||
//console.log(dataUrl)
|
||||
testDataUrl(dataUrl, 'blue on top of green', 'layer setZIndex is not working');
|
||||
}
|
||||
});
|
||||
},
|
||||
'move blue layer on top of green layer with moveToTop': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
@ -907,11 +891,6 @@ Test.Modules.CONTAINER = {
|
||||
|
||||
blueLayer.moveToTop();
|
||||
|
||||
stage.toDataURL({
|
||||
callback: function(dataUrl) {
|
||||
testDataUrl(dataUrl, 'blue on top of green', 'layer moveToTop is not working');
|
||||
}
|
||||
});
|
||||
},
|
||||
'move green layer below blue layer with moveToBottom': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
@ -948,11 +927,6 @@ Test.Modules.CONTAINER = {
|
||||
|
||||
greenLayer.moveToBottom();
|
||||
|
||||
stage.toDataURL({
|
||||
callback: function(dataUrl) {
|
||||
testDataUrl(dataUrl, 'blue on top of green', 'layer moveToBottom is not working');
|
||||
}
|
||||
});
|
||||
},
|
||||
'move green layer below blue layer with moveDown': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
@ -988,11 +962,6 @@ Test.Modules.CONTAINER = {
|
||||
stage.add(greenLayer);
|
||||
greenLayer.moveDown();
|
||||
|
||||
stage.toDataURL({
|
||||
callback: function(dataUrl) {
|
||||
testDataUrl(dataUrl, 'blue on top of green', 'layer moveDown is not working');
|
||||
}
|
||||
});
|
||||
},
|
||||
'move blue layer above green layer with moveUp': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
@ -1028,11 +997,6 @@ Test.Modules.CONTAINER = {
|
||||
stage.add(greenLayer);
|
||||
blueLayer.moveUp();
|
||||
|
||||
stage.toDataURL({
|
||||
callback: function(dataUrl) {
|
||||
testDataUrl(dataUrl, 'blue on top of green', 'layer moveUp is not working');
|
||||
}
|
||||
});
|
||||
},
|
||||
'move blue circle on top of green circle with moveToTop': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
|
@ -94,38 +94,6 @@ Test.Modules.LAYER = {
|
||||
layer.add(rect);
|
||||
stage.add(layer);
|
||||
},
|
||||
'redraw hit graph': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var layer = new Kinetic.Layer();
|
||||
var rect = new Kinetic.Rect({
|
||||
x: 200,
|
||||
width: 100,
|
||||
height: 50,
|
||||
fill: 'green',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
scale: [3, 1],
|
||||
draggable: true,
|
||||
strokeScaleEnabled: false
|
||||
});
|
||||
|
||||
rect.colorKey = '000000';
|
||||
|
||||
layer.add(rect);
|
||||
stage.add(layer);
|
||||
|
||||
rect.setY(100);
|
||||
layer.drawHit();
|
||||
|
||||
showHit(layer);
|
||||
|
||||
testDataUrl(layer.hitCanvas.toDataURL(), 'black rect hit graph', 'redrawn hitgraph data url is incorrect');
|
||||
|
||||
},
|
||||
|
||||
'set clearBeforeDraw to false, and test toDataURL for stage, layer, group, and shape': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
@ -163,17 +131,6 @@ Test.Modules.LAYER = {
|
||||
// disabled it for now because toDataURL breaks on devices with pixelRatio != 1
|
||||
//console.log(layer.toDataURL());
|
||||
|
||||
/*
|
||||
stage.toDataURL({
|
||||
callback: function(dataUrl) {
|
||||
testDataUrl(layer.toDataURL(), 'stacked green circles', 'stacked green circles stage data url is incorrect');
|
||||
}
|
||||
});
|
||||
*/
|
||||
|
||||
//testDataUrl(layer.toDataURL(), 'stacked green circles', 'stacked green circles layer data url is incorrect');
|
||||
//testDataUrl(layer.getCanvas().toDataURL(), 'stacked green circles', 'stacked green circles layer data url is incorrect');
|
||||
|
||||
},
|
||||
'save layer as png (click on Circle to open new window)': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
|
@ -149,12 +149,7 @@ Test.Modules.NODE = {
|
||||
stage.add(layer);
|
||||
|
||||
test(layer.canvas.pixelRatio === 2, 'layer pixel ratio should be 2');
|
||||
|
||||
testDataUrl(layer.toDataURL(), 'green circle', 'problem with pixel ratio and dataURL');
|
||||
|
||||
//console.log(layer.toDataURL())
|
||||
|
||||
|
||||
|
||||
},
|
||||
|
||||
'listen and don\'t listen': function(containerId) {
|
||||
@ -217,52 +212,6 @@ Test.Modules.NODE = {
|
||||
|
||||
showHit(layer);
|
||||
},
|
||||
'group to image': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var layer = new Kinetic.Layer();
|
||||
var group = new Kinetic.Group();
|
||||
var rect = new Kinetic.Rect({
|
||||
x: 50,
|
||||
y: 50,
|
||||
width: 200,
|
||||
height: 50,
|
||||
fill: 'blue'
|
||||
});
|
||||
|
||||
var rect2 = new Kinetic.Rect({
|
||||
x: 200,
|
||||
y: 100,
|
||||
width: 200,
|
||||
height: 50,
|
||||
fill: 'red',
|
||||
listening: false
|
||||
});
|
||||
|
||||
group.add(rect).add(rect2);
|
||||
layer.add(group);
|
||||
stage.add(layer);
|
||||
|
||||
group.toImage({
|
||||
callback: function(imageObj) {
|
||||
var img = new Kinetic.Image({
|
||||
image: imageObj,
|
||||
x: 50,
|
||||
y: 50
|
||||
});
|
||||
|
||||
layer.add(img).draw();
|
||||
|
||||
var dataUrl = layer.toDataURL();
|
||||
|
||||
testDataUrl(dataUrl, 'group to image', 'group to image data url is incorrect');
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
'test offset attr change': function(containerId) {
|
||||
/*
|
||||
* the premise of this test to make sure that only
|
||||
@ -499,10 +448,6 @@ Test.Modules.NODE = {
|
||||
|
||||
stage.draw();
|
||||
|
||||
//console.log(layer.toDataURL());
|
||||
|
||||
testDataUrl(layer.toDataURL(), 'clone group', 'problem cloning group');
|
||||
|
||||
},
|
||||
'test on attr change': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
@ -898,124 +843,6 @@ Test.Modules.NODE = {
|
||||
|
||||
layer.add(cachedShape);
|
||||
layer.draw();
|
||||
|
||||
//console.log(layer.toDataURL());
|
||||
|
||||
cachedShape.createImageHitRegion(function() {
|
||||
|
||||
layer.draw();
|
||||
//console.log(layer.toDataURL());
|
||||
testDataUrl(layer.toDataURL(), 'regular and cached polygon', 'regular and cached polygon layer data url is incorrect');
|
||||
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
showHit(layer);
|
||||
},
|
||||
'cache shape, group, layer, and stage': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var layer = new Kinetic.Layer();
|
||||
var group = new Kinetic.Group();
|
||||
var rect = new Kinetic.Rect({
|
||||
x: 10,
|
||||
y: 10,
|
||||
width: 50,
|
||||
height: 30,
|
||||
fill: 'green',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
draggable: true
|
||||
});
|
||||
|
||||
group.add(rect);
|
||||
layer.add(group);
|
||||
stage.add(layer);
|
||||
|
||||
// cache shape
|
||||
rect.toImage({
|
||||
x: 8,
|
||||
y: 8,
|
||||
width: 54,
|
||||
height: 34,
|
||||
callback: function(imageObj) {
|
||||
var cachedShape = new Kinetic.Image({
|
||||
image: imageObj,
|
||||
x: 60,
|
||||
y: 60,
|
||||
draggable: true
|
||||
});
|
||||
group.add(cachedShape);
|
||||
layer.draw();
|
||||
|
||||
// cache group
|
||||
group.toImage({
|
||||
x: 8,
|
||||
y: 8,
|
||||
width: 106,
|
||||
height: 86,
|
||||
callback: function(imageObj) {
|
||||
var cachedGroup = new Kinetic.Image({
|
||||
image: imageObj,
|
||||
x: 100,
|
||||
y: 8,
|
||||
draggable: true
|
||||
});
|
||||
group.add(cachedGroup);
|
||||
layer.draw();
|
||||
|
||||
// cache layer
|
||||
layer.toImage({
|
||||
x: 8,
|
||||
y: 8,
|
||||
width: 200,
|
||||
height: 86,
|
||||
callback: function(imageObj) {
|
||||
|
||||
var cachedLayer = new Kinetic.Image({
|
||||
image: imageObj,
|
||||
x: 190,
|
||||
y: 8,
|
||||
draggable: true
|
||||
});
|
||||
group.add(cachedLayer);
|
||||
layer.draw();
|
||||
|
||||
//var dataUrl = layer.toDataURL();
|
||||
|
||||
// cache stage
|
||||
|
||||
stage.toImage({
|
||||
x: 8,
|
||||
y: 8,
|
||||
width: 400,
|
||||
height: 86,
|
||||
callback: function(imageObj) {
|
||||
|
||||
var cachedStage = new Kinetic.Image({
|
||||
image: imageObj,
|
||||
x: 8,
|
||||
y: 100,
|
||||
draggable: true
|
||||
});
|
||||
group.add(cachedStage);
|
||||
layer.draw();
|
||||
|
||||
var dataUrl = layer.toDataURL();
|
||||
//console.log(dataUrl);
|
||||
|
||||
testDataUrl(dataUrl, 'cache shape, group, layer, and stage', 'problem caching shape, group, layer, and stage');
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
@ -2262,7 +2089,6 @@ Test.Modules.NODE = {
|
||||
|
||||
var startDataUrl = layer.toDataURL();
|
||||
|
||||
testDataUrl(startDataUrl, 'serialize stage with custom shape', 'start data url is incorrect');
|
||||
test(triangle.getId() === 'myTriangle', 'triangle id should be myTriangle');
|
||||
|
||||
var expectedJson = '{"attrs":{"width":578,"height":200},"nodeType":"Stage","children":[{"attrs":{},"nodeType":"Layer","children":[{"attrs":{},"nodeType":"Group","children":[{"attrs":{"fill":"#00D2FF","stroke":"black","strokeWidth":4,"id":"myTriangle"},"nodeType":"Shape"}]}]}]}';
|
||||
@ -2272,9 +2098,6 @@ Test.Modules.NODE = {
|
||||
|
||||
layer.draw();
|
||||
|
||||
var endDataUrl = layer.toDataURL();
|
||||
testDataUrl(endDataUrl,'serialize stage with custom shape', 'end data url is incorrect');
|
||||
|
||||
},
|
||||
'load stage with custom shape using json': function(containerId) {
|
||||
var drawTriangle = function(canvas) {
|
||||
@ -2675,52 +2498,6 @@ Test.Modules.NODE = {
|
||||
test(Kinetic.Global.shapes[circleColorKey] === undefined, 'circle color key should not be in shapes hash');
|
||||
test(Kinetic.Global.shapes[rectColorKey] === undefined, 'rect color key should not be in shapes hash');
|
||||
},
|
||||
'!destroy node mid transition': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var layer = new Kinetic.Layer();
|
||||
var rect = new Kinetic.Rect({
|
||||
x: 100,
|
||||
y: 100,
|
||||
width: 100,
|
||||
height: 50,
|
||||
fill: 'green',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
shadowColor: 'black',
|
||||
shadowOffset: 10,
|
||||
shadowOpacity: 0.5
|
||||
});
|
||||
|
||||
layer.add(rect);
|
||||
stage.add(layer);
|
||||
|
||||
rect.transitionTo({
|
||||
duration: 2,
|
||||
shadowOffset: {
|
||||
x: 80
|
||||
},
|
||||
x: 400,
|
||||
y: 30,
|
||||
rotation: Math.PI * 2,
|
||||
easing: 'bounce-ease-out'
|
||||
});
|
||||
|
||||
setTimeout(function() {
|
||||
/*
|
||||
* TODO: this method fails every now and then, seemingly
|
||||
* from a race condition. need to investigate
|
||||
*/
|
||||
//test(rect.transAnim.isRunning(), 'rect trans should be running before destroying it');
|
||||
rect.destroy();
|
||||
//test(!rect.transAnim.isRunning(), 'rect trans should not be running after destroying it');
|
||||
layer.draw();
|
||||
testDataUrl(layer.toDataURL(), 'cleared', 'transitioning rectangle should have been destroyed and removed from the screen');
|
||||
}, 1000);
|
||||
},
|
||||
'hide stage': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
@ -2755,75 +2532,5 @@ Test.Modules.NODE = {
|
||||
|
||||
// TODO: stage hide() fails. also need to find a good way to test this
|
||||
|
||||
},
|
||||
'hide layer': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var layer = new Kinetic.Layer();
|
||||
var group = new Kinetic.Group();
|
||||
|
||||
var rect = new Kinetic.Rect({
|
||||
x: 200,
|
||||
y: 100,
|
||||
width: 100,
|
||||
height: 50,
|
||||
fill: 'red',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
draggable: true,
|
||||
rotationDeg: 60,
|
||||
scale: {
|
||||
x: 2,
|
||||
y: 1
|
||||
}
|
||||
});
|
||||
|
||||
group.add(rect);
|
||||
layer.add(group);
|
||||
stage.add(layer);
|
||||
|
||||
layer.hide();
|
||||
layer.draw();
|
||||
|
||||
|
||||
//console.log(layer.toDataURL());
|
||||
testDataUrl(layer.toDataURL(), 'cleared', 'layer is still visible');
|
||||
},
|
||||
'hide group': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var layer = new Kinetic.Layer();
|
||||
var group = new Kinetic.Group();
|
||||
|
||||
var rect = new Kinetic.Rect({
|
||||
x: 200,
|
||||
y: 100,
|
||||
width: 100,
|
||||
height: 50,
|
||||
fill: 'red',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
draggable: true,
|
||||
rotationDeg: 60,
|
||||
scale: {
|
||||
x: 2,
|
||||
y: 1
|
||||
}
|
||||
});
|
||||
|
||||
group.add(rect);
|
||||
layer.add(group);
|
||||
stage.add(layer);
|
||||
|
||||
group.hide();
|
||||
layer.draw();
|
||||
|
||||
testDataUrl(layer.toDataURL(), 'cleared', 'group is still visible');
|
||||
}
|
||||
};
|
||||
|
@ -1,32 +1,4 @@
|
||||
Test.Modules.SHAPE = {
|
||||
'scale rect with stroke scale disabled': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var layer = new Kinetic.Layer();
|
||||
var rect = new Kinetic.Rect({
|
||||
x: 200,
|
||||
y: 90,
|
||||
width: 100,
|
||||
height: 50,
|
||||
fill: 'green',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
scale: [3, 1],
|
||||
draggable: true,
|
||||
strokeScaleEnabled: false
|
||||
});
|
||||
|
||||
layer.add(rect);
|
||||
stage.add(layer);
|
||||
|
||||
//console.log(layer.toDataURL());
|
||||
|
||||
testDataUrl(layer.toDataURL(), 'scaled rect with disabled stroke scale', 'probem with stroke scale disabling');
|
||||
},
|
||||
|
||||
'shape color components': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
@ -147,50 +119,6 @@ Test.Modules.SHAPE = {
|
||||
y: 153
|
||||
}) === false, '(303, 153) should not intersect the shape');
|
||||
|
||||
},
|
||||
'custom shape with two fills and two strokes': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var layer = new Kinetic.Layer();
|
||||
|
||||
var drawTriangle = function(canvas) {
|
||||
var context = canvas.getContext();
|
||||
context.beginPath();
|
||||
context.moveTo(200, 50);
|
||||
context.lineTo(420, 80);
|
||||
context.quadraticCurveTo(300, 100, 260, 170);
|
||||
context.closePath();
|
||||
canvas.fillStroke(this);
|
||||
|
||||
context.beginPath();
|
||||
context.moveTo(300, 150);
|
||||
context.lineTo(520, 180);
|
||||
context.quadraticCurveTo(400, 200, 360, 270);
|
||||
context.closePath();
|
||||
canvas.fillStroke(this);
|
||||
};
|
||||
var triangle = new Kinetic.Shape({
|
||||
drawFunc: drawTriangle,
|
||||
fill: "#00D2FF",
|
||||
stroke: "black",
|
||||
strokeWidth: 4,
|
||||
id: 'myTriangle',
|
||||
draggable: true,
|
||||
shadowColor: 'black',
|
||||
shadowOpacity: 0.5,
|
||||
shadowBlur: 10,
|
||||
shadowOffset: 10
|
||||
});
|
||||
|
||||
stage.add(layer.add(triangle));
|
||||
|
||||
var dataUrl = layer.toDataURL();
|
||||
//console.log(dataUrl);
|
||||
testDataUrl(dataUrl, 'custom shape with two fills and strokes', 'problem with custom shape with two fills');
|
||||
|
||||
},
|
||||
'custom shape with fill, stroke, and strokeWidth': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
@ -220,72 +148,6 @@ Test.Modules.SHAPE = {
|
||||
layer.add(shape);
|
||||
stage.add(layer);
|
||||
},
|
||||
'change custom shape draw func': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var layer = new Kinetic.Layer();
|
||||
var shape = new Kinetic.Shape({
|
||||
drawFunc: function(canvas) {
|
||||
var context = canvas.getContext();
|
||||
context.beginPath();
|
||||
context.moveTo(0, 0);
|
||||
context.lineTo(100, 0);
|
||||
context.lineTo(100, 100);
|
||||
context.closePath();
|
||||
canvas.fill(this);
|
||||
canvas.stroke(this);
|
||||
},
|
||||
x: 200,
|
||||
y: 100,
|
||||
fill: 'green',
|
||||
stroke: 'blue',
|
||||
strokeWidth: 5
|
||||
});
|
||||
|
||||
shape.setDrawFunc(function(canvas) {
|
||||
var context = canvas.getContext();
|
||||
context.beginPath();
|
||||
context.moveTo(0, 0);
|
||||
context.lineTo(200, 0);
|
||||
context.lineTo(200, 100);
|
||||
context.closePath();
|
||||
canvas.fill(this);
|
||||
canvas.stroke(this);
|
||||
});
|
||||
var rect = new Kinetic.Rect({
|
||||
x: 10,
|
||||
y: 10,
|
||||
width: 100,
|
||||
height: 50,
|
||||
fill: 'green',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
draggable: true
|
||||
});
|
||||
|
||||
rect.setDrawFunc(function(canvas) {
|
||||
var context = canvas.getContext();
|
||||
context.beginPath();
|
||||
context.moveTo(0, 0);
|
||||
context.lineTo(200, 0);
|
||||
context.lineTo(200, 100);
|
||||
context.closePath();
|
||||
canvas.fill(this);
|
||||
canvas.stroke(this);
|
||||
});
|
||||
|
||||
layer.add(shape);
|
||||
layer.add(rect);
|
||||
stage.add(layer);
|
||||
|
||||
var dataUrl = layer.toDataURL();
|
||||
|
||||
//console.log(dataUrl);
|
||||
testDataUrl(dataUrl, 'change custom shape draw func', 'problem with setDrawFunc');
|
||||
},
|
||||
'add star with translated, scaled, rotated fill': function(containerId) {
|
||||
var imageObj = new Image();
|
||||
imageObj.onload = function() {
|
||||
@ -439,151 +301,6 @@ Test.Modules.SHAPE = {
|
||||
};
|
||||
imageObj.src = '../assets/darth-vader.jpg';
|
||||
},
|
||||
'everything enabled': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var layer = new Kinetic.Layer();
|
||||
var circle = new Kinetic.Circle({
|
||||
x: stage.getWidth() / 2,
|
||||
y: stage.getHeight() / 2,
|
||||
radius: 70,
|
||||
fill: 'green',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
shadowColor: 'black',
|
||||
shadowBlur: 10,
|
||||
shadowOffset: 10,
|
||||
dashArray: [10, 10],
|
||||
fillEnabled: true,
|
||||
strokeEnabled: true,
|
||||
shadowEnabled: true,
|
||||
dashArrayEnabled: true
|
||||
});
|
||||
layer.add(circle);
|
||||
stage.add(layer);
|
||||
|
||||
//console.log(layer.toDataURL());
|
||||
testDataUrl(layer.toDataURL(), 'everything enabled', 'should be circle with green fill, dashed stroke, and shadow');
|
||||
},
|
||||
'fill disabled': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var layer = new Kinetic.Layer();
|
||||
var circle = new Kinetic.Circle({
|
||||
x: stage.getWidth() / 2,
|
||||
y: stage.getHeight() / 2,
|
||||
radius: 70,
|
||||
fill: 'green',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
shadowColor: 'black',
|
||||
shadowBlur: 10,
|
||||
shadowOffset: 10,
|
||||
dashArray: [10, 10],
|
||||
fillEnabled: false,
|
||||
strokeEnabled: true,
|
||||
shadowEnabled: true,
|
||||
dashArrayEnabled: true
|
||||
});
|
||||
layer.add(circle);
|
||||
stage.add(layer);
|
||||
|
||||
//console.log(layer.toDataURL());
|
||||
testDataUrl(layer.toDataURL(), 'fill disabled', 'should be circle with no fill, dashed stroke, and shadow');
|
||||
},
|
||||
'stroke disabled': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var layer = new Kinetic.Layer();
|
||||
var circle = new Kinetic.Circle({
|
||||
x: stage.getWidth() / 2,
|
||||
y: stage.getHeight() / 2,
|
||||
radius: 70,
|
||||
fill: 'green',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
shadowColor: 'black',
|
||||
shadowBlur: 10,
|
||||
shadowOffset: 10,
|
||||
dashArray: [10, 10],
|
||||
fillEnabled: true,
|
||||
strokeEnabled: false,
|
||||
shadowEnabled: true,
|
||||
dashArrayEnabled: true
|
||||
});
|
||||
layer.add(circle);
|
||||
stage.add(layer);
|
||||
|
||||
//console.log(layer.toDataURL());
|
||||
testDataUrl(layer.toDataURL(), 'stroke disabled', 'should be circle with green fill, no stroke, and shadow');
|
||||
},
|
||||
'dash array disabled': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var layer = new Kinetic.Layer();
|
||||
var circle = new Kinetic.Circle({
|
||||
x: stage.getWidth() / 2,
|
||||
y: stage.getHeight() / 2,
|
||||
radius: 70,
|
||||
fill: 'green',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
shadowColor: 'black',
|
||||
shadowBlur: 10,
|
||||
shadowOffset: 10,
|
||||
dashArray: [10, 10],
|
||||
fillEnabled: true,
|
||||
strokeEnabled: true,
|
||||
shadowEnabled: true,
|
||||
dashArrayEnabled: false
|
||||
});
|
||||
layer.add(circle);
|
||||
stage.add(layer);
|
||||
|
||||
//console.log(layer.toDataURL());
|
||||
testDataUrl(layer.toDataURL(), 'dash array disabled', 'should be circle with green fill, solid stroke, and shadow');
|
||||
},
|
||||
'shadow disabled': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var layer = new Kinetic.Layer();
|
||||
var circle = new Kinetic.Circle({
|
||||
x: stage.getWidth() / 2,
|
||||
y: stage.getHeight() / 2,
|
||||
radius: 70,
|
||||
fill: 'green',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
shadowColor: 'black',
|
||||
shadowBlur: 10,
|
||||
shadowOffset: 10,
|
||||
dashArray: [10, 10],
|
||||
fillEnabled: true,
|
||||
strokeEnabled: true,
|
||||
shadowEnabled: false,
|
||||
dashArrayEnabled: true
|
||||
});
|
||||
layer.add(circle);
|
||||
stage.add(layer);
|
||||
|
||||
//console.log(layer.toDataURL());
|
||||
testDataUrl(layer.toDataURL(), 'shadow disabled', 'should be circle with green fill, dashed stroke, and no shadow');
|
||||
},
|
||||
'test enablers and disablers': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
@ -669,50 +386,5 @@ Test.Modules.SHAPE = {
|
||||
test(circle.getShadowEnabled() === true, 'shadowEnabled should be true');
|
||||
test(circle.getDashArrayEnabled() === true, 'dashArrayEnabled should be true');
|
||||
|
||||
},
|
||||
'fill overrides': function(containerId) {
|
||||
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var layer = new Kinetic.Layer();
|
||||
|
||||
var star = new Kinetic.Star({
|
||||
x: 200,
|
||||
y: 100,
|
||||
numPoints: 5,
|
||||
innerRadius: 40,
|
||||
outerRadius: 70,
|
||||
|
||||
fill: 'red',
|
||||
fillLinearGradientStartPoint: -35,
|
||||
fillLinearGradientEndPoint: 35,
|
||||
fillLinearGradientColorStops: [0, 'red', 1, 'blue'],
|
||||
|
||||
stroke: 'blue',
|
||||
strokeWidth: 5,
|
||||
draggable: true
|
||||
});
|
||||
|
||||
layer.add(star);
|
||||
stage.add(layer);
|
||||
|
||||
//console.log(layer.toDataURL());
|
||||
|
||||
testDataUrl(layer.toDataURL(), 'red star', 'star should have red fill');
|
||||
|
||||
star.setFillPriority('linear-gradient');
|
||||
layer.draw();
|
||||
|
||||
testDataUrl(layer.toDataURL(), 'star with linear gradient fill', 'star should have linear gradient fill');
|
||||
|
||||
star.setFillPriority('color');
|
||||
layer.draw();
|
||||
|
||||
testDataUrl(layer.toDataURL(), 'red star', 'star should have red fill again');
|
||||
|
||||
|
||||
}
|
||||
};
|
||||
|
@ -53,10 +53,7 @@ Test.Modules.BLOB = {
|
||||
layer.add(blob1);
|
||||
layer.add(blob2);
|
||||
stage.add(layer);
|
||||
|
||||
//console.log(layer.toDataURL());
|
||||
testDataUrl(layer.toDataURL(), 'blobs', 'problem with blobs');
|
||||
|
||||
|
||||
test(blob1.getTension() === 0.8, 'blob1 tension should be 0.8');
|
||||
test(blob2.getTension() === 1.2, 'blob2 tension should be 1.2');
|
||||
|
||||
|
@ -146,9 +146,7 @@ Test.Modules.IMAGE = {
|
||||
layer.add(darth);
|
||||
stage.add(layer);
|
||||
|
||||
//console.log(layer.toDataURL());
|
||||
|
||||
warn(layer.toDataURL() === dataUrls['crop and scale image'], 'problem rendering cropped and scaled image');
|
||||
|
||||
};
|
||||
imageObj.src = '../assets/darth-vader.jpg';
|
||||
},
|
||||
@ -186,8 +184,6 @@ Test.Modules.IMAGE = {
|
||||
|
||||
var hitDataUrl = layer.hitCanvas.toDataURL();
|
||||
|
||||
//console.log(hitDataUrl);
|
||||
testDataUrl(hitDataUrl,'transparent image hit render', 'problem rendering image on hit graph');
|
||||
});
|
||||
};
|
||||
imageObj.src = '../assets/lion.png';
|
||||
@ -221,9 +217,7 @@ Test.Modules.IMAGE = {
|
||||
darth.setFilter(Kinetic.Filters.Grayscale);
|
||||
|
||||
layer.draw();
|
||||
var dataUrl = layer.toDataURL();
|
||||
//console.log(dataUrl);
|
||||
warn(dataUrl === dataUrls['grayscale image'], 'problem with Grayscale filter.');
|
||||
|
||||
|
||||
};
|
||||
imageObj.src = '../assets/darth-vader.jpg';
|
||||
@ -255,9 +249,7 @@ Test.Modules.IMAGE = {
|
||||
darth.setFilter(Kinetic.Filters.Invert);
|
||||
|
||||
layer.draw();
|
||||
var dataUrl = layer.toDataURL();
|
||||
//console.log(dataUrl);
|
||||
warn(dataUrl === dataUrls['invert image'], 'problem with Invert filter.');
|
||||
|
||||
|
||||
};
|
||||
imageObj.src = '../assets/darth-vader.jpg';
|
||||
@ -290,9 +282,7 @@ Test.Modules.IMAGE = {
|
||||
darth.setFilterBrightness(100);
|
||||
|
||||
layer.draw();
|
||||
var dataUrl = layer.toDataURL();
|
||||
//console.log(dataUrl);
|
||||
testDataUrl(dataUrl, 'adjust image brightness', 'problem with Brighten filter.');
|
||||
|
||||
};
|
||||
imageObj.src = '../assets/darth-vader.jpg';
|
||||
},
|
||||
@ -321,9 +311,7 @@ Test.Modules.IMAGE = {
|
||||
darth.setFilter(Kinetic.Filters.Blur);
|
||||
darth.setFilterRadius(10);
|
||||
layer.draw();
|
||||
var dataUrl = layer.toDataURL();
|
||||
//console.log(dataUrl);
|
||||
testDataUrl(dataUrl, 'blur filter', 'problem with Blur filter.');
|
||||
|
||||
};
|
||||
imageObj.src = '../assets/darth-vader.jpg';
|
||||
},
|
||||
@ -360,8 +348,7 @@ Test.Modules.IMAGE = {
|
||||
darth.setFilter(Kinetic.Filters.Grayscale);
|
||||
|
||||
layer.draw();
|
||||
//console.log(layer.toDataURL());
|
||||
warn(layer.toDataURL() === dataUrls['filter transformed image'], 'problem filtering transformed image');
|
||||
|
||||
};
|
||||
imageObj.src = '../assets/darth-vader.jpg';
|
||||
},
|
||||
@ -391,10 +378,6 @@ Test.Modules.IMAGE = {
|
||||
layer.add(lion);
|
||||
stage.add(layer);
|
||||
|
||||
var dataUrl = layer.toDataURL();
|
||||
|
||||
warn(dataUrl === dataUrls['transparent image shadow'], 'problem applying shadow to image with transparent pixels');
|
||||
|
||||
};
|
||||
imageObj.src = '../assets/lion.png';
|
||||
|
||||
@ -432,9 +415,7 @@ Test.Modules.IMAGE = {
|
||||
filtered.setFilterThreshold(10);
|
||||
|
||||
layer.draw();
|
||||
var dataUrl = layer.toDataURL();
|
||||
//console.log(dataUrl);
|
||||
testDataUrl(dataUrl, 'mask filter', 'problem with Mask filter.');
|
||||
|
||||
};
|
||||
imageObj.src = '../assets/bamoon.jpg';
|
||||
}
|
||||
|
@ -76,9 +76,6 @@ Test.Modules.SPLINE = {
|
||||
});
|
||||
*/
|
||||
|
||||
//console.log(layer.toDataURL());
|
||||
testDataUrl(layer.toDataURL(), 'curvy lines', 'problem with curvy lines');
|
||||
|
||||
test(line1.getClassName() === 'Spline', 'getClassName should be Spline');
|
||||
|
||||
},
|
||||
|
@ -247,9 +247,6 @@ Test.Modules.Text = {
|
||||
layer.add(text);
|
||||
stage.add(layer);
|
||||
|
||||
//console.log(layer.toDataURL());
|
||||
|
||||
testDataUrl(layer.toDataURL(),'multiline text with shadows', 'multi line text with shadows data url is incorrect');
|
||||
},
|
||||
'change font size should update text data': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
@ -288,130 +285,5 @@ Test.Modules.Text = {
|
||||
test(text.getWidth() > width, 'text box width should have increased.');
|
||||
test(text.getHeight() > height, 'text box height should have increased.');
|
||||
|
||||
},
|
||||
'text everything enabled': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var layer = new Kinetic.Layer();
|
||||
var text = new Kinetic.Text({
|
||||
x: 10,
|
||||
y: 10,
|
||||
text: 'Some awesome text',
|
||||
fontSize: 50,
|
||||
fontFamily: 'Calibri',
|
||||
fontStyle: 'bold',
|
||||
fill: 'blue',
|
||||
stroke: 'red',
|
||||
strokeWidth: 2,
|
||||
shadowColor: 'black',
|
||||
shadowBlur: 10,
|
||||
shadowOffset: 10,
|
||||
fillEnabled: true,
|
||||
strokeEnabled: true,
|
||||
shadowEnabled: true
|
||||
});
|
||||
layer.add(text);
|
||||
stage.add(layer);
|
||||
|
||||
//console.log(layer.toDataURL());
|
||||
testDataUrl(layer.toDataURL(), 'text everything enabled', 'should be text with blue fill and red stroke');
|
||||
},
|
||||
'text fill disabled': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var layer = new Kinetic.Layer();
|
||||
var text = new Kinetic.Text({
|
||||
x: 10,
|
||||
y: 10,
|
||||
text: 'Some awesome text',
|
||||
fontSize: 50,
|
||||
fontFamily: 'Calibri',
|
||||
fontStyle: 'bold',
|
||||
fill: 'blue',
|
||||
stroke: 'red',
|
||||
strokeWidth: 2,
|
||||
shadowColor: 'black',
|
||||
shadowBlur: 10,
|
||||
shadowOffset: 10,
|
||||
fillEnabled: false,
|
||||
strokeEnabled: true,
|
||||
shadowEnabled: true
|
||||
});
|
||||
layer.add(text);
|
||||
stage.add(layer);
|
||||
|
||||
//console.log(layer.toDataURL());
|
||||
testDataUrl(layer.toDataURL(), 'text fill disabled', 'should be text with no fill and red stroke');
|
||||
},
|
||||
'text stroke disabled': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var layer = new Kinetic.Layer();
|
||||
var text = new Kinetic.Text({
|
||||
x: 10,
|
||||
y: 10,
|
||||
text: 'Some awesome text',
|
||||
fontSize: 50,
|
||||
fontFamily: 'Calibri',
|
||||
fontStyle: 'bold',
|
||||
fill: 'blue',
|
||||
stroke: 'red',
|
||||
strokeWidth: 2,
|
||||
shadowColor: 'black',
|
||||
shadowBlur: 10,
|
||||
shadowOffset: 10,
|
||||
fillEnabled: true,
|
||||
strokeEnabled: false,
|
||||
shadowEnabled: true
|
||||
});
|
||||
layer.add(text);
|
||||
stage.add(layer);
|
||||
|
||||
//console.log(layer.toDataURL());
|
||||
testDataUrl(layer.toDataURL(),'text stroke disabled', 'should be text with blue fill and no stroke');
|
||||
},
|
||||
'wrapped text': function (containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var txt = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
|
||||
arr = [txt, txt];
|
||||
|
||||
var layer = new Kinetic.Layer();
|
||||
var text = new Kinetic.Text({
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 578,
|
||||
text: arr.join(''),
|
||||
fontSize: 15,
|
||||
fontFamily: 'Calibri',
|
||||
fill: '#000',
|
||||
wrap: 'word'
|
||||
});
|
||||
|
||||
layer.add(text);
|
||||
stage.add(layer);
|
||||
|
||||
testDataUrl(layer.toDataURL(),'wrapping to words', 'text should be wrapped to words');
|
||||
|
||||
text.setWrap('none');
|
||||
layer.draw();
|
||||
testDataUrl(layer.toDataURL(),'no wrapping', 'text should not be wrapped');
|
||||
|
||||
text.setWrap('char');
|
||||
layer.draw();
|
||||
testDataUrl(layer.toDataURL(), 'wrapping to chars', 'text should be wrapped to chars');
|
||||
|
||||
}
|
||||
};
|
||||
|
@ -21,9 +21,6 @@ Test.Modules.Wedge = {
|
||||
layer.add(wedge);
|
||||
stage.add(layer);
|
||||
|
||||
//console.log(layer.toDataURL());
|
||||
testDataUrl(layer.toDataURL(), 'wedge', 'problem rendering wedge');
|
||||
|
||||
test(wedge.getClassName() === 'Wedge', 'getClassName should be Wedge');
|
||||
},
|
||||
'set wedge angle using degrees': function(containerId) {
|
||||
@ -50,33 +47,5 @@ Test.Modules.Wedge = {
|
||||
stage.add(layer);
|
||||
|
||||
test(wedge.getAngle() === Math.PI / 2, 'problem setting wedge angle using degrees');
|
||||
},
|
||||
'rotate wedge by degrees': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var layer = new Kinetic.Layer();
|
||||
var wedge = new Kinetic.Wedge({
|
||||
x: 100,
|
||||
y: 100,
|
||||
radius: 70,
|
||||
angle: Math.PI * 0.4,
|
||||
fill: 'green',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
name: 'myCircle',
|
||||
draggable: true
|
||||
});
|
||||
|
||||
layer.add(wedge);
|
||||
stage.add(layer);
|
||||
|
||||
wedge.rotateDeg(180);
|
||||
layer.draw();
|
||||
|
||||
//console.log(layer.toDataURL());
|
||||
testDataUrl(layer.toDataURL(), 'rotate wedge', 'problem with rotated wedge rendering');
|
||||
}
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user