Merge pull request #5832 from KlausBenndorf/cloneStyle

Add clone methods to styles

src/ol/style/circle.js

@@ -89,7 +89,13 @@ ol.style.Circle = function(opt_options) {
    */
   this.hitDetectionImageSize_ = null;
 
-  this.render_(options.atlasManager);
+  /**
+   * @private
+   * @type {ol.style.AtlasManager|undefined}
+   */
+  this.atlasManager_ = options.atlasManager;
+
+  this.render_(this.atlasManager_);
 
   /**
    * @type {boolean}
@@ -109,6 +115,25 @@ ol.style.Circle = function(opt_options) {
 ol.inherits(ol.style.Circle, ol.style.Image);
 
 
+/**
+ * Clones the style.  If an atlasmanger was provided to the original style it will be used in the cloned style, too.
+ * @return {ol.style.Image} The cloned style.
+ * @api
+ */
+ol.style.Circle.prototype.clone = function() {
+  var style = new ol.style.Circle({
+    fill: this.getFill() ? this.getFill().clone() : undefined,
+    stroke: this.getStroke() ? this.getStroke().clone() : undefined,
+    radius: this.getRadius(),
+    snapToPixel: this.getSnapToPixel(),
+    atlasManager: this.atlasManager_
+  });
+  style.setOpacity(this.getOpacity());
+  style.setScale(this.getScale());
+  return style;
+};
+
+
 /**
  * @inheritDoc
  */

src/ol/style/fill.js

@@ -30,6 +30,19 @@ ol.style.Fill = function(opt_options) {
 };
 
 
+/**
+ * Clones the style. The color is not cloned if it is an {@link ol.ColorLike}.
+ * @return {ol.style.Fill} The cloned style.
+ * @api
+ */
+ol.style.Fill.prototype.clone = function() {
+  var color = this.getColor();
+  return new ol.style.Fill({
+    color: (color && color.slice) ? color.slice() : color || undefined
+  });
+};
+
+
 /**
  * Get the fill color.
  * @return {ol.Color|ol.ColorLike} Color.

src/ol/style/icon.js

@@ -57,9 +57,10 @@ ol.style.Icon = function(opt_options) {
       options.anchorYUnits : ol.style.Icon.AnchorUnits.FRACTION;
 
   /**
+   * @private
    * @type {?string}
    */
-  var crossOrigin =
+  this.crossOrigin_ =
       options.crossOrigin !== undefined ? options.crossOrigin : null;
 
   /**
@@ -95,9 +96,10 @@ ol.style.Icon = function(opt_options) {
       ol.Image.State.IDLE : ol.Image.State.LOADED;
 
   /**
+   * @private
    * @type {ol.Color}
    */
-  var color = options.color !== undefined ? ol.color.asArray(options.color) :
+  this.color_ = options.color !== undefined ? ol.color.asArray(options.color) :
       null;
 
   /**
@@ -105,7 +107,7 @@ ol.style.Icon = function(opt_options) {
    * @type {ol.style.IconImage}
    */
   this.iconImage_ = ol.style.IconImage.get(
-      image, /** @type {string} */ (src), imgSize, crossOrigin, imageState, color);
+      image, /** @type {string} */ (src), imgSize, this.crossOrigin_, imageState, this.color_);
 
   /**
    * @private
@@ -171,6 +173,47 @@ ol.style.Icon = function(opt_options) {
 ol.inherits(ol.style.Icon, ol.style.Image);
 
 
+/**
+ * Clones the style.
+ * @return {ol.style.Icon} The cloned style.
+ * @api
+ */
+ol.style.Icon.prototype.clone = function() {
+  var oldImage = this.getImage(1);
+  var newImage;
+  if (this.iconImage_.getImageState() === ol.Image.State.LOADED) {
+    if (oldImage.tagName.toUpperCase() === 'IMG') {
+      newImage = /** @type {Image} */ (oldImage.cloneNode(true));
+    } else {
+      newImage = /** @type {HTMLCanvasElement} */ (document.createElement('canvas'));
+      var context = newImage.getContext('2d');
+      newImage.width = oldImage.width;
+      newImage.height = oldImage.height;
+      context.drawImage(oldImage, 0, 0);
+    }
+  }
+  return new ol.style.Icon({
+    anchor: this.anchor_.slice(),
+    anchorOrigin: this.anchorOrigin_,
+    anchorXUnits: this.anchorXUnits_,
+    anchorYUnits: this.anchorYUnits_,
+    crossOrigin: this.crossOrigin_,
+    color: (this.color_ && this.color_.slice) ? this.color_.slice() : this.color_ || undefined,
+    img: newImage ? newImage : undefined,
+    imgSize: newImage ? this.iconImage_.getSize().slice() : undefined,
+    src: newImage ? undefined : this.getSrc(),
+    offset: this.offset_.slice(),
+    offsetOrigin: this.offsetOrigin_,
+    size: this.size_ !== null ? this.size_.slice() : undefined,
+    opacity: this.getOpacity(),
+    scale: this.getScale(),
+    snapToPixel: this.getSnapToPixel(),
+    rotation: this.getRotation(),
+    rotateWithView: this.getRotateWithView()
+  });
+};
+
+
 /**
  * @inheritDoc
  * @api

src/ol/style/regularshape.js

@@ -113,7 +113,13 @@ ol.style.RegularShape = function(options) {
    */
   this.hitDetectionImageSize_ = null;
 
-  this.render_(options.atlasManager);
+  /**
+   * @private
+   * @type {ol.style.AtlasManager|undefined}
+   */
+  this.atlasManager_ = options.atlasManager;
+
+  this.render_(this.atlasManager_);
 
   /**
    * @type {boolean}
@@ -139,6 +145,30 @@ ol.style.RegularShape = function(options) {
 ol.inherits(ol.style.RegularShape, ol.style.Image);
 
 
+/**
+ * Clones the style. If an atlasmanger was provided to the original style it will be used in the cloned style, too.
+ * @return {ol.style.RegularShape} The cloned style.
+ * @api
+ */
+ol.style.RegularShape.prototype.clone = function() {
+  var style = new ol.style.RegularShape({
+    fill: this.getFill() ? this.getFill().clone() : undefined,
+    points: this.getRadius2() !== this.getRadius() ? this.getPoints() / 2 : this.getPoints(),
+    radius: this.getRadius(),
+    radius2: this.getRadius2(),
+    angle: this.getAngle(),
+    snapToPixel: this.getSnapToPixel(),
+    stroke: this.getStroke() ?  this.getStroke().clone() : undefined,
+    rotation: this.getRotation(),
+    rotateWithView: this.getRotateWithView(),
+    atlasManager: this.atlasManager_
+  });
+  style.setOpacity(this.getOpacity());
+  style.setScale(this.getScale());
+  return style;
+};
+
+
 /**
  * @inheritDoc
  * @api

src/ol/style/stroke.js

@@ -62,6 +62,24 @@ ol.style.Stroke = function(opt_options) {
 };
 
 
+/**
+ * Clones the style.
+ * @return {ol.style.Stroke} The cloned style.
+ * @api
+ */
+ol.style.Stroke.prototype.clone = function() {
+  var color = this.getColor();
+  return new ol.style.Stroke({
+    color: (color && color.slice) ? color.slice() : color || undefined,
+    lineCap: this.getLineCap(),
+    lineDash: this.getLineDash() ? this.getLineDash().slice() : undefined,
+    lineJoin: this.getLineJoin(),
+    miterLimit: this.getMiterLimit(),
+    width: this.getWidth()
+  });
+};
+
+
 /**
  * Get the stroke color.
  * @return {ol.Color|string} Color.

src/ol/style/style.js

@@ -71,6 +71,27 @@ ol.style.Style = function(opt_options) {
 };
 
 
+/**
+ * Clones the style.
+ * @return {ol.style.Style} The cloned style.
+ * @api
+ */
+ol.style.Style.prototype.clone = function() {
+  var geometry = this.getGeometry();
+  if (geometry && geometry.clone) {
+    geometry = geometry.clone();
+  }
+  return new ol.style.Style({
+    geometry: geometry,
+    fill: this.getFill() ? this.getFill().clone() : undefined,
+    image: this.getImage() ? this.getImage().clone() : undefined,
+    stroke: this.getStroke() ? this.getStroke().clone() : undefined,
+    text: this.getText() ? this.getText().clone() : undefined,
+    zIndex: this.getZIndex()
+  });
+};
+
+
 /**
  * Get the geometry to be rendered.
  * @return {string|ol.geom.Geometry|ol.StyleGeometryFunction}

src/ol/style/text.js

@@ -95,6 +95,28 @@ ol.style.Text = function(opt_options) {
 ol.style.Text.DEFAULT_FILL_COLOR_ = '#333';
 
 
+/**
+ * Clones the style.
+ * @return {ol.style.Text} The cloned style.
+ * @api
+ */
+ol.style.Text.prototype.clone = function() {
+  return new ol.style.Text({
+    font: this.getFont(),
+    rotation: this.getRotation(),
+    rotateWithView: this.getRotateWithView(),
+    scale: this.getScale(),
+    text: this.getText(),
+    textAlign: this.getTextAlign(),
+    textBaseline: this.getTextBaseline(),
+    fill: this.getFill() ? this.getFill().clone() : undefined,
+    stroke: this.getStroke() ? this.getStroke().clone() : undefined,
+    offsetX: this.getOffsetX(),
+    offsetY: this.getOffsetY()
+  });
+};
+
+
 /**
  * Get the font name.
  * @return {string|undefined} Font.

test/spec/ol/style.test.js

@@ -1,97 +0,0 @@
-goog.provide('ol.test.style.Style');
-
-goog.require('ol.Feature');
-goog.require('ol.geom.Point');
-goog.require('ol.style.Style');
-
-
-describe('ol.style.Style', function() {
-
-  describe('#setZIndex', function() {
-
-    it('sets the zIndex', function() {
-      var style = new ol.style.Style();
-
-      style.setZIndex(0.7);
-      expect(style.getZIndex()).to.be(0.7);
-    });
-  });
-
-  describe('#setGeometry', function() {
-    var style = new ol.style.Style();
-
-    it('creates a geometry function from a string', function() {
-      var feature = new ol.Feature();
-      feature.set('myGeom', new ol.geom.Point([0, 0]));
-      style.setGeometry('myGeom');
-      expect(style.getGeometryFunction()(feature))
-          .to.eql(feature.get('myGeom'));
-    });
-
-    it('creates a geometry function from a geometry', function() {
-      var geom = new ol.geom.Point([0, 0]);
-      style.setGeometry(geom);
-      expect(style.getGeometryFunction()())
-          .to.eql(geom);
-    });
-
-    it('returns the configured geometry function', function() {
-      var geom = new ol.geom.Point([0, 0]);
-      style.setGeometry(function() {
-        return geom;
-      });
-      expect(style.getGeometryFunction()())
-          .to.eql(geom);
-    });
-  });
-
-  describe('#getGeometry', function() {
-
-    it('returns whatever was passed to setGeometry', function() {
-      var style = new ol.style.Style();
-      style.setGeometry('foo');
-      expect(style.getGeometry()).to.eql('foo');
-      var geom = new ol.geom.Point([1, 2]);
-      style.setGeometry(geom);
-      expect(style.getGeometry()).to.eql(geom);
-      var fn = function() {
-        return geom;
-      };
-      style.setGeometry(fn);
-      expect(style.getGeometry()).to.eql(fn);
-      style.setGeometry(null);
-      expect(style.getGeometry()).to.eql(null);
-    });
-
-  });
-
-});
-
-describe('ol.style.Style.createFunction()', function() {
-  var style = new ol.style.Style();
-
-  it('creates a style function from a single style', function() {
-    var styleFunction = ol.style.Style.createFunction(style);
-    expect(styleFunction()).to.eql([style]);
-  });
-
-  it('creates a style function from an array of styles', function() {
-    var styleFunction = ol.style.Style.createFunction([style]);
-    expect(styleFunction()).to.eql([style]);
-  });
-
-  it('passes through a function', function() {
-    var original = function() {
-      return [style];
-    };
-    var styleFunction = ol.style.Style.createFunction(original);
-    expect(styleFunction).to.be(original);
-  });
-
-  it('throws on (some) unexpected input', function() {
-    expect(function() {
-      ol.style.Style.createFunction({bogus: 'input'});
-    }).to.throwException();
-  });
-
-});

test/spec/ol/style/circle.test.js

@@ -76,6 +76,58 @@ describe('ol.style.Circle', function() {
     });
   });
 
+  describe('#clone', function() {
+
+    it('creates a new ol.style.Circle', function() {
+      var original = new ol.style.Circle();
+      var clone = original.clone();
+      expect(clone).to.be.an(ol.style.Circle);
+      expect(clone).to.not.be(original);
+    });
+
+    it('copies all values', function() {
+      var original = new ol.style.Circle({
+        fill: new ol.style.Fill({
+          color: '#319FD3'
+        }),
+        stroke: new ol.style.Stroke({
+          color: '#319FD3'
+        }),
+        radius: 5,
+        snapToPixel: false
+      });
+      original.setOpacity(0.5);
+      original.setScale(1.5);
+      var clone = original.clone();
+      expect(original.getFill().getColor()).to.eql(clone.getFill().getColor());
+      expect(original.getOpacity()).to.eql(clone.getOpacity());
+      expect(original.getRadius()).to.eql(clone.getRadius());
+      expect(original.getScale()).to.eql(clone.getScale());
+      expect(original.getSnapToPixel()).to.eql(clone.getSnapToPixel());
+      expect(original.getStroke().getColor()).to.eql(clone.getStroke().getColor());
+    });
+
+    it('the clone does not reference the same objects as the original', function() {
+      var original = new ol.style.Circle({
+        fill: new ol.style.Fill({
+          color: '#319FD3'
+        }),
+        stroke: new ol.style.Stroke({
+          color: '#319FD3'
+        })
+      });
+      var clone = original.clone();
+      expect(original.getFill()).to.not.be(clone.getFill());
+      expect(original.getStroke()).to.not.be(clone.getStroke());
+
+      clone.getFill().setColor('#012345');
+      clone.getStroke().setColor('#012345');
+      expect(original.getFill().getColor()).to.not.eql(clone.getFill().getColor());
+      expect(original.getStroke().getColor()).to.not.eql(clone.getStroke().getColor());
+    });
+
+  });
+
   describe('#getChecksum', function() {
 
     it('calculates the same hash code for default options', function() {

test/spec/ol/style/fill.test.js

@@ -0,0 +1,36 @@
+goog.provide('ol.test.style.Fill');
+
+goog.require('ol.style.Fill');
+
+describe('ol.style.Fill', function() {
+
+  describe('#clone', function() {
+
+    it('creates a new ol.style.Fill', function() {
+      var original = new ol.style.Fill();
+      var clone = original.clone();
+      expect(clone).to.be.an(ol.style.Fill);
+      expect(clone).to.not.be(original);
+    });
+
+    it('copies all values', function() {
+      var original = new ol.style.Fill({
+        color: '#319FD3'
+      });
+      var clone = original.clone();
+      expect(original.getColor()).to.eql(clone.getColor());
+    });
+
+    it('the clone does not reference the same objects as the original', function() {
+      var original = new ol.style.Fill({
+        color: [63, 255, 127, 0.7]
+      });
+      var clone = original.clone();
+      expect(original.getColor()).to.not.be(clone.getColor());
+
+      clone.getColor()[2] = 0;
+      expect(original.getColor()).to.not.eql(clone.getColor());
+    });
+
+  });
+});

test/spec/ol/style/icon.test.js

@@ -38,6 +38,92 @@ describe('ol.style.Icon', function() {
 
   });
 
+  describe('#clone', function() {
+
+    it('creates a new ol.style.Icon', function() {
+      var original = new ol.style.Icon({
+        src: src
+      });
+      var clone = original.clone();
+      expect(clone).to.be.an(ol.style.Icon);
+      expect(clone).to.not.be(original);
+    });
+
+    it('copies all values ', function() {
+      var canvas = document.createElement('canvas');
+      var original = new ol.style.Icon({
+        anchor: [1, 0],
+        anchorOrigin: 'bottom-right',
+        anchorXUnits: 'pixels',
+        anchorYUnits: 'pixels',
+        color: '#319FD3',
+        crossOrigin: 'Anonymous',
+        img: canvas,
+        imgSize: size,
+        offset: [1, 2],
+        offsetOrigin: 'bottom-left',
+        opacity: 0.5,
+        scale: 2,
+        snapToPixel: false,
+        rotation: 4,
+        size: [10, 12]
+      });
+
+      var clone = original.clone();
+      expect(original.getAnchor()).to.eql(clone.getAnchor());
+      expect(original.anchorOrigin_).to.eql(clone.anchorOrigin_);
+      expect(original.anchorXUnits_).to.eql(clone.anchorXUnits_);
+      expect(original.anchorYUnits_).to.eql(clone.anchorYUnits_);
+      expect(original.crossOrigin_).to.eql(clone.crossOrigin_);
+      expect(original.color_).to.eql(clone.color_);
+      expect(original.getImage(1).src).to.eql(clone.getImage(1).src);
+      expect(original.getImage(1).toDataURL()).to.eql(original.getImage(1).toDataURL());
+      expect(original.offset_).to.eql(clone.offset_);
+      expect(original.offsetOrigin_).to.eql(clone.offsetOrigin_);
+      expect(original.getSize()).to.eql(clone.getSize());
+      expect(original.getSrc()).not.to.eql(clone.getSrc());
+      expect(original.getOpacity()).to.eql(clone.getOpacity());
+      expect(original.getRotation()).to.eql(clone.getRotation());
+      expect(original.getRotateWithView()).to.eql(clone.getRotateWithView());
+      expect(original.getSnapToPixel()).to.eql(clone.getSnapToPixel());
+
+      var original2 = new ol.style.Icon({
+        src: src
+      });
+      var clone2 = original2.clone();
+      expect(original2.getSrc()).to.be(clone2.getSrc());
+    });
+
+    it('the clone does not reference the same objects as the original', function() {
+      var canvas = document.createElement('canvas');
+      var original = new ol.style.Icon({
+        anchor: [1, 0],
+        color: [1, 2, 3, 0.4],
+        img: canvas,
+        imgSize: size,
+        offset: [1, 2],
+        size: [10, 12]
+      });
+      var clone = original.clone();
+      expect(original.getAnchor()).not.to.be(clone.getAnchor());
+      expect(original.getImage(1)).not.to.be(clone.getImage(1));
+      expect(original.offset_).not.to.be(clone.offset_);
+      expect(original.color_).not.to.be(clone.color_);
+      expect(original.getSize()).not.to.be(clone.getSize());
+
+      clone.anchor_[0] = 0;
+      clone.getImage(1).width = 50;
+      clone.offset_[0] = 0;
+      clone.color_[0] = 0;
+      clone.size_[0] = 5;
+      expect(original.anchor_).not.to.eql(clone.anchor_);
+      expect(original.getImage(1).width).not.to.eql(clone.getImage(1).width);
+      expect(original.offset_).not.to.eql(clone.offset_);
+      expect(original.color_).not.to.eql(clone.color_);
+      expect(original.size_).not.to.eql(clone.size_);
+    });
+  });
+
   describe('#getAnchor', function() {
     var fractionAnchor = [0.25, 0.25];
 

test/spec/ol/style/regularshape.test.js

@@ -119,6 +119,69 @@ describe('ol.style.RegularShape', function() {
     });
   });
 
+  describe('#clone', function() {
+
+    it('creates a new ol.style.RegularShape', function() {
+      var original = new ol.style.RegularShape({
+        points: 5
+      });
+      var clone = original.clone();
+      expect(clone).to.be.an(ol.style.RegularShape);
+      expect(clone).to.not.be(original);
+    });
+
+    it('copies all values', function() {
+      var original = new ol.style.RegularShape({
+        fill: new ol.style.Fill({
+          color: '#319FD3'
+        }),
+        points: 5,
+        radius: 4,
+        radius2: 6,
+        angle: 1,
+        snapToPixel: false,
+        stroke: new ol.style.Stroke({
+          color: '#319FD3'
+        }),
+        rotation: 2,
+        rotateWithView: true
+      });
+      original.setOpacity(0.5);
+      original.setScale(1.5);
+      var clone = original.clone();
+      expect(original.getAngle()).to.eql(clone.getAngle());
+      expect(original.getFill().getColor()).to.eql(clone.getFill().getColor());
+      expect(original.getOpacity()).to.eql(clone.getOpacity());
+      expect(original.getPoints()).to.eql(clone.getPoints());
+      expect(original.getRadius()).to.eql(clone.getRadius());
+      expect(original.getRadius2()).to.eql(clone.getRadius2());
+      expect(original.getRotation()).to.eql(clone.getRotation());
+      expect(original.getRotateWithView()).to.eql(clone.getRotateWithView());
+      expect(original.getScale()).to.eql(clone.getScale());
+      expect(original.getSnapToPixel()).to.eql(clone.getSnapToPixel());
+      expect(original.getStroke().getColor()).to.eql(clone.getStroke().getColor());
+    });
+
+    it('the clone does not reference the same objects as the original', function() {
+      var original = new ol.style.RegularShape({
+        fill: new ol.style.Fill({
+          color: '#319FD3'
+        }),
+        stroke: new ol.style.Stroke({
+          color: '#319FD3'
+        })
+      });
+      var clone = original.clone();
+      expect(original.getFill()).to.not.be(clone.getFill());
+      expect(original.getStroke()).to.not.be(clone.getStroke());
+
+      clone.getFill().setColor('#012345');
+      clone.getStroke().setColor('#012345');
+      expect(original.getFill().getColor()).to.not.eql(clone.getFill().getColor());
+      expect(original.getStroke().getColor()).to.not.eql(clone.getStroke().getColor());
+    });
+  });
+
 
   describe('#getChecksum', function() {
 

test/spec/ol/style/stroke.test.js

@@ -0,0 +1,50 @@
+goog.provide('ol.test.style.Stroke');
+
+goog.require('ol.style.Stroke');
+
+describe('ol.style.Stroke', function() {
+
+  describe('#clone', function() {
+
+    it('creates a new ol.style.Stroke', function() {
+      var original = new ol.style.Stroke();
+      var clone = original.clone();
+      expect(clone).to.be.an(ol.style.Stroke);
+      expect(clone).to.not.be(original);
+    });
+
+    it('copies all values', function() {
+      var original = new ol.style.Stroke({
+        color: '#319FD3',
+        lineCap: 'square',
+        lineJoin: 'miter',
+        lineDash: [1, 2, 3],
+        miterLimit: 20,
+        width: 5
+      });
+      var clone = original.clone();
+      expect(original.getColor()).to.eql(clone.getColor());
+      expect(original.getLineCap()).to.eql(clone.getLineCap());
+      expect(original.getLineJoin()).to.eql(clone.getLineJoin());
+      expect(original.getLineDash()).to.eql(clone.getLineDash());
+      expect(original.getMiterLimit()).to.eql(clone.getMiterLimit());
+      expect(original.getWidth()).to.eql(clone.getWidth());
+    });
+
+    it('the clone does not reference the same objects as the original', function() {
+      var original = new ol.style.Stroke({
+        color: [1, 2, 3, 0.4],
+        lineDash: [1, 2, 3]
+      });
+      var clone = original.clone();
+      expect(original.getColor()).to.not.be(clone.getColor());
+      expect(original.getLineDash()).to.not.be(clone.getLineDash());
+
+      clone.getColor()[0] = 0;
+      clone.getLineDash()[0] = 0;
+      expect(original.getColor()).to.not.eql(clone.getColor());
+      expect(original.getLineDash()).to.not.eql(clone.getLineDash());
+    });
+  });
+
+});

test/spec/ol/style/style.test.js

@@ -0,0 +1,172 @@
+goog.provide('ol.test.style.Style');
+
+goog.require('ol.Feature');
+goog.require('ol.geom.Point');
+goog.require('ol.style.Style');
+goog.require('ol.style.Fill');
+goog.require('ol.style.Circle');
+goog.require('ol.style.Stroke');
+goog.require('ol.style.Text');
+
+
+describe('ol.style.Style', function() {
+
+  describe('#clone', function() {
+
+    it('creates a new ol.style.Style', function() {
+      var original = new ol.style.Style();
+      var clone = original.clone();
+      expect(clone).to.be.an(ol.style.Style);
+      expect(clone).to.not.be(original);
+    });
+
+    it('copies all values', function() {
+      var original = new ol.style.Style({
+        geometry: new ol.geom.Point([0,0,0]),
+        fill: new ol.style.Fill({
+          color: '#319FD3'
+        }),
+        image: new ol.style.Circle({
+          radius: 5
+        }),
+        stroke: new ol.style.Stroke({
+          color: '#319FD3'
+        }),
+        text: new ol.style.Text({
+          text: 'test'
+        }),
+        zIndex: 2
+      });
+      var clone = original.clone();
+      expect(original.getGeometry().getCoordinates()).to.eql(clone.getGeometry().getCoordinates());
+      expect(original.getFill().getColor()).to.eql(clone.getFill().getColor());
+      expect(original.getImage().getRadius()).to.eql(clone.getImage().getRadius());
+      expect(original.getStroke().getColor()).to.eql(clone.getStroke().getColor());
+      expect(original.getText().getText()).to.eql(clone.getText().getText());
+      expect(original.getZIndex()).to.eql(clone.getZIndex());
+    });
+
+    it('the clone does not reference the same objects as the original', function() {
+      var original = new ol.style.Style({
+        geometry: new ol.geom .Point([0,0,0]),
+        fill: new ol.style.Fill({
+          color: '#319FD3'
+        }),
+        image: new ol.style.Circle({
+          radius: 5
+        }),
+        stroke: new ol.style.Stroke({
+          color: '#319FD3'
+        }),
+        text: new ol.style.Text({
+          text: 'test'
+        })
+      });
+      var clone = original.clone();
+      expect(original.getGeometry()).not.to.be(clone.getGeometry());
+      expect(original.getFill()).not.to.be(clone.getFill());
+      expect(original.getImage()).not.to.be(clone.getImage());
+      expect(original.getStroke()).not.to.be(clone.getStroke());
+      expect(original.getText()).not.to.be(clone.getText());
+
+      clone.getGeometry().setCoordinates([1,1,1]);
+      clone.getFill().setColor('#012345');
+      clone.getImage().setScale(2);
+      clone.getStroke().setColor('#012345');
+      clone.getText().setText('other');
+      expect(original.getGeometry().getCoordinates()).not.to.eql(clone.getGeometry().getCoordinates());
+      expect(original.getFill().getColor()).not.to.eql(clone.getFill().getColor());
+      expect(original.getImage().getScale()).not.to.eql(clone.getImage().getScale());
+      expect(original.getStroke().getColor()).not.to.eql(clone.getStroke().getColor());
+      expect(original.getText().getText()).not.to.eql(clone.getText().getText());
+    });
+  });
+
+  describe('#setZIndex', function() {
+
+    it('sets the zIndex', function() {
+      var style = new ol.style.Style();
+
+      style.setZIndex(0.7);
+      expect(style.getZIndex()).to.be(0.7);
+    });
+  });
+
+  describe('#setGeometry', function() {
+    var style = new ol.style.Style();
+
+    it('creates a geometry function from a string', function() {
+      var feature = new ol.Feature();
+      feature.set('myGeom', new ol.geom.Point([0, 0]));
+      style.setGeometry('myGeom');
+      expect(style.getGeometryFunction()(feature))
+          .to.eql(feature.get('myGeom'));
+    });
+
+    it('creates a geometry function from a geometry', function() {
+      var geom = new ol.geom.Point([0, 0]);
+      style.setGeometry(geom);
+      expect(style.getGeometryFunction()())
+          .to.eql(geom);
+    });
+
+    it('returns the configured geometry function', function() {
+      var geom = new ol.geom.Point([0, 0]);
+      style.setGeometry(function() {
+        return geom;
+      });
+      expect(style.getGeometryFunction()())
+          .to.eql(geom);
+    });
+  });
+
+  describe('#getGeometry', function() {
+
+    it('returns whatever was passed to setGeometry', function() {
+      var style = new ol.style.Style();
+      style.setGeometry('foo');
+      expect(style.getGeometry()).to.eql('foo');
+      var geom = new ol.geom.Point([1, 2]);
+      style.setGeometry(geom);
+      expect(style.getGeometry()).to.eql(geom);
+      var fn = function() {
+        return geom;
+      };
+      style.setGeometry(fn);
+      expect(style.getGeometry()).to.eql(fn);
+      style.setGeometry(null);
+      expect(style.getGeometry()).to.eql(null);
+    });
+
+  });
+
+});
+
+describe('ol.style.Style.createFunction()', function() {
+  var style = new ol.style.Style();
+
+  it('creates a style function from a single style', function() {
+    var styleFunction = ol.style.Style.createFunction(style);
+    expect(styleFunction()).to.eql([style]);
+  });
+
+  it('creates a style function from an array of styles', function() {
+    var styleFunction = ol.style.Style.createFunction([style]);
+    expect(styleFunction()).to.eql([style]);
+  });
+
+  it('passes through a function', function() {
+    var original = function() {
+      return [style];
+    };
+    var styleFunction = ol.style.Style.createFunction(original);
+    expect(styleFunction).to.be(original);
+  });
+
+  it('throws on (some) unexpected input', function() {
+    expect(function() {
+      ol.style.Style.createFunction({bogus: 'input'});
+    }).to.throwException();
+  });
+
+});

test/spec/ol/style/text.test.js

@@ -28,4 +28,66 @@ describe('ol.style.Text', function() {
 
   });
 
+  describe('#clone', function() {
+
+    it('creates a new ol.style.Text', function() {
+      var original = new ol.style.Text();
+      var clone = original.clone();
+      expect(clone).to.be.an(ol.style.Text);
+      expect(clone).to.not.be(original);
+    });
+
+    it('copies all values', function() {
+      var original = new ol.style.Text({
+        font: '12px serif',
+        offsetX: 4,
+        offsetY: 10,
+        scale: 2,
+        rotateWithView: true,
+        rotation: 1.5,
+        text: 'test',
+        textAlign: 'center',
+        textBaseline: 'top',
+        fill: new ol.style.Fill({
+          color: '#319FD3'
+        }),
+        stroke: new ol.style.Stroke({
+          color: '#319FD3'
+        })
+      });
+      var clone = original.clone();
+      expect(original.getFont()).to.eql(clone.getFont());
+      expect(original.getOffsetX()).to.eql(clone.getOffsetX());
+      expect(original.getOffsetY()).to.eql(clone.getOffsetY());
+      expect(original.getScale()).to.eql(clone.getScale());
+      expect(original.getRotateWithView()).to.eql(clone.getRotateWithView());
+      expect(original.getRotation()).to.eql(clone.getRotation());
+      expect(original.getText()).to.eql(clone.getText());
+      expect(original.getTextAlign()).to.eql(clone.getTextAlign());
+      expect(original.getTextBaseline()).to.eql(clone.getTextBaseline());
+      expect(original.getStroke().getColor()).to.eql(clone.getStroke().getColor());
+      expect(original.getFill().getColor()).to.eql(clone.getFill().getColor());
+    });
+
+    it('the clone does not reference the same objects as the original', function() {
+      var original = new ol.style.Text({
+        fill: new ol.style.Fill({
+          color: '#319FD3'
+        }),
+        stroke: new ol.style.Stroke({
+          color: '#319FD3'
+        })
+      });
+      var clone = original.clone();
+      expect(original.getFill()).to.not.be(clone.getFill());
+      expect(original.getStroke()).to.not.be(clone.getStroke());
+
+      clone.getFill().setColor('#012345');
+      clone.getStroke().setColor('#012345');
+      expect(original.getFill().getColor()).to.not.eql(clone.getFill().getColor());
+      expect(original.getStroke().getColor()).to.not.eql(clone.getStroke().getColor());
+    });
+
+  });
+
 });