Add first rendering tests

test_rendering/spec/ol/layer/image.test.js

@@ -0,0 +1,94 @@
+goog.provide('ol.test.rendering.layer.Image');
+
+describe('ol.rendering.layer.Image', function() {
+
+  var target, map;
+
+  function createMap(renderer) {
+    target = createMapDiv(50, 50);
+
+    map = new ol.Map({
+      target: target,
+      renderer: renderer,
+      view: new ol.View({
+        center: ol.proj.transform(
+            [-122.416667, 37.783333], 'EPSG:4326', 'EPSG:3857'),
+        zoom: 5
+      })
+    });
+    return map;
+  }
+
+  function waitForImages(sources, layerOptions, onImagesLoaded) {
+    var imagesLoading = 0;
+    var imagesLoaded = 0;
+
+    var update = function() {
+      if (imagesLoading === imagesLoaded) {
+        onImagesLoaded();
+      }
+    };
+
+    goog.array.forEach(sources, function(source) {
+      source.on('imageloadstart', function(event) {
+        imagesLoading++;
+      });
+      source.on('imageloadend', function(event) {
+        imagesLoaded++;
+        update();
+      });
+      source.on('imageloaderror', function(event) {
+        expect().fail('Image failed to load');
+      });
+
+      var options = {
+        source: source
+      };
+      goog.object.extend(options, layerOptions);
+      map.addLayer(new ol.layer.Image(options));
+    });
+  }
+
+  describe('single image layer', function() {
+    var source;
+
+    beforeEach(function() {
+      source = new ol.source.ImageStatic({
+        url: 'spec/ol/data/tiles/osm/5/5/12.png',
+        imageExtent: new ol.tilegrid.XYZ({}).getTileCoordExtent(
+            [5, 5, -12 - 1]),
+        projection: ol.proj.get('EPSG:3857')
+      });
+    });
+
+    afterEach(function() {
+      disposeMap(map);
+    });
+
+    it('tests the canvas renderer', function(done) {
+      map = createMap('canvas');
+      waitForImages([source], {}, function() {
+        expectResemble(map, 'spec/ol/layer/expected/image-canvas.png',
+            IMAGE_TOLERANCE, done);
+      });
+    });
+
+    it('tests the WebGL renderer', function(done) {
+      assertWebGL();
+      map = createMap('webgl');
+      waitForImages([source], {}, function() {
+        expectResemble(map, 'spec/ol/layer/expected/image-webgl.png',
+            IMAGE_TOLERANCE, done);
+      });
+    });
+  });
+});
+
+goog.require('goog.array');
+goog.require('goog.object');
+goog.require('ol.proj');
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.layer.Image');
+goog.require('ol.source.ImageStatic');
+goog.require('ol.tilegrid.XYZ');

test_rendering/spec/ol/layer/tile.test.js

@@ -0,0 +1,155 @@
+goog.provide('ol.test.rendering.layer.Tile');
+
+describe('ol.rendering.layer.Tile', function() {
+
+  var target, map;
+
+  function createMap(renderer) {
+    target = createMapDiv(50, 50);
+
+    map = new ol.Map({
+      target: target,
+      renderer: renderer,
+      view: new ol.View({
+        center: ol.proj.transform(
+            [-122.416667, 37.783333], 'EPSG:4326', 'EPSG:3857'),
+        zoom: 5
+      })
+    });
+    return map;
+  }
+
+  function waitForTiles(sources, layerOptions, onTileLoaded) {
+    var tilesLoading = 0;
+    var tileLoaded = 0;
+
+    var update = function() {
+      if (tilesLoading === tileLoaded) {
+        onTileLoaded();
+      }
+    };
+
+    goog.array.forEach(sources, function(source) {
+      source.on('tileloadstart', function(event) {
+        tilesLoading++;
+      });
+      source.on('tileloadend', function(event) {
+        tileLoaded++;
+        update();
+      });
+      source.on('tileloaderror', function(event) {
+        expect().fail('Tile failed to load');
+      });
+
+      var options = {
+        source: source
+      };
+      goog.object.extend(options, layerOptions);
+      map.addLayer(new ol.layer.Tile(options));
+    });
+  }
+
+  describe('single tile layer', function() {
+    var source;
+
+    beforeEach(function() {
+      source = new ol.source.XYZ({
+        url: 'spec/ol/data/tiles/osm/{z}/{x}/{y}.png'
+      });
+    });
+
+    afterEach(function() {
+      disposeMap(map);
+    });
+
+    it('tests the canvas renderer', function(done) {
+      map = createMap('canvas');
+      waitForTiles([source], {}, function() {
+        expectResemble(map, 'spec/ol/layer/expected/osm-canvas.png',
+            IMAGE_TOLERANCE, done);
+      });
+    });
+
+    it('tests the WebGL renderer', function(done) {
+      assertWebGL();
+      map = createMap('webgl');
+      waitForTiles([source], {}, function() {
+        expectResemble(map, 'spec/ol/layer/expected/osm-webgl.png',
+            IMAGE_TOLERANCE, done);
+      });
+    });
+  });
+
+  describe('two tile layers', function() {
+    var source1, source2;
+
+    beforeEach(function() {
+      source1 = new ol.source.XYZ({
+        url: 'spec/ol/data/tiles/osm/{z}/{x}/{y}.png'
+      });
+      source2 = new ol.source.XYZ({
+        url: 'spec/ol/data/tiles/stamen-labels/{z}/{x}/{y}.png'
+      });
+    });
+
+    afterEach(function() {
+      disposeMap(map);
+    });
+
+    it('tests the canvas renderer', function(done) {
+      map = createMap('canvas');
+      waitForTiles([source1, source2], {}, function() {
+        expectResemble(map, 'spec/ol/layer/expected/2-layers-canvas.png',
+            IMAGE_TOLERANCE, done);
+      });
+    });
+
+    it('tests the WebGL renderer', function(done) {
+      assertWebGL();
+      map = createMap('webgl');
+      waitForTiles([source1, source2], {}, function() {
+        expectResemble(map, 'spec/ol/layer/expected/2-layers-webgl.png',
+            IMAGE_TOLERANCE, done);
+      });
+    });
+  });
+
+  describe('tile layer with opacity', function() {
+    var source;
+
+    beforeEach(function() {
+      source = new ol.source.XYZ({
+        url: 'spec/ol/data/tiles/osm/{z}/{x}/{y}.png'
+      });
+    });
+
+    afterEach(function() {
+      disposeMap(map);
+    });
+
+    it('tests the canvas renderer', function(done) {
+      map = createMap('canvas');
+      waitForTiles([source], {opacity: 0.2}, function() {
+        expectResemble(map, 'spec/ol/layer/expected/opacity-canvas.png',
+            IMAGE_TOLERANCE, done);
+      });
+    });
+
+    it('tests the WebGL renderer', function(done) {
+      assertWebGL();
+      map = createMap('webgl');
+      waitForTiles([source], {opacity: 0.2}, function() {
+        expectResemble(map, 'spec/ol/layer/expected/opacity-webgl.png',
+            IMAGE_TOLERANCE, done);
+      });
+    });
+  });
+});
+
+goog.require('goog.array');
+goog.require('goog.object');
+goog.require('ol.proj');
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.XYZ');