Only clear canvas when necessary, add tests

examples/tile-transitions.html

@@ -4,7 +4,7 @@ title: Tile Transitions
 shortdesc: Custom configuration for opacity transitions on tiles.
 docs: >
   By default tiles are rendered with an opacity transition - fading in over
-  250 ms.  To disable this behavior, set the <code>transition</code> option
+  275 ms.  To disable this behavior, set the <code>transition</code> option
   of the tile source to 0.
 tags: "fade, transition"
 ---

externs/olx.js

@@ -472,7 +472,7 @@ olx.TileOptions;
 
 /**
  * A duration for tile opacity transitions.  By default, tiles will render with
- * a opacity transition that lasts 250 ms.  To change the duration, pass a
+ * a opacity transition that lasts 275 ms.  To change the duration, pass a
  * number in milliseconds.  A duration of 0 disables the opacity transition.
  * @type {number|undefined}
  * @api

src/ol/renderer/canvas/tilelayer.js

@@ -228,6 +228,9 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame = function(frameState, layer
         canvas.width = width;
         canvas.height = height;
       } else {
+        if (this.renderedExtent_ && !ol.extent.equals(imageExtent, this.renderedExtent_)) {
+          context.clearRect(0, 0, width, height);
+        }
         oversampling = this.oversampling_;
       }
     }

src/ol/tile.js

@@ -55,7 +55,7 @@ ol.Tile = function(tileCoord, state, opt_options) {
    * @type {number}
    */
   this.transition_ = options.transition === undefined ?
-    250 : options.transition;
+    275 : options.transition;
 
   /**
    * Lookup of start times for rendering transitions.  If the start time is

test/rendering/ol/layer/tile.test.js

@@ -72,6 +72,21 @@ describe('ol.rendering.layer.Tile', function() {
     });
   }
 
+  describe('with tile transition', function() {
+    it('renders correctly after the transition', function(done) {
+      createMap('canvas');
+      var source = new ol.source.XYZ({
+        url: 'rendering/ol/data/tiles/osm/{z}/{x}/{y}.png'
+      });
+      waitForTiles([source], {}, function() {
+        setTimeout(function() {
+          expectResemble(map, 'rendering/ol/layer/expected/osm-canvas.png',
+              IMAGE_TOLERANCE, done);
+        }, 500);
+      });
+    });
+  });
+
   describe('single tile layer', function() {
     var source;
 

test/spec/ol/tile.test.js

@@ -1,10 +1,72 @@
-
-
 goog.require('ol');
 goog.require('ol.ImageTile');
+goog.require('ol.Tile');
 goog.require('ol.TileState');
 
+
 describe('ol.Tile', function() {
+  describe('constructor', function()  {
+    it('sets a default transition', function() {
+      var coord = [0, 0, 0];
+      var tile = new ol.Tile(coord, ol.TileState.IDLE);
+      expect(tile.transition_).to.equal(275);
+    });
+
+    it('allows the transition to be set', function() {
+      var coord = [0, 0, 0];
+      var transition = 500;
+      var tile = new ol.Tile(coord, ol.TileState.IDLE, {transition: transition});
+      expect(tile.transition_).to.equal(transition);
+    });
+  });
+
+  describe('#getAlpha()', function() {
+    it('returns the alpha value for a tile in transition', function() {
+      var coord = [0, 0, 0];
+      var tile = new ol.Tile(coord, ol.TileState.IDLE);
+      var id = 'test';
+      var time = Date.now();
+
+      var startAlpha = tile.getAlpha(id, time);
+      expect(startAlpha > 0).to.be(true);
+      expect(startAlpha < 1).to.be(true);
+
+      time += tile.transition_ / 2;
+      var midAlpha = tile.getAlpha(id, time);
+      expect(midAlpha > startAlpha).to.be(true);
+      expect(midAlpha < 1).to.be(true);
+
+      time += tile.transition_ / 2;
+      var endAlpha = tile.getAlpha(id, time);
+      expect(endAlpha).to.be(1);
+    });
+  });
+
+  describe('#inTransition()', function() {
+    it('determines if the tile is in transition', function() {
+      var coord = [0, 0, 0];
+      var tile = new ol.Tile(coord, ol.TileState.IDLE);
+      var id = 'test';
+      var time = Date.now();
+
+      expect(tile.inTransition(id)).to.be(true);
+
+      // start of transition
+      tile.getAlpha(id, time);
+      expect(tile.inTransition(id)).to.be(true);
+
+      // mid way through transition
+      time += tile.transition_ / 2;
+      tile.getAlpha(id, time);
+      expect(tile.inTransition(id)).to.be(true);
+
+      // end of transition
+      time += tile.transition_ / 2;
+      tile.getAlpha(id, time);
+      expect(tile.inTransition(id)).to.be(false);
+    });
+  });
+
   describe('interimChain', function() {
     var head, renderTile;
     beforeEach(function() {