Teamwork / visual-dom-diff

Highlight differences between two DOM trees.
https://teamwork.github.io/visual-dom-diff/
MIT License
47 stars 11 forks source link

Tables with rowspan or colspan is treated as invalid table #7

Open diesburgm opened 4 years ago

diesburgm commented 4 years ago

Add the following test.

[
  'table - with colspan',
  htmlToFragment('<table><tbody><tr><td>one</td><td>two</td></tr><tr><td colspan="2">col span</td></tr></tbody></table>'),
  htmlToFragment('<table><tbody><tr><td>one</td><td>two</td></tr><tr><td colspan="2">col span</td></tr></tbody></table>'),
  '<table><tbody><tr><td>one</td><td>two</td></tr><tr><td colspan="2"</td></tr></tbody></table>',
  undefined,
],

Unit test fails.

Expected: "

<td colspan=\"2\"
onetwo
" Received: "<table class=\"vdd-removed\">onetwo<td colspan=\"2\" <=\"\" td=\"\"><table class=\"vdd-added\">onetwo<td colspan=\"2\" <=\"\" td=\"\">"

gkubisa commented 4 years ago

This is a known limitation - colspan and rowspan present and not equal to "1" make visual-dom-diff bail out and show that the old table was removed and a new one added.

The problem is with keeping columns always properly aligned which is really necessary to make diffs understandable to users. Given the complexity of this task, I decided to focus on the most common case first and bail out in case certain preconditions are not met, one of which is colspan and rowspan must equal 1.

It is definitely possible to extend the base algorithm to handle colspan and rowspan greater than 1, at least in some cases, though it might still be necessary to place some restrictions in order to keep the result user-friendly. Unfortunately, I won't have time to implement it any time soon but I'd certainly welcome a PR.

humitos commented 3 months ago

I just found this issue and I'm not sure to understand if I'm hitting the same issue one or not.

I used the following HTML snippet to test it:

<table>
<thead>
<tr><th>Environment variable</th>
<th>Zope option</th>
<th>Default value</th>
</tr>
</thead>
<tbody>
<tr><td>DEBUG_MODE</td>
<td>debug-mode</td>
<td>off</td>
</tr>
</tbody>
</table>

I paste it twice in https://teamwork.github.io/visual-dom-diff/ and I'm seeing the whole table being deleted and added. Am I doing something wrong here?

Would you mind pointing me to the section of the code where this behavior could be happening? I may be able to take a look and see if I find something relevant to make a PR.