<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
<script type="text/javascript" src="http://documentcloud.github.com/underscore/underscore-min.js"></script>

<div id="dom-creation" style="display: none;">container for creating nodes with innerHTML</div>

<script id="template" type="text/html">
    <table>
        <% $.each(models, function(i, model) { %>
            <tr>
                <td><%- model.prop1 %></td>
                <td><%- model.prop2 %></td>
                <td><%- model.prop3 %></td>
                <td><%- model.prop4 %></td>
                <td><%- model.prop5 %></td>
            </tr>
        <% }); %>
    </table>
</script>

<script id="template-no-with" type="text/html">
    <table>
        <% $.each(obj.models, function(i, model) { %>
            <tr>
                <td><%- model.prop1 %></td>
                <td><%- model.prop2 %></td>
                <td><%- model.prop3 %></td>
                <td><%- model.prop4 %></td>
                <td><%- model.prop5 %></td>
            </tr>
        <% }); %>
    </table>
</script>

Setup JS

_.templateNoWith = function(str, data) {
        var c  = _.templateSettings;
        var tmpl = 'var __p=[],print=function(){__p.push.apply(__p,arguments);};' +
          '__p.push(\'' +
          str.replace(/\\/g, '\\\\')
             .replace(/'/g, "\\'")
             .replace(c.escape || noMatch, function(match, code) {
               return "',_.escape(" + unescape(code) + "),'";
             })
             .replace(c.interpolate || noMatch, function(match, code) {
               return "'," + unescape(code) + ",'";
             })
             .replace(c.evaluate || noMatch, function(match, code) {
               return "');" + unescape(code).replace(/[\r\n\t]/g, ' ') + ";__p.push('";
             })
             .replace(/\r/g, '\\r')
             .replace(/\n/g, '\\n')
             .replace(/\t/g, '\\t')
             + "');return __p.join('');";
        var func = new Function('obj', '_', tmpl);
        if (data) return func(data, _);
        return function(data) {
          return func.call(this, data, _);
        };
      };
    
    var models      = [];
    var modelsHtml  = [];
    
    for (var i = 0; i < 250; i++) {
        var model = {
            prop1: 'prop1-' + i,
            prop2: 'prop2-' + i,
            prop3: 'prop3-' + i,
            prop4: 'prop4-' + i,
            prop5: 'prop5-' + i
        };
        
        models.push(model);
        
        modelsHtml.push(
            '<tr>' +
                '<td>' + model.prop1 + '</td>' +
                '<td>' + model.prop2 + '</td>' +
                '<td>' + model.prop3 + '</td>' +
                '<td>' + model.prop4 + '</td>' +
                '<td>' + model.prop5 + '</td>' +
            '</tr>'
        );
    }
    
    var models25        = models.slice(0, 25);
    var models50        = models.slice(0, 50);
    var models75        = models.slice(0, 75);
    var models100       = models.slice(0, 100);
    var models150       = models.slice(0, 150);
    var models200       = models.slice(0, 200);
    var models250       = models.slice(0, 250);
    
    var tableHtml25     = '<table>' + modelsHtml.slice(0, 25).join('') + '</table>';
    var tableHtml50     = '<table>' + modelsHtml.slice(0, 50).join('') + '</table>';
    var tableHtml75     = '<table>' + modelsHtml.slice(0, 75).join('') + '</table>';
    var tableHtml100    = '<table>' + modelsHtml.slice(0, 100).join('') + '</table>';
    var tableHtml150    = '<table>' + modelsHtml.slice(0, 150).join('') + '</table>';
    var tableHtml200    = '<table>' + modelsHtml.slice(0, 200).join('') + '</table>';
    var tableHtml250    = '<table>' + modelsHtml.slice(0, 250).join('') + '</table>';
    
    var domCreation     = document.getElementById('dom-creation');
    
    var template        = _.template(document.getElementById('template').innerHTML);
    var templateNoWith  = _.templateNoWith(document.getElementById('template-no-with').innerHTML);

Teardown JS

Test cases

Test #1

Title *

Async

Code *

    var div     = domCreation.innerHTML = tableHtml25;
    var table   = domCreation.firstChild;

Test #2

Title *

Async

Code *

    var div     = domCreation.innerHTML = tableHtml50;
    var table   = domCreation.firstChild;

Test #3

Title *

Async

Code *

    var div     = domCreation.innerHTML = tableHtml75;
    var table   = domCreation.firstChild;

Test #4

Title *

Async

Code *

    var div     = domCreation.innerHTML = tableHtml100;
    var table   = domCreation.firstChild;

Test #5

Title *

Async

Code *

    var div     = domCreation.innerHTML = tableHtml150;
    var table   = domCreation.firstChild;

Test #6

Title *

Async

Code *

    var div     = domCreation.innerHTML = tableHtml200;
    var table   = domCreation.firstChild;

Test #7

Title *

Async

Code *

    var div     = domCreation.innerHTML = tableHtml250;
    var table   = domCreation.firstChild;

Test #8

Title *

Async

Code *

    var table   = document.createElement('table');
    var models  = models25;
    var length  = models.length;
    
    for (var i = 0; i < models.length; i++) {
        var model   = models[i];
        var row     = document.createElement('tr');
        
        var cell1 = document.createElement('td');
        var text1 = document.createTextNode(model.prop1);
        cell1.appendChild(text1);
        row.appendChild(cell1);
        
        var cell2 = document.createElement('td');
        var text2 = document.createTextNode(model.prop2);
        cell2.appendChild(text2);
        row.appendChild(cell2);
        
        var cell3 = document.createElement('td');
        var text3 = document.createTextNode(model.prop3);
        cell3.appendChild(text3);
        row.appendChild(cell3);
        
        var cell4 = document.createElement('td');
        var text4 = document.createTextNode(model.prop4);
        cell4.appendChild(text4);
        row.appendChild(cell4);
        
        var cell5 = document.createElement('td');
        var text5 = document.createTextNode(model.prop5);
        cell5.appendChild(text5);
        row.appendChild(cell5);
        
        table.appendChild(row);
    }

Test #9

Title *

Async

Code *

    var table   = document.createElement('table');
    var models  = models50;
    var length  = models.length;
    
    for (var i = 0; i < models.length; i++) {
        var model   = models[i];
        var row     = document.createElement('tr');
        
        var cell1 = document.createElement('td');
        var text1 = document.createTextNode(model.prop1);
        cell1.appendChild(text1);
        row.appendChild(cell1);
        
        var cell2 = document.createElement('td');
        var text2 = document.createTextNode(model.prop2);
        cell2.appendChild(text2);
        row.appendChild(cell2);
        
        var cell3 = document.createElement('td');
        var text3 = document.createTextNode(model.prop3);
        cell3.appendChild(text3);
        row.appendChild(cell3);
        
        var cell4 = document.createElement('td');
        var text4 = document.createTextNode(model.prop4);
        cell4.appendChild(text4);
        row.appendChild(cell4);
        
        var cell5 = document.createElement('td');
        var text5 = document.createTextNode(model.prop5);
        cell5.appendChild(text5);
        row.appendChild(cell5);
        
        table.appendChild(row);
    }

Test #10

Title *

Async

Code *

    var table   = document.createElement('table');
    var models  = models75;
    var length  = models.length;
    
    for (var i = 0; i < models.length; i++) {
        var model   = models[i];
        var row     = document.createElement('tr');
        
        var cell1 = document.createElement('td');
        var text1 = document.createTextNode(model.prop1);
        cell1.appendChild(text1);
        row.appendChild(cell1);
        
        var cell2 = document.createElement('td');
        var text2 = document.createTextNode(model.prop2);
        cell2.appendChild(text2);
        row.appendChild(cell2);
        
        var cell3 = document.createElement('td');
        var text3 = document.createTextNode(model.prop3);
        cell3.appendChild(text3);
        row.appendChild(cell3);
        
        var cell4 = document.createElement('td');
        var text4 = document.createTextNode(model.prop4);
        cell4.appendChild(text4);
        row.appendChild(cell4);
        
        var cell5 = document.createElement('td');
        var text5 = document.createTextNode(model.prop5);
        cell5.appendChild(text5);
        row.appendChild(cell5);
        
        table.appendChild(row);
    }

Test #11

Title *

Async

Code *

    var table   = document.createElement('table');
    var models  = models100;
    var length  = models.length;
    
    for (var i = 0; i < models.length; i++) {
        var model   = models[i];
        var row     = document.createElement('tr');
        
        var cell1 = document.createElement('td');
        var text1 = document.createTextNode(model.prop1);
        cell1.appendChild(text1);
        row.appendChild(cell1);
        
        var cell2 = document.createElement('td');
        var text2 = document.createTextNode(model.prop2);
        cell2.appendChild(text2);
        row.appendChild(cell2);
        
        var cell3 = document.createElement('td');
        var text3 = document.createTextNode(model.prop3);
        cell3.appendChild(text3);
        row.appendChild(cell3);
        
        var cell4 = document.createElement('td');
        var text4 = document.createTextNode(model.prop4);
        cell4.appendChild(text4);
        row.appendChild(cell4);
        
        var cell5 = document.createElement('td');
        var text5 = document.createTextNode(model.prop5);
        cell5.appendChild(text5);
        row.appendChild(cell5);
        
        table.appendChild(row);
    }

Test #12

Title *

Async

Code *

    var table   = document.createElement('table');
    var models  = models150;
    var length  = models.length;
    
    for (var i = 0; i < models.length; i++) {
        var model   = models[i];
        var row     = document.createElement('tr');
        
        var cell1 = document.createElement('td');
        var text1 = document.createTextNode(model.prop1);
        cell1.appendChild(text1);
        row.appendChild(cell1);
        
        var cell2 = document.createElement('td');
        var text2 = document.createTextNode(model.prop2);
        cell2.appendChild(text2);
        row.appendChild(cell2);
        
        var cell3 = document.createElement('td');
        var text3 = document.createTextNode(model.prop3);
        cell3.appendChild(text3);
        row.appendChild(cell3);
        
        var cell4 = document.createElement('td');
        var text4 = document.createTextNode(model.prop4);
        cell4.appendChild(text4);
        row.appendChild(cell4);
        
        var cell5 = document.createElement('td');
        var text5 = document.createTextNode(model.prop5);
        cell5.appendChild(text5);
        row.appendChild(cell5);
        
        table.appendChild(row);
    }

Test #13

Title *

Async

Code *

    var table   = document.createElement('table');
    var models  = models200;
    var length  = models.length;
    
    for (var i = 0; i < models.length; i++) {
        var model   = models[i];
        var row     = document.createElement('tr');
        
        var cell1 = document.createElement('td');
        var text1 = document.createTextNode(model.prop1);
        cell1.appendChild(text1);
        row.appendChild(cell1);
        
        var cell2 = document.createElement('td');
        var text2 = document.createTextNode(model.prop2);
        cell2.appendChild(text2);
        row.appendChild(cell2);
        
        var cell3 = document.createElement('td');
        var text3 = document.createTextNode(model.prop3);
        cell3.appendChild(text3);
        row.appendChild(cell3);
        
        var cell4 = document.createElement('td');
        var text4 = document.createTextNode(model.prop4);
        cell4.appendChild(text4);
        row.appendChild(cell4);
        
        var cell5 = document.createElement('td');
        var text5 = document.createTextNode(model.prop5);
        cell5.appendChild(text5);
        row.appendChild(cell5);
        
        table.appendChild(row);
    }

Test #14

Title *

Async

Code *

    var table   = document.createElement('table');
    var models  = models250;
    var length  = models.length;
    
    for (var i = 0; i < models.length; i++) {
        var model   = models[i];
        var row     = document.createElement('tr');
        
        var cell1 = document.createElement('td');
        var text1 = document.createTextNode(model.prop1);
        cell1.appendChild(text1);
        row.appendChild(cell1);
        
        var cell2 = document.createElement('td');
        var text2 = document.createTextNode(model.prop2);
        cell2.appendChild(text2);
        row.appendChild(cell2);
        
        var cell3 = document.createElement('td');
        var text3 = document.createTextNode(model.prop3);
        cell3.appendChild(text3);
        row.appendChild(cell3);
        
        var cell4 = document.createElement('td');
        var text4 = document.createTextNode(model.prop4);
        cell4.appendChild(text4);
        row.appendChild(cell4);
        
        var cell5 = document.createElement('td');
        var text5 = document.createTextNode(model.prop5);
        cell5.appendChild(text5);
        row.appendChild(cell5);
        
        table.appendChild(row);
    }

Test #15

Title *

Async

Code *var table = $(tableHtml25);

Test #16

Title *

Async

Code *var table = $(tableHtml50);

Test #17

Title *

Async

Code *var table = $(tableHtml75);

Test #18

Title *

Async

Code *var table = $(tableHtml100);

Test #19

Title *

Async

Code *var table = $(tableHtml150);

Test #20

Title *

Async

Code *var table = $(tableHtml200);

Test #21

Title *

Async

Code *var table = $(tableHtml250);

Test #22

Title *

Async

Code *var table = $(template({ models: models25 }));

Test #23

Title *

Async

Code *var table = $(template({ models: models50 }));

Test #24

Title *

Async

Code *var table = $(template({ models: models75 }));

Test #25

Title *

Async

Code *var table = $(template({ models: models100 }));

Test #26

Title *

Async

Code *var table = $(template({ models: models150 }));

Test #27

Title *

Async

Code *var table = $(template({ models: models200 }));

Test #28

Title *

Async

Code *var table = $(template({ models: models250 }));

Test #29

Title *

Async

Code *var table = $(templateNoWith({ models: models25 }));

Test #30

Title *

Async

Code *var table = $(templateNoWith({ models: models50 }));

Test #31

Title *

Async

Code *var table = $(templateNoWith({ models: models75 }));

Test #32

Title *

Async

Code *var table = $(templateNoWith({ models: models100 }));

Test #33

Title *

Async

Code *var table = $(templateNoWith({ models: models150 }));

Test #34

Title *

Async

Code *var table = $(templateNoWith({ models: models200 }));

Test #35

Title *

Async

Code *var table = $(templateNoWith({ models: models250 }));

Test case details

Preparation Code

Test cases

Test #1

Test #2

Test #3

Test #4

Test #5

Test #6

Test #7

Test #8

Test #9

Test #10

Test #11

Test #12

Test #13

Test #14

Test #15

Test #16

Test #17

Test #18

Test #19

Test #20

Test #21

Test #22

Test #23

Test #24

Test #25

Test #26

Test #27

Test #28

Test #29

Test #30

Test #31

Test #32

Test #33

Test #34

Test #35