Fix html syntax error

Html Unified renderer causes following error when rendering skipped
lines: Element div not allowed as child of element span in this context.

example/dark-theme.css

@@ -53,6 +53,7 @@ a, a:visited {
 .Differences .Skipped {
     background: #F7F7F7;
     color:      #000000;
+    display:    block;
 }
 
 .Differences ins,

example/styles.css

@@ -47,6 +47,7 @@ pre {
 
 .Differences .Skipped {
     background: #F7F7F7;
+    display: block;
 }
 
 /*

lib/jblond/Diff/Renderer/Html/Unified.php

@@ -82,7 +82,7 @@ public function generateDiffHeader(): string
      */
     public function generateSkippedLines(): string
     {
-        return '<div class="Skipped" title="Equal lines collapsed!">&hellip;</div>';
+        return '<span class="Skipped" title="Equal lines collapsed!">&hellip;</span>';
     }
 
 

tests/resources/htmlUnified.txt

@@ -1 +1 @@
-<span class="Differences DifferencesUnified"><span class="ChangeEqual"><span>&lt;html&gt;</span><br><span>&nbsp;&nbsp;&nbsp;&nbsp;&lt;head&gt;</span><br><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta http-equiv="Content-type" content="text/html; charset=utf-8"/&gt;</span><br></span><span class="ChangeReplace"><span class="Left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;Hello <del>World</del>!&lt;/title&gt;</span><br><span class="Right">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;Hello <ins>You</ins>!&lt;/title&gt;</span><br></span><span class="ChangeEqual"><span>&nbsp;&nbsp;&nbsp;&nbsp;&lt;/head&gt;</span><br><span>&nbsp;&nbsp;&nbsp;&nbsp;&lt;body&gt;</span><br><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;This is demo content to show features of the php-diff package.&lt;/h1&gt;</span><br></span><span class="ChangeDelete"><span class="Left"><del>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;This line is removed from version2.&lt;/h2&gt;</del></span><br></span><span class="ChangeEqual"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;This line is the same for both versions.&lt;/h2&gt;</span><br></span><span class="ChangeReplace"><span class="Left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;<del>this line has inline</del> differences between both versions.&lt;/h2&gt;</span><br><span class="Right">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;<ins>This line has</ins> differences between both versions.&lt;/h2&gt;</span><br></span><span class="ChangeEqual"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;This line is the same for both versions.&lt;/h2&gt;</span><br></span><span class="ChangeReplace"><span class="Left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;This line also has <del>inl</del>ine differences between both versions.&lt;/h2&gt;</span><br><span class="Right">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;This line also has <ins>InL</ins>ine differences between both versions.&lt;/h2&gt;</span><br></span><span class="ChangeEqual"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;This line is the same for both versions.&lt;/h2&gt;</span><br></span><span class="ChangeInsert"><span class="Right"><ins>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;This line is added to version2.&lt;/h2&gt;</ins></span><br></span><span class="ChangeEqual"><span></span><br><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;</span><br><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;It's also compatible with multibyte characters (like Chinese and emoji) as shown below:</span><br></span><span class="ChangeReplace"><span class="Left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;另外我覺得那個評<del>價</del>的白色櫃子有點沒有必要欸。外觀我就不說了 ，怎麼連空間都那麼狹隘。不過倒是從這個地方看出所謂的“改革”</span><br><span class="Left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Do you know what "<del>金槍魚罐頭</del>" means in Chinese?</span><br><span class="Left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<del>🍏🍎</del>🙂</span><br><span class="Right">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;另外我覺得那個評<ins>鑑</ins>的白色櫃子有點沒有必要欸。外觀我就不說了 ，怎麼連空間都那麼狹隘。不過倒是從這個地方看出所謂的“改革”</span><br><span class="Right">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Do you know what "<ins>魚の缶詰</ins>" means in Chinese?</span><br><span class="Right">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<ins>🍎🍏</ins>🙂</span><br></span><span class="ChangeEqual"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/p&gt;</span><br><span></span><br><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Just some lines to demonstrate the collapsing of a block of lines which are the same in both versions.&lt;/p&gt;</span><br></span><div class="Skipped" title="Equal lines collapsed!">&hellip;</div><span class="ChangeEqual"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Just some lines to demonstrate the collapsing of a block of lines which are the same in both versions.&lt;/p&gt;</span><br><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Just some lines to demonstrate the collapsing of a block of lines which are the same in both versions.&lt;/p&gt;</span><br><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Just some lines to demonstrate the collapsing of a block of lines which are the same in both versions.&lt;/p&gt;</span><br></span><span class="ChangeReplace"><span class="Left"><del>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</del>&lt;h2&gt;This line also has inline differences between both versions. It's the whitespace in front.&lt;/h2&gt;</span><br><span class="Right"><ins>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</ins>&lt;h2&gt;This line also has inline differences between both versions. It's the whitespace in front.&lt;/h2&gt;</span><br></span><span class="ChangeEqual"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;This line is the same for both versions.&lt;/h2&gt;</span><br></span><span class="ChangeReplace"><span class="Left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;This line also has inline differences between both versions<del>.</del>&lt;/h2&gt;</span><br><span class="Right">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;This line also has inline differences between both versions<ins>!</ins>&lt;/h2&gt;</span><br></span><span class="ChangeEqual"><span>&nbsp;&nbsp;&nbsp;&nbsp;&lt;/body&gt;</span><br><span>&lt;/html&gt;</span><br><span></span><br></span></span>
+<span class="Differences DifferencesUnified"><span class="ChangeEqual"><span>&lt;html&gt;</span><br><span>&nbsp;&nbsp;&nbsp;&nbsp;&lt;head&gt;</span><br><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta http-equiv="Content-type" content="text/html; charset=utf-8"/&gt;</span><br></span><span class="ChangeReplace"><span class="Left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;Hello <del>World</del>!&lt;/title&gt;</span><br><span class="Right">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;Hello <ins>You</ins>!&lt;/title&gt;</span><br></span><span class="ChangeEqual"><span>&nbsp;&nbsp;&nbsp;&nbsp;&lt;/head&gt;</span><br><span>&nbsp;&nbsp;&nbsp;&nbsp;&lt;body&gt;</span><br><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;This is demo content to show features of the php-diff package.&lt;/h1&gt;</span><br></span><span class="ChangeDelete"><span class="Left"><del>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;This line is removed from version2.&lt;/h2&gt;</del></span><br></span><span class="ChangeEqual"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;This line is the same for both versions.&lt;/h2&gt;</span><br></span><span class="ChangeReplace"><span class="Left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;<del>this line has inline</del> differences between both versions.&lt;/h2&gt;</span><br><span class="Right">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;<ins>This line has</ins> differences between both versions.&lt;/h2&gt;</span><br></span><span class="ChangeEqual"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;This line is the same for both versions.&lt;/h2&gt;</span><br></span><span class="ChangeReplace"><span class="Left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;This line also has <del>inl</del>ine differences between both versions.&lt;/h2&gt;</span><br><span class="Right">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;This line also has <ins>InL</ins>ine differences between both versions.&lt;/h2&gt;</span><br></span><span class="ChangeEqual"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;This line is the same for both versions.&lt;/h2&gt;</span><br></span><span class="ChangeInsert"><span class="Right"><ins>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;This line is added to version2.&lt;/h2&gt;</ins></span><br></span><span class="ChangeEqual"><span></span><br><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;</span><br><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;It's also compatible with multibyte characters (like Chinese and emoji) as shown below:</span><br></span><span class="ChangeReplace"><span class="Left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;另外我覺得那個評<del>價</del>的白色櫃子有點沒有必要欸。外觀我就不說了 ，怎麼連空間都那麼狹隘。不過倒是從這個地方看出所謂的“改革”</span><br><span class="Left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Do you know what "<del>金槍魚罐頭</del>" means in Chinese?</span><br><span class="Left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<del>🍏🍎</del>🙂</span><br><span class="Right">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;另外我覺得那個評<ins>鑑</ins>的白色櫃子有點沒有必要欸。外觀我就不說了 ，怎麼連空間都那麼狹隘。不過倒是從這個地方看出所謂的“改革”</span><br><span class="Right">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Do you know what "<ins>魚の缶詰</ins>" means in Chinese?</span><br><span class="Right">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<ins>🍎🍏</ins>🙂</span><br></span><span class="ChangeEqual"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/p&gt;</span><br><span></span><br><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Just some lines to demonstrate the collapsing of a block of lines which are the same in both versions.&lt;/p&gt;</span><br></span><span class="Skipped" title="Equal lines collapsed!">&hellip;</span><span class="ChangeEqual"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Just some lines to demonstrate the collapsing of a block of lines which are the same in both versions.&lt;/p&gt;</span><br><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Just some lines to demonstrate the collapsing of a block of lines which are the same in both versions.&lt;/p&gt;</span><br><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Just some lines to demonstrate the collapsing of a block of lines which are the same in both versions.&lt;/p&gt;</span><br></span><span class="ChangeReplace"><span class="Left"><del>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</del>&lt;h2&gt;This line also has inline differences between both versions. It's the whitespace in front.&lt;/h2&gt;</span><br><span class="Right"><ins>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</ins>&lt;h2&gt;This line also has inline differences between both versions. It's the whitespace in front.&lt;/h2&gt;</span><br></span><span class="ChangeEqual"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;This line is the same for both versions.&lt;/h2&gt;</span><br></span><span class="ChangeReplace"><span class="Left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;This line also has inline differences between both versions<del>.</del>&lt;/h2&gt;</span><br><span class="Right">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;This line also has inline differences between both versions<ins>!</ins>&lt;/h2&gt;</span><br></span><span class="ChangeEqual"><span>&nbsp;&nbsp;&nbsp;&nbsp;&lt;/body&gt;</span><br><span>&lt;/html&gt;</span><br><span></span><br></span></span>