Render tiles upper in the stack in front of the ones below

spec/text-editor-component-spec.coffee

@@ -88,6 +88,28 @@ describe "TextEditorComponent", ->
       else
         expect(lineNode.textContent).toBe(tokenizedLine.text)
 
+    it "renders tiles upper in the stack in front of the ones below", ->
+      wrapperNode.style.height = 6.5 * lineHeightInPixels + 'px'
+      component.measureDimensions()
+      nextAnimationFrame()
+
+      tilesNodes = componentNode.querySelector(".lines").querySelectorAll(".tile")
+
+      expect(tilesNodes[0].style.zIndex).toBe("2")
+      expect(tilesNodes[1].style.zIndex).toBe("1")
+      expect(tilesNodes[2].style.zIndex).toBe("0")
+
+      verticalScrollbarNode.scrollTop = 1 * lineHeightInPixels
+      verticalScrollbarNode.dispatchEvent(new UIEvent('scroll'))
+      nextAnimationFrame()
+
+      tilesNodes = componentNode.querySelector(".lines").querySelectorAll(".tile")
+
+      expect(tilesNodes[0].style.zIndex).toBe("3")
+      expect(tilesNodes[1].style.zIndex).toBe("2")
+      expect(tilesNodes[2].style.zIndex).toBe("1")
+      expect(tilesNodes[3].style.zIndex).toBe("0")
+
     it "renders the currently-visible lines in a tiled fashion", ->
       wrapperNode.style.height = 6.5 * lineHeightInPixels + 'px'
       component.measureDimensions()

src/lines-tile-component.coffee

@@ -44,6 +44,10 @@ class LinesTileComponent
       @domNode.style.backgroundColor = @newState.backgroundColor
       @oldState.backgroundColor = @newState.backgroundColor
 
+    if @newTileState.zIndex isnt @oldTileState.zIndex
+      @domNode.style.zIndex = @newTileState.zIndex
+      @oldTileState.zIndex = @newTileState.zIndex
+
     if @newTileState.display isnt @oldTileState.display
       @domNode.style.display = @newTileState.display
       @oldTileState.display = @newTileState.display

src/text-editor-presenter.coffee

@@ -322,10 +322,16 @@ class TextEditorPresenter
       @tileForRow(@model.getScreenLineCount()), @tileForRow(@endRow)
     )
 
+  getTilesCount: ->
+    Math.ceil(
+      (@getEndTileRow() - @getStartTileRow() + 1) / @tileSize
+    )
+
   updateTilesState: ->
     return unless @startRow? and @endRow? and @lineHeight?
 
     visibleTiles = {}
+    zIndex = @getTilesCount() - 1
     for startRow in [@getStartTileRow()..@getEndTileRow()] by @tileSize
       endRow = Math.min(@model.getScreenLineCount(), startRow + @tileSize)
 
@@ -334,6 +340,7 @@ class TextEditorPresenter
       tile.left = -@scrollLeft
       tile.height = @tileSize * @lineHeight
       tile.display = "block"
+      tile.zIndex = zIndex--
       tile.highlights ?= {}
 
       gutterTile = @lineNumberGutter.tiles[startRow] ?= {}