From c398fe66c9db4decdbd9d41700719e59b3f63d51 Mon Sep 17 00:00:00 2001
From: Nathan Sobo <nathan@github.com>
Date: Wed, 16 Aug 2017 10:00:57 -0600
Subject: [PATCH] Hide off-screen lines when we render them for measurement

---
 spec/text-editor-component-spec.js | 16 ++++++++++++++++
 src/text-editor-component.js       |  8 +++++++-
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/spec/text-editor-component-spec.js b/spec/text-editor-component-spec.js
index 916ecd0ed..a1d960db5 100644
--- a/spec/text-editor-component-spec.js
+++ b/spec/text-editor-component-spec.js
@@ -3765,6 +3765,22 @@ describe('TextEditorComponent', () => {
       component.screenPositionForPixelPosition({top: 800, left: 1})
       await updatePromise
     })
+
+    it('does not shift cursors downward or render off-screen content when measuring off-screen lines (regression)', async () => {
+      const {component, element, editor} = buildComponent({rowsPerTile: 2, autoHeight: false})
+      await setEditorHeightInLines(component, 3)
+      const {top, left} = component.pixelPositionForScreenPosition({row: 12, column: 1})
+
+      expect(element.querySelector('.cursor').getBoundingClientRect().top).toBe(component.refs.lineTiles.getBoundingClientRect().top)
+      expect(element.querySelector('.line[data-screen-row="12"]').style.visibility).toBe('hidden')
+
+      // Ensure previously measured off screen lines don't have any weird
+      // styling when they come on screen in the next frame
+      await setEditorHeightInLines(component, 13)
+      const previouslyMeasuredLineElement = element.querySelector('.line[data-screen-row="12"]')
+      expect(previouslyMeasuredLineElement.style.display).toBe('')
+      expect(previouslyMeasuredLineElement.style.visibility).toBe('')
+    })
   })
 
   describe('screenPositionForPixelPosition', () => {
diff --git a/src/text-editor-component.js b/src/text-editor-component.js
index 8af4f4a9e..bea3bf29b 100644
--- a/src/text-editor-component.js
+++ b/src/text-editor-component.js
@@ -618,6 +618,7 @@ class TextEditorComponent {
         if (screenRow < startRow || screenRow >= endRow) {
           children.push($(LineComponent, {
             key: 'extra-' + screenLine.id,
+            hidden: true,
             screenLine,
             screenRow,
             displayLayer: this.props.model.displayLayer,
@@ -3863,11 +3864,16 @@ class LineComponent {
   }
 
   appendContents () {
-    const {displayLayer, nodePool, screenLine, textDecorations, textNodesByScreenLineId} = this.props
+    const {displayLayer, nodePool, hidden, screenLine, textDecorations, textNodesByScreenLineId} = this.props
 
     const textNodes = []
     textNodesByScreenLineId.set(screenLine.id, textNodes)
 
+    if (hidden) {
+      this.element.style.position = 'absolute'
+      this.element.style.visibility = 'hidden'
+    }
+
     const {lineText, tags} = screenLine
     let openScopeNode = nodePool.getElement('SPAN', null, null)
     this.element.appendChild(openScopeNode)