Merge pull request #837 from Addepar/jiayingxu/table-sticky-footer-offset-fix

The `TableStickyPolyfill` is used to position header and footer rows. The individual `th` and `td` offset positions are calculated for the footer rows so they remain “sticky”. There is a bug in the logic for calculating the bottom offset for table footer rows where the `rows` were being iterated backwards while the `heights` were iterated forwards. This bug manifests when table footer rows have varying heights and the list of heights is not a palindrome. 

As shown in the image below, the table has 7 footer rows where the height of the 1st footer row is 74px and the height of all other footer rows is 26px. The bottom offset of the 6th row takes into account the height of the 1st row and not the 7th row due to the loop iteration direction bug.
The list `heights: [74, 26, 26, 26, 26, 26, 26]` is errantly being read in reverse order as `heights: [26, 26, 26, 26, 26, 26, 74]`. 
The ember-twiddle demonstrates the issue [here](https://ember-twiddle.com/35a7259172fd509c4da030ac803fa937
).

![image](https://user-images.githubusercontent.com/42778466/97247629-6c290580-17d6-11eb-90d2-c8fd66faeced.png)

Author: jiayingxu

addon/-private/sticky/table-sticky-polyfill.js

@@ -92,7 +92,7 @@ class TableStickyPolyfill {
          add row 0's height (25px) to its current offset and move on to row 1,
          where it will set each of that row's `th` cells' `top` to the current
          offset of `25px`.
-       * For the tfoot TableStickyPolyfill, its `respositionStickyElements` will
+       * For the tfoot TableStickyPolyfill, its `repositionStickyElements` will
          start at the bottom-most row, row 1, and set each of its `td` cells'
          `bottom` value to `0px`, then add row 1's height (20px) to its current
          offset and move on to the next row, row 0, where it will set each of that
@@ -187,8 +187,9 @@ class TableStickyPolyfill {
     for (let i = 0; i < rows.length; i++) {
       // Work top-down (index order) for 'top', bottom-up (reverse index
       // order) for 'bottom' rows
-      let row = rows[this.side === 'top' ? i : rows.length - 1 - i];
-      let height = heights[i];
+      let index = this.side === 'top' ? i : rows.length - 1 - i;
+      let row = rows[index];
+      let height = heights[index];
 
       for (let child of row.children) {
         child.style.position = '-webkit-sticky';

tests/unit/-private/table-sticky-polyfill-test.js

@@ -52,14 +52,23 @@ const standardTemplate = hbs`
   </div>
 `;
 
-function constructMatrix(n, m, prefix = '') {
+/**
+ * Constructs a matrix m by n
+ * @param m Rows
+ * @param n Columns
+ * @param prefix Prefix string
+ * @param skipPrefixOnRowIndices Skip adding the prefix string to the row (m) indices specified in the list
+ * @returns {Array} matrix
+ */
+function constructMatrix(m, n, prefix = '', skipPrefixOnRowIndices = []) {
   let rows = emberA();
 
-  for (let i = 0; i < n; i++) {
+  for (let i = 0; i < m; i++) {
     let cols = emberA();
 
-    for (let j = 0; j < m; j++) {
-      cols.pushObject(`${m}${prefix}`);
+    for (let j = 0; j < n; j++) {
+      let skipPrefix = skipPrefixOnRowIndices.includes(i);
+      cols.pushObject(skipPrefix ? n : `${n}${prefix}`);
     }
 
     rows.pushObject(cols);
@@ -100,6 +109,60 @@ function verifyFooter(assert) {
     });
 }
 
+/**
+ * Verifies multi line header when scrolled to the bottom of the table
+ * @param assert
+ */
+function verifyMultiLineHeader(assert) {
+  let firstTableCellOfEachHeaderRow = findAll('thead > tr > th:first-child');
+  let tableHeaderCellHeights = firstTableCellOfEachHeaderRow.map(
+    cell => cell.getBoundingClientRect().height
+  );
+  let isAllHeaderCellsIdenticalHeights = tableHeaderCellHeights.every(function(cell, i, array) {
+    return i === 0 || cell === array[i - 1];
+  });
+  let firstCellRect = find('thead tr:first-child th:first-child').getBoundingClientRect();
+  let expectedOffset = firstCellRect.top;
+
+  assert.notOk(
+    isAllHeaderCellsIdenticalHeights,
+    'precond - header table rows have varying heights'
+  );
+
+  firstTableCellOfEachHeaderRow.forEach(cell => {
+    let firstCellRect = cell.getBoundingClientRect();
+    expectedOffset += firstCellRect.height;
+    assert.equal(expectedOffset, firstCellRect.bottom);
+  });
+}
+
+/**
+ * Verifies multi line footer when scrolled to the top of the table
+ * @param assert
+ */
+function verifyMultiLineFooter(assert) {
+  let firstTableCellOfEachFooterRow = findAll('tfoot > tr > td:first-child');
+  let tableFooterCellHeights = firstTableCellOfEachFooterRow.map(
+    cell => cell.getBoundingClientRect().height
+  );
+  let isAllFooterCellsIdenticalHeights = tableFooterCellHeights.every(function(cell, i, array) {
+    return i === 0 || cell === array[i - 1];
+  });
+  let firstCellRect = find('tfoot tr:first-child td:first-child').getBoundingClientRect();
+  let expectedOffset = firstCellRect.top;
+
+  assert.notOk(
+    isAllFooterCellsIdenticalHeights,
+    'precond - footer table rows have varying heights'
+  );
+
+  firstTableCellOfEachFooterRow.forEach(cell => {
+    let firstCellRect = cell.getBoundingClientRect();
+    expectedOffset += firstCellRect.height;
+    assert.equal(expectedOffset, firstCellRect.bottom);
+  });
+}
+
 componentModule('Unit | Private | TableStickyPolyfill', function() {
   test('it works', async function(assert) {
     this.set('headerRows', constructMatrix(3, 3, 'thead'));
@@ -293,4 +356,43 @@ componentModule('Unit | Private | TableStickyPolyfill', function() {
       'the bottom of the last header cell is close to 50% of the way down the table'
     );
   });
+
+  test('when the header has rows with varying heights', async function(assert) {
+    this.set(
+      'headerRows',
+      constructMatrix(2, 3, 'table header has multiple lines of content', [1])
+    );
+    this.set('bodyRows', constructMatrix(20, 3, 'body'));
+    this.set('footerRows', constructMatrix(1, 3, 'footer'));
+
+    await this.render(standardTemplate);
+
+    setupTableStickyPolyfill(find('thead'));
+    setupTableStickyPolyfill(find('tfoot'));
+
+    await wait();
+
+    let container = find('.ember-table');
+    await scrollTo('.ember-table', 0, container.scrollHeight);
+
+    verifyMultiLineHeader(assert);
+  });
+
+  test('when the footer has rows with varying heights', async function(assert) {
+    this.set('headerRows', constructMatrix(1, 3, 'header'));
+    this.set('bodyRows', constructMatrix(20, 3, 'body'));
+    this.set(
+      'footerRows',
+      constructMatrix(2, 3, 'table footer has multiple lines of content', [1])
+    );
+
+    await this.render(standardTemplate);
+
+    setupTableStickyPolyfill(find('thead'));
+    setupTableStickyPolyfill(find('tfoot'));
+
+    await wait();
+
+    verifyMultiLineFooter(assert);
+  });
 });