Permalink
Browse files

Take dpr into account when applying blur

  • Loading branch information...
nvh committed Sep 19, 2017
1 parent 266f591 commit a61783d689a26d0cc4df38f818979be2ccb3d337
Showing with 19 additions and 4 deletions.
  1. +8 −4 framer/LayerStyle.coffee
  2. +11 −0 test/tests/LayerTest.coffee
View
@@ -1,5 +1,7 @@
filterFormat = (value, unit) ->
"#{Utils.round value, 2}#{unit}"
filterFormat = (name, value, unit, pixelMultiplier) ->
if unit is "px"
value *= pixelMultiplier
"#{name}(#{Utils.round value, 2}#{unit})"
# "#{value}#{unit}"
roundToZero = (num) ->
@@ -125,7 +127,8 @@ exports.LayerStyle =
for [cssName, layerPropertyName, fallback, unit] in _WebkitProperties
if layer._properties.hasOwnProperty(layerPropertyName) and layer[layerPropertyName] isnt fallback
css.push("#{cssName}(#{filterFormat(layer[layerPropertyName], unit)})")
filter = filterFormat(cssName, layer[layerPropertyName], unit, layer.context.pixelMultiplier)
css.push(filter)
# filter shadow
shadowStrings = getShadowStrings(layer, "drop", (shadow, pixelMultiplier) ->
@@ -140,7 +143,8 @@ exports.LayerStyle =
for [cssName, layerPropertyName, fallback, unit] in _BackdropProperties
if layer._properties.hasOwnProperty(layerPropertyName) and layer[layerPropertyName] isnt fallback
css.push("#{cssName}(#{filterFormat(layer[layerPropertyName], unit)})")
filter = filterFormat(cssName, layer[layerPropertyName], unit, layer.context.pixelMultiplier)
css.push(filter)
return css.join(" ")
@@ -717,6 +717,17 @@ describe "Layer", ->
backgroundBlur: 50
l.style.webkitBackdropFilter.should.equal "blur(50px)"
it "should take dpr into account when setting blur", ->
device = new DeviceComponent()
device.deviceType = "apple-iphone-7-black"
device.context.run ->
l = new Layer
blur: 20
backgroundBlur: 30
l.context.devicePixelRatio.should.equal 2
l.style.webkitFilter.should.equal "blur(40px)"
l.style.webkitBackdropFilter.should.equal "blur(60px)"
it "should set backgroundBrightness", ->
l = new Layer
backgroundBrightness: 50

0 comments on commit a61783d

Please sign in to comment.