From 0f53d043610e69fd0d680a7ce0b8baf4681d6549 Mon Sep 17 00:00:00 2001
From: Tim Schaub <tim.schaub@gmail.com>
Date: Sun, 24 Sep 2017 10:58:01 -0700
Subject: [PATCH] Only clear canvas when necessary, add tests

---
 examples/tile-transitions.html       |  2 +-
 externs/olx.js                       |  2 +-
 src/ol/renderer/canvas/tilelayer.js  |  3 ++
 src/ol/tile.js                       |  2 +-
 test/rendering/ol/layer/tile.test.js | 15 +++++++
 test/spec/ol/tile.test.js            | 66 +++++++++++++++++++++++++++-
 6 files changed, 85 insertions(+), 5 deletions(-)

diff --git a/examples/tile-transitions.html b/examples/tile-transitions.html
index ae366f9a93..2f9cd339a5 100644
--- a/examples/tile-transitions.html
+++ b/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"
 ---
diff --git a/externs/olx.js b/externs/olx.js
index 555b994392..98da700754 100644
--- a/externs/olx.js
+++ b/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
diff --git a/src/ol/renderer/canvas/tilelayer.js b/src/ol/renderer/canvas/tilelayer.js
index 8a6f8ee823..2971ebd85b 100644
--- a/src/ol/renderer/canvas/tilelayer.js
+++ b/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_;
       }
     }
diff --git a/src/ol/tile.js b/src/ol/tile.js
index 4c2381d12d..0c56b0d1d7 100644
--- a/src/ol/tile.js
+++ b/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
diff --git a/test/rendering/ol/layer/tile.test.js b/test/rendering/ol/layer/tile.test.js
index a86861d255..3ff6468064 100644
--- a/test/rendering/ol/layer/tile.test.js
+++ b/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;
 
diff --git a/test/spec/ol/tile.test.js b/test/spec/ol/tile.test.js
index 88bf734073..6bede73d68 100644
--- a/test/spec/ol/tile.test.js
+++ b/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() {