Test case for jQuery Ticket 8070

dommanip bug

by jitter

HTML

<input id="Button2" type="button" value=" MultipleList " />

<p>Append > 2 `option`s
    <select id="list2"></select>
    <select id="list3"></select>
</p>

<p>Append 1 `option`
    <select id="list4"><option>1</option></select>
    <select id="list5"><option>1</option></select>
</p>

<div></div>
<div></div>
<div></div>

<br />

<p>"div > p > span" should appear 6 times. ( 3 sets of 2 )</p>

<br />

<pre></pre>
<pre></pre>
<pre></pre>

<br />

<p>You should see the string "The html fragment for this has 512 characters.12345678901......234567" appear three times</p>

JavaScript

$("#Button2").click(function() {
    //DOESN'T work because buildFragment returns results.cacheable === undefined
    //thus on the first iteration the fragment is directly passed in to the "append" callback
    //which means on the second iteration the fragment is empty but because
    //i > 0 now is true it tries "jQuery.clone( fragment, true, true )" which of course
    //does nothing as the fragment is empty already
    $("#list2,#list3").append("<OPTION>1</OPTION><OPTION selected>2</OPTION>");

    //WORKS because fragment in the domManip loop isn't a documentfragment but an option-element
    //on the second loop fragment just points to the option element already insert into the document
    //easiyl checkable by looking at fragment.parentNode which changes from DocFragment to a select-node
    $("#list4,#list5").append("<OPTION selected>2</OPTION>");

    //WORKS because buildFragment returns results.cacheable === true which means
    //on all three iterations the jQuery.clone( fragment, true, true ) branch is called
    $("div").append("<p>A<span>div &gt; p &gt; span </span></p><p>B<span>div &gt; p &gt; span </span></p>");

    //This test shows it has nothing to do with option elements
    //the string is 512 characters long -> buildFragment says cacheable = false
    //this causes the same bug as with the options
    //the fragments childNodes are appended in the first iteration
    //in the subsequent iterations fragment is empty thus it fails to append to the 2nd and 3rd pre element
    //just try removing a single character from the string below and it starts working again 
    $("pre").append("<span>The html fragment for this has 512 characters.</span><span>12345678901...</span><span...