From a426bbe28976317ed9cab4380169bbe0795986b7 Mon Sep 17 00:00:00 2001
From: Jonas Treub <jonas@motif.co>
Date: Wed, 7 Mar 2018 15:43:02 +0100
Subject: [PATCH] Add backgroundSize property

---
 framer/Layer.coffee         |  2 ++
 framer/LayerStyle.coffee    |  8 ++++++++
 test/tests/LayerTest.coffee | 31 +++++++++++++++++++++++++++++++
 3 files changed, 41 insertions(+)

diff --git a/framer/Layer.coffee b/framer/Layer.coffee
index 2ce5168e4..5dc222218 100644
--- a/framer/Layer.coffee
+++ b/framer/Layer.coffee
@@ -355,6 +355,8 @@ class exports.Layer extends BaseClass
 	@define "backgroundGrayscale", layerProperty(@, "backgroundGrayscale", "webkitBackdropFilter", 0, _.isNumber)
 	@define "backgroundSepia", layerProperty(@, "backgroundSepia", "webkitBackdropFilter", 0, _.isNumber)
 
+	@define "backgroundSize", layerProperty(@, "backgroundSize", "backgroundSize", null, _.isString)
+
 	for i in [0..8]
 		do (i) =>
 			@define "shadow#{i+1}",
diff --git a/framer/LayerStyle.coffee b/framer/LayerStyle.coffee
index c15f53648..904ed78a7 100644
--- a/framer/LayerStyle.coffee
+++ b/framer/LayerStyle.coffee
@@ -243,6 +243,14 @@ exports.LayerStyle =
 	backgroundColor: (layer) ->
 		return layer._properties.backgroundColor
 
+	backgroundSize: (layer) ->
+		switch layer._properties.backgroundSize
+			when "fill" then return "cover"
+			when "fit" then return "contain"
+			when "stretch" then return "100% 100%"
+		return layer._properties.backgroundSize
+
+
 	fill: (layer) ->
 		return layer._properties.fill
 
diff --git a/test/tests/LayerTest.coffee b/test/tests/LayerTest.coffee
index b2e8b83f9..79bda7a5f 100644
--- a/test/tests/LayerTest.coffee
+++ b/test/tests/LayerTest.coffee
@@ -378,6 +378,37 @@ describe "Layer", ->
 			layer.image = imagePath
 			layer.backgroundColor.should.equalColor "red"
 
+		describe "should set the background size", ->
+			it "cover", ->
+				layer = new Layer backgroundSize: "cover"
+				layer.style["background-size"].should.equal "cover"
+
+			it "contain", ->
+				layer = new Layer backgroundSize: "contain"
+				layer.style["background-size"].should.equal "contain"
+
+			it "percentage", ->
+				layer = new Layer backgroundSize: "100%"
+				layer.style["background-size"].should.equal "100%"
+
+			it "other", ->
+				layer = new Layer backgroundSize: "300px, 5em 10%"
+				layer.style["background-size"].should.equal "300px, 5em 10%"
+
+			it "fill", ->
+				layer = new Layer backgroundSize: "fill"
+				layer.style["background-size"].should.equal "cover"
+
+			it "fit", ->
+				layer = new Layer backgroundSize: "fit"
+				layer.style["background-size"].should.equal "contain"
+
+			it "stretch", ->
+				layer = new Layer backgroundSize: "stretch"
+				# This should be "100% 100%", but phantomjs doest return that when you set it
+				layer.style["background-size"].should.equal "100%"
+
+
 		it "should set visible", ->
 
 			layer = new Layer