@createiq/htmldiff 1.0.5 → 1.1.0

package/test/HtmlDiff.tables.spec.ts

@@ -0,0 +1,2069 @@
+import { describe, expect, it } from 'vitest'
+
+import HtmlDiff from '../src/HtmlDiff'
+
+// Tests defining the expected blackline behaviour for HTML tables.
+// The reference behaviour is Microsoft Word's track-changes representation
+// of the same edit. Where Word's output is unclear, the test is marked as
+// `it.todo` until we can capture it from a real document.
+describe('HtmlDiff — tables', () => {
+  describe('cell content edits', () => {
+    it('marks an inline text change inside a single cell', () => {
+      const oldHtml = '<table><tr><td>Foo</td><td>Bar</td></tr></table>'
+      const newHtml = '<table><tr><td>Foo</td><td>Baz</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        "<table><tr><td>Foo</td><td><del class='diffmod'>Bar</del><ins class='diffmod'>Baz</ins></td></tr></table>"
+      )
+    })
+
+    it('marks inline text changes across multiple cells in the same row', () => {
+      const oldHtml = '<table><tr><td>Apple</td><td>Banana</td><td>Cherry</td></tr></table>'
+      const newHtml = '<table><tr><td>Apricot</td><td>Banana</td><td>Coconut</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table><tr>' +
+          "<td><del class='diffmod'>Apple</del><ins class='diffmod'>Apricot</ins></td>" +
+          '<td>Banana</td>' +
+          "<td><del class='diffmod'>Cherry</del><ins class='diffmod'>Coconut</ins></td>" +
+          '</tr></table>'
+      )
+    })
+
+    it('marks inline text changes across multiple cells on different rows', () => {
+      const oldHtml = '<table><tr><td>Apple</td><td>Banana</td></tr><tr><td>Cherry</td><td>Date</td></tr></table>'
+      const newHtml = '<table><tr><td>Apricot</td><td>Banana</td></tr><tr><td>Cherry</td><td>Durian</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          "<tr><td><del class='diffmod'>Apple</del><ins class='diffmod'>Apricot</ins></td><td>Banana</td></tr>" +
+          "<tr><td>Cherry</td><td><del class='diffmod'>Date</del><ins class='diffmod'>Durian</ins></td></tr>" +
+          '</table>'
+      )
+    })
+
+    it('appends inserted text inside a cell when content is added', () => {
+      const oldHtml = '<table><tr><td>Foo</td><td>Bar</td></tr></table>'
+      const newHtml = '<table><tr><td>Foo</td><td>Bar baz</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        "<table><tr><td>Foo</td><td>Bar<ins class='diffins'>&nbsp;baz</ins></td></tr></table>"
+      )
+    })
+
+    it('strikes through removed text inside a cell when content is deleted', () => {
+      const oldHtml = '<table><tr><td>Foo</td><td>Bar baz</td></tr></table>'
+      const newHtml = '<table><tr><td>Foo</td><td>Bar</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        "<table><tr><td>Foo</td><td>Bar<del class='diffdel'>&nbsp;baz</del></td></tr></table>"
+      )
+    })
+
+    it('marks formatting changes inside a cell', () => {
+      const oldHtml = '<table><tr><td>plain text</td></tr></table>'
+      const newHtml = '<table><tr><td><strong>plain text</strong></td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        "<table><tr><td><strong><ins class='mod strong'>plain text</ins></strong></td></tr></table>"
+      )
+    })
+  })
+
+  describe('content moved between cells', () => {
+    // Word does not track cross-cell moves; it shows each cell as an
+    // independent edit. A cell that loses its old content and gains new
+    // content renders as <del>old</del><ins>new</ins>, and a cell that just
+    // loses content renders as <del>old</del>. There is no "moved" marker.
+    // Cell-aware preprocessing in TableDiff is what aligns cells positionally
+    // when row × cell dimensions match, so these per-cell edits emit cleanly.
+    it('marks each cell with independent del/ins when content shifts right by one cell', () => {
+      const oldHtml = '<table><tr><td>A</td><td>B</td><td>C</td></tr></table>'
+      const newHtml = '<table><tr><td></td><td>A</td><td>B</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table><tr>' +
+          "<td><del class='diffdel'>A</del></td>" +
+          "<td><del class='diffmod'>B</del><ins class='diffmod'>A</ins></td>" +
+          "<td><del class='diffmod'>C</del><ins class='diffmod'>B</ins></td>" +
+          '</tr></table>'
+      )
+    })
+
+    it('marks each cell with independent del/ins when content shifts left by one cell', () => {
+      const oldHtml = '<table><tr><td>A</td><td>B</td><td>C</td></tr></table>'
+      const newHtml = '<table><tr><td>B</td><td>C</td><td></td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table><tr>' +
+          "<td><del class='diffmod'>A</del><ins class='diffmod'>B</ins></td>" +
+          "<td><del class='diffmod'>B</del><ins class='diffmod'>C</ins></td>" +
+          "<td><del class='diffdel'>C</del></td>" +
+          '</tr></table>'
+      )
+    })
+
+    it('marks each cell with independent del/ins when content is swapped between two cells', () => {
+      const oldHtml = '<table><tr><td>A</td><td>B</td></tr></table>'
+      const newHtml = '<table><tr><td>B</td><td>A</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table><tr>' +
+          "<td><del class='diffmod'>A</del><ins class='diffmod'>B</ins></td>" +
+          "<td><del class='diffmod'>B</del><ins class='diffmod'>A</ins></td>" +
+          '</tr></table>'
+      )
+    })
+
+    it('marks each cell with independent del/ins when content is moved across rows', () => {
+      const oldHtml = '<table><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table>'
+      const newHtml = '<table><tr><td>C</td><td>D</td></tr><tr><td>A</td><td>B</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          '<tr>' +
+          "<td><del class='diffmod'>A</del><ins class='diffmod'>C</ins></td>" +
+          "<td><del class='diffmod'>B</del><ins class='diffmod'>D</ins></td>" +
+          '</tr>' +
+          '<tr>' +
+          "<td><del class='diffmod'>C</del><ins class='diffmod'>A</ins></td>" +
+          "<td><del class='diffmod'>D</del><ins class='diffmod'>B</ins></td>" +
+          '</tr>' +
+          '</table>'
+      )
+    })
+  })
+
+  // Inserted rows get `class='diffins'` on the <tr> AND on every <td> in
+  // the row, with each cell's content wrapped in <ins>. The triple class
+  // (tr/td/ins) lets stylesheets pick whichever level they want — Word's
+  // tinted-row + underlined-text pair maps naturally onto this.
+  describe('add rows', () => {
+    it('marks a row added at the end of a table', () => {
+      const oldHtml = '<table><tr><td>A</td><td>B</td></tr></table>'
+      const newHtml = '<table><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          '<tr><td>A</td><td>B</td></tr>' +
+          "<tr class='diffins'>" +
+          "<td class='diffins'><ins class='diffins'>C</ins></td>" +
+          "<td class='diffins'><ins class='diffins'>D</ins></td>" +
+          '</tr>' +
+          '</table>'
+      )
+    })
+
+    it('marks a row added at the start of a table', () => {
+      const oldHtml = '<table><tr><td>A</td><td>B</td></tr></table>'
+      const newHtml = '<table><tr><td>X</td><td>Y</td></tr><tr><td>A</td><td>B</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          "<tr class='diffins'>" +
+          "<td class='diffins'><ins class='diffins'>X</ins></td>" +
+          "<td class='diffins'><ins class='diffins'>Y</ins></td>" +
+          '</tr>' +
+          '<tr><td>A</td><td>B</td></tr>' +
+          '</table>'
+      )
+    })
+
+    it('marks a row added in the middle of a table', () => {
+      const oldHtml = '<table><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table>'
+      const newHtml =
+        '<table><tr><td>A</td><td>B</td></tr><tr><td>X</td><td>Y</td></tr><tr><td>C</td><td>D</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          '<tr><td>A</td><td>B</td></tr>' +
+          "<tr class='diffins'>" +
+          "<td class='diffins'><ins class='diffins'>X</ins></td>" +
+          "<td class='diffins'><ins class='diffins'>Y</ins></td>" +
+          '</tr>' +
+          '<tr><td>C</td><td>D</td></tr>' +
+          '</table>'
+      )
+    })
+
+    it('marks multiple consecutive rows added at the end', () => {
+      const oldHtml = '<table><tr><td>A</td><td>B</td></tr></table>'
+      const newHtml =
+        '<table><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr><tr><td>E</td><td>F</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          '<tr><td>A</td><td>B</td></tr>' +
+          "<tr class='diffins'>" +
+          "<td class='diffins'><ins class='diffins'>C</ins></td>" +
+          "<td class='diffins'><ins class='diffins'>D</ins></td>" +
+          '</tr>' +
+          "<tr class='diffins'>" +
+          "<td class='diffins'><ins class='diffins'>E</ins></td>" +
+          "<td class='diffins'><ins class='diffins'>F</ins></td>" +
+          '</tr>' +
+          '</table>'
+      )
+    })
+
+    it('marks non-consecutive rows added in different parts of the table', () => {
+      const oldHtml = '<table><tr><td>A</td></tr><tr><td>C</td></tr></table>'
+      const newHtml = '<table><tr><td>X</td></tr><tr><td>A</td></tr><tr><td>C</td></tr><tr><td>Y</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          "<tr class='diffins'><td class='diffins'><ins class='diffins'>X</ins></td></tr>" +
+          '<tr><td>A</td></tr>' +
+          '<tr><td>C</td></tr>' +
+          "<tr class='diffins'><td class='diffins'><ins class='diffins'>Y</ins></td></tr>" +
+          '</table>'
+      )
+    })
+
+    it('marks a row containing formatted content as added', () => {
+      const oldHtml = '<table><tr><td>A</td></tr></table>'
+      const newHtml = '<table><tr><td>A</td></tr><tr><td><strong>B</strong></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'>B</ins></strong></td></tr>" +
+          '</table>'
+      )
+    })
+
+    // Fuzzy row matching: a row with a minor content edit alongside an
+    // unrelated row addition should be matched as an edit (cell-level diff)
+    // rather than treated as a whole-row delete + reinsert. The
+    // character-level prefix+suffix similarity above ROW_FUZZY_THRESHOLD
+    // is what makes this happen.
+    it('matches a row with a minor edit alongside a newly added row', () => {
+      const oldHtml = '<table><tr><td>Same row</td></tr><tr><td>Edited row</td></tr></table>'
+      const newHtml = '<table><tr><td>Same row</td></tr><tr><td>Edited rowX</td></tr><tr><td>New row</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          '<tr><td>Same row</td></tr>' +
+          "<tr><td>Edited <del class='diffmod'>row</del><ins class='diffmod'>rowX</ins></td></tr>" +
+          "<tr class='diffins'><td class='diffins'><ins class='diffins'>New row</ins></td></tr>" +
+          '</table>'
+      )
+    })
+
+    it('still treats wholly-different rows as deleted+inserted when fuzzy similarity is too low', () => {
+      // Different row counts, so we go through the row-LCS path. The
+      // unmatched old row "Hello world" and new row "Goodbye there" share
+      // no prefix/suffix, so fuzzy matching declines to pair them and
+      // they remain as a separate delete + insert (with the unrelated
+      // "New row" also inserted).
+      const oldHtml = '<table><tr><td>Same</td></tr><tr><td>Hello world</td></tr></table>'
+      const newHtml = '<table><tr><td>Same</td></tr><tr><td>Goodbye there</td></tr><tr><td>New row</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          '<tr><td>Same</td></tr>' +
+          "<tr class='diffdel'><td class='diffdel'><del class='diffdel'>Hello world</del></td></tr>" +
+          "<tr class='diffins'><td class='diffins'><ins class='diffins'>Goodbye there</ins></td></tr>" +
+          "<tr class='diffins'><td class='diffins'><ins class='diffins'>New row</ins></td></tr>" +
+          '</table>'
+      )
+    })
+  })
+
+  // Inserted columns get `class='diffins'` on each new <td> (since the
+  // <tr> still contains preserved cells, the row itself isn't tagged).
+  describe('add columns', () => {
+    it('marks a column added at the end of a table', () => {
+      const oldHtml = '<table><tr><td>A</td></tr><tr><td>C</td></tr></table>'
+      const newHtml = '<table><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          "<tr><td>A</td><td class='diffins'><ins class='diffins'>B</ins></td></tr>" +
+          "<tr><td>C</td><td class='diffins'><ins class='diffins'>D</ins></td></tr>" +
+          '</table>'
+      )
+    })
+
+    it('marks a column added at the start of a table', () => {
+      const oldHtml = '<table><tr><td>A</td></tr><tr><td>C</td></tr></table>'
+      const newHtml = '<table><tr><td>X</td><td>A</td></tr><tr><td>Y</td><td>C</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          "<tr><td class='diffins'><ins class='diffins'>X</ins></td><td>A</td></tr>" +
+          "<tr><td class='diffins'><ins class='diffins'>Y</ins></td><td>C</td></tr>" +
+          '</table>'
+      )
+    })
+
+    it('marks a column added in the middle of a table', () => {
+      const oldHtml = '<table><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table>'
+      const newHtml = '<table><tr><td>A</td><td>X</td><td>B</td></tr><tr><td>C</td><td>Y</td><td>D</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          "<tr><td>A</td><td class='diffins'><ins class='diffins'>X</ins></td><td>B</td></tr>" +
+          "<tr><td>C</td><td class='diffins'><ins class='diffins'>Y</ins></td><td>D</td></tr>" +
+          '</table>'
+      )
+    })
+
+    it('marks multiple consecutive columns added at the end', () => {
+      const oldHtml = '<table><tr><td>A</td></tr><tr><td>C</td></tr></table>'
+      const newHtml =
+        '<table><tr><td>A</td><td>B1</td><td>B2</td></tr><tr><td>C</td><td>D1</td><td>D2</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          '<tr>' +
+          '<td>A</td>' +
+          "<td class='diffins'><ins class='diffins'>B1</ins></td>" +
+          "<td class='diffins'><ins class='diffins'>B2</ins></td>" +
+          '</tr>' +
+          '<tr>' +
+          '<td>C</td>' +
+          "<td class='diffins'><ins class='diffins'>D1</ins></td>" +
+          "<td class='diffins'><ins class='diffins'>D2</ins></td>" +
+          '</tr>' +
+          '</table>'
+      )
+    })
+  })
+
+  // Deleted rows mirror inserted rows: `class='diffdel'` on <tr> and on
+  // every <td>, with each cell content wrapped in <del>.
+  describe('delete rows', () => {
+    it('marks a row deleted from the end of a table', () => {
+      const oldHtml = '<table><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table>'
+      const newHtml = '<table><tr><td>A</td><td>B</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          '<tr><td>A</td><td>B</td></tr>' +
+          "<tr class='diffdel'>" +
+          "<td class='diffdel'><del class='diffdel'>C</del></td>" +
+          "<td class='diffdel'><del class='diffdel'>D</del></td>" +
+          '</tr>' +
+          '</table>'
+      )
+    })
+
+    it('marks a row deleted from the start of a table', () => {
+      const oldHtml = '<table><tr><td>X</td><td>Y</td></tr><tr><td>A</td><td>B</td></tr></table>'
+      const newHtml = '<table><tr><td>A</td><td>B</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          "<tr class='diffdel'>" +
+          "<td class='diffdel'><del class='diffdel'>X</del></td>" +
+          "<td class='diffdel'><del class='diffdel'>Y</del></td>" +
+          '</tr>' +
+          '<tr><td>A</td><td>B</td></tr>' +
+          '</table>'
+      )
+    })
+
+    it('marks a row deleted from the middle of a table', () => {
+      const oldHtml =
+        '<table><tr><td>A</td><td>B</td></tr><tr><td>X</td><td>Y</td></tr><tr><td>C</td><td>D</td></tr></table>'
+      const newHtml = '<table><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          '<tr><td>A</td><td>B</td></tr>' +
+          "<tr class='diffdel'>" +
+          "<td class='diffdel'><del class='diffdel'>X</del></td>" +
+          "<td class='diffdel'><del class='diffdel'>Y</del></td>" +
+          '</tr>' +
+          '<tr><td>C</td><td>D</td></tr>' +
+          '</table>'
+      )
+    })
+
+    it('marks multiple consecutive rows deleted', () => {
+      const oldHtml = '<table><tr><td>A</td></tr><tr><td>X</td></tr><tr><td>Y</td></tr><tr><td>B</td></tr></table>'
+      const newHtml = '<table><tr><td>A</td></tr><tr><td>B</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          '<tr><td>A</td></tr>' +
+          "<tr class='diffdel'><td class='diffdel'><del class='diffdel'>X</del></td></tr>" +
+          "<tr class='diffdel'><td class='diffdel'><del class='diffdel'>Y</del></td></tr>" +
+          '<tr><td>B</td></tr>' +
+          '</table>'
+      )
+    })
+
+    it('marks every row deleted when the table is emptied of body rows', () => {
+      const oldHtml = '<table><tr><td>A</td></tr><tr><td>B</td></tr></table>'
+      const newHtml = '<table></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          "<tr class='diffdel'><td class='diffdel'><del class='diffdel'>A</del></td></tr>" +
+          "<tr class='diffdel'><td class='diffdel'><del class='diffdel'>B</del></td></tr>" +
+          '</table>'
+      )
+    })
+  })
+
+  // Word does not track column deletion (it warns "this action won't be
+  // marked as a change"), so these expectations are our own design: each
+  // deleted <td> gets `class='diffdel'` and its content is wrapped in
+  // <del>, mirroring the per-cell behaviour of delete-row.
+  describe('delete columns', () => {
+    it('marks a column deleted from the end of a table', () => {
+      const oldHtml = '<table><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table>'
+      const newHtml = '<table><tr><td>A</td></tr><tr><td>C</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          "<tr><td>A</td><td class='diffdel'><del class='diffdel'>B</del></td></tr>" +
+          "<tr><td>C</td><td class='diffdel'><del class='diffdel'>D</del></td></tr>" +
+          '</table>'
+      )
+    })
+
+    it('marks a column deleted from the start of a table', () => {
+      const oldHtml = '<table><tr><td>X</td><td>A</td></tr><tr><td>Y</td><td>C</td></tr></table>'
+      const newHtml = '<table><tr><td>A</td></tr><tr><td>C</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          "<tr><td class='diffdel'><del class='diffdel'>X</del></td><td>A</td></tr>" +
+          "<tr><td class='diffdel'><del class='diffdel'>Y</del></td><td>C</td></tr>" +
+          '</table>'
+      )
+    })
+
+    it('marks a column deleted from the middle of a table', () => {
+      const oldHtml = '<table><tr><td>A</td><td>X</td><td>B</td></tr><tr><td>C</td><td>Y</td><td>D</td></tr></table>'
+      const newHtml = '<table><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          "<tr><td>A</td><td class='diffdel'><del class='diffdel'>X</del></td><td>B</td></tr>" +
+          "<tr><td>C</td><td class='diffdel'><del class='diffdel'>Y</del></td><td>D</td></tr>" +
+          '</table>'
+      )
+    })
+
+    it('marks multiple consecutive columns deleted from the end', () => {
+      const oldHtml =
+        '<table><tr><td>A</td><td>B1</td><td>B2</td></tr><tr><td>C</td><td>D1</td><td>D2</td></tr></table>'
+      const newHtml = '<table><tr><td>A</td></tr><tr><td>C</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          '<tr>' +
+          '<td>A</td>' +
+          "<td class='diffdel'><del class='diffdel'>B1</del></td>" +
+          "<td class='diffdel'><del class='diffdel'>B2</del></td>" +
+          '</tr>' +
+          '<tr>' +
+          '<td>C</td>' +
+          "<td class='diffdel'><del class='diffdel'>D1</del></td>" +
+          "<td class='diffdel'><del class='diffdel'>D2</del></td>" +
+          '</tr>' +
+          '</table>'
+      )
+    })
+  })
+
+  // Word does not track merge/split (it warns "this action won't be marked
+  // as a change"), so the design below is our own. Convention: render the
+  // new structure as-is, but tag merged/split cells with `class='mod
+  // colspan'` or `class='mod rowspan'` so stylesheets can show the
+  // structural change without the misleading visual noise of synthetic
+  // del/ins around content that didn't actually change. The `mod` prefix
+  // matches htmldiff's existing convention for "modified" markers (e.g.
+  // `mod strong` for bold-formatting changes).
+  describe('merge cells horizontally (colspan)', () => {
+    it('marks two adjacent cells merged into one colspan=2 cell', () => {
+      const oldHtml = '<table><tr><td>A</td><td>B</td></tr></table>'
+      const newHtml = '<table><tr><td colspan="2">A B</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table><tr><td colspan="2" class=\'mod colspan\'>A B</td></tr></table>'
+      )
+    })
+
+    it('marks three adjacent cells merged into one colspan=3 cell', () => {
+      const oldHtml = '<table><tr><td>A</td><td>B</td><td>C</td></tr></table>'
+      const newHtml = '<table><tr><td colspan="3">A B C</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table><tr><td colspan="3" class=\'mod colspan\'>A B C</td></tr></table>'
+      )
+    })
+  })
+
+  describe('merge cells vertically (rowspan)', () => {
+    it('marks two stacked cells merged into one rowspan=2 cell', () => {
+      const oldHtml = '<table><tr><td>A</td></tr><tr><td>B</td></tr></table>'
+      const newHtml = '<table><tr><td rowspan="2">A B</td></tr><tr></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table><tr><td rowspan="2" class=\'mod rowspan\'>A B</td></tr><tr></tr></table>'
+      )
+    })
+
+    it('marks three stacked cells merged into one rowspan=3 cell', () => {
+      const oldHtml = '<table><tr><td>A</td></tr><tr><td>B</td></tr><tr><td>C</td></tr></table>'
+      const newHtml = '<table><tr><td rowspan="3">A B C</td></tr><tr></tr><tr></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table><tr><td rowspan="3" class=\'mod rowspan\'>A B C</td></tr><tr></tr><tr></tr></table>'
+      )
+    })
+  })
+
+  describe('split cells horizontally', () => {
+    it('marks a colspan=2 cell split into two cells', () => {
+      const oldHtml = '<table><tr><td colspan="2">A B</td></tr></table>'
+      const newHtml = '<table><tr><td>A</td><td>B</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        "<table><tr><td class='mod colspan'>A</td><td class='mod colspan'>B</td></tr></table>"
+      )
+    })
+
+    it('marks a colspan=3 cell split into three cells', () => {
+      const oldHtml = '<table><tr><td colspan="3">A B 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 class='mod colspan'>A</td><td class='mod colspan'>B</td><td class='mod colspan'>C</td></tr></table>"
+      )
+    })
+  })
+
+  describe('split cells vertically', () => {
+    it('marks a rowspan=2 cell split into two cells across two rows', () => {
+      const oldHtml = '<table><tr><td rowspan="2">A B</td></tr><tr></tr></table>'
+      const newHtml = '<table><tr><td>A</td></tr><tr><td>B</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        "<table><tr><td class='mod rowspan'>A</td></tr><tr><td class='mod rowspan'>B</td></tr></table>"
+      )
+    })
+
+    it('marks a rowspan=3 cell split into three cells across three rows', () => {
+      const oldHtml = '<table><tr><td rowspan="3">A B C</td></tr><tr></tr><tr></tr></table>'
+      const newHtml = '<table><tr><td>A</td></tr><tr><td>B</td></tr><tr><td>C</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        "<table><tr><td class='mod rowspan'>A</td></tr><tr><td class='mod rowspan'>B</td></tr><tr><td class='mod rowspan'>C</td></tr></table>"
+      )
+    })
+  })
+
+  // Combined colspan + rowspan (rectangular merge): a cell with both
+  // colspan and rowspan absorbs a 2D region. The vertical-merge detector
+  // now also handles the case where the absorbed rows aren't 1-cell —
+  // any cell layout in old whose logical column width sums to the new
+  // cell's colspan and whose rowspans are all 1 is a valid match.
+  describe('combined colspan + rowspan merges', () => {
+    it('marks a 2x2 region merged into one colspan=2 rowspan=2 cell', () => {
+      const oldHtml = '<table><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table>'
+      const newHtml = '<table><tr><td colspan="2" rowspan="2">Merged</td></tr><tr></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table><tr><td colspan="2" rowspan="2" class=\'mod rowspan\'>Merged</td></tr><tr></tr></table>'
+      )
+    })
+
+    it('marks the inverse split (colspan=2 rowspan=2 cell split into 2x2)', () => {
+      const oldHtml = '<table><tr><td colspan="2" rowspan="2">Merged</td></tr><tr></tr></table>'
+      const newHtml = '<table><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          "<tr><td class='mod rowspan'>A</td><td class='mod rowspan'>B</td></tr>" +
+          "<tr><td class='mod rowspan'>C</td><td class='mod rowspan'>D</td></tr>" +
+          '</table>'
+      )
+    })
+  })
+
+  // Coverage for the structural cases the test reviewer flagged. These
+  // sit at the boundary between `preprocessTables` and the word-level
+  // diff, or test that we don't lose attributes/wrappers in the new
+  // emission paths.
+  describe('table identity and pairing', () => {
+    it('returns input verbatim when both sides are identical (early-exit)', () => {
+      const html = '<table><tr><td>Same</td></tr></table>'
+      expect(HtmlDiff.execute(html, html)).toEqual(html)
+    })
+
+    it('only diffs the changed table when there are multiple unchanged tables alongside it', () => {
+      const oldHtml =
+        '<table><tr><td>A</td></tr></table>' +
+        '<table><tr><td>B</td></tr></table>' +
+        '<table><tr><td>C</td></tr></table>'
+      const newHtml =
+        '<table><tr><td>A</td></tr></table>' +
+        '<table><tr><td>X</td></tr></table>' +
+        '<table><tr><td>C</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table><tr><td>A</td></tr></table>' +
+          "<table><tr><td><del class='diffmod'>B</del><ins class='diffmod'>X</ins></td></tr></table>" +
+          '<table><tr><td>C</td></tr></table>'
+      )
+    })
+
+    it('diffs a table embedded in surrounding prose without disturbing the prose', () => {
+      const oldHtml = '<p>Intro</p><table><tr><td>A</td></tr></table><p>Outro</p>'
+      const newHtml = '<p>Intro</p><table><tr><td>B</td></tr></table><p>Outro</p>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<p>Intro</p>' +
+          "<table><tr><td><del class='diffmod'>A</del><ins class='diffmod'>B</ins></td></tr></table>" +
+          '<p>Outro</p>'
+      )
+    })
+
+    it('still diffs cells when the user input contains a comment that LOOKS like our placeholder', () => {
+      // The per-call random nonce makes collisions astronomically unlikely;
+      // the hard-coded `aaaa1234_0` here is harmless because the actual
+      // placeholder will use a different random suffix.
+      const oldHtml = '<table><tr><td>A</td></tr></table><!--HTMLDIFF_TABLE_aaaa1234_0-->'
+      const newHtml = '<table><tr><td>B</td></tr></table><!--HTMLDIFF_TABLE_aaaa1234_0-->'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        "<table><tr><td><del class='diffmod'>A</del><ins class='diffmod'>B</ins></td></tr></table><!--HTMLDIFF_TABLE_aaaa1234_0-->"
+      )
+    })
+  })
+
+  describe('table count mismatches', () => {
+    // When old and new have different numbers of tables, preprocessTables
+    // returns null and the word-level diff handles it. The cell content
+    // gets ins/del markers, but the surrounding `<table>`/`<tr>`
+    // structural tags pass through bare. Documenting current behaviour.
+    it('handles a table newly injected after surrounding prose (table count old=0, new=1)', () => {
+      const oldHtml = '<p>Intro</p>'
+      const newHtml = '<p>Intro</p><table><tr><td>Clause</td><td>Term</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        "<p>Intro</p><table><tr><td><ins class='diffins'>Clause</ins></td><td><ins class='diffins'>Term</ins></td></tr></table>"
+      )
+    })
+
+    it('handles a table deleted from surrounding prose (table count old=1, new=0)', () => {
+      const oldHtml = '<p>Hello</p><table><tr><td>A</td></tr></table>'
+      const newHtml = '<p>Hello</p>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        "<p>Hello</p><table><tr><td><del class='diffdel'>A</del></td></tr></table>"
+      )
+    })
+
+    it('handles old=1 vs new=2 tables', () => {
+      const oldHtml = '<table><tr><td>A</td></tr></table>'
+      const newHtml = '<table><tr><td>A</td></tr></table><table><tr><td>B</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        "<table><tr><td>A</td></tr></table><table><tr><td><ins class='diffins'>B</ins></td></tr></table>"
+      )
+    })
+  })
+
+  describe('table reordering (positional pairing)', () => {
+    // When two tables swap order, preprocessTables pairs them positionally
+    // (table[0] in old with table[0] in new), which produces a flat
+    // word-level diff over both tables — both look completely modified
+    // even though they were just reordered. This is a known limitation
+    // (Word doesn't track move/reorder either); pinned here so a future
+    // improvement is visible.
+    it('pairs swapped tables positionally and renders both as fully modified', () => {
+      const oldHtml = '<table><tr><td>Table1</td></tr></table><table><tr><td>Table2</td></tr></table>'
+      const newHtml = '<table><tr><td>Table2</td></tr></table><table><tr><td>Table1</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        "<table><tr><td><del class='diffmod'>Table1</del><ins class='diffmod'>Table2</ins></td></tr></table>" +
+          "<table><tr><td><del class='diffmod'>Table2</del><ins class='diffmod'>Table1</ins></td></tr></table>"
+      )
+    })
+  })
+
+  describe('thead/tbody/tfoot wrappers', () => {
+    it('preserves <thead>/<tbody> when adding a row inside <tbody>', () => {
+      const oldHtml = '<table><thead><tr><th>H</th></tr></thead><tbody><tr><td>A</td></tr></tbody></table>'
+      const newHtml =
+        '<table><thead><tr><th>H</th></tr></thead><tbody><tr><td>A</td></tr><tr><td>B</td></tr></tbody></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table><thead><tr><th>H</th></tr></thead><tbody>' +
+          '<tr><td>A</td></tr>' +
+          "<tr class='diffins'><td class='diffins'><ins class='diffins'>B</ins></td></tr>" +
+          '</tbody></table>'
+      )
+    })
+
+    it('preserves <thead>/<tbody> when deleting a row from <tbody>', () => {
+      const oldHtml =
+        '<table><thead><tr><th>H</th></tr></thead><tbody><tr><td>A</td></tr><tr><td>B</td></tr></tbody></table>'
+      const newHtml = '<table><thead><tr><th>H</th></tr></thead><tbody><tr><td>A</td></tr></tbody></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table><thead><tr><th>H</th></tr></thead><tbody>' +
+          '<tr><td>A</td></tr>' +
+          "<tr class='diffdel'><td class='diffdel'><del class='diffdel'>B</del></td></tr>" +
+          '</tbody></table>'
+      )
+    })
+  })
+
+  describe('<th> cells', () => {
+    it('marks an added column with <th> header cells', () => {
+      const oldHtml = '<table><tr><th>H1</th><th>H2</th></tr><tr><td>A</td><td>B</td></tr></table>'
+      const newHtml = '<table><tr><th>H1</th><th>H2</th><th>H3</th></tr><tr><td>A</td><td>B</td><td>C</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          "<tr><th>H1</th><th>H2</th><th class='diffins'><ins class='diffins'>H3</ins></th></tr>" +
+          "<tr><td>A</td><td>B</td><td class='diffins'><ins class='diffins'>C</ins></td></tr>" +
+          '</table>'
+      )
+    })
+
+    it('marks a deleted row whose cells are <th>', () => {
+      const oldHtml = '<table><tr><th>H1</th><th>H2</th></tr><tr><td>A</td><td>B</td></tr></table>'
+      const newHtml = '<table><tr><td>A</td><td>B</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          "<tr class='diffdel'>" +
+          "<th class='diffdel'><del class='diffdel'>H1</del></th>" +
+          "<th class='diffdel'><del class='diffdel'>H2</del></th>" +
+          '</tr>' +
+          '<tr><td>A</td><td>B</td></tr>' +
+          '</table>'
+      )
+    })
+  })
+
+  // The user explicitly called these out: when we inject diffins/diffdel
+  // class markers, we must preserve any existing attributes (especially
+  // `class`) and the `class` injection must merge into the existing
+  // attribute rather than overwrite it.
+  describe('attribute preservation', () => {
+    it("preserves existing class attribute on <tr> when adding 'diffins'", () => {
+      const oldHtml = '<table><tr><td>A</td></tr></table>'
+      const newHtml = '<table><tr><td>A</td></tr><tr class="section-header"><td>B</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          '<tr><td>A</td></tr>' +
+          "<tr class=\"section-header diffins\"><td class='diffins'><ins class='diffins'>B</ins></td></tr>" +
+          '</table>'
+      )
+    })
+
+    it("preserves multi-class attribute on <td> when adding 'diffdel'", () => {
+      const oldHtml = '<table><tr><td>A</td></tr><tr><td class="highlight important">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 class='diffdel'>" +
+          '<td class="highlight important diffdel"><del class=\'diffdel\'>B</del></td>' +
+          '</tr>' +
+          '</table>'
+      )
+    })
+
+    it('preserves single-quoted class on <td> in inserted column', () => {
+      const oldHtml = '<table><tr><td>A</td></tr></table>'
+      const newHtml = "<table><tr><td>A</td><td class='added-col'>B</td></tr></table>"
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' + "<tr><td>A</td><td class='added-col diffins'><ins class='diffins'>B</ins></td></tr>" + '</table>'
+      )
+    })
+
+    it('preserves arbitrary attributes (id, style, data-*) on a <td> in an inserted row', () => {
+      const oldHtml = '<table><tr><td>A</td></tr></table>'
+      const newHtml = '<table><tr><td>A</td></tr><tr><td id="row2" data-key="b" style="color:red">B</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          '<tr><td>A</td></tr>' +
+          "<tr class='diffins'>" +
+          '<td id="row2" data-key="b" style="color:red" class=\'diffins\'>' +
+          "<ins class='diffins'>B</ins>" +
+          '</td>' +
+          '</tr>' +
+          '</table>'
+      )
+    })
+
+    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)
+      // The <tr> attribute must survive AND the row's cells must be
+      // intact: B preserved, EXTRA inserted, C preserved. A bare
+      // `toContain('<tr data-behaviour="data">')` would pass even if
+      // the cells were dropped or duplicated downstream.
+      expect(result).toContain(
+        '<tr data-behaviour="data"><td>B</td>' +
+          "<td class='diffins'><ins class='diffins'>EXTRA</ins></td>" +
+          '<td>C</td></tr>'
+      )
+    })
+
+    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)
+      // Same intent as above: attribute must survive AND the row's
+      // content-edit must be present on the same <tr>.
+      expect(result).toContain(
+        '<tr data-behaviour="data"><td>The quick brown fox jumps over' +
+          "<ins class='diffins'>&nbsp;the lazy dog</ins>.</td></tr>"
+      )
+    })
+
+    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>'
+
+      // Same content → table attributes flow through from new without
+      // a diff marker. This is intentional (Word doesn't track table
+      // attribute changes either) but documented as a regression anchor.
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table border="2" style="width:100%"><tr><td>A</td></tr></table>'
+      )
+    })
+
+    it('preserves <colgroup>/<col> within a same-dimension table', () => {
+      const oldHtml = '<table><colgroup><col span="2"/></colgroup><tr><td>Foo</td><td>Bar</td></tr></table>'
+      const newHtml = '<table><colgroup><col span="2"/></colgroup><tr><td>Foo</td><td>Baz</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table><colgroup><col span="2"/></colgroup>' +
+          "<tr><td>Foo</td><td><del class='diffmod'>Bar</del><ins class='diffmod'>Baz</ins></td></tr>" +
+          '</table>'
+      )
+    })
+
+    it('does not duplicate a class when the same class would be injected twice', () => {
+      // Edge case: a `<td>` that already carries `diffins` (from a prior
+      // run, or a hand-authored input) should not pick up a second
+      // `diffins` token in the class attribute.
+      const oldHtml = '<table><tr><td>A</td></tr></table>'
+      const newHtml = '<table><tr><td>A</td></tr><tr><td class="diffins">B</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          '<tr><td>A</td></tr>' +
+          "<tr class='diffins'><td class=\"diffins\"><ins class='diffins'>B</ins></td></tr>" +
+          '</table>'
+      )
+    })
+  })
+
+  describe('nested tables', () => {
+    it('diffs a nested cell change without disturbing the outer table', () => {
+      const oldHtml = '<table><tr><td><table><tr><td>inner A</td></tr></table></td></tr></table>'
+      const newHtml = '<table><tr><td><table><tr><td>inner B</td></tr></table></td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table><tr><td>' +
+          "<table><tr><td>inner <del class='diffmod'>A</del><ins class='diffmod'>B</ins></td></tr></table>" +
+          '</td></tr></table>'
+      )
+    })
+  })
+
+  describe('whitespace handling', () => {
+    it('treats whitespace-only differences in row HTML as equal (no spurious diff)', () => {
+      const oldHtml = '<table>\n  <tr>\n    <td>A</td>\n  </tr>\n</table>'
+      const newHtml = '<table><tr><td>A</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual('<table><tr><td>A</td></tr></table>')
+    })
+  })
+
+  describe('row deletion with empty cells', () => {
+    it('marks empty cells in a deleted row with diffdel even though they have no content', () => {
+      const oldHtml = '<table><tr><td>A</td><td></td><td>C</td></tr><tr><td>D</td><td></td><td>F</td></tr></table>'
+      const newHtml = '<table><tr><td>A</td><td></td><td>C</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          '<tr><td>A</td><td></td><td>C</td></tr>' +
+          "<tr class='diffdel'>" +
+          "<td class='diffdel'><del class='diffdel'>D</del></td>" +
+          "<td class='diffdel'></td>" +
+          "<td class='diffdel'><del class='diffdel'>F</del></td>" +
+          '</tr>' +
+          '</table>'
+      )
+    })
+  })
+
+  // Block-level cell content is the most common shape in legal-doc tables —
+  // cells routinely contain `<p>`-wrapped paragraphs, `<ol>`/`<ul>` lists,
+  // and `<div>`-wrapped sections. The wrapInlineTextRuns helper walks
+  // through tags transparently and only wraps non-whitespace text runs, so
+  // `<ins>`/`<del>` ends up *inside* every block-level container — keeping
+  // the output as valid HTML (the spec disallows `<ins>` directly wrapping
+  // a `<p>`, but `<p><ins>...</ins></p>` is fine).
+  describe('block-level cell content', () => {
+    it('wraps each paragraph independently in an inserted row with multi-paragraph cells', () => {
+      const oldHtml = '<table><tr><td>Header</td></tr></table>'
+      const newHtml =
+        '<table><tr><td>Header</td></tr><tr><td><p>Paragraph one</p><p>Paragraph two</p></td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          '<tr><td>Header</td></tr>' +
+          "<tr class='diffins'>" +
+          "<td class='diffins'>" +
+          "<p><ins class='diffins'>Paragraph one</ins></p>" +
+          "<p><ins class='diffins'>Paragraph two</ins></p>" +
+          '</td>' +
+          '</tr>' +
+          '</table>'
+      )
+    })
+
+    it('wraps each paragraph independently in a deleted row with multi-paragraph cells', () => {
+      const oldHtml = '<table><tr><td><p>Paragraph one</p><p>Paragraph two</p></td></tr><tr><td>Keep</td></tr></table>'
+      const newHtml = '<table><tr><td>Keep</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          "<tr class='diffdel'>" +
+          "<td class='diffdel'>" +
+          "<p><del class='diffdel'>Paragraph one</del></p>" +
+          "<p><del class='diffdel'>Paragraph two</del></p>" +
+          '</td>' +
+          '</tr>' +
+          '<tr><td>Keep</td></tr>' +
+          '</table>'
+      )
+    })
+
+    it('wraps text inside paragraphs containing inline formatting in an inserted row', () => {
+      // Legal-doc shape: a paragraph with bold + italic in the middle.
+      const oldHtml = '<table><tr><td>A</td></tr></table>'
+      const newHtml =
+        '<table><tr><td>A</td></tr><tr><td><p>The <strong>Cross-Default</strong> provisions of <em>Section 5(a)</em> apply.</p></td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          '<tr><td>A</td></tr>' +
+          "<tr class='diffins'><td class='diffins'>" +
+          '<p>' +
+          "<ins class='diffins'>The </ins>" +
+          "<strong><ins class='diffins'>Cross-Default</ins></strong>" +
+          "<ins class='diffins'> provisions of </ins>" +
+          "<em><ins class='diffins'>Section 5(a)</ins></em>" +
+          "<ins class='diffins'> apply.</ins>" +
+          '</p>' +
+          '</td></tr>' +
+          '</table>'
+      )
+    })
+
+    it('wraps each list item independently in an inserted row with an <ol>', () => {
+      const oldHtml = '<table><tr><td>A</td></tr></table>'
+      const newHtml =
+        '<table><tr><td>A</td></tr><tr><td><ol data-type="a"><li><p>First</p></li><li><p>Second</p></li></ol></td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          '<tr><td>A</td></tr>' +
+          "<tr class='diffins'><td class='diffins'>" +
+          '<ol data-type="a">' +
+          "<li><p><ins class='diffins'>First</ins></p></li>" +
+          "<li><p><ins class='diffins'>Second</ins></p></li>" +
+          '</ol>' +
+          '</td></tr>' +
+          '</table>'
+      )
+    })
+
+    it('wraps each list item independently in a deleted row with a <ul>', () => {
+      const oldHtml = '<table><tr><td><ul><li>Item 1</li><li>Item 2</li></ul></td></tr><tr><td>Keep</td></tr></table>'
+      const newHtml = '<table><tr><td>Keep</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          "<tr class='diffdel'><td class='diffdel'>" +
+          '<ul>' +
+          "<li><del class='diffdel'>Item 1</del></li>" +
+          "<li><del class='diffdel'>Item 2</del></li>" +
+          '</ul>' +
+          '</td></tr>' +
+          '<tr><td>Keep</td></tr>' +
+          '</table>'
+      )
+    })
+
+    it('wraps text inside a div-wrapped paragraph in an inserted row', () => {
+      const oldHtml = '<table><tr><td>A</td></tr></table>'
+      const newHtml =
+        '<table><tr><td>A</td></tr><tr><td><div class="justify"><p>Inside a div</p></div></td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          '<tr><td>A</td></tr>' +
+          "<tr class='diffins'><td class='diffins'>" +
+          '<div class="justify"><p><ins class=\'diffins\'>Inside a div</ins></p></div>' +
+          '</td></tr>' +
+          '</table>'
+      )
+    })
+
+    it('preserves an empty <p> as-is in an inserted row (no spurious <ins> on whitespace)', () => {
+      const oldHtml = '<table><tr><td>A</td></tr></table>'
+      const newHtml = '<table><tr><td>A</td></tr><tr><td><p>Real content</p><p></p></td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          '<tr><td>A</td></tr>' +
+          "<tr class='diffins'><td class='diffins'>" +
+          "<p><ins class='diffins'>Real content</ins></p>" +
+          '<p></p>' +
+          '</td></tr>' +
+          '</table>'
+      )
+    })
+
+    it('handles a paragraph with a hyperlink in an inserted row (anchor passes through, text wraps)', () => {
+      const oldHtml = '<table><tr><td>A</td></tr></table>'
+      const newHtml =
+        '<table><tr><td>A</td></tr><tr><td><p>See <a href="http://example.com">the docs</a> for details.</p></td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          '<tr><td>A</td></tr>' +
+          "<tr class='diffins'><td class='diffins'>" +
+          '<p>' +
+          "<ins class='diffins'>See </ins>" +
+          '<a href="http://example.com">' +
+          "<ins class='diffins'>the docs</ins>" +
+          '</a>' +
+          "<ins class='diffins'> for details.</ins>" +
+          '</p>' +
+          '</td></tr>' +
+          '</table>'
+      )
+    })
+
+    it('handles a heading inside a cell in an inserted row', () => {
+      const oldHtml = '<table><tr><td>A</td></tr></table>'
+      const newHtml = '<table><tr><td>A</td></tr><tr><td><h3>Section heading</h3><p>Body text</p></td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          '<tr><td>A</td></tr>' +
+          "<tr class='diffins'><td class='diffins'>" +
+          "<h3><ins class='diffins'>Section heading</ins></h3>" +
+          "<p><ins class='diffins'>Body text</ins></p>" +
+          '</td></tr>' +
+          '</table>'
+      )
+    })
+
+    it('preserves a self-closing <br/> inside a paragraph in an inserted row', () => {
+      const oldHtml = '<table><tr><td>A</td></tr></table>'
+      const newHtml = '<table><tr><td>A</td></tr><tr><td><p>line one<br/>line two</p></td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          '<tr><td>A</td></tr>' +
+          "<tr class='diffins'><td class='diffins'>" +
+          "<p><ins class='diffins'>line one</ins><br/><ins class='diffins'>line two</ins></p>" +
+          '</td></tr>' +
+          '</table>'
+      )
+    })
+  })
+
+  // Adversarial / hardening cases surfaced by the second-pass review.
+  // These pin behaviour that was previously broken or untested for inputs
+  // 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
+      // the comment at the inner `>` and wrapped half of it in <ins>.
+      const oldHtml = '<table><tr><td>A</td></tr></table>'
+      const newHtml = '<table><tr><td>A</td></tr><tr><td><!-- note: >5% threshold -->text</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          '<tr><td>A</td></tr>' +
+          "<tr class='diffins'><td class='diffins'>" +
+          "<!-- note: >5% threshold --><ins class='diffins'>text</ins>" +
+          '</td></tr>' +
+          '</table>'
+      )
+    })
+
+    it('handles a CDATA section inside cell content', () => {
+      const oldHtml = '<table><tr><td>A</td></tr></table>'
+      const newHtml = '<table><tr><td>A</td></tr><tr><td><![CDATA[ x > y ]]>text</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          '<tr><td>A</td></tr>' +
+          "<tr class='diffins'><td class='diffins'>" +
+          "<![CDATA[ x > y ]]><ins class='diffins'>text</ins>" +
+          '</td></tr>' +
+          '</table>'
+      )
+    })
+
+    it('finds the real class attribute even when a foreign attribute contains `class=`-like text', () => {
+      // injectClass previously used a flat regex that could match inside
+      // any quoted attribute value. A `<td title="see class='x'">` would
+      // get its `title` mangled and never receive the diff class. The
+      // attribute-aware walker handles this correctly.
+      const oldHtml = '<table><tr><td>A</td></tr></table>'
+      const newHtml = '<table><tr><td>A</td></tr><tr><td title="see class=\'important\' note">B</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          '<tr><td>A</td></tr>' +
+          "<tr class='diffins'>" +
+          "<td title=\"see class='important' note\" class='diffins'>" +
+          "<ins class='diffins'>B</ins>" +
+          '</td></tr>' +
+          '</table>'
+      )
+    })
+
+    it('does not duplicate "mod" when the cell already has a partial overlap with the multi-word class', () => {
+      // injectClass: existing class "mod" + injecting "mod colspan" →
+      // result must be "mod colspan", not "mod mod colspan".
+      const oldHtml = '<table><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table>'
+      const newHtml = '<table><tr><td colspan="2" class="mod">AB</td></tr><tr><td>C</td><td>D</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          '<tr><td colspan="2" class="mod colspan">AB</td></tr>' +
+          '<tr><td>C</td><td>D</td></tr>' +
+          '</table>'
+      )
+    })
+
+    it('handles mixed-case tag names', () => {
+      const oldHtml = '<TABLE><TR><Td>A</Td><Td>B</Td></TR></TABLE>'
+      const newHtml = '<TABLE><TR><Td>A</Td><Td>C</Td></TR></TABLE>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        "<TABLE><TR><Td>A</Td><Td><del class='diffmod'>B</del><ins class='diffmod'>C</ins></Td></TR></TABLE>"
+      )
+    })
+
+    it('handles whitespace inside opening tags', () => {
+      const oldHtml = '<table><tr><td  class = "highlight" >A</td></tr></table>'
+      const newHtml = '<table><tr><td  class = "highlight" >B</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        "<table><tr><td  class = \"highlight\" ><del class='diffmod'>A</del><ins class='diffmod'>B</ins></td></tr></table>"
+      )
+    })
+
+    it('handles attribute values containing > inside quotes', () => {
+      const oldHtml = '<table><tr><td data-cond="x > 0">Old</td></tr></table>'
+      const newHtml = '<table><tr><td data-cond="x > 0">New</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        "<table><tr><td data-cond=\"x > 0\"><del class='diffmod'>Old</del><ins class='diffmod'>New</ins></td></tr></table>"
+      )
+    })
+
+    it('falls back to the word-level diff when a table exceeds the row-count safety cap', () => {
+      // Construct a table with 1600 rows (above MAX_TABLE_ROWS=1500).
+      // preprocessTables should bail and let the word-level diff handle
+      // it. The output is whatever the word-level diff produces; we
+      // assert it contains the cell content (so the diff didn't crash)
+      // and that it does NOT contain the structural-aware class markers.
+      const buildBigTable = (cellContent: (r: number) => string) => {
+        const out: string[] = ['<table>']
+        for (let r = 0; r < 1600; r++) out.push(`<tr><td>${cellContent(r)}</td></tr>`)
+        out.push('</table>')
+        return out.join('')
+      }
+      const oldHtml = buildBigTable(r => `Row ${r}`)
+      const newHtml = buildBigTable(r => (r === 100 ? `Row ${r} edited` : `Row ${r}`))
+
+      const result = HtmlDiff.execute(oldHtml, newHtml)
+      // The word-level diff should produce *some* del/ins for the change.
+      expect(result).toContain('edited')
+      // But not the structural-aware class markers, because the cap kicked in.
+      expect(result).not.toContain("class='mod colspan'")
+    })
+
+    it('does not infinite-loop on an unclosed table tag', () => {
+      // Malformed HTML — `<table>` with no `</table>`. findTopLevelTables
+      // should return -1 from findMatchingClosingTag and skip the table,
+      // letting preprocessTables fall back to the word-level diff.
+      const oldHtml = '<table><tr><td>A</td></tr>'
+      const newHtml = '<table><tr><td>B</td></tr>'
+
+      const result = HtmlDiff.execute(oldHtml, newHtml)
+      expect(result).toContain('A')
+      expect(result).toContain('B')
+    })
+
+    it('handles cell content that is whitespace-only without emitting a spurious <ins>', () => {
+      const oldHtml = '<table><tr><td>A</td></tr></table>'
+      const newHtml = '<table><tr><td>A</td></tr><tr><td>\n  \t</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' + '<tr><td>A</td></tr>' + "<tr class='diffins'><td class='diffins'>\n  \t</td></tr>" + '</table>'
+      )
+    })
+  })
+
+  describe('combined edits', () => {
+    it('handles a column added together with a new row inserted in the middle', () => {
+      // Both row count AND cell count change — exercises the
+      // diffStructurallyAlignedTable path with fuzzy row matching
+      // followed by per-row cell-level diff.
+      const oldHtml = '<table><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table>'
+      const newHtml =
+        '<table><tr><td>A</td><td>B</td><td>E</td></tr><tr><td>New</td><td>Row</td><td>F</td></tr><tr><td>C</td><td>D</td><td>G</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          "<tr><td>A</td><td>B</td><td class='diffins'><ins class='diffins'>E</ins></td></tr>" +
+          "<tr class='diffins'>" +
+          "<td class='diffins'><ins class='diffins'>New</ins></td>" +
+          "<td class='diffins'><ins class='diffins'>Row</ins></td>" +
+          "<td class='diffins'><ins class='diffins'>F</ins></td>" +
+          '</tr>' +
+          "<tr><td>C</td><td>D</td><td class='diffins'><ins class='diffins'>G</ins></td></tr>" +
+          '</table>'
+      )
+    })
+
+    it('places a new row inserted at the start above an edited row (fuzzy matching)', () => {
+      // Order-preservation regression: previously the (paired old,
+      // paired new) entry was emitted at the del's alignment position
+      // which could put it BEFORE the unpaired ins, violating cursor
+      // monotonicity. With the fix, the paired entry is emitted at the
+      // ins position so output order matches new-side order.
+      const oldHtml = '<table><tr><td>Edited row</td></tr><tr><td>Same row</td></tr></table>'
+      const newHtml = '<table><tr><td>New row</td></tr><tr><td>Edited rowX</td></tr><tr><td>Same row</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          "<tr class='diffins'><td class='diffins'><ins class='diffins'>New row</ins></td></tr>" +
+          "<tr><td>Edited <del class='diffmod'>row</del><ins class='diffmod'>rowX</ins></td></tr>" +
+          '<tr><td>Same row</td></tr>' +
+          '</table>'
+      )
+    })
+
+    it('handles an edit to a colspan-spanning section row alongside a normal-row content edit', () => {
+      // Real-world legal-doc shape: header row, a colspan section
+      // header, and content rows below. Editing one cell of one of the
+      // content rows shouldn't disturb the colspan row.
+      const oldHtml =
+        '<table>' +
+        '<tr><th>Label</th><th>A</th><th>B</th></tr>' +
+        '<tr><td colspan="3">Section header</td></tr>' +
+        '<tr><td>Row 1</td><td>Old A</td><td>Same B</td></tr>' +
+        '</table>'
+      const newHtml =
+        '<table>' +
+        '<tr><th>Label</th><th>A</th><th>B</th></tr>' +
+        '<tr><td colspan="3">Section header</td></tr>' +
+        '<tr><td>Row 1</td><td>New A</td><td>Same B</td></tr>' +
+        '</table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          '<tr><th>Label</th><th>A</th><th>B</th></tr>' +
+          '<tr><td colspan="3">Section header</td></tr>' +
+          "<tr><td>Row 1</td><td><del class='diffmod'>Old</del><ins class='diffmod'>New</ins> A</td><td>Same B</td></tr>" +
+          '</table>'
+      )
+    })
+
+    it('handles column-add alongside content edit in the SAME row (cell-level fuzzy matching)', () => {
+      // Real-world scenario: a column was inserted at position 1 AND
+      // one of the existing cells got new content appended. Without
+      // cell-level fuzzy matching, the cell-LCS exact-match misses the
+      // "IRS Forms…" pairing, producing a 5-cell row (phantom delete +
+      // two inserts) instead of 4 cells with one inline content edit.
+      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 and W-8ECI (or any successors thereto).</td><td>Upon execution.</td></tr>' +
+        '<tr><td>Party B</td><td>IRS Form W-9, as applicable.</td><td>Upon execution.</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 and W-8ECI (or any successors thereto). Here's some extra content</td><td>Upon execution.</td></tr>" +
+        '<tr><td>Party B</td><td>A</td><td>IRS Form W-9, as applicable.</td><td>Upon execution.</td></tr>' +
+        '</table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          // Header row: extra column inserted at position 1
+          '<tr><th>Party</th>' +
+          "<th class='diffins'><ins class='diffins'>Extra column</ins></th>" +
+          '<th>Form</th><th>Date</th></tr>' +
+          // Party A row: extra column cell + content edit on the IRS Forms cell
+          '<tr><td>Party A</td>' +
+          "<td class='diffins'><ins class='diffins'>Yes</ins></td>" +
+          "<td>IRS Forms W-8BEN-E and W-8ECI (or any successors thereto).<ins class='diffins'>&nbsp;Here's some extra content</ins></td>" +
+          '<td>Upon execution.</td></tr>' +
+          // Party B row: extra column cell, IRS Form W-9 cell unchanged
+          '<tr><td>Party B</td>' +
+          "<td class='diffins'><ins class='diffins'>A</ins></td>" +
+          '<td>IRS Form W-9, as applicable.</td>' +
+          '<td>Upon execution.</td></tr>' +
+          '</table>'
+      )
+    })
+
+    it('handles a rowspan cell sharing a row with normal cells (column-add adjacency)', () => {
+      // The rowspan'd cell occupies row 0 col 0 and row 1's col 0 slot
+      // (absorbed). Old has rowspan=2 in col 0 + col 1 in row 0 + col
+      // 0-of-row-2 in row 1. New adds a column on the right: same
+      // rowspan structure, but row 1 has 2 cells (col 0 in row 1 is the
+      // absorbed col, col 1 is the existing C, col 2 is new D).
+      // detectVerticalMerge bails (multi-cell row), so this falls
+      // through to per-row diff with cell-level LCS.
+      const oldHtml = '<table>' + '<tr><td rowspan="2">A</td><td>B</td></tr>' + '<tr><td>C</td></tr>' + '</table>'
+      const newHtml =
+        '<table>' +
+        '<tr><td rowspan="2">A prime</td><td>B prime</td></tr>' +
+        '<tr><td>C prime</td><td>D</td></tr>' +
+        '</table>'
+
+      // The exact emission shape is messy because the algorithm doesn't
+      // model column-position-with-rowspan. Pin current behaviour as a
+      // regression anchor; the cell-level changes are visible.
+      const result = HtmlDiff.execute(oldHtml, newHtml)
+      expect(result).toContain('rowspan="2"')
+      expect(result).toContain('A')
+      expect(result).toContain('prime')
+      expect(result).toContain('D')
+    })
+  })
+
+  describe('block-level html5 wrappers', () => {
+    it('preserves <tfoot> and diffs cell content inside it', () => {
+      const oldHtml = '<table><tbody><tr><td>A</td></tr></tbody><tfoot><tr><td>Total: 1</td></tr></tfoot></table>'
+      const newHtml = '<table><tbody><tr><td>A</td></tr></tbody><tfoot><tr><td>Total: 2</td></tr></tfoot></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table><tbody><tr><td>A</td></tr></tbody><tfoot>' +
+          "<tr><td>Total: <del class='diffmod'>1</del><ins class='diffmod'>2</ins></td></tr>" +
+          '</tfoot></table>'
+      )
+    })
+
+    it('handles multiple <tbody> blocks within one table', () => {
+      const oldHtml =
+        '<table><tbody><tr><th>H1</th></tr></tbody><tbody></tbody><tbody><tr><td>A</td></tr></tbody></table>'
+      const newHtml =
+        '<table><tbody><tr><th>H1</th></tr></tbody><tbody></tbody><tbody><tr><td>A</td></tr><tr><td>B</td></tr></tbody></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table><tbody><tr><th>H1</th></tr></tbody><tbody></tbody><tbody>' +
+          '<tr><td>A</td></tr>' +
+          "<tr class='diffins'><td class='diffins'><ins class='diffins'>B</ins></td></tr>" +
+          '</tbody></table>'
+      )
+    })
+  })
+
+  describe('inline elements in inserted/deleted rows', () => {
+    it('passes <sup> through and wraps inner text in <ins>', () => {
+      const oldHtml = '<table><tr><td>A</td></tr></table>'
+      const newHtml = '<table><tr><td>A</td></tr><tr><td>ISDA SIMM<sup>TM</sup></td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          '<tr><td>A</td></tr>' +
+          "<tr class='diffins'><td class='diffins'>" +
+          "<ins class='diffins'>ISDA SIMM</ins>" +
+          "<sup><ins class='diffins'>TM</ins></sup>" +
+          '</td></tr>' +
+          '</table>'
+      )
+    })
+
+    it('wraps text inside a nested <table> inside a deleted row', () => {
+      const oldHtml =
+        '<table>' + '<tr><td><table><tr><td>Inner A</td></tr></table></td></tr>' + '<tr><td>Keep</td></tr>' + '</table>'
+      const newHtml = '<table><tr><td>Keep</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          "<tr class='diffdel'><td class='diffdel'>" +
+          '<table><tr><td>' +
+          "<del class='diffdel'>Inner A</del>" +
+          '</td></tr></table>' +
+          '</td></tr>' +
+          '<tr><td>Keep</td></tr>' +
+          '</table>'
+      )
+    })
+  })
+
+  describe('fuzzy threshold boundary', () => {
+    it('does NOT pair rows when similarity is exactly at the threshold (strict >)', () => {
+      // rowText = "abcdef" (6 chars) vs "abcxyz" (6 chars).
+      // Prefix = 3 ("abc"), suffix = 0 → similarity = 3/6 = 0.5 exactly.
+      // Threshold is `> 0.5` (strict), so this pair should be rejected.
+      const oldHtml = '<table><tr><td>Same</td></tr><tr><td>abcdef</td></tr></table>'
+      const newHtml = '<table><tr><td>Same</td></tr><tr><td>abcxyz</td></tr><tr><td>Brand new</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          '<tr><td>Same</td></tr>' +
+          "<tr class='diffdel'><td class='diffdel'><del class='diffdel'>abcdef</del></td></tr>" +
+          "<tr class='diffins'><td class='diffins'><ins class='diffins'>abcxyz</ins></td></tr>" +
+          "<tr class='diffins'><td class='diffins'><ins class='diffins'>Brand new</ins></td></tr>" +
+          '</table>'
+      )
+    })
+
+    it('DOES pair rows when similarity is just above the threshold', () => {
+      // rowText "abcdefg" (7) vs "abcdxxx" (7). Prefix = 4, suffix = 0
+      // → similarity = 4/7 ≈ 0.571, above 0.5.
+      const oldHtml = '<table><tr><td>Same</td></tr><tr><td>abcdefg</td></tr></table>'
+      const newHtml = '<table><tr><td>Same</td></tr><tr><td>abcdxxx</td></tr><tr><td>Brand new</td></tr></table>'
+
+      // The cell-level diff is word-based, so "abcdefg" and "abcdxxx"
+      // (no whitespace inside) are seen as one word each — the resulting
+      // cell-level output is a whole-word replacement. The row-level
+      // fuzzy match is what put them on the same row instead of
+      // emitting two unrelated full-row entries; that's the win here.
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          '<tr><td>Same</td></tr>' +
+          "<tr><td><del class='diffmod'>abcdefg</del><ins class='diffmod'>abcdxxx</ins></td></tr>" +
+          "<tr class='diffins'><td class='diffins'><ins class='diffins'>Brand new</ins></td></tr>" +
+          '</table>'
+      )
+    })
+  })
+
+  // 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>'
+
+      // 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'. Asserted as an exact
+      // string so that a positional swap of first/last is caught — a
+      // swap-blind set of `toContain` assertions would not flag it.
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table><tr>' +
+          "<td><del class='diffmod'>FirstA</del><ins class='diffmod'>FirstB</ins></td>" +
+          `<td colspan="2" class='mod colspan'>Merged AB</td>` +
+          "<td><del class='diffmod'>LastA</del><ins class='diffmod'>LastB</ins></td>" +
+          '</tr></table>'
+      )
+    })
+
+    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>'
+      const newHtml = '<table><tr><td>A</td></tr><tr><td class="">B</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          '<tr><td>A</td></tr>' +
+          "<tr class='diffins'><td class=\"diffins\"><ins class='diffins'>B</ins></td></tr>" +
+          '</table>'
+      )
+    })
+
+    it('parses unquoted span attribute values (e.g. colspan=2)', () => {
+      const oldHtml = '<table><tr><td colspan=2>AB</td></tr></table>'
+      const newHtml = '<table><tr><td>A</td><td>B</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        "<table><tr><td class='mod colspan'>A</td><td class='mod colspan'>B</td></tr></table>"
+      )
+    })
+  })
+
+  // The combinatorial position search can encounter score ties when
+  // inserted cells have content that is similar both to each other and to
+  // existing cells (e.g. boilerplate "N/A" in a legal schedule). The
+  // algorithm resolves ties by combination-iteration order, so the choice
+  // of which specific column gets the diffins marker is deterministic
+  // but not necessarily the "intuitive" one. These tests lock in the
+  // observed behaviour and guard against silent regressions in the
+  // structural shape: all original cells must survive unmarked, and the
+  // inserted-marker count must equal the column delta.
+  describe('combinatorial column search — score-tied inputs', () => {
+    it('handles delta=2 with content-similar inserts (N/A boilerplate)', () => {
+      const oldHtml = '<table><tr><td>N/A</td><td>Term</td><td>Amount</td><td>N/A</td></tr></table>'
+      const newHtml =
+        '<table><tr><td>N/A</td><td>N/A</td><td>Term</td><td>N/A</td><td>Amount</td><td>N/A</td></tr></table>'
+
+      const result = HtmlDiff.execute(oldHtml, newHtml)
+      // Both inserted N/A cells must be marked diffins.
+      const insMarkers = (result.match(/<td class='diffins'>/g) || []).length
+      expect(insMarkers).toBe(2)
+      // Total td count must be 6 (no phantoms).
+      const tdCount = (result.match(/<td[\s>]/g) || []).length
+      expect(tdCount).toBe(6)
+      // Term and Amount must appear as unmarked preserved cells exactly
+      // once each — they're not similar to N/A, so the algorithm has no
+      // ambiguity around them.
+      expect(result).toContain('<td>Term</td>')
+      expect(result).toContain('<td>Amount</td>')
+    })
+
+    it('handles delta=6 (the MAX_COLUMN_DELTA cap) without misalignment', () => {
+      const oldHtml = '<table><tr><td>A</td><td>B</td><td>C</td><td>D</td></tr></table>'
+      const newHtml =
+        '<table><tr>' +
+        '<td>A</td><td>X1</td><td>X2</td><td>B</td><td>X3</td>' +
+        '<td>X4</td><td>C</td><td>X5</td><td>X6</td><td>D</td>' +
+        '</tr></table>'
+
+      const result = HtmlDiff.execute(oldHtml, newHtml)
+      // Exactly 6 cells inserted, 4 preserved.
+      const insMarkers = (result.match(/<td class='diffins'>/g) || []).length
+      expect(insMarkers).toBe(6)
+      const tdCount = (result.match(/<td[\s>]/g) || []).length
+      expect(tdCount).toBe(10)
+      // All four original cells survive in order without diff markers.
+      expect(result).toContain('<td>A</td>')
+      expect(result).toContain('<td>B</td>')
+      expect(result).toContain('<td>C</td>')
+      expect(result).toContain('<td>D</td>')
+    })
+  })
+
+  // orderAlignmentForEmission's `preserved` list is empty when no rows
+  // survive across the diff. The "delete every row" and "insert every
+  // row" cases are corner cases where the float-positioning logic must
+  // degenerate cleanly: every del's primary becomes `-0.5` (predecessor
+  // index -1), every ins's primary is its own newIdx. Both should emit
+  // in oldIdx / newIdx order respectively, with no preserved rows
+  // sandwiched between them.
+  describe('orderAlignmentForEmission — empty preserved list', () => {
+    it('emits every row as diffdel when new is empty (no preserved rows)', () => {
+      const oldHtml =
+        '<table>' +
+        '<tr><td>r1</td></tr>' +
+        '<tr><td>r2</td></tr>' +
+        '<tr><td>r3</td></tr>' +
+        '<tr><td>r4</td></tr>' +
+        '<tr><td>r5</td></tr>' +
+        '</table>'
+      const newHtml = '<table></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          "<tr class='diffdel'><td class='diffdel'><del class='diffdel'>r1</del></td></tr>" +
+          "<tr class='diffdel'><td class='diffdel'><del class='diffdel'>r2</del></td></tr>" +
+          "<tr class='diffdel'><td class='diffdel'><del class='diffdel'>r3</del></td></tr>" +
+          "<tr class='diffdel'><td class='diffdel'><del class='diffdel'>r4</del></td></tr>" +
+          "<tr class='diffdel'><td class='diffdel'><del class='diffdel'>r5</del></td></tr>" +
+          '</table>'
+      )
+    })
+
+    it('emits every row as diffins when old is empty (no preserved rows)', () => {
+      const oldHtml = '<table></table>'
+      const newHtml = '<table>' + '<tr><td>r1</td></tr>' + '<tr><td>r2</td></tr>' + '<tr><td>r3</td></tr>' + '</table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          "<tr class='diffins'><td class='diffins'><ins class='diffins'>r1</ins></td></tr>" +
+          "<tr class='diffins'><td class='diffins'><ins class='diffins'>r2</ins></td></tr>" +
+          "<tr class='diffins'><td class='diffins'><ins class='diffins'>r3</ins></td></tr>" +
+          '</table>'
+      )
+    })
+
+    it('emits all-deletes in order when only the header is preserved', () => {
+      // The header is the only preserved row, so 'preserved' has 1 entry
+      // and every del's newIdxOfPreservedBefore returns -1 — exercising
+      // the boundary between empty-preserved and a single anchoring row.
+      const oldHtml =
+        '<table>' +
+        '<tr><td>Header</td></tr>' +
+        '<tr><td>row a</td></tr>' +
+        '<tr><td>row b</td></tr>' +
+        '<tr><td>row c</td></tr>' +
+        '</table>'
+      const newHtml = '<table><tr><td>Header</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          '<tr><td>Header</td></tr>' +
+          "<tr class='diffdel'><td class='diffdel'><del class='diffdel'>row a</del></td></tr>" +
+          "<tr class='diffdel'><td class='diffdel'><del class='diffdel'>row b</del></td></tr>" +
+          "<tr class='diffdel'><td class='diffdel'><del class='diffdel'>row c</del></td></tr>" +
+          '</table>'
+      )
+    })
+  })
+
+  // Fuzzy row-pairing threshold (0.5) calibrations on ISDA-flavoured
+  // content. The interesting cases are at the edges: rows that share a
+  // little (an enumeration prefix only) — must NOT pair (otherwise an
+  // unrelated rewrite shows up as a single-row content edit); rows that
+  // share a lot of boilerplate text but differ in the meaningful body —
+  // must pair (otherwise the user sees del+ins instead of an edit).
+  describe('fuzzy row pairing — enumerated clauses and shared boilerplate', () => {
+    it('does NOT pair rows that share only an enumeration prefix (different bodies)', () => {
+      // Old has 2 rows, new has 3 rows. The "1." and "2." prefixes are
+      // the only commonality — bodies are completely unrelated.
+      // textSimilarity falls below 0.5 (prefix is 3 chars in 60+; jaccard
+      // is also tiny), so fuzzy pairing must NOT fire — each pair should
+      // emit as a clean del + ins, not a noisy intra-row diff.
+      const oldHtml =
+        '<table>' +
+        '<tr><td>1. Party A shall pay the gross amount on each Payment Date.</td></tr>' +
+        '<tr><td>2. Party B shall deliver collateral on each Calculation Date.</td></tr>' +
+        '</table>'
+      const newHtml =
+        '<table>' +
+        '<tr><td>1. Section intentionally left blank.</td></tr>' +
+        '<tr><td>2. Different boilerplate entirely.</td></tr>' +
+        '<tr><td>3. Brand new clause added here.</td></tr>' +
+        '</table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          "<tr class='diffdel'><td class='diffdel'><del class='diffdel'>1. Party A shall pay the gross amount on each Payment Date.</del></td></tr>" +
+          "<tr class='diffdel'><td class='diffdel'><del class='diffdel'>2. Party B shall deliver collateral on each Calculation Date.</del></td></tr>" +
+          "<tr class='diffins'><td class='diffins'><ins class='diffins'>1. Section intentionally left blank.</ins></td></tr>" +
+          "<tr class='diffins'><td class='diffins'><ins class='diffins'>2. Different boilerplate entirely.</ins></td></tr>" +
+          "<tr class='diffins'><td class='diffins'><ins class='diffins'>3. Brand new clause added here.</ins></td></tr>" +
+          '</table>'
+      )
+    })
+
+    it('DOES pair rows that share a long boilerplate footer (Jaccard kicks in)', () => {
+      // The 9-char body differs, but the 50-char trailing footer is
+      // identical. Prefix-suffix similarity is low, but token Jaccard is
+      // very high because shared footer tokens dominate the token set.
+      // textSimilarity = Math.max(prefix_suffix, jaccard) → must pair.
+      const footer = ' subject to the terms of the Master Agreement.'
+      const oldHtml = `<table><tr><td>Anchor row</td></tr><tr><td>Alpha now${footer}</td></tr></table>`
+      const newHtml =
+        `<table><tr><td>Anchor row</td></tr><tr><td>Bravo new${footer}</td></tr>` +
+        '<tr><td>Extra row appended</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          '<tr><td>Anchor row</td></tr>' +
+          "<tr><td><del class='diffmod'>Alpha</del><ins class='diffmod'>Bravo</ins> " +
+          "<del class='diffmod'>now</del><ins class='diffmod'>new</ins>" +
+          ' subject to the terms of the Master Agreement.</td></tr>' +
+          "<tr class='diffins'><td class='diffins'><ins class='diffins'>Extra row appended</ins></td></tr>" +
+          '</table>'
+      )
+    })
+  })
+
+  // orderAlignmentForEmission must keep unpaired dels in their correct
+  // positions even when the run contains a mix of preserved rows, fuzzy-
+  // paired rows, and unpaired dels. A regression here would make trailing
+  // dels appear before the row they came after — the same family of bug
+  // as the "deleted rows out of order" report that motivated the
+  // function in the first place.
+  describe('orderAlignmentForEmission — mixed paired and unpaired rows', () => {
+    it('emits trailing unpaired dels after a fuzzy-paired content edit', () => {
+      // Old: [Aaaaa, Bbbbb, Cccc, Dddd]. New: [Aaaaa, Bbbbb+NEW].
+      // After LCS: A is preserved. After pairSimilarUnmatchedRows: B↔B'
+      // via fuzzy. C and D are unpaired dels. The output order must be:
+      // preserved(A) → paired(B,B') → del(C) → del(D).
+      const oldHtml =
+        '<table>' +
+        '<tr><td>Aaaaa shared content here</td></tr>' +
+        '<tr><td>Bbbbb shared content here</td></tr>' +
+        '<tr><td>Cccc deleted row</td></tr>' +
+        '<tr><td>Dddd deleted row</td></tr>' +
+        '</table>'
+      const newHtml =
+        '<table>' +
+        '<tr><td>Aaaaa shared content here</td></tr>' +
+        '<tr><td>Bbbbb shared content here NEW</td></tr>' +
+        '</table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          '<tr><td>Aaaaa shared content here</td></tr>' +
+          "<tr><td>Bbbbb shared content here<ins class='diffins'>&nbsp;NEW</ins></td></tr>" +
+          "<tr class='diffdel'><td class='diffdel'><del class='diffdel'>Cccc deleted row</del></td></tr>" +
+          "<tr class='diffdel'><td class='diffdel'><del class='diffdel'>Dddd deleted row</del></td></tr>" +
+          '</table>'
+      )
+    })
+
+    it('emits dels at the end of the table in old-document order', () => {
+      // Specifically protects against the regression that motivated
+      // orderAlignmentForEmission: deleting the last two rows
+      // simultaneously must emit them in the order they appeared in old
+      // (second-last, then last), not reversed or jumbled.
+      const oldHtml =
+        '<table>' +
+        '<tr><td>kept1</td></tr>' +
+        '<tr><td>kept2</td></tr>' +
+        '<tr><td>second-last</td></tr>' +
+        '<tr><td>last</td></tr>' +
+        '</table>'
+      const newHtml = '<table><tr><td>kept1</td></tr><tr><td>kept2</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          '<tr><td>kept1</td></tr>' +
+          '<tr><td>kept2</td></tr>' +
+          "<tr class='diffdel'><td class='diffdel'><del class='diffdel'>second-last</del></td></tr>" +
+          "<tr class='diffdel'><td class='diffdel'><del class='diffdel'>last</del></td></tr>" +
+          '</table>'
+      )
+    })
+  })
+
+  // pairSimilarUnmatched is intentionally greedy (not Hungarian-optimal).
+  // When two unmatched-old entries are both above-threshold matches for
+  // the same unmatched-new entry, the first del wins the pairing only
+  // when iterating in document order means "first" matches the better
+  // candidate. The output must still be structurally valid — no phantom
+  // cells, no dropped content — regardless of which del wins.
+  describe('pairSimilarUnmatchedCells — competing dels for the same ins', () => {
+    it('keeps both candidate cells intact when two old cells could pair with one new cell', () => {
+      // Two old cells with identical content compete for one similar
+      // new cell. The greedy assignment picks one to pair as a content
+      // edit; the other emits as a full diffdel. Both must appear; no
+      // cell may silently vanish.
+      const oldHtml =
+        '<table><tr>' +
+        '<td>Preserved</td>' +
+        '<td>Old content alpha to be edited</td>' +
+        '<td>Old content alpha to be edited</td>' +
+        '</tr></table>'
+      const newHtml = '<table><tr>' + '<td>Preserved</td>' + '<td>Old content alpha CHANGED</td>' + '</tr></table>'
+
+      const result = HtmlDiff.execute(oldHtml, newHtml)
+      // The losing del must emit as a full diffdel cell.
+      expect(result).toContain("<td class='diffdel'><del class='diffdel'>Old content alpha to be edited</del></td>")
+      // The winning pair must emit as a partial content edit.
+      expect(result).toContain("<del class='diffmod'>to be edited</del>")
+      expect(result).toContain("<ins class='diffmod'>CHANGED</ins>")
+      // Structural: 3 tds total in the output (1 preserved, 1 full-del,
+      // 1 paired-edit). No phantoms.
+      const tdCount = (result.match(/<td[\s>]/g) || []).length
+      expect(tdCount).toBe(3)
+    })
+  })
+
+  // Row-LCS on a non-trivial 7-row table where only every other row
+  // matches. Existing named tests max out around 4 rows; the matrix
+  // never produces a row-count drop this large with this much
+  // interleaving. This exercises the LCS DP itself, not just the
+  // diff emission.
+  describe('row-LCS on larger tables', () => {
+    it('finds 4 preserved rows interleaved with 3 dropped rows in a 7-row old table', () => {
+      const oldHtml =
+        '<table>' +
+        '<tr><td>row1 preserved</td></tr>' +
+        '<tr><td>row2 old body</td></tr>' +
+        '<tr><td>row3 preserved</td></tr>' +
+        '<tr><td>row4 old body</td></tr>' +
+        '<tr><td>row5 preserved</td></tr>' +
+        '<tr><td>row6 old body</td></tr>' +
+        '<tr><td>row7 preserved</td></tr>' +
+        '</table>'
+      const newHtml =
+        '<table>' +
+        '<tr><td>row1 preserved</td></tr>' +
+        '<tr><td>row3 preserved</td></tr>' +
+        '<tr><td>row5 preserved</td></tr>' +
+        '<tr><td>row7 preserved</td></tr>' +
+        '</table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          '<tr><td>row1 preserved</td></tr>' +
+          "<tr class='diffdel'><td class='diffdel'><del class='diffdel'>row2 old body</del></td></tr>" +
+          '<tr><td>row3 preserved</td></tr>' +
+          "<tr class='diffdel'><td class='diffdel'><del class='diffdel'>row4 old body</del></td></tr>" +
+          '<tr><td>row5 preserved</td></tr>' +
+          "<tr class='diffdel'><td class='diffdel'><del class='diffdel'>row6 old body</del></td></tr>" +
+          '<tr><td>row7 preserved</td></tr>' +
+          '</table>'
+      )
+    })
+  })
+})