Run rendering tests with the rest of the tests

test/rendering/ol/style/circle.test.js

@@ -0,0 +1,201 @@
+goog.provide('ol.test.rendering.style.Circle');
+
+goog.require('ol.Feature');
+goog.require('ol.geom.Point');
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.layer.Vector');
+goog.require('ol.source.Vector');
+goog.require('ol.style.Circle');
+goog.require('ol.style.Fill');
+goog.require('ol.style.Style');
+goog.require('ol.style.Stroke');
+
+
+describe('ol.rendering.style.Circle', function() {
+
+  var target, map, vectorSource;
+
+  function createMap(renderer) {
+    target = createMapDiv(50, 50);
+
+    vectorSource = new ol.source.Vector();
+    var vectorLayer = new ol.layer.Vector({
+      source: vectorSource
+    });
+
+    map = new ol.Map({
+      target: target,
+      renderer: renderer,
+      layers: [vectorLayer],
+      view: new ol.View({
+        projection: 'EPSG:4326',
+        center: [0, 0],
+        resolution: 1
+      })
+    });
+    return map;
+  }
+
+  describe('#render', function() {
+    afterEach(function() {
+      disposeMap(map);
+    });
+
+    function createFeatures() {
+      var feature;
+      feature = new ol.Feature({
+        geometry: new ol.geom.Point([-20, 18])
+      });
+      feature.setStyle(new ol.style.Style({
+        image: new ol.style.Circle({
+          radius: 2,
+          fill: new ol.style.Fill({
+            color: '#91E339'
+          })
+        })
+      }));
+      vectorSource.addFeature(feature);
+
+      feature = new ol.Feature({
+        geometry: new ol.geom.Point([-10, 18])
+      });
+      feature.setStyle(new ol.style.Style({
+        image: new ol.style.Circle({
+          radius: 4,
+          fill: new ol.style.Fill({
+            color: '#5447E6'
+          })
+        })
+      }));
+      vectorSource.addFeature(feature);
+
+      feature = new ol.Feature({
+        geometry: new ol.geom.Point([4, 18])
+      });
+      feature.setStyle(new ol.style.Style({
+        image: new ol.style.Circle({
+          radius: 6,
+          fill: new ol.style.Fill({
+            color: '#92A8A6'
+          })
+        })
+      }));
+      vectorSource.addFeature(feature);
+
+      feature = new ol.Feature({
+        geometry: new ol.geom.Point([-20, 3])
+      });
+      feature.setStyle(new ol.style.Style({
+        image: new ol.style.Circle({
+          radius: 2,
+          fill: new ol.style.Fill({
+            color: '#91E339'
+          }),
+          stroke: new ol.style.Stroke({
+            color: '#000000',
+            width: 1
+          })
+        })
+      }));
+      vectorSource.addFeature(feature);
+
+      feature = new ol.Feature({
+        geometry: new ol.geom.Point([-10, 3])
+      });
+      feature.setStyle(new ol.style.Style({
+        image: new ol.style.Circle({
+          radius: 4,
+          fill: new ol.style.Fill({
+            color: '#5447E6'
+          }),
+          stroke: new ol.style.Stroke({
+            color: '#000000',
+            width: 2
+          })
+        })
+      }));
+      vectorSource.addFeature(feature);
+
+      feature = new ol.Feature({
+        geometry: new ol.geom.Point([4, 3])
+      });
+      feature.setStyle(new ol.style.Style({
+        image: new ol.style.Circle({
+          radius: 6,
+          fill: new ol.style.Fill({
+            color: '#92A8A6'
+          }),
+          stroke: new ol.style.Stroke({
+            color: '#000000',
+            width: 3
+          })
+        })
+      }));
+      vectorSource.addFeature(feature);
+
+      feature = new ol.Feature({
+        geometry: new ol.geom.Point([-20, -15])
+      });
+      feature.setStyle(new ol.style.Style({
+        image: new ol.style.Circle({
+          radius: 2,
+          stroke: new ol.style.Stroke({
+            color: '#256308',
+            width: 1
+          })
+        })
+      }));
+      vectorSource.addFeature(feature);
+
+      feature = new ol.Feature({
+        geometry: new ol.geom.Point([-10, -15])
+      });
+      feature.setStyle(new ol.style.Style({
+        image: new ol.style.Circle({
+          radius: 4,
+          fill: new ol.style.Fill({
+            color: 'rgba(0, 0, 255, 0.3)'
+          }),
+          stroke: new ol.style.Stroke({
+            color: '#256308',
+            width: 2
+          })
+        })
+      }));
+      vectorSource.addFeature(feature);
+
+      feature = new ol.Feature({
+        geometry: new ol.geom.Point([4, -15])
+      });
+      feature.setStyle(new ol.style.Style({
+        image: new ol.style.Circle({
+          radius: 6,
+          fill: new ol.style.Fill({
+            color: 'rgba(235, 45, 70, 0.6)'
+          }),
+          stroke: new ol.style.Stroke({
+            color: '#256308',
+            width: 3
+          })
+        })
+      }));
+      vectorSource.addFeature(feature);
+    }
+
+    it('tests the canvas renderer', function(done) {
+      map = createMap('canvas');
+      createFeatures();
+      expectResemble(map, 'rendering/ol/style/expected/circle-canvas.png',
+          8.0, done);
+    });
+
+    it('tests the WebGL renderer', function(done) {
+      assertWebGL();
+      map = createMap('webgl');
+      createFeatures();
+      expectResemble(map, 'rendering/ol/style/expected/circle-webgl.png',
+          8.0, done);
+    });
+  });
+});

test/rendering/ol/style/icon.test.js

@@ -0,0 +1,122 @@
+goog.provide('ol.test.rendering.style.Icon');
+
+goog.require('ol.Feature');
+goog.require('ol.geom.Point');
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.layer.Vector');
+goog.require('ol.source.Vector');
+goog.require('ol.style.Icon');
+goog.require('ol.style.Style');
+
+
+describe('ol.rendering.style.Icon', function() {
+
+  var target, map, vectorSource;
+
+  var imgInfo = {
+    anchor: [0.5, 46],
+    anchorXUnits: 'fraction',
+    anchorYUnits: 'pixels',
+    opacity: 0.75,
+    scale: 0.5,
+    imgSize: [32, 48]
+  };
+
+  function createMap(renderer, width, height) {
+    target = createMapDiv(width ? width : 50, height ? height : 50);
+
+    vectorSource = new ol.source.Vector();
+    var vectorLayer = new ol.layer.Vector({
+      source: vectorSource
+    });
+
+    map = new ol.Map({
+      target: target,
+      renderer: renderer,
+      layers: [vectorLayer],
+      view: new ol.View({
+        projection: 'EPSG:4326',
+        center: [0, 0],
+        resolution: 1
+      })
+    });
+    return map;
+  }
+
+  describe('#render', function() {
+    afterEach(function() {
+      disposeMap(map);
+    });
+
+    function createFeatures(src, imgInfo, callback) {
+      var feature;
+      feature = new ol.Feature({
+        geometry: new ol.geom.Point([0, 0])
+      });
+
+      var img = new Image();
+      img.onload = function() {
+        imgInfo.img = img;
+        feature.setStyle(new ol.style.Style({
+          image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ (imgInfo))
+        }));
+        vectorSource.addFeature(feature);
+        callback();
+      };
+      img.src = src;
+    }
+
+    it('tests the canvas renderer', function(done) {
+      map = createMap('canvas');
+      createFeatures('rendering/ol/data/icon.png', imgInfo, function() {
+        expectResemble(map, 'rendering/ol/style/expected/icon-canvas.png',
+            IMAGE_TOLERANCE, done);
+      });
+    });
+
+    it('scales svg correctly in the canvas renderer', function(done) {
+      map = createMap('canvas', 512, 512);
+      createFeatures('rendering/ol/data/me0.svg', {
+        scale: 96 / 512,
+        imgSize: [512, 512]
+      }, function() {
+        expectResemble(map, 'rendering/ol/style/expected/icon-canvas-svg-scale.png',
+            IMAGE_TOLERANCE, done);
+      });
+    });
+
+    it('uses offset correctly in the canvas renderer', function(done) {
+      map = createMap('canvas', 256, 512);
+      createFeatures('rendering/ol/data/me0.svg', {
+        offset: [0, 256],
+        size: [256, 256],
+        imgSize: [512, 512]
+      }, function() {
+        expectResemble(map, 'rendering/ol/style/expected/icon-canvas-svg-offset.png',
+            IMAGE_TOLERANCE, done);
+      });
+    });
+
+    it('uses offset correctly if it is larger than size in the canvas renderer', function(done) {
+      map = createMap('canvas', 256, 512);
+      createFeatures('rendering/ol/data/me0.svg', {
+        offset: [0, 374],
+        size: [256, 256],
+        imgSize: [512, 512]
+      }, function() {
+        expectResemble(map, 'rendering/ol/style/expected/icon-canvas-svg-offset2.png',
+            IMAGE_TOLERANCE, done);
+      });
+    });
+
+    it('tests the WebGL renderer', function(done) {
+      assertWebGL();
+      map = createMap('webgl');
+      createFeatures('rendering/ol/data/icon.png', imgInfo, function() {
+        expectResemble(map, 'rendering/ol/style/expected/icon-webgl.png',
+            2.0, done);
+      });
+    });
+  });
+});

test/rendering/ol/style/linestring.test.js

@@ -0,0 +1,136 @@
+goog.provide('ol.test.rendering.style.LineString');
+
+goog.require('ol.Feature');
+goog.require('ol.geom.LineString');
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.layer.Vector');
+goog.require('ol.source.Vector');
+goog.require('ol.style.Style');
+goog.require('ol.style.Stroke');
+
+
+describe('ol.rendering.style.LineString', function() {
+
+  var target, map, vectorSource;
+
+  function createMap(renderer, opt_pixelRatio) {
+    target = createMapDiv(50, 50);
+
+    vectorSource = new ol.source.Vector();
+    var vectorLayer = new ol.layer.Vector({
+      source: vectorSource
+    });
+
+    map = new ol.Map({
+      pixelRatio: opt_pixelRatio || 1,
+      target: target,
+      renderer: renderer,
+      layers: [vectorLayer],
+      view: new ol.View({
+        projection: 'EPSG:4326',
+        center: [0, 0],
+        resolution: 1
+      })
+    });
+    return map;
+  }
+
+  describe('different strokes', function() {
+    afterEach(function() {
+      disposeMap(map);
+    });
+
+    function createFeatures() {
+      var feature;
+
+      feature = new ol.Feature({
+        geometry: new ol.geom.LineString(
+            [[-20, 20], [15, 20]]
+        )
+      });
+      feature.setStyle(new ol.style.Style({
+        stroke: new ol.style.Stroke({color: '#DE213A', width: 3})
+      }));
+      vectorSource.addFeature(feature);
+
+      feature = new ol.Feature({
+        geometry: new ol.geom.LineString(
+            [[-20, 15], [15, 15]]
+        )
+      });
+      feature.setStyle(new ol.style.Style({
+        stroke: new ol.style.Stroke({color: '#9696EB', width: 1})
+      }));
+      vectorSource.addFeature(feature);
+
+      feature = new ol.Feature({
+        geometry: new ol.geom.LineString(
+            [[-20, 10], [15, 10]]
+        )
+      });
+      feature.setStyle([new ol.style.Style({
+        stroke: new ol.style.Stroke({color: '#F2F211', width: 5})
+      }), new ol.style.Style({
+        stroke: new ol.style.Stroke({color: '#292921', width: 1})
+      })]);
+      vectorSource.addFeature(feature);
+
+      feature = new ol.Feature({
+        geometry: new ol.geom.LineString(
+            [[-20, -20], [-2, 0], [15, -20]]
+        )
+      });
+      feature.setStyle(new ol.style.Style({
+        stroke: new ol.style.Stroke({
+          color: '#000000',
+          width: 2,
+          lineCap: 'square',
+          lineDash: [4, 8],
+          lineJoin: 'round'
+        })
+      }));
+      vectorSource.addFeature(feature);
+
+      feature = new ol.Feature({
+        geometry: new ol.geom.LineString(
+            [[-20, -15], [-2, 5], [15, -15]]
+        )
+      });
+      feature.setStyle(new ol.style.Style({
+        stroke: new ol.style.Stroke({
+          color: '#000000',
+          width: 2,
+          lineCap: 'square',
+          lineDash: [4, 8],
+          lineDashOffset: 6,
+          lineJoin: 'round'
+        })
+      }));
+      vectorSource.addFeature(feature);
+    }
+
+    it('tests the canvas renderer', function(done) {
+      map = createMap('canvas');
+      createFeatures();
+      expectResemble(
+          map, 'rendering/ol/style/expected/linestring-strokes-canvas.png',
+          3.0, done);
+    });
+    it('tests the WebGL renderer', function(done) {
+      assertWebGL();
+      map = createMap('webgl');
+      createFeatures();
+      expectResemble(map, 'rendering/ol/style/expected/linestring-strokes-webgl.png',
+          14.6, done);
+    });
+
+    it('tests the canvas renderer (HiDPI)', function(done) {
+      map = createMap('canvas', 2);
+      createFeatures();
+      expectResemble(
+          map, 'rendering/ol/style/expected/linestring-strokes-canvas-hidpi.png',
+          3.0, done);
+    });
+  });
+});

test/rendering/ol/style/polygon.test.js

@@ -0,0 +1,351 @@
+goog.provide('ol.test.rendering.style.Polygon');
+
+goog.require('ol.Feature');
+goog.require('ol.geom.Polygon');
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.layer.Vector');
+goog.require('ol.source.Vector');
+goog.require('ol.style.Fill');
+goog.require('ol.style.Style');
+goog.require('ol.style.Stroke');
+
+
+describe('ol.rendering.style.Polygon', function() {
+
+  var target, map, vectorSource;
+
+  function createMap(renderer, opt_size) {
+    var size = opt_size || 50;
+    target = createMapDiv(size, size);
+
+    vectorSource = new ol.source.Vector();
+    var vectorLayer = new ol.layer.Vector({
+      source: vectorSource
+    });
+
+    map = new ol.Map({
+      target: target,
+      renderer: renderer,
+      layers: [vectorLayer],
+      view: new ol.View({
+        projection: 'EPSG:4326',
+        center: [0, 0],
+        resolution: 1
+      })
+    });
+    return map;
+  }
+
+  describe('different types', function() {
+    afterEach(function() {
+      disposeMap(map);
+    });
+
+    function createFeatures() {
+      var fill = new ol.style.Fill({color: 'red'});
+
+      var feature;
+      // rectangle
+      feature = new ol.Feature({
+        geometry: new ol.geom.Polygon([
+          [[-20, 10], [-20, 20], [-5, 20], [-5, 10], [-20, 10]]
+        ])
+      });
+      feature.setStyle(new ol.style.Style({
+        fill: fill
+      }));
+      vectorSource.addFeature(feature);
+
+      // rectangle with 1 hole
+      feature = new ol.Feature({
+        geometry: new ol.geom.Polygon([
+          [[0, 10], [0, 20], [15, 20], [15, 10], [0, 10]],
+          [[5, 13], [10, 13], [10, 17], [5, 17], [5, 13]]
+
+        ])
+      });
+      feature.setStyle(new ol.style.Style({
+        fill: fill
+      }));
+      vectorSource.addFeature(feature);
+
+      // rectangle with 2 holes
+      feature = new ol.Feature({
+        geometry: new ol.geom.Polygon([
+          [[-20, -20], [-20, 5], [15, 5], [15, -20], [-20, -20]],
+          [[-18, -18], [-12, -18], [-12, -12], [-18, -12], [-18, -18]],
+          [[5, -18], [12, -18], [12, -12], [5, -12], [5, -18]]
+
+        ])
+      });
+      feature.setStyle(new ol.style.Style({
+        fill: fill
+      }));
+      vectorSource.addFeature(feature);
+    }
+
+    it('tests the canvas renderer', function(done) {
+      map = createMap('canvas');
+      createFeatures();
+      expectResemble(map, 'rendering/ol/style/expected/polygon-types-canvas.png',
+          IMAGE_TOLERANCE, done);
+    });
+
+    it('tests the webgl renderer', function(done) {
+      map = createMap('webgl');
+      createFeatures();
+      expectResemble(map, 'rendering/ol/style/expected/polygon-types-webgl.png',
+          IMAGE_TOLERANCE, done);
+    });
+  });
+
+  describe('different types with stroke', function() {
+    afterEach(function() {
+      disposeMap(map);
+    });
+
+    function createFeatures() {
+      var stroke = new ol.style.Stroke({
+        width: 10,
+        color: '#000',
+        lineJoin: 'round',
+        lineCap: 'butt'
+      });
+
+      var feature;
+      // rectangle
+      feature = new ol.Feature({
+        geometry: new ol.geom.Polygon([
+          [[-20, 10], [-20, 20], [-5, 20], [-5, 10], [-20, 10]]
+        ])
+      });
+      feature.setStyle(new ol.style.Style({
+        stroke: stroke
+      }));
+      vectorSource.addFeature(feature);
+
+      // rectangle with 1 hole
+      feature = new ol.Feature({
+        geometry: new ol.geom.Polygon([
+          [[0, 10], [0, 20], [20, 20], [20, 10], [0, 10]],
+          [[5, 13], [10, 13], [10, 17], [5, 17], [5, 13]]
+
+        ])
+      });
+      feature.setStyle(new ol.style.Style({
+        stroke: stroke
+      }));
+      vectorSource.addFeature(feature);
+
+      // rectangle with 2 holes
+      feature = new ol.Feature({
+        geometry: new ol.geom.Polygon([
+          [[-20, -20], [-20, 5], [20, 5], [20, -20], [-20, -20]],
+          [[-12, -3], [-12, -12], [-8, -12], [-8, -3], [-12, -3]],
+          [[0, -12], [13, -12], [13, -3], [0, -3], [0, -12]]
+
+        ])
+      });
+      feature.setStyle(new ol.style.Style({
+        stroke: stroke
+      }));
+      vectorSource.addFeature(feature);
+    }
+
+    it('tests the canvas renderer', function(done) {
+      map = createMap('canvas', 100);
+      map.getView().setResolution(0.5);
+      createFeatures();
+      expectResemble(map, 'rendering/ol/style/expected/polygon-types-canvas-stroke.png',
+          IMAGE_TOLERANCE, done);
+    });
+
+    it('tests the webgl renderer', function(done) {
+      map = createMap('webgl', 100);
+      map.getView().setResolution(0.5);
+      createFeatures();
+      expectResemble(map, 'rendering/ol/style/expected/polygon-types-webgl-stroke.png',
+          IMAGE_TOLERANCE, done);
+    });
+  });
+
+  describe('z-index', function() {
+    afterEach(function() {
+      disposeMap(map);
+    });
+
+    function createFeatures() {
+      var feature;
+      // rectangle with z-index 2
+      feature = new ol.Feature({
+        geometry: new ol.geom.Polygon([
+          [[-20, 10], [-20, 20], [-0, 20], [-0, 10], [-20, 10]]
+        ])
+      });
+      feature.setStyle(new ol.style.Style({
+        fill: new ol.style.Fill({color: '#E31E10'}),
+        zIndex: 2
+      }));
+      vectorSource.addFeature(feature);
+
+      // rectangle with z-index 3
+      feature = new ol.Feature({
+        geometry: new ol.geom.Polygon([
+          [[-15, 5], [-15, 15], [5, 15], [5, 5], [-15, 5]]
+        ])
+      });
+      feature.setStyle(new ol.style.Style({
+        fill: new ol.style.Fill({color: '#1A5E42'}),
+        zIndex: 3
+      }));
+      vectorSource.addFeature(feature);
+
+      // rectangle with z-index 1
+      feature = new ol.Feature({
+        geometry: new ol.geom.Polygon([
+          [[-10, 0], [-10, 10], [10, 10], [10, 0], [-10, 0]]
+        ])
+      });
+      feature.setStyle(new ol.style.Style({
+        fill: new ol.style.Fill({color: '#DEDE21'}),
+        zIndex: 1
+      }));
+      vectorSource.addFeature(feature);
+
+    }
+
+    it('tests the canvas renderer', function(done) {
+      map = createMap('canvas');
+      createFeatures();
+      expectResemble(map, 'rendering/ol/style/expected/polygon-zindex-canvas.png',
+          IMAGE_TOLERANCE, done);
+    });
+
+    it('tests the webgl renderer', function(done) {
+      map = createMap('webgl');
+      createFeatures();
+      expectResemble(map, 'rendering/ol/style/expected/polygon-zindex-webgl.png',
+          IMAGE_TOLERANCE, done);
+    });
+  });
+
+  describe('different fills and strokes', function() {
+    afterEach(function() {
+      disposeMap(map);
+    });
+
+    function createFeatures() {
+      var feature;
+      // rectangle
+      feature = new ol.Feature({
+        geometry: new ol.geom.Polygon([
+          [[-20, 10], [-20, 20], [-5, 20], [-5, 10], [-20, 10]]
+        ])
+      });
+      feature.setStyle(new ol.style.Style({
+        fill: new ol.style.Fill({color: '#9696EB'}),
+        stroke: new ol.style.Stroke({color: '#9696EB', width: 1})
+      }));
+      vectorSource.addFeature(feature);
+
+      // rectangle with 1 hole
+      feature = new ol.Feature({
+        geometry: new ol.geom.Polygon([
+          [[0, 10], [0, 20], [15, 20], [15, 10], [0, 10]]
+        ])
+      });
+      feature.setStyle(new ol.style.Style({
+        fill: new ol.style.Fill({color: 'rgba(255, 0, 0, 0.1)'}),
+        stroke: new ol.style.Stroke({color: '#DE213A', width: 3})
+      }));
+      vectorSource.addFeature(feature);
+
+      // rectangle with 2 holes
+      feature = new ol.Feature({
+        geometry: new ol.geom.Polygon([
+          [[-20, -20], [-20, 5], [15, 5], [15, -20], [-20, -20]]
+        ])
+      });
+      feature.setStyle(new ol.style.Style({
+        fill: new ol.style.Fill({color: 'rgba(18, 204, 105, 0.3)'}),
+        stroke: new ol.style.Stroke({color: '#032E17', width: 2})
+      }));
+      vectorSource.addFeature(feature);
+    }
+
+    it('tests the canvas renderer', function(done) {
+      map = createMap('canvas');
+      createFeatures();
+      expectResemble(
+          map, 'rendering/ol/style/expected/polygon-fill-and-strokes-canvas.png',
+          IMAGE_TOLERANCE, done);
+    });
+
+    it('tests the webgl renderer', function(done) {
+      map = createMap('webgl');
+      createFeatures();
+      expectResemble(
+          map, 'rendering/ol/style/expected/polygon-fill-and-strokes-webgl.png',
+          5.76, done);
+    });
+  });
+
+  describe('CanvasPattern and LinearGradient as fills and strokes', function() {
+    afterEach(function() {
+      disposeMap(map);
+    });
+
+    function createRainbowGradient() {
+      var canvas = document.createElement('canvas');
+      var context = canvas.getContext('2d');
+      var gradient = context.createLinearGradient(0, 0, 30, 0);
+      gradient.addColorStop(0, 'red');
+      gradient.addColorStop(1 / 6, 'orange');
+      gradient.addColorStop(2 / 6, 'yellow');
+      gradient.addColorStop(3 / 6, 'green');
+      gradient.addColorStop(4 / 6, 'aqua');
+      gradient.addColorStop(5 / 6, 'blue');
+      gradient.addColorStop(1, 'purple');
+      return gradient;
+    }
+
+    function createPattern() {
+      var canvas = document.createElement('canvas');
+      var context = canvas.getContext('2d');
+      canvas.width = 11;
+      canvas.height = 11;
+      context.fillStyle = 'rgba(102, 0, 102, 0.5)';
+      context.beginPath();
+      context.arc(5, 5, 4, 0, 2 * Math.PI);
+      context.fill();
+      context.fillStyle = 'rgb(55, 0, 170)';
+      context.beginPath();
+      context.arc(5, 5, 2, 0, 2 * Math.PI);
+      context.fill();
+      return context.createPattern(canvas, 'repeat');
+    }
+
+    function createFeatures() {
+      var feature = new ol.Feature({
+        geometry: new ol.geom.Polygon([
+          [[-20, -20], [-20, 20], [18, 20], [-20, -20]]
+        ])
+      });
+      feature.setStyle(new ol.style.Style({
+        fill: new ol.style.Fill({color: createPattern()}),
+        stroke: new ol.style.Stroke({color: createRainbowGradient(), width: 3})
+      }));
+      vectorSource.addFeature(feature);
+    }
+
+    it('tests the canvas renderer', function(done) {
+      map = createMap('canvas');
+      createFeatures();
+      expectResemble(
+          map, 'rendering/ol/style/expected/polygon-pattern-gradient-canvas.png',
+          2.75, done);
+    });
+  });
+
+});

test/rendering/ol/style/regularshape.test.js

@@ -0,0 +1,168 @@
+goog.provide('ol.test.rendering.style.RegularShape');
+
+goog.require('ol.Feature');
+goog.require('ol.geom.Point');
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.layer.Vector');
+goog.require('ol.source.Vector');
+goog.require('ol.style.Fill');
+goog.require('ol.style.RegularShape');
+goog.require('ol.style.Style');
+goog.require('ol.style.Stroke');
+
+
+describe('ol.rendering.style.RegularShape', function() {
+
+  var target, map, vectorSource;
+
+  function createMap(renderer) {
+    target = createMapDiv(50, 50);
+
+    vectorSource = new ol.source.Vector();
+    var vectorLayer = new ol.layer.Vector({
+      source: vectorSource
+    });
+
+    map = new ol.Map({
+      target: target,
+      renderer: renderer,
+      layers: [vectorLayer],
+      view: new ol.View({
+        projection: 'EPSG:4326',
+        center: [0, 0],
+        resolution: 1
+      })
+    });
+    return map;
+  }
+
+  function createFeatures(stroke, fill) {
+
+    var feature;
+    feature = new ol.Feature({
+      geometry: new ol.geom.Point([-15, 15])
+    });
+    // square
+    feature.setStyle(new ol.style.Style({
+      image: new ol.style.RegularShape({
+        fill: fill,
+        stroke: stroke,
+        points: 4,
+        radius: 10,
+        angle: Math.PI / 4
+      })
+    }));
+    vectorSource.addFeature(feature);
+
+    feature = new ol.Feature({
+      geometry: new ol.geom.Point([8, 15])
+    });
+    // triangle
+    feature.setStyle(new ol.style.Style({
+      image: new ol.style.RegularShape({
+        fill: fill,
+        stroke: stroke,
+        points: 3,
+        radius: 10,
+        rotation: Math.PI / 4,
+        angle: 0
+      })
+    }));
+    vectorSource.addFeature(feature);
+
+    feature = new ol.Feature({
+      geometry: new ol.geom.Point([-10, -8])
+    });
+    // star
+    feature.setStyle(new ol.style.Style({
+      image: new ol.style.RegularShape({
+        fill: fill,
+        stroke: stroke,
+        points: 5,
+        radius: 10,
+        radius2: 4,
+        angle: 0
+      })
+    }));
+    vectorSource.addFeature(feature);
+
+    feature = new ol.Feature({
+      geometry: new ol.geom.Point([12, -8])
+    });
+    // cross
+    feature.setStyle(new ol.style.Style({
+      image: new ol.style.RegularShape({
+        fill: fill,
+        stroke: stroke,
+        points: 4,
+        radius: 10,
+        radius2: 0,
+        angle: 0
+      })
+    }));
+    vectorSource.addFeature(feature);
+  }
+
+
+  describe('#render', function() {
+    var stroke = new ol.style.Stroke({width: 2});
+    var fill = new ol.style.Fill({color: 'red'});
+
+    afterEach(function() {
+      disposeMap(map);
+    });
+
+    it('tests the canvas renderer', function(done) {
+      map = createMap('canvas');
+      createFeatures(stroke, fill);
+      expectResemble(map, 'rendering/ol/style/expected/regularshape-canvas.png', 9.4, done);
+    });
+
+    it('supports lineDash', function(done) {
+      map = createMap('canvas');
+      createFeatures(new ol.style.Stroke({
+        lineDash: [10, 5]
+      }));
+      expectResemble(map, 'spec/ol/style/expected/regularshape-canvas-linedash.png', 5, done);
+    });
+
+    it('supports lineDashOffset', function(done) {
+      map = createMap('canvas');
+      createFeatures(new ol.style.Stroke({
+        lineDash: [10, 5],
+        lineDashOffset: 5
+      }));
+      expectResemble(map, 'spec/ol/style/expected/regularshape-canvas-linedashoffset.png', 5, done);
+    });
+
+    it('tests the WebGL renderer', function(done) {
+      assertWebGL();
+      map = createMap('webgl');
+      createFeatures(stroke, fill);
+      expectResemble(map, 'rendering/ol/style/expected/regularshape-webgl.png', 8.2, done);
+    });
+  });
+
+  describe('uses the default fill and stroke color', function() {
+    var stroke = new ol.style.Stroke();
+    var fill = new ol.style.Fill();
+
+    afterEach(function() {
+      disposeMap(map);
+    });
+
+    it('tests the canvas renderer', function(done) {
+      map = createMap('canvas');
+      createFeatures(stroke, fill);
+      expectResemble(map, 'rendering/ol/style/expected/regularshape-canvas-default-style.png', 3.0, done);
+    });
+
+    it('tests the WebGL renderer', function(done) {
+      assertWebGL();
+      map = createMap('webgl');
+      createFeatures(stroke, fill);
+      expectResemble(map, 'rendering/ol/style/expected/regularshape-webgl-default-style.png', 3.0, done);
+    });
+  });
+});

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

@@ -0,0 +1,119 @@
+goog.provide('ol.test.rendering.style.Text');
+
+goog.require('ol.Feature');
+goog.require('ol.geom.Point');
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.layer.Vector');
+goog.require('ol.source.Vector');
+goog.require('ol.style.Text');
+goog.require('ol.style.Fill');
+goog.require('ol.style.Style');
+goog.require('ol.style.Stroke');
+
+describe('ol.rendering.style.Text', function() {
+
+  var target, map, vectorSource;
+
+  function createMap(renderer) {
+    target = createMapDiv(200, 200);
+
+    vectorSource = new ol.source.Vector();
+    var vectorLayer = new ol.layer.Vector({
+      source: vectorSource
+    });
+
+    map = new ol.Map({
+      target: target,
+      renderer: renderer,
+      layers: [vectorLayer],
+      view: new ol.View({
+        projection: 'EPSG:4326',
+        center: [0, 0],
+        resolution: 1
+      })
+    });
+    return map;
+  }
+
+  describe('#render', function() {
+    afterEach(function() {
+      disposeMap(map);
+    });
+
+    function createFeatures() {
+      var feature;
+      feature = new ol.Feature({
+        geometry: new ol.geom.Point([-20, 18])
+      });
+      feature.setStyle(new ol.style.Style({
+        text: new ol.style.Text({
+          text: 'hello',
+          font: '10px'
+        })
+      }));
+      vectorSource.addFeature(feature);
+
+      feature = new ol.Feature({
+        geometry: new ol.geom.Point([-10, 0])
+      });
+      feature.setStyle(new ol.style.Style({
+        text: new ol.style.Text({
+          text: 'hello',
+          fill: new ol.style.Fill({
+            color: 'red',
+            font: '12px'
+          }),
+          stroke: new ol.style.Stroke({
+            color: '#000',
+            width: 3
+          })
+        })
+      }));
+      vectorSource.addFeature(feature);
+
+      feature = new ol.Feature({
+        geometry: new ol.geom.Point([20, 10])
+      });
+      feature.setStyle(new ol.style.Style({
+        text: new ol.style.Text({
+          rotateWithView: true,
+          text: 'hello',
+          font: '10px',
+          stroke: new ol.style.Stroke({
+            color: [10, 10, 10, 0.5]
+          })
+        })
+      }));
+      vectorSource.addFeature(feature);
+
+    }
+
+    it('tests the canvas renderer without rotation', function(done) {
+      map = createMap('canvas');
+      createFeatures();
+      expectResemble(map, 'rendering/ol/style/expected/text-canvas.png', IMAGE_TOLERANCE, done);
+    });
+
+    it('tests the canvas renderer with rotation', function(done) {
+      map = createMap('canvas');
+      createFeatures();
+      map.getView().setRotation(Math.PI / 7);
+      expectResemble(map, 'rendering/ol/style/expected/text-rotated-canvas.png', IMAGE_TOLERANCE, done);
+    });
+
+    it('tests the webgl renderer without rotation', function(done) {
+      map = createMap('webgl');
+      createFeatures();
+      expectResemble(map, 'rendering/ol/style/expected/text-webgl.png', 1.8, done);
+    });
+
+    it('tests the webgl renderer with rotation', function(done) {
+      map = createMap('webgl');
+      createFeatures();
+      map.getView().setRotation(Math.PI / 7);
+      expectResemble(map, 'rendering/ol/style/expected/text-rotated-webgl.png', 1.8, done);
+    });
+
+  });
+});