@astryxdesign/core 0.7.5-canary.fccd771 → 0.7.5

package/src/Table/glidingDivider.ts

@@ -0,0 +1,336 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file glidingDivider.ts
+ * @input Table rows a row glide moves (Web Animations on the `<tr>`), their
+ *   computed borders, StyleX
+ * @output Exports `glidingDividerStyles` (a row's stand-in divider while it
+ *   glides), `markGlidingRows` (marks the moving rows for that glide and
+ *   carries each row's own border onto the stand-in) and `rowEdge`
+ * @position Table internals. With collapsed borders the table paints every
+ *   border at its cell's static place, so a row that moves leaves its divider
+ *   behind. For the glide only, the moving row's cells are marked: their
+ *   borders go transparent (their width stays, so nothing reflows) and one of
+ *   them draws the same divider across the whole row in its ::after, which
+ *   moves with the row. A pinned cell draws its own over it
+ *   (plugins/stickyColumns).
+ *
+ * SYNC: When modified, update TableCell.tsx, plugins/rowExpansion and
+ *   plugins/stickyColumns.
+ */
+
+import * as stylex from '@stylexjs/stylex';
+import {colorVars} from '../theme/tokens.stylex';
+import {collapsedBottom, type BottomEdge} from './rowDivider';
+
+export type {BottomEdge} from './rowDivider';
+
+/** On a row while a glide moves it. */
+export const GLIDING_ATTRIBUTE = 'data-astryx-row-gliding';
+const GLIDING = '[data-astryx-row-gliding]';
+/**
+ * On each cell of a moving row; `line` on the one that draws the row's
+ * divider. On the cells themselves, so a table nested in a moving row keeps
+ * its own dividers.
+ */
+const CELL_ATTRIBUTE = 'data-astryx-cell-gliding';
+const CELL_GLIDING = '[data-astryx-cell-gliding]';
+const CELL_LINE = '[data-astryx-cell-gliding="line"]';
+
+/** On a pinned (sticky) cell: plugins/stickyColumns. */
+const PINNED_ATTRIBUTE = 'data-astryx-table-pinned';
+
+/**
+ * A row's divider, carried on the row for its glide. Names no cell sets, so
+ * a pinned cell's own carry (plugins/stickyColumns) cannot shadow them.
+ */
+export const GLIDE_DIVIDER_WIDTH = '--_table-row-glide-width';
+export const GLIDE_DIVIDER_STYLE = '--_table-row-glide-style';
+export const GLIDE_DIVIDER_COLOR = '--_table-row-glide-color';
+
+export const glidingDividerStyles = stylex.create({
+  /**
+   * On every cell with a row divider: it goes transparent while the row
+   * moves, and the row's line cell draws the divider across the row's bottom
+   * edge, where the collapsed border sits. The line is positioned against the
+   * row (the cell is not positioned), so the cell's own overflow does not clip
+   * it, and it is a box inside a cell, not a box in the row, so the table's
+   * column widths do not change.
+   */
+  cell: {
+    borderBottomColor: {
+      default: colorVars['--color-border'],
+      [CELL_GLIDING]: 'transparent',
+    },
+    // Every declaration only on the line cell: a pinned cell's own ::after
+    // (its scroll shadow) stays untouched.
+    '::after': {
+      content: {default: null, [CELL_LINE]: '""'},
+      position: {default: null, [CELL_LINE]: 'absolute'},
+      insetInline: {default: null, [CELL_LINE]: 0},
+      // Where the collapsed edge rests below the row's padding box (a wide
+      // border, or the row's own): measured when the row is marked.
+      bottom: {
+        default: null,
+        [CELL_LINE]: 'calc(-1 * var(--_table-row-glide-offset, 0px))',
+      },
+      height: {default: null, [CELL_LINE]: 0},
+      borderBottomWidth: {
+        default: null,
+        [CELL_LINE]: `var(${GLIDE_DIVIDER_WIDTH}, 0px)`,
+      },
+      borderBottomStyle: {
+        default: null,
+        [CELL_LINE]: `var(${GLIDE_DIVIDER_STYLE}, solid)`,
+      },
+      borderBottomColor: {
+        default: null,
+        [CELL_LINE]: `var(${GLIDE_DIVIDER_COLOR}, ${colorVars['--color-border']})`,
+      },
+      pointerEvents: {default: null, [CELL_LINE]: 'none'},
+    },
+  },
+  /**
+   * After `cell` on a detail panel's cell: its divider color is the one its
+   * row hands down (plugins/rowExpansion).
+   */
+  panelCell: {
+    borderBottomColor: {
+      default: `var(--_table-panel-divider-color, ${colorVars['--color-border']})`,
+      [CELL_GLIDING]: 'transparent',
+    },
+  },
+  /**
+   * On every row: while it moves it is the line's containing block. Its
+   * motion (a `translate`) makes it one; `position: relative` keeps it so
+   * for a panel playing in, which does not move.
+   */
+  row: {
+    position: {
+      default: null,
+      [GLIDING]: 'relative',
+    },
+  },
+});
+
+/** The batch that marked a row last: only that batch unmarks it. */
+const markedBy = new WeakMap<Element, symbol>();
+/**
+ * A marked element's own inline border colors (bottom, or top for the row
+ * below and its cells), given back when it is unmarked.
+ */
+const inlineTopOf = new WeakMap<HTMLElement, string>();
+/** The edge sources a row hid when it was marked, given back at unmark. */
+const sourcesOf = new WeakMap<
+  Element,
+  {bottoms: HTMLElement[]; tops: HTMLElement[]}
+>();
+/** A marked cell's own inline border color, given back when it is unmarked. */
+const inlineColorOf = new WeakMap<HTMLElement, string>();
+
+/**
+ * A row's own bottom border, for its stand-in while it moves; null for a row
+ * already carrying one. Read where the glide reads the layout (`animate`'s
+ * `beforeMove`), before anything starts moving.
+ */
+/**
+ * The elements whose borders the collapse can take a row's divider from
+ * (`rowDivider.ts` collapsedBottom): the row's own bottom, the row below's
+ * top and its cells' tops, and at a section edge the row groups' borders.
+ */
+function edgeSourcesOf(row: HTMLElement): {
+  bottoms: HTMLElement[];
+  tops: HTMLElement[];
+} {
+  const bottoms: HTMLElement[] = [row];
+  const tops: HTMLElement[] = [];
+  const group = row.parentElement;
+  const next =
+    row.nextElementSibling ??
+    group?.nextElementSibling?.firstElementChild ??
+    null;
+  if (next instanceof HTMLElement) {
+    tops.push(next);
+    for (const cell of next.children) {
+      if (cell instanceof HTMLElement) {
+        tops.push(cell);
+      }
+    }
+  }
+  if (row.nextElementSibling == null && group instanceof HTMLElement) {
+    bottoms.push(group);
+    const nextGroup = group.nextElementSibling;
+    if (nextGroup instanceof HTMLElement) {
+      tops.push(nextGroup);
+    }
+  }
+  return {bottoms, tops};
+}
+
+export function rowEdge(row: Element): BottomEdge | null {
+  if (row.hasAttribute(GLIDING_ATTRIBUTE) || row.lastElementChild == null) {
+    return null;
+  }
+  return collapsedBottom(row.lastElementChild as HTMLTableCellElement);
+}
+
+/**
+ * Marks the rows a glide is moving around `changed`, and `entering` (a row
+ * playing its entrance, with that entrance), so their cells draw a divider
+ * that moves with them; unmarks them in one batch when that motion ends. A
+ * glide moves a contiguous run of rows next to the change and stops near the
+ * visible part, so this walks out from the changed row each way and stops at
+ * still rows: it never visits the rest of a long table. It asks the motion
+ * module which rows glide and takes the borders read before the glide
+ * started (`edges`), so it reads nothing from the layout: it only writes.
+ * Resolves when the motion has ended.
+ */
+export async function markGlidingRows(
+  changed: HTMLElement,
+  edges: ReadonlyMap<Element, BottomEdge>,
+  entering: {row: HTMLElement; animation: Animation} | null,
+  glideOf: (element: Element) => Animation | null,
+): Promise<void> {
+  const rows = new Map<HTMLElement, Animation | null>();
+  const glide = glideOf(changed);
+  if (glide != null) {
+    rows.set(changed, glide);
+  }
+  for (const step of [
+    'nextElementSibling',
+    'previousElementSibling',
+  ] as const) {
+    let row = changed[step];
+    // The changed row's own panel enters rather than glides: look past it.
+    let stillInARow = 0;
+    while (row instanceof HTMLElement && stillInARow < 2) {
+      const animation = glideOf(row);
+      if (animation != null) {
+        rows.set(row, animation);
+        stillInARow = 0;
+      } else {
+        stillInARow += 1;
+      }
+      row = row[step];
+    }
+  }
+  if (entering != null) {
+    rows.set(entering.row, entering.animation);
+  }
+  if (rows.size === 0) {
+    return;
+  }
+  const batch = Symbol('glide');
+  // Where each row's divider rests, read before any write. The line hangs
+  // from the row's padding box (its containing block), which a row's own
+  // border shortens; the collapsed edge starts at a cell's padding-box
+  // bottom, which a wide border puts below it. The table paints that edge
+  // from the whole pixel at or above it, so the line starts there too.
+  const offsets = new Map<Element, number>();
+  for (const row of rows.keys()) {
+    const edge = edges.get(row);
+    const cell = row.lastElementChild;
+    if (edge == null || !(cell instanceof HTMLElement)) {
+      continue;
+    }
+    const cellEdge =
+      cell.getBoundingClientRect().top + cell.clientTop + cell.clientHeight;
+    const rowPaddingEdge =
+      row.getBoundingClientRect().top + row.clientTop + row.clientHeight;
+    offsets.set(row, Math.floor(cellEdge) + edge.width - rowPaddingEdge);
+  }
+  for (const row of rows.keys()) {
+    const edge = edges.get(row);
+    if (edge != null && !row.hasAttribute(GLIDING_ATTRIBUTE)) {
+      row.style.setProperty(GLIDE_DIVIDER_WIDTH, `${edge.width}px`);
+      row.style.setProperty(GLIDE_DIVIDER_STYLE, edge.style);
+      row.style.setProperty(GLIDE_DIVIDER_COLOR, edge.color);
+      row.setAttribute(GLIDING_ATTRIBUTE, '');
+      // Every edge the collapse could take the divider from is painted by the
+      // table at the row's static place: the row's own border, the row
+      // below's top and its cells' tops, and at a section edge the row
+      // groups' borders. They go transparent too, and the line carries the
+      // winner.
+      const sources = edgeSourcesOf(row);
+      sourcesOf.set(row, sources);
+      for (const element of sources.bottoms) {
+        if (!inlineColorOf.has(element)) {
+          inlineColorOf.set(element, element.style.borderBottomColor);
+          element.style.borderBottomColor = 'transparent';
+        }
+      }
+      for (const element of sources.tops) {
+        if (!inlineTopOf.has(element)) {
+          inlineTopOf.set(element, element.style.borderTopColor);
+          element.style.borderTopColor = 'transparent';
+        }
+      }
+      row.style.setProperty(
+        '--_table-row-glide-offset',
+        `${offsets.get(row) ?? 0}px`,
+      );
+      // The table's last row can glide a pixel farther than the rows above
+      // it (its border collapses differently), so mid-glide it overlaps the
+      // row above. Each moving row is its own layer; the last one stays
+      // under the others so it cannot cover the divider above it. Both stay
+      // under a sticky header (z-index 3).
+      row.style.zIndex = row.nextElementSibling == null ? '0' : '1';
+      // The first cell that scrolls with the row draws the line; a pinned
+      // cell is positioned (the line would be its width) and draws its own.
+      let hasLine = false;
+      for (const cell of row.children) {
+        const isLine: boolean =
+          !hasLine && !cell.hasAttribute(PINNED_ATTRIBUTE);
+        cell.setAttribute(CELL_ATTRIBUTE, isLine ? 'line' : '');
+        hasLine ||= isLine;
+        // Inline, so a theme's `table-cell` color or an app's stylesheet on
+        // the cells, which outrank the stylesheet's rule, cannot keep the
+        // line at the row's static place.
+        if (cell instanceof HTMLElement) {
+          inlineColorOf.set(cell, cell.style.borderBottomColor);
+          cell.style.borderBottomColor = 'transparent';
+        }
+      }
+    }
+    markedBy.set(row, batch);
+  }
+  await Promise.all(
+    [...rows.values()].map(async animation => {
+      await animation?.finished.catch(() => undefined);
+    }),
+  );
+  // Writes only, and only for rows no later glide has taken over.
+  for (const row of rows.keys()) {
+    if (markedBy.get(row) !== batch) {
+      continue;
+    }
+    markedBy.delete(row);
+    row.removeAttribute(GLIDING_ATTRIBUTE);
+    row.style.removeProperty('z-index');
+    const {bottoms, tops} = sourcesOf.get(row) ?? {bottoms: [], tops: []};
+    sourcesOf.delete(row);
+    for (const element of bottoms) {
+      if (inlineColorOf.has(element)) {
+        element.style.borderBottomColor = inlineColorOf.get(element) ?? '';
+        inlineColorOf.delete(element);
+      }
+    }
+    for (const element of tops) {
+      if (inlineTopOf.has(element)) {
+        element.style.borderTopColor = inlineTopOf.get(element) ?? '';
+        inlineTopOf.delete(element);
+      }
+    }
+    row.style.removeProperty('--_table-row-glide-offset');
+    for (const cell of row.children) {
+      cell.removeAttribute(CELL_ATTRIBUTE);
+      if (cell instanceof HTMLElement && inlineColorOf.has(cell)) {
+        cell.style.borderBottomColor = inlineColorOf.get(cell) ?? '';
+        inlineColorOf.delete(cell);
+      }
+    }
+    row.style.removeProperty(GLIDE_DIVIDER_WIDTH);
+    row.style.removeProperty(GLIDE_DIVIDER_STYLE);
+    row.style.removeProperty(GLIDE_DIVIDER_COLOR);
+  }
+}

package/src/Table/plugins/columnResize/useTableColumnResize.tsx

@@ -781,6 +781,13 @@ export function useTableColumnResize<T extends Record<string, unknown>>(
 
   const dragStateRef = useRef<DragState | null>(null);
   const isDraggingRef = useRef(false);
+  // The scroll container's merged ref, kept while the inner ref is the same,
+  // so React does not detach and re-attach it (and every plugin's listeners
+  // on it) on every render.
+  const mergedScrollWrapperRef = useRef<{
+    inner: ScrollWrapperRenderProps['htmlProps']['ref'] | null;
+    merged: (node: HTMLDivElement | null) => void;
+  } | null>(null);
   const tableRef = useRef<HTMLTableElement | null>(null);
 
   const globalMinWidth = config.minWidth;
@@ -941,14 +948,22 @@ export function useTableColumnResize<T extends Record<string, unknown>>(
       ): ScrollWrapperRenderProps {
         // Compose with any ref a prior plugin (e.g. sticky columns,
         // virtualization) already set on the scroll container.
-        const existingRef = props.htmlProps.ref;
-        const mergedRef = (node: HTMLDivElement | null) => {
-          attachScrollGate(node);
-          if (typeof existingRef === 'function') {
-            existingRef(node);
-          } else if (existingRef != null) {
-            existingRef.current = node;
-          }
+        const existingRef = props.htmlProps.ref ?? null;
+        const cached = mergedScrollWrapperRef.current;
+        const mergedRef =
+          cached != null && cached.inner === existingRef
+            ? cached.merged
+            : (node: HTMLDivElement | null) => {
+                attachScrollGate(node);
+                if (typeof existingRef === 'function') {
+                  existingRef(node);
+                } else if (existingRef != null) {
+                  existingRef.current = node;
+                }
+              };
+        mergedScrollWrapperRef.current = {
+          inner: existingRef,
+          merged: mergedRef,
         };
         return {
           ...props,

package/src/Table/plugins/rowExpansion/useTableRowExpansion.glide.test.tsx

@@ -0,0 +1,280 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file useTableRowExpansion.glide.test.tsx
+ * @input useTableRowExpansion with and without an `animatedLayout` handle, a
+ *   stubbed layout, recorded Web Animations
+ * @output Verifies that opening a row's panel glides the rows after it with
+ *   a handle (the chevron on the same motion), changes nothing without one,
+ *   and that a gliding row is marked for its moving divider only while it
+ *   moves (`spec:AST-105` FR1, FR2)
+ * @position Table row-expansion adoption of the size-change module
+ */
+
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+import {render, screen} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {useRef, useState} from 'react';
+import {Table} from '../../Table';
+import {pixel} from '../../columnUtils';
+import type {TableColumn} from '../../types';
+import {useTableRowExpansion} from './useTableRowExpansion';
+import {useAnimatedLayout} from '../../../hooks/useAnimatedLayout';
+import {markGlidingRows, rowEdge} from '../../glidingDivider';
+
+type Row = {id: string; name: string};
+const rows: Row[] = [
+  {id: 'a', name: 'Alpha'},
+  {id: 'b', name: 'Bravo'},
+  {id: 'c', name: 'Charlie'},
+];
+const columns: TableColumn<Row>[] = [
+  {key: 'name', header: 'Name', width: pixel(200)},
+];
+
+let animated: Element[] = [];
+const originalAnimate = Element.prototype.animate;
+
+beforeEach(() => {
+  animated = [];
+  Element.prototype.animate = function animate(this: Element) {
+    animated.push(this);
+    return {
+      cancel() {},
+      addEventListener() {},
+      finished: Promise.resolve(),
+    } as unknown as Animation;
+  };
+});
+
+afterEach(() => {
+  Element.prototype.animate = originalAnimate;
+  vi.restoreAllMocks();
+});
+
+function ExpandableTable({
+  withHandle,
+  dividers,
+}: {
+  withHandle: boolean;
+  dividers?: 'rows' | 'columns' | 'grid';
+}) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const animatedLayout = useAnimatedLayout({containerRef});
+  const [expandedKeys, setExpandedKeys] = useState(() => new Set<string>());
+  const expansion = useTableRowExpansion<Row>({
+    expandedKeys,
+    onToggle: key =>
+      setExpandedKeys(previous => {
+        const next = new Set(previous);
+        if (next.has(key)) {
+          next.delete(key);
+        } else {
+          next.add(key);
+        }
+        return next;
+      }),
+    getRowKey: row => row.id,
+    renderExpanded: row => <p>Details for {row.name}</p>,
+    animatedLayout: withHandle ? animatedLayout : undefined,
+  });
+  return (
+    <div ref={containerRef} data-testid="area">
+      <Table
+        data={rows}
+        columns={columns}
+        idKey="id"
+        dividers={dividers}
+        plugins={{rowExpansion: expansion}}
+      />
+    </div>
+  );
+}
+
+/** The area, and the row after the first, report a layout; it moves down. */
+function stubGeometry() {
+  vi.spyOn(screen.getByTestId('area'), 'getBoundingClientRect').mockReturnValue(
+    new DOMRect(0, 0, 400, 600),
+  );
+  const next = document.querySelector('tr[data-expansion-key="b"]')!;
+  let reads = 0;
+  vi.spyOn(next, 'getBoundingClientRect').mockImplementation(() => {
+    reads += 1;
+    // The first read is the measurement before the panel opens.
+    return new DOMRect(0, reads === 1 ? 40 : 120, 400, 40);
+  });
+  return next;
+}
+
+const flush = async () => {
+  await Promise.resolve();
+  await Promise.resolve();
+};
+
+describe('useTableRowExpansion adopts animatedLayout (spec:AST-105 FR1, FR2)', () => {
+  it('glides the rows after an opening panel, with a handle', async () => {
+    const user = userEvent.setup();
+    render(<ExpandableTable withHandle />);
+    const next = stubGeometry();
+    await user.click(screen.getAllByRole('button', {name: /expand/i})[0]);
+    await flush();
+    expect(animated).toContain(next);
+    // The chevron turns on the glide's motion.
+    expect(
+      document
+        .querySelector<HTMLElement>('[data-expansion-toggle] > *')
+        ?.style.getPropertyValue('transition-timing-function'),
+    ).toMatch(/^linear\(/);
+  });
+
+  it.each(['columns', 'grid'] as const)(
+    'changes everything at once with %s dividers, even with a handle (Table FR15)',
+    async dividers => {
+      const user = userEvent.setup();
+      render(<ExpandableTable withHandle dividers={dividers} />);
+      stubGeometry();
+      await user.click(screen.getAllByRole('button', {name: /expand/i})[0]);
+      await flush();
+      // No glide, no panel entrance, and the chevron keeps the theme's turn.
+      expect(animated).toEqual([]);
+      expect(
+        document
+          .querySelector<HTMLElement>('[data-expansion-toggle] > *')
+          ?.style.getPropertyValue('transition-timing-function'),
+      ).toBe('');
+    },
+  );
+
+  it.each(['columns', 'grid'] as const)(
+    'takes the spring off a chevron when the table turns to %s dividers',
+    async dividers => {
+      const user = userEvent.setup();
+      const {rerender} = render(<ExpandableTable withHandle dividers="rows" />);
+      stubGeometry();
+      await user.click(screen.getAllByRole('button', {name: /expand/i})[0]);
+      await flush();
+      const glyph = document.querySelector<HTMLElement>(
+        '[data-expansion-toggle] > *',
+      );
+      expect(
+        glyph?.style.getPropertyValue('transition-timing-function'),
+      ).toMatch(/^linear\(/);
+      rerender(<ExpandableTable withHandle dividers={dividers} />);
+      expect(glyph?.style.getPropertyValue('transition-timing-function')).toBe(
+        '',
+      );
+    },
+  );
+
+  it('changes nothing without a handle', async () => {
+    const user = userEvent.setup();
+    render(<ExpandableTable withHandle={false} />);
+    stubGeometry();
+    await user.click(screen.getAllByRole('button', {name: /expand/i})[0]);
+    await flush();
+    expect(animated).toEqual([]);
+  });
+});
+
+describe('an open panel carries its row divider (Table FR14)', () => {
+  it("takes the row's own cell border, a theme's or an app's, and the row's own border where it wins", async () => {
+    const user = userEvent.setup();
+    render(<ExpandableTable withHandle={false} />);
+    const row = document.querySelector<HTMLElement>(
+      'tr[data-expansion-key="a"]',
+    )!;
+    // An app's (or a theme's) border on the row's cells.
+    for (const cell of row.querySelectorAll('td')) {
+      cell.style.borderBottomColor = 'rgb(255, 0, 0)';
+      cell.style.borderBottomStyle = 'dashed';
+    }
+    await user.click(screen.getAllByRole('button', {name: /expand/i})[0]);
+    const panel = document.querySelector<HTMLElement>(
+      'tr[data-expansion-panel] > td',
+    )!;
+    // The panel keeps its own width (a value, not inherited from any panel
+    // around it) while the row's own border does not win.
+    expect(panel.style.getPropertyValue('--_table-panel-divider-width')).toBe(
+      'initial',
+    );
+    expect(panel.style.getPropertyValue('--_table-panel-divider-color')).toBe(
+      'rgb(255, 0, 0)',
+    );
+    expect(panel.style.getPropertyValue('--_table-panel-divider-style')).toBe(
+      'dashed',
+    );
+    // An app's own border on the row wins the collapse when it is wider;
+    // the next commit (opening another row) reads it.
+    row.style.borderBottom = '3px solid rgb(0, 0, 255)';
+    await user.click(screen.getAllByRole('button', {name: /expand/i})[0]);
+    expect(panel.style.getPropertyValue('--_table-panel-divider-width')).toBe(
+      '3px',
+    );
+    expect(panel.style.getPropertyValue('--_table-panel-divider-color')).toBe(
+      'rgb(0, 0, 255)',
+    );
+  });
+});
+
+describe('markGlidingRows', () => {
+  it('marks the moving rows and carries their divider while they move, and clears both after', async () => {
+    const body = document.createElement('tbody');
+    // Each row: a pinned cell, then two that scroll with it.
+    const rows = [0, 1, 2, 3, 4].map(() => {
+      const row = document.createElement('tr');
+      const pinned = document.createElement('td');
+      pinned.setAttribute('data-astryx-table-pinned', '');
+      row.append(
+        pinned,
+        document.createElement('td'),
+        document.createElement('td'),
+      );
+      body.append(row);
+      return row;
+    });
+    // A table nested in a moving row keeps its own dividers.
+    const nested = document.createElement('table');
+    nested.innerHTML = '<tbody><tr><td></td></tr></tbody>';
+    rows[2].cells[1].append(nested);
+    const cellMarks = (row: HTMLTableRowElement) =>
+      [...row.cells].map(cell => cell.getAttribute('data-astryx-cell-gliding'));
+    document.body.append(body);
+    let finish = () => {};
+    const glide = {
+      finished: new Promise<void>(resolve => {
+        finish = resolve;
+      }),
+    } as unknown as Animation;
+    // The change is row 1; rows 2 and 3 glide, row 4 is still.
+    const moving = new Set([rows[2], rows[3]]);
+    const glideOf = (element: Element) =>
+      moving.has(element as HTMLTableRowElement) ? glide : null;
+
+    const edges = new Map(rows.map(row => [row, rowEdge(row)!] as const));
+    const done = markGlidingRows(rows[1], edges, null, glideOf);
+    expect(
+      rows.map(row => row.hasAttribute('data-astryx-row-gliding')),
+    ).toEqual([false, false, true, true, false]);
+    expect(
+      rows[2].style.getPropertyValue('--_table-row-glide-width'),
+    ).toBe('0px');
+    // The first cell that scrolls draws the line; the pinned one draws its
+    // own; the nested table's cell is not marked.
+    expect(cellMarks(rows[2])).toEqual(['', 'line', '']);
+    expect(cellMarks(rows[4])).toEqual([null, null, null]);
+    expect(
+      nested.querySelector('td')?.hasAttribute('data-astryx-cell-gliding'),
+    ).toBe(false);
+
+    finish();
+    await done;
+    expect(rows.some(row => row.hasAttribute('data-astryx-row-gliding'))).toBe(
+      false,
+    );
+    expect(
+      rows[2].style.getPropertyValue('--_table-row-glide-width'),
+    ).toBe('');
+    expect(cellMarks(rows[2])).toEqual([null, null, null]);
+    body.remove();
+  });
+});