Permalink
Browse files

Add backgroundSize property

  • Loading branch information...
jonastreub committed Mar 7, 2018
1 parent 7cd32b4 commit a426bbe28976317ed9cab4380169bbe0795986b7
Showing with 41 additions and 0 deletions.
  1. +2 −0 framer/Layer.coffee
  2. +8 −0 framer/LayerStyle.coffee
  3. +31 −0 test/tests/LayerTest.coffee
View
@@ -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}",
View
@@ -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
@@ -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

0 comments on commit a426bbe

Please sign in to comment.