Bumping versions and logging changes for v4.4.2

changelog/v4.4.2.md

@@ -0,0 +1,12 @@
+# 4.4.2
+
+The v4.4.2 release fixes a number of rendering issues in the 4.4 releases.
+
+## Fixes
+
+ * [#7327](https://github.com/openlayers/openlayers/pull/7327) - Prune the tile cache after updating a source's URL ([@tschaub](https://github.com/tschaub))
+ * [#7341](https://github.com/openlayers/openlayers/pull/7341) - Proper rendering of raster sources when there is a tile transition ([@tschaub](https://github.com/tschaub))
+ * [#7339](https://github.com/openlayers/openlayers/pull/7339) - Use correct text stroke on HiDPI devices ([@ahocevar](https://github.com/ahocevar))
+ * [#7345](https://github.com/openlayers/openlayers/pull/7345) - Handle different lineWidth scaling in Safari ([@ahocevar](https://github.com/ahocevar))
+ * [#7346](https://github.com/openlayers/openlayers/pull/7346) - Pre-render text images for configured scale ([@ahocevar](https://github.com/ahocevar))
+ * [#7350](https://github.com/openlayers/openlayers/pull/7350) - Calculate correct text box size ([@ahocevar](https://github.com/ahocevar))

examples/color-manipulation.js

@@ -102,7 +102,8 @@ function xyz2rgb(x) {
 
 var raster = new ol.source.Raster({
   sources: [new ol.source.Stamen({
-    layer: 'watercolor'
+    layer: 'watercolor',
+    transition: 0
   })],
   operation: function(pixels, data) {
     var hcl = rgb2hcl(pixels[0]);

examples/sea-level.js

@@ -26,7 +26,8 @@ function flood(pixels, data) {
 var key = 'pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg';
 var elevation = new ol.source.XYZ({
   url: 'https://api.mapbox.com/v4/mapbox.terrain-rgb/{z}/{x}/{y}.pngraw?access_token=' + key,
-  crossOrigin: 'anonymous'
+  crossOrigin: 'anonymous',
+  transition: 0
 });
 
 var raster = new ol.source.Raster({

examples/shaded-relief.js

@@ -104,7 +104,8 @@ function shade(inputs, data) {
 
 var elevation = new ol.source.XYZ({
   url: 'https://{a-d}.tiles.mapbox.com/v3/aj.sf-dem/{z}/{x}/{y}.png',
-  crossOrigin: 'anonymous'
+  crossOrigin: 'anonymous',
+  transition: 0
 });
 
 var raster = new ol.source.Raster({

package.json

@@ -1,6 +1,6 @@
 {
   "name": "openlayers",
-  "version": "4.4.1",
+  "version": "4.4.2",
   "description": "Build tools and sources for developing OpenLayers based mapping applications",
   "keywords": [
     "map",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ol",
-  "version": "4.4.1",
+  "version": "4.4.2",
   "description": "OpenLayers as ES2015 modules",
   "main": "index.js",
   "module": "index.js",

src/ol/render/canvas/textreplay.js

@@ -309,6 +309,7 @@ ol.render.canvas.TextReplay.prototype.getImage_ = function(text, fill, stroke) {
     var fillState = this.textFillState_;
     var textState = this.textState_;
     var pixelRatio = this.pixelRatio;
+    var scale = this.textScale_ * pixelRatio;
     var align =  ol.render.replay.TEXT_ALIGN[textState.textAlign || ol.render.canvas.defaultTextAlign];
     var strokeWidth = stroke && strokeState.lineWidth ? strokeState.lineWidth : 0;
 
@@ -316,17 +317,17 @@ ol.render.canvas.TextReplay.prototype.getImage_ = function(text, fill, stroke) {
     var width = ol.render.canvas.TextReplay.measureTextWidths(textState.font, lines, widths);
     var lineHeight = ol.render.canvas.TextReplay.measureTextHeight(textState.font);
     var height = lineHeight * numLines;
-    var renderWidth = (width + 2 * strokeWidth);
+    var renderWidth = (width + strokeWidth);
     var context = ol.dom.createCanvasContext2D(
-        Math.ceil(renderWidth * pixelRatio),
-        Math.ceil((height + 2 * strokeWidth) * pixelRatio));
+        Math.ceil(renderWidth * scale),
+        Math.ceil((height + strokeWidth) * scale));
     label = context.canvas;
     ol.render.canvas.TextReplay.labelCache_.set(key, label);
-    context.scale(pixelRatio, pixelRatio);
+    context.scale(scale, scale);
     context.font = textState.font;
     if (stroke) {
       context.strokeStyle = strokeState.strokeStyle;
-      context.lineWidth = strokeState.lineWidth;
+      context.lineWidth = strokeWidth * (ol.has.SAFARI ? scale : 1);
       context.lineCap = strokeState.lineCap;
       context.lineJoin = strokeState.lineJoin;
       context.miterLimit = strokeState.miterLimit;
@@ -341,16 +342,16 @@ ol.render.canvas.TextReplay.prototype.getImage_ = function(text, fill, stroke) {
     context.textBaseline = 'top';
     context.textAlign = 'center';
     var leftRight = (0.5 - align);
-    var x = align * label.width / pixelRatio + leftRight * 2 * strokeWidth;
+    var x = align * label.width / scale + leftRight * strokeWidth;
     var i;
     if (stroke) {
       for (i = 0; i < numLines; ++i) {
-        context.strokeText(lines[i], x + leftRight * widths[i], strokeWidth + i * lineHeight);
+        context.strokeText(lines[i], x + leftRight * widths[i], 0.5 * strokeWidth + i * lineHeight);
       }
     }
     if (fill) {
       for (i = 0; i < numLines; ++i) {
-        context.fillText(lines[i], x + leftRight * widths[i], strokeWidth + i * lineHeight);
+        context.fillText(lines[i], x + leftRight * widths[i], 0.5 * strokeWidth + i * lineHeight);
       }
     }
   }
@@ -377,12 +378,12 @@ ol.render.canvas.TextReplay.prototype.drawTextImage_ = function(label, begin, en
   this.instructions.push([ol.render.canvas.Instruction.DRAW_IMAGE, begin, end,
     label, (anchorX - this.textOffsetX_) * pixelRatio, (anchorY - this.textOffsetY_) * pixelRatio,
     label.height, 1, 0, 0, this.textRotateWithView_, this.textRotation_,
-    this.textScale_, true, label.width
+    1, true, label.width
   ]);
   this.hitDetectionInstructions.push([ol.render.canvas.Instruction.DRAW_IMAGE, begin, end,
     label, (anchorX - this.textOffsetX_) * pixelRatio, (anchorY - this.textOffsetY_) * pixelRatio,
     label.height, 1, 0, 0, this.textRotateWithView_, this.textRotation_,
-    this.textScale_ / pixelRatio, true, label.width
+    1 / pixelRatio, true, label.width
   ]);
 };
 
@@ -423,14 +424,14 @@ ol.render.canvas.TextReplay.prototype.drawChars_ = function(begin, end) {
   this.instructions.push([ol.render.canvas.Instruction.DRAW_CHARS,
     begin, end, labels, baseline,
     textState.exceedLength, textState.maxAngle,
-    ol.render.canvas.TextReplay.getTextWidth.bind(widths, context, pixelRatio),
-    offsetY, this.text_, align, this.textScale_
+    ol.render.canvas.TextReplay.getTextWidth.bind(widths, context, pixelRatio * this.textScale_),
+    offsetY, this.text_, align, 1
   ]);
   this.hitDetectionInstructions.push([ol.render.canvas.Instruction.DRAW_CHARS,
     begin, end, labels, baseline,
     textState.exceedLength, textState.maxAngle,
-    ol.render.canvas.TextReplay.getTextWidth.bind(widths, context, 1),
-    offsetY, this.text_, align, this.textScale_ / pixelRatio
+    ol.render.canvas.TextReplay.getTextWidth.bind(widths, context, this.textScale_),
+    offsetY, this.text_, align, 1 / pixelRatio
   ]);
 };
 
@@ -530,7 +531,7 @@ ol.render.canvas.TextReplay.prototype.setTextStyle = function(textStyle) {
       strokeState.lineCap + strokeState.lineDashOffset + '|' + strokeState.lineWidth +
       strokeState.lineJoin + strokeState.miterLimit + '[' + strokeState.lineDash.join() + ']' :
       '';
-    this.textKey_ = textState.font + textState.textAlign;
+    this.textKey_ = textState.font + (textState.textAlign || '?') + this.textScale_;
     this.fillKey_ = fillState ?
       (typeof fillState.fillStyle == 'string' ? fillState.fillStyle : ('|' + ol.getUid(fillState.fillStyle))) :
       '';

src/ol/renderer/layer.js

@@ -256,7 +256,7 @@ ol.renderer.Layer.prototype.manageTilePyramid = function(
   var tileQueue = frameState.tileQueue;
   var minZoom = tileGrid.getMinZoom();
   var tile, tileRange, tileResolution, x, y, z;
-  for (z = currentZ; z >= minZoom; --z) {
+  for (z = minZoom; z <= currentZ; ++z) {
     tileRange = tileGrid.getTileRangeForExtentAndZ(extent, z, tileRange);
     tileResolution = tileGrid.getResolution(z);
     for (x = tileRange.minX; x <= tileRange.maxX; ++x) {

src/ol/source/raster.js

@@ -181,6 +181,8 @@ ol.source.Raster.prototype.updateFrameState_ = function(extent, resolution, proj
   frameState.focus = center;
   frameState.size[0] = Math.round(ol.extent.getWidth(extent) / resolution);
   frameState.size[1] = Math.round(ol.extent.getHeight(extent) / resolution);
+  frameState.time = Date.now();
+  frameState.animate = false;
 
   var viewState = frameState.viewState;
   viewState.center = center;
@@ -234,6 +236,11 @@ ol.source.Raster.prototype.getImage = function(extent, resolution, pixelRatio, p
   }
 
   frameState.tileQueue.loadMoreTiles(16, 16);
+
+  if (frameState.animate) {
+    requestAnimationFrame(this.changed.bind(this));
+  }
+
   return this.renderedImageCanvas_;
 };
 

src/ol/source/tile.js

@@ -120,7 +120,7 @@ ol.source.Tile.prototype.forEachLoadedTile = function(projection, z, tileRange,
   var tile, tileCoordKey, loaded;
   for (var x = tileRange.minX; x <= tileRange.maxX; ++x) {
     for (var y = tileRange.minY; y <= tileRange.maxY; ++y) {
-      tileCoordKey = this.getKeyZXY(z, x, y);
+      tileCoordKey = ol.tilecoord.getKeyZXY(z, x, y);
       loaded = false;
       if (tileCache.containsKey(tileCoordKey)) {
         tile = /** @type {!ol.Tile} */ (tileCache.get(tileCoordKey));
@@ -170,16 +170,6 @@ ol.source.Tile.prototype.setKey = function(key) {
 };
 
 
-/**
- * @param {number} z Z.
- * @param {number} x X.
- * @param {number} y Y.
- * @return {string} Key.
- * @protected
- */
-ol.source.Tile.prototype.getKeyZXY = ol.tilecoord.getKeyZXY;
-
-
 /**
  * @param {ol.proj.Projection} projection Projection.
  * @return {boolean} Opaque.

src/ol/source/tiledebug.js

@@ -6,6 +6,7 @@ goog.require('ol.TileState');
 goog.require('ol.dom');
 goog.require('ol.size');
 goog.require('ol.source.Tile');
+goog.require('ol.tilecoord');
 
 
 /**
@@ -38,7 +39,7 @@ ol.inherits(ol.source.TileDebug, ol.source.Tile);
  * @inheritDoc
  */
 ol.source.TileDebug.prototype.getTile = function(z, x, y) {
-  var tileCoordKey = this.getKeyZXY(z, x, y);
+  var tileCoordKey = ol.tilecoord.getKeyZXY(z, x, y);
   if (this.tileCache.containsKey(tileCoordKey)) {
     return /** @type {!ol.source.TileDebug.Tile_} */ (this.tileCache.get(tileCoordKey));
   } else {

src/ol/source/tileimage.js

@@ -9,6 +9,7 @@ goog.require('ol.events.EventType');
 goog.require('ol.proj');
 goog.require('ol.reproj.Tile');
 goog.require('ol.source.UrlTile');
+goog.require('ol.tilecoord');
 goog.require('ol.tilegrid');
 
 
@@ -245,7 +246,7 @@ ol.source.TileImage.prototype.getTile = function(z, x, y, pixelRatio, projection
     var cache = this.getTileCacheForProjection(projection);
     var tileCoord = [z, x, y];
     var tile;
-    var tileCoordKey = this.getKeyZXY.apply(this, tileCoord);
+    var tileCoordKey = ol.tilecoord.getKey(tileCoord);
     if (cache.containsKey(tileCoordKey)) {
       tile = /** @type {!ol.Tile} */ (cache.get(tileCoordKey));
     }
@@ -293,7 +294,7 @@ ol.source.TileImage.prototype.getTile = function(z, x, y, pixelRatio, projection
  */
 ol.source.TileImage.prototype.getTileInternal = function(z, x, y, pixelRatio, projection) {
   var tile = null;
-  var tileCoordKey = this.getKeyZXY(z, x, y);
+  var tileCoordKey = ol.tilecoord.getKeyZXY(z, x, y);
   var key = this.getKey();
   if (!this.tileCache.containsKey(tileCoordKey)) {
     tile = this.createTile_(z, x, y, pixelRatio, projection, key);

src/ol/source/tileutfgrid.js

@@ -13,6 +13,7 @@ goog.require('ol.net');
 goog.require('ol.proj');
 goog.require('ol.source.State');
 goog.require('ol.source.Tile');
+goog.require('ol.tilecoord');
 goog.require('ol.tilegrid');
 
 
@@ -223,7 +224,7 @@ ol.source.TileUTFGrid.prototype.handleTileJSONResponse = function(tileJSON) {
  * @inheritDoc
  */
 ol.source.TileUTFGrid.prototype.getTile = function(z, x, y, pixelRatio, projection) {
-  var tileCoordKey = this.getKeyZXY(z, x, y);
+  var tileCoordKey = ol.tilecoord.getKeyZXY(z, x, y);
   if (this.tileCache.containsKey(tileCoordKey)) {
     return /** @type {!ol.Tile} */ (this.tileCache.get(tileCoordKey));
   } else {
@@ -248,7 +249,7 @@ ol.source.TileUTFGrid.prototype.getTile = function(z, x, y, pixelRatio, projecti
  * @inheritDoc
  */
 ol.source.TileUTFGrid.prototype.useTile = function(z, x, y) {
-  var tileCoordKey = this.getKeyZXY(z, x, y);
+  var tileCoordKey = ol.tilecoord.getKeyZXY(z, x, y);
   if (this.tileCache.containsKey(tileCoordKey)) {
     this.tileCache.get(tileCoordKey);
   }

src/ol/source/tilewms.js

@@ -81,13 +81,6 @@ ol.source.TileWMS = function(opt_options) {
    */
   this.hidpi_ = options.hidpi !== undefined ? options.hidpi : true;
 
-  /**
-   * @private
-   * @type {string}
-   */
-  this.coordKeyPrefix_ = '';
-  this.resetCoordKeyPrefix_();
-
   /**
    * @private
    * @type {ol.Extent}
@@ -171,14 +164,6 @@ ol.source.TileWMS.prototype.getGutterInternal = function() {
 };
 
 
-/**
- * @inheritDoc
- */
-ol.source.TileWMS.prototype.getKeyZXY = function(z, x, y) {
-  return this.coordKeyPrefix_ + ol.source.TileImage.prototype.getKeyZXY.call(this, z, x, y);
-};
-
-
 /**
  * Get the user-provided params, i.e. those passed to the constructor through
  * the "params" option, and possibly updated using the updateParams method.
@@ -273,24 +258,6 @@ ol.source.TileWMS.prototype.getTilePixelRatio = function(pixelRatio) {
 };
 
 
-/**
- * @private
- */
-ol.source.TileWMS.prototype.resetCoordKeyPrefix_ = function() {
-  var i = 0;
-  var res = [];
-
-  if (this.urls) {
-    var j, jj;
-    for (j = 0, jj = this.urls.length; j < jj; ++j) {
-      res[i++] = this.urls[j];
-    }
-  }
-
-  this.coordKeyPrefix_ = res.join('#');
-};
-
-
 /**
  * @private
  * @return {string} The key for the current params.
@@ -352,15 +319,6 @@ ol.source.TileWMS.prototype.fixedTileUrlFunction = function(tileCoord, pixelRati
       pixelRatio, projection, baseParams);
 };
 
-/**
- * @inheritDoc
- */
-ol.source.TileWMS.prototype.setUrls = function(urls) {
-  ol.source.TileImage.prototype.setUrls.call(this, urls);
-  this.resetCoordKeyPrefix_();
-};
-
-
 /**
  * Update the user-provided params.
  * @param {Object} params Params.
@@ -368,7 +326,6 @@ ol.source.TileWMS.prototype.setUrls = function(urls) {
  */
 ol.source.TileWMS.prototype.updateParams = function(params) {
   ol.obj.assign(this.params_, params);
-  this.resetCoordKeyPrefix_();
   this.updateV13_();
   this.setKey(this.getKeyForParams_());
 };

src/ol/source/urltile.js

@@ -5,6 +5,7 @@ goog.require('ol.TileState');
 goog.require('ol.TileUrlFunction');
 goog.require('ol.source.Tile');
 goog.require('ol.source.TileEventType');
+goog.require('ol.tilecoord');
 
 
 /**
@@ -155,6 +156,7 @@ ol.source.UrlTile.prototype.setTileLoadFunction = function(tileLoadFunction) {
  */
 ol.source.UrlTile.prototype.setTileUrlFunction = function(tileUrlFunction, opt_key) {
   this.tileUrlFunction = tileUrlFunction;
+  this.tileCache.pruneExceptNewestZ();
   if (typeof opt_key !== 'undefined') {
     this.setKey(opt_key);
   } else {
@@ -194,7 +196,7 @@ ol.source.UrlTile.prototype.setUrls = function(urls) {
  * @inheritDoc
  */
 ol.source.UrlTile.prototype.useTile = function(z, x, y) {
-  var tileCoordKey = this.getKeyZXY(z, x, y);
+  var tileCoordKey = ol.tilecoord.getKeyZXY(z, x, y);
   if (this.tileCache.containsKey(tileCoordKey)) {
     this.tileCache.get(tileCoordKey);
   }

src/ol/source/vectortile.js

@@ -5,8 +5,9 @@ goog.require('ol.TileState');
 goog.require('ol.VectorImageTile');
 goog.require('ol.VectorTile');
 goog.require('ol.size');
-goog.require('ol.tilegrid');
 goog.require('ol.source.UrlTile');
+goog.require('ol.tilecoord');
+goog.require('ol.tilegrid');
 
 
 /**
@@ -110,7 +111,7 @@ ol.source.VectorTile.prototype.clear = function() {
  * @inheritDoc
  */
 ol.source.VectorTile.prototype.getTile = function(z, x, y, pixelRatio, projection) {
-  var tileCoordKey = this.getKeyZXY(z, x, y);
+  var tileCoordKey = ol.tilecoord.getKeyZXY(z, x, y);
   if (this.tileCache.containsKey(tileCoordKey)) {
     return /** @type {!ol.Tile} */ (this.tileCache.get(tileCoordKey));
   } else {

src/ol/structs/lrucache.js

@@ -116,6 +116,34 @@ ol.structs.LRUCache.prototype.get = function(key) {
 };
 
 
+/**
+ * Remove an entry from the cache.
+ * @param {string} key The entry key.
+ * @return {T} The removed entry.
+ */
+ol.structs.LRUCache.prototype.remove = function(key) {
+  var entry = this.entries_[key];
+  ol.asserts.assert(entry !== undefined, 15); // Tried to get a value for a key that does not exist in the cache
+  if (entry === this.newest_) {
+    this.newest_ = /** @type {ol.LRUCacheEntry} */ (entry.older);
+    if (this.newest_) {
+      this.newest_.newer = null;
+    }
+  } else if (entry === this.oldest_) {
+    this.oldest_ = /** @type {ol.LRUCacheEntry} */ (entry.newer);
+    if (this.oldest_) {
+      this.oldest_.older = null;
+    }
+  } else {
+    entry.newer.older = entry.older;
+    entry.older.newer = entry.newer;
+  }
+  delete this.entries_[key];
+  --this.count_;
+  return entry.value_;
+};
+
+
 /**
  * @return {number} Count.
  */
@@ -168,6 +196,15 @@ ol.structs.LRUCache.prototype.peekLastKey = function() {
 };
 
 
+/**
+ * Get the key of the newest item in the cache.  Throws if the cache is empty.
+ * @return {string} The newest key.
+ */
+ol.structs.LRUCache.prototype.peekFirstKey = function() {
+  return this.newest_.key_;
+};
+
+
 /**
  * @return {T} value Value.
  */

src/ol/tilecache.js

@@ -2,6 +2,7 @@ goog.provide('ol.TileCache');
 
 goog.require('ol');
 goog.require('ol.structs.LRUCache');
+goog.require('ol.tilecoord');
 
 
 /**
@@ -33,3 +34,22 @@ ol.TileCache.prototype.expireCache = function(usedTiles) {
     }
   }
 };
+
+
+/**
+ * Prune all tiles from the cache that don't have the same z as the newest tile.
+ */
+ol.TileCache.prototype.pruneExceptNewestZ = function() {
+  if (this.getCount() === 0) {
+    return;
+  }
+  var key = this.peekFirstKey();
+  var tileCoord = ol.tilecoord.fromKey(key);
+  var z = tileCoord[0];
+  this.forEach(function(tile) {
+    if (tile.tileCoord[0] !== z) {
+      this.remove(ol.tilecoord.getKey(tile.tileCoord));
+      tile.dispose();
+    }
+  }, this);
+};

src/ol/tilecoord.js

@@ -31,6 +31,26 @@ ol.tilecoord.getKeyZXY = function(z, x, y) {
 };
 
 
+/**
+ * Get the key for a tile coord.
+ * @param {ol.TileCoord} tileCoord The tile coord.
+ * @return {string} Key.
+ */
+ol.tilecoord.getKey = function(tileCoord) {
+  return ol.tilecoord.getKeyZXY(tileCoord[0], tileCoord[1], tileCoord[2]);
+};
+
+
+/**
+ * Get a tile coord given a key.
+ * @param {string} key The tile coord key.
+ * @return {ol.TileCoord} The tile coord.
+ */
+ol.tilecoord.fromKey = function(key) {
+  return key.split('/').map(Number);
+};
+
+
 /**
  * @param {ol.TileCoord} tileCoord Tile coord.
  * @return {number} Hash.

test/rendering/ol/source/raster.test.js

@@ -0,0 +1,84 @@
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.layer.Image');
+goog.require('ol.source.Raster');
+goog.require('ol.source.XYZ');
+
+where('Uint8ClampedArray').describe('ol.rendering.source.Raster', function() {
+
+  function afterRender(source, raster, callback) {
+    var loading = 0;
+
+    source.on('tileloadstart', function(event) {
+      loading++;
+    });
+    source.on('tileloadend', function(event) {
+      loading--;
+      if (loading == 0) {
+        raster.once('afteroperations', function() {
+          callback();
+        });
+      }
+    });
+    source.on('tileloaderror', function(event) {
+      callback(new Error('Tile failed to load'));
+    });
+
+  }
+
+  var map;
+  function createMap(renderer, pixelRatio) {
+    map = new ol.Map({
+      target: createMapDiv(200, 200),
+      pixelRatio: pixelRatio,
+      renderer: renderer,
+      view: new ol.View({
+        center: [0, 0],
+        zoom: 0
+      })
+    });
+  }
+
+  afterEach(function() {
+    if (map) {
+      disposeMap(map);
+    }
+    map = null;
+  });
+
+  describe('raster source rendering', function() {
+    it('renders the result of an operation', function(done) {
+      createMap('canvas', 1);
+
+      var source = new ol.source.XYZ({
+        url: 'rendering/ol/data/tiles/osm/{z}/{x}/{y}.png',
+        transition: 0
+      });
+
+      var raster = new ol.source.Raster({
+        sources: [source],
+        operation: function(pixels) {
+          var pixel = pixels[0];
+          // swap blue and red
+          var red = pixel[0];
+          pixel[0] = pixel[2];
+          pixel[2] = red;
+          return pixel;
+        }
+      });
+
+      afterRender(source, raster, function(err) {
+        if (err) {
+          done(err);
+          return;
+        }
+        expectResemble(map, 'rendering/ol/source/expected/raster-1.png', IMAGE_TOLERANCE, done);
+      });
+
+      var layer = new ol.layer.Image({source: raster});
+
+      map.addLayer(layer);
+    });
+  });
+
+});

test/rendering/ol/style/text.test.js

@@ -17,15 +17,16 @@ describe('ol.rendering.style.Text', function() {
 
   var map, vectorSource;
 
-  function createMap(renderer) {
+  function createMap(renderer, opt_pixelRatio) {
+    var pixelRatio = opt_pixelRatio || 1;
     vectorSource = new ol.source.Vector();
     var vectorLayer = new ol.layer.Vector({
       source: vectorSource
     });
 
     map = new ol.Map({
-      pixelRatio: 1,
-      target: createMapDiv(200, 200),
+      pixelRatio: pixelRatio,
+      target: createMapDiv(200 / pixelRatio, 200 / pixelRatio),
       renderer: renderer,
       layers: [vectorLayer],
       view: new ol.View({
@@ -45,15 +46,17 @@ describe('ol.rendering.style.Text', function() {
 
   describe('#render', function() {
 
-    function createFeatures() {
+    function createFeatures(opt_scale) {
+      var scale = opt_scale || 1;
       var feature;
       feature = new ol.Feature({
         geometry: new ol.geom.Point([-20, 18])
       });
       feature.setStyle(new ol.style.Style({
         text: new ol.style.Text({
+          scale: scale,
           text: 'hello',
-          font: '10px'
+          font: '10px sans-serif'
         })
       }));
       vectorSource.addFeature(feature);
@@ -63,10 +66,11 @@ describe('ol.rendering.style.Text', function() {
       });
       feature.setStyle(new ol.style.Style({
         text: new ol.style.Text({
+          scale: scale,
           text: 'hello',
           fill: new ol.style.Fill({
             color: 'red',
-            font: '12px'
+            font: '12px sans-serif'
           }),
           stroke: new ol.style.Stroke({
             color: '#000',
@@ -81,9 +85,10 @@ describe('ol.rendering.style.Text', function() {
       });
       feature.setStyle(new ol.style.Style({
         text: new ol.style.Text({
+          scale: scale,
           rotateWithView: true,
           text: 'hello',
-          font: '10px',
+          font: '10px sans-serif',
           stroke: new ol.style.Stroke({
             color: [10, 10, 10, 0.5]
           })
@@ -99,7 +104,7 @@ describe('ol.rendering.style.Text', function() {
     var uglyPath = [163, 22, 159, 30, 150, 30, 143, 24, 151, 17];
     var polygon = [151, 17, 163, 22, 159, 30, 150, 30, 143, 24, 151, 17];
 
-    function createLineString(coords, textAlign, maxAngle, strokeColor, strokeWidth) {
+    function createLineString(coords, textAlign, maxAngle, strokeColor, strokeWidth, scale) {
       var geom = new ol.geom.LineString();
       geom.setFlatCoordinates('XY', coords);
       var style = new ol.style.Style({
@@ -109,6 +114,7 @@ describe('ol.rendering.style.Text', function() {
         text: new ol.style.Text({
           text: 'Hello world',
           font: 'bold 14px sans-serif',
+          scale: scale || 1,
           textAlign: textAlign,
           maxAngle: maxAngle,
           placement: 'line',
@@ -154,6 +160,18 @@ describe('ol.rendering.style.Text', function() {
       expectResemble(map, 'rendering/ol/style/expected/text-rotated-canvas.png', IMAGE_TOLERANCE, done);
     });
 
+    it('renders correct stroke with pixelRatio != 1', function(done) {
+      createMap('canvas', 2);
+      createFeatures();
+      expectResemble(map, 'rendering/ol/style/expected/text-canvas-hidpi.png', 2.8, done);
+    });
+
+    it('renders text correctly with scale != 1', function(done) {
+      createMap('canvas');
+      createFeatures(3);
+      expectResemble(map, 'rendering/ol/style/expected/text-canvas-scale.png', 6, done);
+    });
+
     it('renders multiline text with alignment options', function(done) {
       createMap('canvas');
       var feature;
@@ -286,6 +304,12 @@ describe('ol.rendering.style.Text', function() {
         expectResemble(map, 'rendering/ol/style/expected/text-linestring-nice.png', 2.8, done);
       });
 
+      it('renders text along a linestring with scale != 1', function(done) {
+        createMap('canvas');
+        createLineString(nicePath, undefined, undefined, undefined, undefined, 2);
+        expectResemble(map, 'rendering/ol/style/expected/text-linestring-nice-scale.png', 8, done);
+      });
+
       it('aligns text along a linestring correctly with `textBaseline` option', function(done) {
         createMap('canvas');
         createLineString(nicePath, undefined, undefined, 'cyan', 3);

test/spec/ol/renderer/layer.test.js

@@ -1,8 +1,11 @@
-
-
 goog.require('ol.Image');
+goog.require('ol.Map');
+goog.require('ol.View');
 goog.require('ol.layer.Layer');
+goog.require('ol.layer.Tile');
 goog.require('ol.renderer.Layer');
+goog.require('ol.source.XYZ');
+goog.require('ol.tilecoord');
 
 
 describe('ol.renderer.Layer', function() {
@@ -82,4 +85,63 @@ describe('ol.renderer.Layer', function() {
     });
 
   });
+
+  describe('manageTilePyramid behavior', function() {
+    var target, map, view, source;
+
+    beforeEach(function(done) {
+      target = document.createElement('div');
+      Object.assign(target.style, {
+        position: 'absolute',
+        left: '-1000px',
+        top: '-1000px',
+        width: '360px',
+        height: '180px'
+      });
+      document.body.appendChild(target);
+
+      view = new ol.View({
+        center: [0, 0],
+        zoom: 0
+      });
+
+      source = new ol.source.XYZ({
+        url: '#{x}/{y}/{z}'
+      });
+
+      map = new ol.Map({
+        target: target,
+        view: view,
+        layers: [
+          new ol.layer.Tile({
+            source: source
+          })
+        ]
+      });
+      map.once('postrender', function() {
+        done();
+      });
+    });
+
+    afterEach(function() {
+      map.dispose();
+      document.body.removeChild(target);
+    });
+
+    it('accesses tiles from current zoom level last', function(done) {
+      // expect most recent tile in the cache to be from zoom level 0
+      var key = source.tileCache.peekFirstKey();
+      var tileCoord = ol.tilecoord.fromKey(key);
+      expect(tileCoord[0]).to.be(0);
+
+      map.once('moveend', function() {
+        // expect most recent tile in the cache to be from zoom level 4
+        var key = source.tileCache.peekFirstKey();
+        var tileCoord = ol.tilecoord.fromKey(key);
+        expect(tileCoord[0]).to.be(4);
+        done();
+      });
+      view.setZoom(4);
+    });
+  });
 });

test/spec/ol/source/tile.test.js

@@ -5,8 +5,10 @@ goog.require('ol.proj');
 goog.require('ol.proj.Projection');
 goog.require('ol.source.Source');
 goog.require('ol.source.Tile');
+goog.require('ol.tilecoord');
 goog.require('ol.tilegrid.TileGrid');
 
+
 /**
  * Tile source for tests that uses a EPSG:4326 based grid with 4 resolutions and
  * 256x256 tiles.
@@ -40,7 +42,7 @@ ol.inherits(MockTile, ol.source.Tile);
  * @inheritDoc
  */
 MockTile.prototype.getTile = function(z, x, y) {
-  var key = this.getKeyZXY(z, x, y);
+  var key = ol.tilecoord.getKeyZXY(z, x, y);
   if (this.tileCache.containsKey(key)) {
     return /** @type {!ol.Tile} */ (this.tileCache.get(key));
   } else {

test/spec/ol/source/tileimage.test.js

@@ -1,5 +1,3 @@
-
-
 goog.require('ol.ImageTile');
 goog.require('ol.TileState');
 goog.require('ol.TileUrlFunction');
@@ -9,6 +7,7 @@ goog.require('ol.proj.EPSG3857');
 goog.require('ol.proj.Projection');
 goog.require('ol.reproj.Tile');
 goog.require('ol.source.TileImage');
+goog.require('ol.tilecoord');
 goog.require('ol.tilegrid');
 
 
@@ -52,7 +51,7 @@ describe('ol.source.TileImage', function() {
       expect(source.getKey()).to.be('');
       source.getTileInternal(0, 0, -1, 1, ol.proj.get('EPSG:3857'));
       expect(source.tileCache.getCount()).to.be(1);
-      tile = source.tileCache.get(source.getKeyZXY(0, 0, -1));
+      tile = source.tileCache.get(ol.tilecoord.getKeyZXY(0, 0, -1));
     });
 
     it('gets the tile from the cache', function() {

test/spec/ol/source/tilewms.test.js

@@ -275,15 +275,13 @@ describe('ol.source.TileWMS', function() {
   });
 
   describe('#setUrls()', function() {
-    it ('resets coordKeyPrefix_', function() {
-      var urls = ['u1', 'u2'];
-      var source1 = new ol.source.TileWMS({
-        urls: urls
+    it ('updates the source key', function() {
+      var source = new ol.source.TileWMS({
+        urls: ['u1', 'u2']
       });
-      var source2 = new ol.source.TileWMS({});
-      expect(source2.coordKeyPrefix_).to.be.empty();
-      source2.setUrls(urls);
-      expect(source2.coordKeyPrefix_).to.equal(source1.coordKeyPrefix_);
+      var originalKey = source.getKey();
+      source.setUrls(['u3', 'u4']);
+      expect(source.getKey() !== originalKey).to.be(true);
     });
   });
 });

test/spec/ol/structs/lrucache.test.js

@@ -164,6 +164,30 @@ describe('ol.structs.LRUCache', function() {
     });
   });
 
+  describe('#peekFirstKey()', function() {
+    it('returns the newest key in the cache', function() {
+      var cache = new ol.structs.LRUCache();
+      cache.set('oldest', 'oldest');
+      cache.set('oldish', 'oldish');
+      cache.set('newish', 'newish');
+      cache.set('newest', 'newest');
+      expect(cache.peekFirstKey()).to.eql('newest');
+    });
+
+    it('works if the cache has one item', function() {
+      var cache = new ol.structs.LRUCache();
+      cache.set('key', 'value');
+      expect(cache.peekFirstKey()).to.eql('key');
+    });
+
+    it('throws if the cache is empty', function() {
+      var cache = new ol.structs.LRUCache();
+      expect(function() {
+        cache.peekFirstKey();
+      }).to.throwException();
+    });
+  });
+
   describe('peeking at the last value', function() {
     it('returns the last key', function() {
       fillLRUCache(lruCache);
@@ -188,6 +212,66 @@ describe('ol.structs.LRUCache', function() {
     });
   });
 
+  describe('#remove()', function() {
+    it('removes an item from the cache', function() {
+      var cache = new ol.structs.LRUCache();
+      cache.set('oldest', 'oldest');
+      cache.set('oldish', 'oldish');
+      cache.set('newish', 'newish');
+      cache.set('newest', 'newest');
+
+      cache.remove('oldish');
+      expect(cache.getCount()).to.eql(3);
+      expect(cache.getValues()).to.eql(['newest', 'newish', 'oldest']);
+    });
+
+    it('works when removing the oldest item', function() {
+      var cache = new ol.structs.LRUCache();
+      cache.set('oldest', 'oldest');
+      cache.set('oldish', 'oldish');
+      cache.set('newish', 'newish');
+      cache.set('newest', 'newest');
+
+      cache.remove('oldest');
+      expect(cache.getCount()).to.eql(3);
+      expect(cache.peekLastKey()).to.eql('oldish');
+      expect(cache.getValues()).to.eql(['newest', 'newish', 'oldish']);
+    });
+
+    it('works when removing the newest item', function() {
+      var cache = new ol.structs.LRUCache();
+      cache.set('oldest', 'oldest');
+      cache.set('oldish', 'oldish');
+      cache.set('newish', 'newish');
+      cache.set('newest', 'newest');
+
+      cache.remove('newest');
+      expect(cache.getCount()).to.eql(3);
+      expect(cache.peekFirstKey()).to.eql('newish');
+      expect(cache.getValues()).to.eql(['newish', 'oldish', 'oldest']);
+    });
+
+    it('returns the removed item', function() {
+      var cache = new ol.structs.LRUCache();
+      var item = {};
+      cache.set('key', item);
+
+      var returned = cache.remove('key');
+      expect(returned).to.be(item);
+    });
+
+    it('throws if the key does not exist', function() {
+      var cache = new ol.structs.LRUCache();
+      cache.set('foo', 'foo');
+      cache.set('bar', 'bar');
+
+      var call = function() {
+        cache.remove('bam');
+      };
+      expect(call).to.throwException();
+    });
+  });
+
   describe('clearing the cache', function() {
     it('clears the cache', function() {
       fillLRUCache(lruCache);

test/spec/ol/tilecache.test.js

@@ -0,0 +1,39 @@
+goog.require('ol.Tile');
+goog.require('ol.TileCache');
+goog.require('ol.tilecoord');
+
+
+describe('ol.TileCache', function() {
+
+  describe('#pruneExceptNewestZ()', function() {
+    it('gets rid of all entries that are not at the newest z', function() {
+      var tiles = [
+        new ol.Tile([0, 0, 0]),
+        new ol.Tile([1, 0, 0]),
+        new ol.Tile([1, 1, 0]),
+        new ol.Tile([2, 0, 0]),
+        new ol.Tile([2, 1, 0]),
+        new ol.Tile([2, 2, 0]),
+        new ol.Tile([2, 3, 0]) // newest tile at z: 2
+      ];
+      var cache = new ol.TileCache();
+
+      sinon.spy(tiles[0], 'dispose');
+
+      tiles.forEach(function(tile) {
+        cache.set(ol.tilecoord.getKey(tile.tileCoord), tile);
+      });
+
+      cache.pruneExceptNewestZ();
+
+      expect(cache.getKeys()).to.eql([
+        '2/3/0',
+        '2/2/0',
+        '2/1/0',
+        '2/0/0'
+      ]);
+
+      expect(tiles[0].dispose.calledOnce).to.be(true);
+    });
+  });
+});

test/spec/ol/tilecoord.test.js

@@ -1,5 +1,3 @@
-
-
 goog.require('ol.tilecoord');
 goog.require('ol.tilegrid.TileGrid');
 
@@ -23,6 +21,23 @@ describe('ol.TileCoord', function() {
     });
   });
 
+  describe('getKey()', function() {
+    it('returns a key for a tile coord', function() {
+      var key = ol.tilecoord.getKey([1, 2, 3]);
+      expect(key).to.eql('1/2/3');
+    });
+  });
+
+  describe('fromKey()', function() {
+    it('returns a tile coord given a key', function() {
+      var tileCoord = [1, 2, 3];
+      var key = ol.tilecoord.getKey(tileCoord);
+
+      var returned = ol.tilecoord.fromKey(key);
+      expect(returned).to.eql(tileCoord);
+    });
+  });
+
   describe('hash', function() {
     it('produces different hashes for different tile coords', function() {
       var tileCoord1 = [3, 2, 1];

test/test-extensions.js

@@ -383,6 +383,14 @@ goog.require('ol.has');
   };
 
   function resembleCanvas(canvas, referenceImage, tolerance, done) {
+    if (showMap) {
+      var wrapper = document.createElement('div');
+      wrapper.style.width = canvas.width + 'px';
+      wrapper.style.height = canvas.height + 'px';
+      wrapper.appendChild(canvas);
+      document.body.appendChild(wrapper);
+      document.body.appendChild(document.createTextNode(referenceImage));
+    }
     var width = canvas.width;
     var height = canvas.height;
     var image = new Image();
@@ -394,14 +402,6 @@ goog.require('ol.has');
       referenceCanvas.height = image.height;
       var referenceContext = referenceCanvas.getContext('2d');
       referenceContext.drawImage(image, 0, 0, image.width, image.height);
-      if (showMap) {
-        var wrapper = document.createElement('div');
-        wrapper.style.width = canvas.width + 'px';
-        wrapper.style.height = canvas.height + 'px';
-        wrapper.appendChild(canvas);
-        document.body.appendChild(wrapper);
-        document.body.appendChild(document.createTextNode(referenceImage));
-      }
       var context = canvas.getContext('2d');
       var output = context.createImageData(canvas.width, canvas.height);
       var mismatchPx = pixelmatch(