@createiq/htmldiff 1.0.5-beta.3 → 1.1.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@createiq/htmldiff",
-  "version": "1.0.5-beta.3",
+  "version": "1.1.0-beta.0",
   "description": "TypeScript port of htmldiff.net",
   "type": "module",
   "author": "Mathew Mannion <mathew.mannion@linklaters.com>",

package/src/TableDiff.ts

@@ -379,20 +379,25 @@ function diffStructurallyAlignedTable(
   const oldKeys = oldTable.rows.map(row => rowKey(oldHtml, row))
   const newKeys = newTable.rows.map(row => rowKey(newHtml, row))
   const exactAlignment = lcsAlign(oldKeys, newKeys)
-  const alignment = pairSimilarUnmatchedRows(exactAlignment, oldTable, newTable, oldHtml, newHtml)
+  const paired = pairSimilarUnmatchedRows(exactAlignment, oldTable, newTable, oldHtml, newHtml)
+  // Reorder so unpaired deleted rows appear at their *natural old-side
+  // position* — immediately after the preserved/paired row that came
+  // before them in old. Without this, runs of unpaired dels at low
+  // alignment indices end up emitted before any preserved row (the
+  // "deleted rows out of order" bug).
+  const alignment = orderAlignmentForEmission(paired)
 
   // Walk new's tableStart→tableEnd, substituting rows with their diffed
   // form so `<thead>`/`<tbody>` wrappers and inter-row whitespace are
   // preserved verbatim. Deleted rows (no position in new) are injected
-  // inline at their alignment position. If new has no rows at all, fall
-  // back to a from-scratch reconstruction so we still emit deleted rows.
+  // inline at the cursor's current position, which now corresponds to
+  // their natural old-side slot thanks to the reordering above. If new
+  // has no rows at all, fall back to a from-scratch reconstruction so
+  // we still emit deleted rows.
   if (newTable.rows.length === 0) {
     return rebuildStructurallyAlignedTable(oldHtml, newHtml, oldTable, newTable, alignment, diffCell)
   }
 
-  // Emit the table header (`<table>` + any `<thead>`/`<tbody>` opening
-  // text up to the first row) up-front so a leading run of deleted-only
-  // alignments doesn't slip in before the table opens.
   const out: string[] = []
   out.push(newHtml.slice(newTable.tableStart, newTable.rows[0].rowStart))
   let cursor = newTable.rows[0].rowStart
@@ -407,8 +412,6 @@ function diffStructurallyAlignedTable(
       }
       cursor = newRow.rowEnd
     } else if (align.oldIdx !== null) {
-      // Deleted row: inject inline at the current cursor (between the
-      // previously emitted row and the next one in new).
       out.push(emitFullRow(oldHtml, oldTable.rows[align.oldIdx], 'del', diffCell))
     }
   }
@@ -416,6 +419,79 @@ function diffStructurallyAlignedTable(
   return out.join('')
 }
 
+/**
+ * Reorders the alignment so emission produces rows in the visually-
+ * correct order. Each entry is assigned a fractional "position" in
+ * new's flow:
+ *
+ *   • Preserved/paired (oldIdx, newIdx): position = newIdx.
+ *   • Pure insert (null, newIdx): position = newIdx.
+ *   • Pure delete (oldIdx, null): position = newIdx-of-preserved-just-
+ *     before-this-oldIdx + 0.5. Dels at the same gap sort by oldIdx so
+ *     they appear in old's row order. The +0.5 places dels BEFORE any
+ *     insert at the same gap (insert at newIdx N1+1 has position N1+1
+ *     which is > N1+0.5), giving the natural "delete first, insert
+ *     second" reading order at a replaced position.
+ *
+ * This handles the full range:
+ *   • Run of unpaired dels at the start (no preserved predecessor):
+ *     position -0.5, sorted by oldIdx.
+ *   • Dels in the middle: positioned right after their preceding
+ *     preserved row.
+ *   • Dels at the end (no preserved successor): positioned after the
+ *     last preserved row.
+ *
+ * Without this reordering, a run of unpaired deletes at low alignment
+ * indices got emitted at cursor = first-new-row position — putting
+ * all deletes before any preserved row in the output, regardless of
+ * where they came from in old.
+ */
+function orderAlignmentForEmission(alignment: Alignment[]): Alignment[] {
+  const preserved: Array<{ oldIdx: number; newIdx: number }> = []
+  for (const a of alignment) {
+    if (a.oldIdx !== null && a.newIdx !== null) {
+      preserved.push({ oldIdx: a.oldIdx, newIdx: a.newIdx })
+    }
+  }
+  preserved.sort((a, b) => a.oldIdx - b.oldIdx)
+
+  // For a deleted row with oldIdx K, return the newIdx of the preserved
+  // entry with the largest oldIdx less than K, or -1 if none.
+  function newIdxOfPreservedBefore(oldIdx: number): number {
+    let result = -1
+    for (const p of preserved) {
+      if (p.oldIdx >= oldIdx) break
+      result = p.newIdx
+    }
+    return result
+  }
+
+  // Decorate each alignment with a fractional position. We use
+  // (primary, secondary) tuples so dels at the same gap sort by oldIdx
+  // (in old's row order) and inserts at the same newIdx stay stable.
+  const decorated = alignment.map((a, i) => {
+    let primary: number
+    let secondary: number
+    if (a.newIdx !== null) {
+      primary = a.newIdx
+      secondary = a.oldIdx === null ? 1 : 0 // preserved before pure-insert at same newIdx (rare)
+    } else {
+      // Pure delete
+      primary = newIdxOfPreservedBefore(a.oldIdx as number) + 0.5
+      secondary = a.oldIdx as number
+    }
+    return { entry: a, primary, secondary, originalIdx: i }
+  })
+
+  decorated.sort((a, b) => {
+    if (a.primary !== b.primary) return a.primary - b.primary
+    if (a.secondary !== b.secondary) return a.secondary - b.secondary
+    return a.originalIdx - b.originalIdx // stable
+  })
+
+  return decorated.map(d => d.entry)
+}
+
 function rebuildStructurallyAlignedTable(
   oldHtml: string,
   newHtml: string,

package/test/HtmlDiff.tables.matrix.spec.ts

@@ -56,6 +56,36 @@ describe('HtmlDiff — table operations matrix', () => {
   })
 
   describe('user-reported regression scenarios', () => {
+    it('multiple deleted rows including the last appear in old-order, AFTER preserved header (regression for "deleted rows out of order")', () => {
+      // The user's exact scenario: column added + multiple rows deleted
+      // including the last row, with content edits that prevent fuzzy
+      // pairing of some rows. Before the fix, all deletes ended up at
+      // the START of the output (above the header) because they were
+      // emitted at cursor=row-0-start, regardless of where they came
+      // from in old.
+      const oldHtml =
+        '<table>' +
+        '<tr><th>Party</th><th>Form</th><th>Date</th></tr>' +
+        '<tr><td>Party A</td><td>IRS Forms W-8BEN-E</td><td>(i) Upon execution.</td></tr>' +
+        '<tr><td>Party B</td><td>IRS Form W-9, as applicable (or any successor thereto).</td><td>(i) Upon execution.</td></tr>' +
+        '<tr><td>Party A and Party B</td><td>Any document required.</td><td>Promptly upon reasonable demand.</td></tr>' +
+        '</table>'
+      const newHtml =
+        '<table>' +
+        '<tr><th>Party</th><th>Extra column</th><th>Form</th><th>Date</th></tr>' +
+        "<tr><td>Party A</td><td>Yes</td><td>IRS Forms W-8BEN-E. Here's some extra content</td><td>(i) Upon execution.</td></tr>" +
+        '<tr><td>Party B</td><td>A</td><td>IRS Form W</td><td>Yeah OK</td></tr>' +
+        '</table>'
+
+      const result = HtmlDiff.execute(oldHtml, newHtml)
+      assertStructurallyValid(result, oldHtml, newHtml, 'multiple deleted rows out of order')
+      // The header (preserved with column added) MUST come first.
+      const headerIdx = result.indexOf('<tr><th>Party</th>')
+      const firstDelIdx = result.indexOf("<tr class='diffdel'>")
+      expect(headerIdx).toBeGreaterThanOrEqual(0)
+      expect(firstDelIdx).toBeGreaterThan(headerIdx)
+    })
+
     it('column added + empty row inserted in middle (regression for issue with blank row)', () => {
       const oldHtml =
         '<table>' +
@@ -126,6 +156,16 @@ function allSingleOperations(): Op[] {
           })
         ),
     },
+    {
+      name: 'delete-multiple-rows-from-end',
+      apply: t =>
+        renderTable(
+          mutate(t, m => {
+            m.deleteRow(t.rows.length - 1)
+            m.deleteRow(t.rows.length - 1)
+          })
+        ),
+    },
     {
       name: 'add-column-start',
       apply: t => renderTable(mutate(t, m => m.addColumnAt(0, ['NewHeader', 'newA', 'newB', 'newC']))),

package/test/HtmlDiff.tables.spec.ts

@@ -802,6 +802,86 @@ describe('HtmlDiff — tables', () => {
       )
     })
 
+    it('preserves data-* attributes on a <tr> in an inserted row alongside the injected class', () => {
+      // The frontend uses `data-behaviour` (and similar `data-*` attrs)
+      // on `<tr>` to drive table semantics. The diff must keep these
+      // attributes verbatim AND add `class='diffins'` for the structural
+      // change. (Whether downstream DOMPurify allows `data-*` is a
+      // separate concern — htmldiff's job is to not lose them.)
+      const oldHtml = '<table><tr><td>A</td></tr></table>'
+      const newHtml = '<table><tr><td>A</td></tr><tr data-behaviour="data"><td>B</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          '<tr><td>A</td></tr>' +
+          '<tr data-behaviour="data" class=\'diffins\'>' +
+          "<td class='diffins'><ins class='diffins'>B</ins></td>" +
+          '</tr>' +
+          '</table>'
+      )
+    })
+
+    it('preserves data-* attributes on a <tr> in a deleted row alongside the injected class', () => {
+      const oldHtml = '<table><tr><td>A</td></tr><tr data-behaviour="data"><td>B</td></tr></table>'
+      const newHtml = '<table><tr><td>A</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          '<tr><td>A</td></tr>' +
+          '<tr data-behaviour="data" class=\'diffdel\'>' +
+          "<td class='diffdel'><del class='diffdel'>B</del></td>" +
+          '</tr>' +
+          '</table>'
+      )
+    })
+
+    it('preserves multiple data-* attributes on a <tr> in an inserted row', () => {
+      const oldHtml = '<table><tr><td>A</td></tr></table>'
+      const newHtml = '<table><tr><td>A</td></tr><tr data-behaviour="data" id="row2" data-x="y"><td>B</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          '<tr><td>A</td></tr>' +
+          '<tr data-behaviour="data" id="row2" data-x="y" class=\'diffins\'>' +
+          "<td class='diffins'><ins class='diffins'>B</ins></td>" +
+          '</tr>' +
+          '</table>'
+      )
+    })
+
+    it('preserves data-* attribute on a <tr> when the row passes through column-add path (preserved row)', () => {
+      // The row exists in both old and new but cell counts differ
+      // (column added) — goes through diffPreservedRow → multi-column
+      // detection path. Attribute should still be preserved verbatim
+      // via rowHeaderSlice.
+      const oldHtml = '<table><tr><td>A</td></tr><tr data-behaviour="data"><td>B</td><td>C</td></tr></table>'
+      const newHtml =
+        '<table><tr><td>A</td><td>X</td></tr><tr data-behaviour="data"><td>B</td><td>EXTRA</td><td>C</td></tr></table>'
+
+      const result = HtmlDiff.execute(oldHtml, newHtml)
+      expect(result).toContain('<tr data-behaviour="data">')
+    })
+
+    it('preserves data-* attribute on a <tr> when the row passes through fuzzy-matching with content edit', () => {
+      // The row gets fuzzy-matched after exact LCS misses the content
+      // edit. Goes through diffStructurallyAlignedTable → fuzzy pair →
+      // diffPreservedRow. Attribute should still flow through.
+      const oldHtml =
+        '<table>' +
+        '<tr><td>A</td></tr>' +
+        '<tr data-behaviour="data"><td>The quick brown fox jumps over.</td></tr>' +
+        '</table>'
+      const newHtml =
+        '<table>' +
+        '<tr><td>A</td></tr>' +
+        '<tr data-behaviour="data"><td>The quick brown fox jumps over the lazy dog.</td></tr>' +
+        '<tr><td>NEW</td></tr>' +
+        '</table>'
+
+      const result = HtmlDiff.execute(oldHtml, newHtml)
+      expect(result).toContain('<tr data-behaviour="data">')
+    })
+
     it('preserves <table> attributes verbatim from new (no diff marker on attribute changes)', () => {
       const oldHtml = '<table border="1"><tr><td>A</td></tr></table>'
       const newHtml = '<table border="2" style="width:100%"><tr><td>A</td></tr></table>'
@@ -1067,6 +1147,66 @@ describe('HtmlDiff — tables', () => {
   // containing comments, CDATA, mixed-case tags, foreign attribute values
   // that look like class= patterns, etc.
   describe('hostile / adversarial inputs', () => {
+    it('handles a processing instruction (<?xml?>) in cell content', () => {
+      // parseOpeningTagAt has explicit handling for `<?...?>`. Pin
+      // that path so a future refactor can't break it.
+      const oldHtml = '<table><tr><td>A</td></tr></table>'
+      const newHtml = '<table><tr><td>A</td></tr><tr><td><?xml version="1.0"?>text</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          '<tr><td>A</td></tr>' +
+          "<tr class='diffins'><td class='diffins'>" +
+          '<?xml version="1.0"?>' +
+          "<ins class='diffins'>text</ins>" +
+          '</td></tr>' +
+          '</table>'
+      )
+    })
+
+    it('handles an unquoted class attribute value when injecting diffins', () => {
+      // findClassAttribute's unquoted-value branch wasn't exercised —
+      // most generators emit quoted values. HTML5 permits unquoted
+      // simple values, so support them.
+      const oldHtml = '<table><tr><td>A</td></tr></table>'
+      const newHtml = '<table><tr><td>A</td></tr><tr><td class=existing>B</td></tr></table>'
+
+      const result = HtmlDiff.execute(oldHtml, newHtml)
+      // The existing unquoted class is preserved; the injected class
+      // appends. Exact form depends on injectClass's writeback (it
+      // rewrites the attribute value at its parsed range).
+      expect(result).toContain('class=existing')
+      expect(result).toContain('diffins')
+    })
+
+    it('passes content through verbatim when a cell contains a lone `<` (malformed)', () => {
+      // wrapInlineTextRuns sees `<` and calls parseOpeningTagAt, which
+      // returns null for a lone `<` with no closing `>`. The function
+      // then bails by pushing the rest verbatim. The output isn't
+      // pretty but it's predictable and doesn't crash.
+      const oldHtml = '<table><tr><td>A</td></tr></table>'
+      const newHtml = '<table><tr><td>A</td></tr><tr><td>fee < cost</td></tr></table>'
+
+      const result = HtmlDiff.execute(oldHtml, newHtml)
+      // The inserted row should still be marked.
+      expect(result).toContain("<tr class='diffins'>")
+      // The literal `<` (with no closing >) should appear in the output.
+      expect(result).toContain('fee')
+      expect(result).toContain('cost')
+    })
+
+    it('handles a malformed table tag missing its closing > (no crash, falls back)', () => {
+      // findTopLevelTables → parseOpeningTagAt returns null → scanner
+      // increments i and continues. preprocessTables ends up with no
+      // valid tables and falls through to the word-level diff.
+      const oldHtml = '<p>before</p><table<tr><td>A</td></tr></table><p>after</p>'
+      const newHtml = '<p>before</p><table<tr><td>B</td></tr></table><p>after</p>'
+
+      const result = HtmlDiff.execute(oldHtml, newHtml)
+      // Should not crash. Should produce *some* del/ins markers.
+      expect(result.length).toBeGreaterThan(0)
+    })
+
     it('passes an HTML comment with embedded > through cell content unmolested', () => {
       // Word-exported HTML routinely has comments with `>` inside (e.g.
       // conditional comments). Before the parser fix, the scanner cut
@@ -1433,6 +1573,152 @@ describe('HtmlDiff — tables', () => {
     })
   })
 
+  // Coverage gaps surfaced by the v8 report: the cell-LCS fallback path
+  // (diffStructurallyAlignedRow + cellKey + pairSimilarUnmatchedCells) is
+  // only entered when the per-row column delta exceeds MAX_COLUMN_DELTA
+  // (6) or the row's logical width exceeds MAX_COLUMN_SEARCH_WIDTH (40).
+  // None of the existing tests trigger that. These tests exercise the
+  // fallback and pin its behaviour.
+  describe('cell-LCS fallback for very-wide column changes', () => {
+    it('handles 8 columns inserted alongside existing cells (delta > MAX_COLUMN_DELTA)', () => {
+      // Old: 3 cells. New: 11 cells (8 columns added). Exact-LCS finds
+      // A, B, C as matches; the 8 unmatched new cells are inserted.
+      const oldHtml = '<table><tr><td>A</td><td>B</td><td>C</td></tr></table>'
+      const newHtml =
+        '<table><tr><td>A</td>' +
+        '<td>X1</td><td>X2</td><td>X3</td><td>X4</td>' +
+        '<td>X5</td><td>X6</td><td>X7</td><td>X8</td>' +
+        '<td>B</td><td>C</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table><tr>' +
+          '<td>A</td>' +
+          "<td class='diffins'><ins class='diffins'>X1</ins></td>" +
+          "<td class='diffins'><ins class='diffins'>X2</ins></td>" +
+          "<td class='diffins'><ins class='diffins'>X3</ins></td>" +
+          "<td class='diffins'><ins class='diffins'>X4</ins></td>" +
+          "<td class='diffins'><ins class='diffins'>X5</ins></td>" +
+          "<td class='diffins'><ins class='diffins'>X6</ins></td>" +
+          "<td class='diffins'><ins class='diffins'>X7</ins></td>" +
+          "<td class='diffins'><ins class='diffins'>X8</ins></td>" +
+          '<td>B</td>' +
+          '<td>C</td>' +
+          '</tr></table>'
+      )
+    })
+
+    it('handles 8 columns inserted alongside a content edit (cell fuzzy match in fallback)', () => {
+      // The fallback path's pairSimilarUnmatchedCells should pair the
+      // edited cell (OldText → NewText) by content similarity so it
+      // emits as one content-edit cell, not as delete + insert.
+      const oldHtml = '<table><tr><td>A</td><td>OldText</td><td>C</td></tr></table>'
+      const newHtml =
+        '<table><tr><td>A</td>' +
+        '<td>X1</td><td>X2</td><td>X3</td><td>X4</td>' +
+        '<td>X5</td><td>X6</td><td>X7</td>' +
+        '<td>NewText</td>' +
+        '<td>C</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table><tr>' +
+          '<td>A</td>' +
+          "<td class='diffins'><ins class='diffins'>X1</ins></td>" +
+          "<td class='diffins'><ins class='diffins'>X2</ins></td>" +
+          "<td class='diffins'><ins class='diffins'>X3</ins></td>" +
+          "<td class='diffins'><ins class='diffins'>X4</ins></td>" +
+          "<td class='diffins'><ins class='diffins'>X5</ins></td>" +
+          "<td class='diffins'><ins class='diffins'>X6</ins></td>" +
+          "<td class='diffins'><ins class='diffins'>X7</ins></td>" +
+          "<td><del class='diffmod'>OldText</del><ins class='diffmod'>NewText</ins></td>" +
+          '<td>C</td>' +
+          '</tr></table>'
+      )
+    })
+
+    it('handles many columns deleted (delta < -MAX_COLUMN_DELTA)', () => {
+      const oldHtml =
+        '<table><tr><td>A</td>' +
+        '<td>X1</td><td>X2</td><td>X3</td><td>X4</td>' +
+        '<td>X5</td><td>X6</td><td>X7</td><td>X8</td>' +
+        '<td>B</td><td>C</td></tr></table>'
+      const newHtml = '<table><tr><td>A</td><td>B</td><td>C</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table><tr>' +
+          '<td>A</td>' +
+          "<td class='diffdel'><del class='diffdel'>X1</del></td>" +
+          "<td class='diffdel'><del class='diffdel'>X2</del></td>" +
+          "<td class='diffdel'><del class='diffdel'>X3</del></td>" +
+          "<td class='diffdel'><del class='diffdel'>X4</del></td>" +
+          "<td class='diffdel'><del class='diffdel'>X5</del></td>" +
+          "<td class='diffdel'><del class='diffdel'>X6</del></td>" +
+          "<td class='diffdel'><del class='diffdel'>X7</del></td>" +
+          "<td class='diffdel'><del class='diffdel'>X8</del></td>" +
+          '<td>B</td>' +
+          '<td>C</td>' +
+          '</tr></table>'
+      )
+    })
+
+    it('preserves whitespace between inline elements in a fully-inserted cell (no spurious <ins>)', () => {
+      // wrapInlineTextRuns walks content; when it encounters
+      // whitespace-only text between two inline elements (e.g. the
+      // space between `<strong>` and `<em>`), it passes the whitespace
+      // through unwrapped — the body of the `else` branch on the
+      // text-run path.
+      const oldHtml = '<table><tr><td>A</td></tr></table>'
+      const newHtml = '<table><tr><td>A</td></tr><tr><td><strong>a</strong> <em>b</em></td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          '<tr><td>A</td></tr>' +
+          "<tr class='diffins'><td class='diffins'>" +
+          "<strong><ins class='diffins'>a</ins></strong> <em><ins class='diffins'>b</ins></em>" +
+          '</td></tr>' +
+          '</table>'
+      )
+    })
+
+    it('handles a colspan-changed row where some cells have matching colspans', () => {
+      // diffColspanChangedRow walks cells; when oSpan === nSpan for a
+      // pair, it emits a content diff for that cell pair. This branch
+      // wasn't exercised — needs a row with BOTH a colspan change AND
+      // matching-colspan cells in the same row.
+      const oldHtml =
+        '<table><tr>' + '<td>FirstA</td>' + '<td>MidA</td><td>MidB</td>' + '<td>LastA</td>' + '</tr></table>'
+      const newHtml =
+        '<table><tr>' + '<td>FirstB</td>' + '<td colspan="2">Merged AB</td>' + '<td>LastB</td>' + '</tr></table>'
+
+      const result = HtmlDiff.execute(oldHtml, newHtml)
+      // First and last cells should diff content cell-by-cell (matching
+      // colspans = 1 on both sides); middle two old cells merge into
+      // one colspan=2 cell tagged 'mod colspan'.
+      expect(result).toContain("<del class='diffmod'>FirstA</del>")
+      expect(result).toContain("<ins class='diffmod'>FirstB</ins>")
+      expect(result).toContain('colspan="2" class=\'mod colspan\'')
+      expect(result).toContain("<del class='diffmod'>LastA</del>")
+      expect(result).toContain("<ins class='diffmod'>LastB</ins>")
+    })
+
+    it('handles row wider than MAX_COLUMN_SEARCH_WIDTH (40 cells) — fallback to cell-LCS', () => {
+      // 50-cell row in old, 51-cell row in new (1 column added at
+      // start). MAX_COLUMN_SEARCH_WIDTH guard prevents the
+      // combinatorial search; fallback to cell-LCS which finds 50
+      // exact matches and the 1 new cell as an insertion.
+      const oldCells = Array.from({ length: 50 }, (_, i) => `<td>c${i}</td>`).join('')
+      const newCells = `<td>NEW</td>${oldCells}`
+      const oldHtml = `<table><tr>${oldCells}</tr></table>`
+      const newHtml = `<table><tr>${newCells}</tr></table>`
+
+      const result = HtmlDiff.execute(oldHtml, newHtml)
+      // We should see exactly one inserted cell and 50 preserved cells.
+      expect(result).toContain("<td class='diffins'><ins class='diffins'>NEW</ins></td>")
+      // Sanity: total td count is 51 (no phantoms).
+      const tdCount = (result.match(/<td[\s>]/g) || []).length
+      expect(tdCount).toBe(51)
+    })
+  })
+
   describe('attribute edge cases', () => {
     it('does not introduce a leading space when the existing class attribute is empty', () => {
       const oldHtml = '<table><tr><td>A</td></tr></table>'