Add explicit stylesheet transition animation tests

Ref #2148
cytoscape · Jul 9, 2018 · 19aaba9 · 19aaba9
1 parent 0f64d67
commit 19aaba9
Showing 1 changed file with 75 additions and 1 deletion.
diff --git a/test/collection-style.js b/test/collection-style.js
@@ -54,6 +54,26 @@ describe('Collection style', function(){
           }
         },
 
+        {
+          selector: '.transition-prop',
+          style: {
+            'transition-property': 'width, background-color',
+            'transition-timing-function': 'linear',
+            'transition-duration': 50
+          }
+        },
+
+        {
+          selector: '.transition-multiple',
+          style: {
+            'transition-property': 'width, background-color',
+            'transition-timing-function': 'linear',
+            'transition-duration': 50,
+            'width': 300,
+            'background-color': 'black'
+          }
+        },
+
         {
           selector: '#n2n3',
           style: {
@@ -982,7 +1002,7 @@ describe('Collection style', function(){
     it('ani.play() not stopped by stylesheet transition', function(){
       var n = n1;
 
-      n.addClass('transition', 100);
+      n.addClass('transition');
 
       return n.animation({
         position: { x: 50, y: 50 },
@@ -1042,6 +1062,60 @@ describe('Collection style', function(){
       });
     });
 
+    it('transition applied by class', function(done){
+      var n = n1;
+
+      n.addClass('transition');
+
+      setTimeout(function(){
+        expect( n.width() ).to.equal( 300 );
+
+        done();
+      }, 100);
+    });
+
+    it('2-prop transition applied by class', function(done){
+      var n = n1;
+
+      n.addClass('transition-multiple');
+
+      setTimeout(function(){
+        expect( n.width() ).to.equal( 300 );
+        expect( n.numericStyle('background-color') ).to.deep.equal([0, 0, 0]);
+
+        done();
+      }, 100);
+    });
+
+    it('transition applied by class in both directions', function(done){
+      var n = n1;
+      var w = n.width();
+
+      n.addClass('transition-prop');
+      n.addClass('transition');
+
+      setTimeout(function(){
+        expect( n.width() ).to.equal( 300 );
+
+        n.removeClass('transition');
+      }, 100);
+
+      // in middle of animation, value should be between endpoints
+      // (may need larger timeframes for slow testing machines)
+      setTimeout(function(){
+        expect( n.width() ).to.be.greaterThan( w );
+        expect( n.width() ).to.be.lessThan( 300 );
+
+        n.removeClass('transition');
+      }, 125);
+
+      setTimeout(function(){
+        expect( n.width() ).to.equal( w );
+
+        done();
+      }, 200);
+    });
+
   });
 
   describe('eles.boundingBox()', function(){