Skip to content

Commit

Permalink
Add backgroundSize property
Browse files Browse the repository at this point in the history
  • Loading branch information
Jonas Treub committed Mar 7, 2018
1 parent 7cd32b4 commit a426bbe
Show file tree
Hide file tree
Showing 3 changed files with 41 additions and 0 deletions.
2 changes: 2 additions & 0 deletions framer/Layer.coffee
Expand Up @@ -355,6 +355,8 @@ class exports.Layer extends BaseClass
@define "backgroundGrayscale", layerProperty(@, "backgroundGrayscale", "webkitBackdropFilter", 0, _.isNumber) @define "backgroundGrayscale", layerProperty(@, "backgroundGrayscale", "webkitBackdropFilter", 0, _.isNumber)
@define "backgroundSepia", layerProperty(@, "backgroundSepia", "webkitBackdropFilter", 0, _.isNumber) @define "backgroundSepia", layerProperty(@, "backgroundSepia", "webkitBackdropFilter", 0, _.isNumber)


@define "backgroundSize", layerProperty(@, "backgroundSize", "backgroundSize", null, _.isString)

for i in [0..8] for i in [0..8]
do (i) => do (i) =>
@define "shadow#{i+1}", @define "shadow#{i+1}",
Expand Down
8 changes: 8 additions & 0 deletions framer/LayerStyle.coffee
Expand Up @@ -243,6 +243,14 @@ exports.LayerStyle =
backgroundColor: (layer) -> backgroundColor: (layer) ->
return layer._properties.backgroundColor 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) -> fill: (layer) ->
return layer._properties.fill return layer._properties.fill


Expand Down
31 changes: 31 additions & 0 deletions test/tests/LayerTest.coffee
Expand Up @@ -378,6 +378,37 @@ describe "Layer", ->
layer.image = imagePath layer.image = imagePath
layer.backgroundColor.should.equalColor "red" 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", -> it "should set visible", ->


layer = new Layer layer = new Layer
Expand Down

0 comments on commit a426bbe

Please sign in to comment.