Fix occluded-content height inflation from inherited line-height (#491)

When occluded-content is rendered inside a table (display: table-row),
  the debug text ("And X items before/after") can create a line box that
  inflates the element's actual height above its inline style height.
  This causes VerticalCollection to measure the wrong height and adjust
  its estimates, leading to visual jumps when scrolling.

  Add font-size: 0 and line-height: 0 to prevent the text from affecting
  layout while keeping it available for screen readers.

Author: johanrd

vertical-collection/src/occluded-content.css

@@ -8,6 +8,16 @@
 
   /* hides text visually while still being readable by screen readers */
   color: rgb(0 0 0 / 0%);
+
+  /*
+   * Prevents the debug text ("And X items before/after") from affecting
+   * the element's layout height. Without this, inherited line-height values
+   * can cause the text to create a line box that inflates the element's
+   * actual height above its inline style height, especially when used
+   * inside tables with display: table-row.
+   */
+  font-size: 0;
+  line-height: 0;
 }
 
 table .occluded-content,

vertical-collection/tests/integration/table-occlusion-test.js

@@ -0,0 +1,134 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from '../helpers';
+import { find, findAll, render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+import scrollTo from '../helpers/scroll-to';
+
+import getNumbers from 'dummy/lib/get-numbers';
+
+module(
+  'vertical-collection',
+  'Integration | Table Occlusion Tests',
+  function (hooks) {
+    setupRenderingTest(hooks);
+
+    test('occluded-content should have line-height: 0 to prevent text from affecting height', async function (assert) {
+      // This test verifies that the occluded-content element has line-height: 0
+      // set in its CSS to prevent the debug text from affecting the element's height.
+      //
+      // The issue: When occluded-content is inside a table (display: table-row),
+      // the debug text ("And X items before/after") creates a line box. If a
+      // consuming application has a non-zero line-height set, this can cause
+      // the actual rendered height (getBoundingClientRect().height) to be larger
+      // than the inline style height. This causes VerticalCollection to "correct"
+      // its estimate upwards, leading to visual jumps when scrolling.
+      //
+      // The fix: The addon's CSS should set `line-height: 0` on `.occluded-content`
+      // to ensure the debug text never affects the element's layout height.
+
+      this.set('items', getNumbers(0, 50));
+
+      await render(hbs`
+        <div class="scrollable" style="height: 200px; overflow-y: scroll;">
+          <table style="width: 100%;">
+            <tbody>
+              <VerticalCollection
+                @items={{this.items}}
+                @containerSelector=".scrollable"
+                @key="number"
+                @estimateHeight={{40}}
+                @staticHeight={{true}}
+                @bufferSize={{0}}
+                as |item|
+              >
+                <tr>
+                  <td style="height: 40px;">{{item.number}}</td>
+                </tr>
+              </VerticalCollection>
+            </tbody>
+          </table>
+        </div>
+      `);
+
+      // Scroll down to create occluded content before
+      await scrollTo('.scrollable', 0, 200);
+
+      const occludedBefore = find('.occluded-content:first-of-type');
+      const occludedAfter = find('.occluded-content:last-of-type');
+
+      // The occluded-content elements should exist
+      assert.ok(occludedBefore, 'occluded-content before exists');
+      assert.ok(occludedAfter, 'occluded-content after exists');
+
+      // Check that line-height is 0 (or "0px" or "normal" which would be equivalent)
+      const beforeComputedLineHeight =
+        window.getComputedStyle(occludedBefore).lineHeight;
+      const afterComputedLineHeight =
+        window.getComputedStyle(occludedAfter).lineHeight;
+
+      // The CSS should explicitly set line-height to 0 to prevent inherited
+      // line-height from causing the debug text to affect the element's height
+      assert.strictEqual(
+        beforeComputedLineHeight,
+        '0px',
+        `occluded-content before should have line-height: 0px, got: ${beforeComputedLineHeight}`,
+      );
+
+      assert.strictEqual(
+        afterComputedLineHeight,
+        '0px',
+        `occluded-content after should have line-height: 0px, got: ${afterComputedLineHeight}`,
+      );
+    });
+
+    test('occluded-content height matches style height in tables', async function (assert) {
+      // This test verifies that the actual rendered height of occluded-content
+      // matches its inline style height when used inside tables.
+
+      this.set('items', getNumbers(0, 30));
+
+      await render(hbs`
+        <div class="scrollable" style="height: 100px; overflow-y: scroll;">
+          <table style="width: 100%;">
+            <tbody>
+              <VerticalCollection
+                @items={{this.items}}
+                @containerSelector=".scrollable"
+                @key="number"
+                @estimateHeight={{20}}
+                @staticHeight={{true}}
+                @bufferSize={{0}}
+                as |item|
+              >
+                <tr>
+                  <td style="height: 20px;">{{item.number}}</td>
+                </tr>
+              </VerticalCollection>
+            </tbody>
+          </table>
+        </div>
+      `);
+
+      // Scroll to ensure we have both occluded content before and after
+      await scrollTo('.scrollable', 0, 100);
+
+      const occludedElements = findAll('.occluded-content');
+
+      for (const el of occludedElements) {
+        const styleHeight = parseFloat(el.style.height);
+        const actualHeight = el.getBoundingClientRect().height;
+        const hasText = el.textContent.trim().length > 0;
+
+        // Skip elements with 0 height (they have no content to measure)
+        if (styleHeight === 0) {
+          continue;
+        }
+
+        assert.ok(
+          Math.abs(actualHeight - styleHeight) < 1,
+          `occluded-content (has text: ${hasText}): actual ${actualHeight}px should equal style ${styleHeight}px`,
+        );
+      }
+    });
+  },
+);