diff --git a/test/sandbox.html b/test/sandbox.html
index 38171c6d3..674c2c187 100644
--- a/test/sandbox.html
+++ b/test/sandbox.html
@@ -43,8 +43,10 @@
x: 100,
y: 150,
radius: 50,
- fill: 'red',
draggable: true,
+ fillLinearGradientStartPoint: { x: -50, y: -50 },
+ fillLinearGradientEndPoint: { x: 50, y: 50 },
+ fillLinearGradientColorStops: [0, 'red', 1, 'yellow'],
});
layer.add(circle);
diff --git a/test/unit/Transformer-test.ts b/test/unit/Transformer-test.ts
index 06a203870..90c1b40c6 100644
--- a/test/unit/Transformer-test.ts
+++ b/test/unit/Transformer-test.ts
@@ -2353,7 +2353,7 @@ describe('Transformer', function () {
layer.add(rect);
var tr = new Konva.Transformer({
- nodes: [rect]
+ nodes: [rect],
});
layer.add(tr);
layer.draw();
@@ -2385,7 +2385,7 @@ describe('Transformer', function () {
var tr = new Konva.Transformer({
nodes: [rect],
- rotateAnchorCursor: 'grab'
+ rotateAnchorCursor: 'grab',
});
layer.add(tr);
layer.draw();
@@ -4878,4 +4878,55 @@ describe('Transformer', function () {
tr.anchorStyleFunc(null);
assert.equal(handler.fill(), 'white');
});
+
+ it.only('flip rectangle', function () {
+ var stage = addStage();
+ var layer = new Konva.Layer();
+ stage.add(layer);
+
+ var rect = new Konva.Rect({
+ draggable: true,
+ x: 150,
+ y: 50,
+ width: 100,
+ height: 100,
+ fillLinearGradientStartPoint: { x: -50, y: -50 },
+ fillLinearGradientEndPoint: { x: 50, y: 50 },
+ fillLinearGradientColorStops: [0, 'red', 1, 'yellow'],
+ });
+ layer.add(rect);
+
+ var tr = new Konva.Transformer({
+ nodes: [rect],
+ flipEnabled: false,
+ });
+ layer.add(tr);
+
+ layer.draw();
+
+ simulateMouseDown(tr, {
+ x: 150,
+ y: 50,
+ });
+ simulateMouseMove(tr, {
+ x: 250,
+ y: 50,
+ });
+ simulateMouseMove(tr, {
+ x: 350,
+ y: 50,
+ });
+
+ simulateMouseUp(tr, {
+ x: 350,
+ y: 50,
+ });
+
+ layer.draw();
+
+ assertAlmostEqual(rect.x(), 350);
+ assertAlmostEqual(rect.y(), 50);
+ assertAlmostEqual(rect.scaleX(), 1);
+ assertAlmostEqual(rect.scaleY(), -1);
+ });
});