@createiq/htmldiff 1.0.5-beta.0 → 1.0.5-beta.2

package/test/HtmlDiff.tables.spec.ts

@@ -0,0 +1,1458 @@
+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 <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('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>'
+      )
+    })
+  })
+
+  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>"
+      )
+    })
+  })
+})