Fix scrolling, fix animation events

framer/Layer.coffee

@@ -18,14 +18,16 @@ layerProperty = (obj, name, cssProperty, fallback, validator, set) ->
 		default: fallback
 		get: -> 
 			@_properties[name]
+
 		set: (value) ->
+
 			@_properties[name] = value
 			@_element.style[cssProperty] = LayerStyle[cssProperty](@)
 
 			# @_dirtyStyle[cssProperty] = LayerStyle[cssProperty](@)
 			# @_setNeedsRender()
 
-			set?(value)
+			set?(@, value)
 			@emit("change:#{name}", value)
 
 
@@ -295,6 +297,29 @@ class exports.Layer extends BaseClass
 			_.extend @_element.style, value
 			@emit "change:style"
 
+	computedStyle: ->
+		# This is an expensive operation
+
+		getComputedStyle  = document.defaultView.getComputedStyle
+		getComputedStyle ?= window.getComputedStyle
+
+		return getComputedStyle(@_element)
+
+	@define "classList",
+		get: -> @_element.classList
+
+	##############################################################
+	# DOM ELEMENTS
+
+	_createElement: ->
+		return if @_element?
+		@_element = document.createElement "div"
+		@_element.classList.add("framerLayer")
+
+	_insertElement: ->
+		@bringToFront()
+		@_context.getRootElement().appendChild(@_element)
+
 	@define "html",
 		get: ->
 			@_elementHTML?.innerHTML
@@ -321,29 +346,12 @@ class exports.Layer extends BaseClass
 
 			@emit "change:html"
 
-	computedStyle: ->
-		document.defaultView.getComputedStyle @_element
-
-	_setDefaultCSS: ->
-		@style = Config.layerBaseCSS
-
-	@define "classList",
-		get: -> @_element.classList
-
-
-	##############################################################
-	# DOM ELEMENTS
-
-	_createElement: ->
-		return if @_element?
-		@_element = document.createElement "div"
-		@_element.classList.add("framerLayer")
-
-	_insertElement: ->
-		@bringToFront()
-		@_context.getRootElement().appendChild @_element
+	querySelector: (query) -> @_element.querySelector(query)
+	querySelectorAll: (query) -> @_element.querySelectorAll(query)
 
 	destroy: ->
+
+		# Todo: check this
 
 		if @superLayer
 			@superLayer._subLayers = _.without @superLayer._subLayers, @

test/tests/LayerTest.coffee

@@ -123,8 +123,8 @@ describe "Layer", ->
 			# layer.style["background-image"].should.contain "file://"
 			# layer.style["background-image"].should.contain "?nocache="
 
-			layer.style["background-size"].should.equal "cover"
-			layer.style["background-repeat"].should.equal "no-repeat"
+			layer.computedStyle()["background-size"].should.equal "cover"
+			layer.computedStyle()["background-repeat"].should.equal "no-repeat"
 
 			layer.properties.image.should.equal imagePath
 
@@ -211,6 +211,7 @@ describe "Layer", ->
 			layer.scroll = true
 			layer.scroll.should.equal true
 			layer.style["overflow"].should.equal "scroll"
+
 			layer.ignoreEvents.should.equal false
 
 		it "should set scrollHorizontal", ->
@@ -666,6 +667,18 @@ describe "Layer", ->
 			layer._elementHTML.innerHTML.should.equal "<input type=\"button\">"
 			layer.ignoreEvents.should.equal false
 
+		it "should work with querySelectorAll", ->
+
+			layer = new Layer
+			layer.html = "<input type='button' id='hello'>"
+
+			inputElements = layer.querySelectorAll("input")
+			inputElements.length.should.equal 1
+
+			inputElement = _.first(inputElements)
+			inputElement.getAttribute("id").should.equal "hello"
+
+