[e] (0) better example

Fixing http://www.w3.org/Bugs/Public/show_bug.cgi?id=11345 git-svn-id: http://svn.whatwg.org/webapps@5731 340c8d12-0b0e-0410-8428-c7bf67bfef74
whatwg · Dec 31, 2010 · 007ff0d · 007ff0d
1 parent f3fb161
commit 007ff0d
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 14 deletions.
diff --git a/complete.html b/complete.html
@@ -2098,13 +2098,19 @@ <h4 id=syntax-errors><span class=secno>1.10.2 </span>Syntax errors</h4>
 
     <div class=example>
 
-     <p>For example, the following markup results in poor performance
-     when hitting the highlighted end tag, since all the open elements
-     are examined first to see if they match the close tag:</p>
+     <p>For example, the following markup results in poor performance,
+     since all the unclosed <code><a href=#the-i-element>i</a></code> elements have to be
+     reconstructed in each paragraph, resulting in progressively more
+     elements in each paragraph:</p>
 
-     <pre class=bad>&lt;p&gt;&lt;em&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;...&lt;span&gt;&lt;span&gt;&lt;span&gt;<strong>&lt;/em&gt;</strong></pre>
+     <pre class=bad>&lt;p&gt;&lt;i&gt;He dreamt.
+&lt;p&gt;&lt;i&gt;He dreamt that he ate breakfast.
+&lt;p&gt;&lt;i&gt;Then lunch.
+&lt;p&gt;&lt;i&gt;And finally dinner.</pre>
 
-    </div>
+     <p>The resulting DOM for this fragment would be:</p>
+
+     <ul class=domTree><li class=t1><code><a href=#the-p-element>p</a></code><ul><li class=t1><code><a href=#the-i-element>i</a></code><ul><li class=t3><code>#text</code>: <span title="">He dreamt.</span></ul></ul><li class=t1><code><a href=#the-p-element>p</a></code><ul><li class=t1><code><a href=#the-i-element>i</a></code><ul><li class=t1><code><a href=#the-i-element>i</a></code><ul><li class=t3><code>#text</code>: <span title="">He dreamt that he ate breakfast.</span></ul></ul></ul><li class=t1><code><a href=#the-p-element>p</a></code><ul><li class=t1><code><a href=#the-i-element>i</a></code><ul><li class=t1><code><a href=#the-i-element>i</a></code><ul><li class=t1><code><a href=#the-i-element>i</a></code><ul><li class=t3><code>#text</code>: <span title="">Then lunch.</span></ul></ul></ul></ul><li class=t1><code><a href=#the-p-element>p</a></code><ul><li class=t1><code><a href=#the-i-element>i</a></code><ul><li class=t1><code><a href=#the-i-element>i</a></code><ul><li class=t1><code><a href=#the-i-element>i</a></code><ul><li class=t1><code><a href=#the-i-element>i</a></code><ul><li class=t3><code>#text</code>: <span title="">And finally dinner.</span></ul></ul></ul></ul></ul></ul></div>
 
    </dd>
 

diff --git a/index b/index
@@ -2077,13 +2077,19 @@ a.setAttribute('href', 'http://example.com/'); // change the content attribute d
 
     <div class=example>
 
-     <p>For example, the following markup results in poor performance
-     when hitting the highlighted end tag, since all the open elements
-     are examined first to see if they match the close tag:</p>
+     <p>For example, the following markup results in poor performance,
+     since all the unclosed <code><a href=#the-i-element>i</a></code> elements have to be
+     reconstructed in each paragraph, resulting in progressively more
+     elements in each paragraph:</p>
 
-     <pre class=bad>&lt;p&gt;&lt;em&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;...&lt;span&gt;&lt;span&gt;&lt;span&gt;<strong>&lt;/em&gt;</strong></pre>
+     <pre class=bad>&lt;p&gt;&lt;i&gt;He dreamt.
+&lt;p&gt;&lt;i&gt;He dreamt that he ate breakfast.
+&lt;p&gt;&lt;i&gt;Then lunch.
+&lt;p&gt;&lt;i&gt;And finally dinner.</pre>
 
-    </div>
+     <p>The resulting DOM for this fragment would be:</p>
+
+     <ul class=domTree><li class=t1><code><a href=#the-p-element>p</a></code><ul><li class=t1><code><a href=#the-i-element>i</a></code><ul><li class=t3><code>#text</code>: <span title="">He dreamt.</span></ul></ul><li class=t1><code><a href=#the-p-element>p</a></code><ul><li class=t1><code><a href=#the-i-element>i</a></code><ul><li class=t1><code><a href=#the-i-element>i</a></code><ul><li class=t3><code>#text</code>: <span title="">He dreamt that he ate breakfast.</span></ul></ul></ul><li class=t1><code><a href=#the-p-element>p</a></code><ul><li class=t1><code><a href=#the-i-element>i</a></code><ul><li class=t1><code><a href=#the-i-element>i</a></code><ul><li class=t1><code><a href=#the-i-element>i</a></code><ul><li class=t3><code>#text</code>: <span title="">Then lunch.</span></ul></ul></ul></ul><li class=t1><code><a href=#the-p-element>p</a></code><ul><li class=t1><code><a href=#the-i-element>i</a></code><ul><li class=t1><code><a href=#the-i-element>i</a></code><ul><li class=t1><code><a href=#the-i-element>i</a></code><ul><li class=t1><code><a href=#the-i-element>i</a></code><ul><li class=t3><code>#text</code>: <span title="">And finally dinner.</span></ul></ul></ul></ul></ul></ul></div>
 
    </dd>
 

diff --git a/source b/source
@@ -956,11 +956,19 @@ a.setAttribute('href', 'http://example.com/'); // change the content attribute d
 
     <div class="example">
 
-     <p>For example, the following markup results in poor performance
-     when hitting the highlighted end tag, since all the open elements
-     are examined first to see if they match the close tag:</p>
+     <p>For example, the following markup results in poor performance,
+     since all the unclosed <code>i</code> elements have to be
+     reconstructed in each paragraph, resulting in progressively more
+     elements in each paragraph:</p>
 
-     <pre class="bad">&lt;p>&lt;em>&lt;span>&lt;span>&lt;span>...&lt;span>&lt;span>&lt;span><strong>&lt;/em></strong></pre>
+     <pre class="bad">&lt;p>&lt;i>He dreamt.
+&lt;p>&lt;i>He dreamt that he ate breakfast.
+&lt;p>&lt;i>Then lunch.
+&lt;p>&lt;i>And finally dinner.</pre>
+
+     <p>The resulting DOM for this fragment would be:</p>
+
+     <ul class="domTree"><li class="t1"><code>p</code><ul><li class="t1"><code>i</code><ul><li class="t3"><code>#text</code>: <span title="">He dreamt.</span></li></ul></li></ul></li><li class="t1"><code>p</code><ul><li class="t1"><code>i</code><ul><li class="t1"><code>i</code><ul><li class="t3"><code>#text</code>: <span title="">He dreamt that he ate breakfast.</span></li></ul></li></ul></li></ul></li><li class="t1"><code>p</code><ul><li class="t1"><code>i</code><ul><li class="t1"><code>i</code><ul><li class="t1"><code>i</code><ul><li class="t3"><code>#text</code>: <span title="">Then lunch.</span></li></ul></li></ul></li></ul></li></ul></li><li class="t1"><code>p</code><ul><li class="t1"><code>i</code><ul><li class="t1"><code>i</code><ul><li class="t1"><code>i</code><ul><li class="t1"><code>i</code><ul><li class="t3"><code>#text</code>: <span title="">And finally dinner.</span></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul>
 
     </div>