corrade-http-templates – Rev 62

Subversion Repositories:
Rev:
<!doctype html>
<html lang="en">
<head>
        <meta charset="utf-8">
        <title>Dialog Visual Test - Modal Dialog in Large DOM</title>
        <link rel="stylesheet" href="../../../themes/base/all.css">
        <script src="../../../external/requirejs/require.js"></script>
        <script src="../../../demos/bootstrap.js">
                var start,
                        html = new Array( 500 ).join( $.trim( $( "#template" ).html() ) );
                $( html ).appendTo( "body" );

                start = new Date();
                $( "#dialog" ).dialog({
                        modal: true,
                        autoOpen: false
                });
                $( "<li>Create: " + (new Date() - start) + "ms</li>" ).appendTo( "#log" );

                $( "#opener" ).on( "click", function() {
                        start = new Date();
                        $( "#dialog" ).dialog( "open" );
                        $( "<li>Open: " + (new Date() - start) + "ms</li>" ).appendTo( "#log" );
                });
        </script>
</head>
<body>

<p>WHAT: A single dialog is created on a page with a large DOM.</p>
<p>EXPECTED: Creating and opening the dialog should be fast, regardless of page size.</p>

<button id="opener">open dialog</button>
<div id="dialog" title="Dialog Title">
        <p> Dialog Content </p>
        <input type="text">
</div>

<ul id="log"></ul>

<script type="text/html" id="template">
<div><div><div><div><div><div><div><div><div><div>
<div><div><div><div><div><div><div><div><div><div>
<div><div><div><div><div><div><div><div><div><div>
<div><div><div><div><div><div><div><div><div><div>
<div><div><div><div><div><div><div><div><div><div>
<div><p>This <span>is</span> aspan> <strong>large</strong> DOMabbr>.</p>div>
<input>
<select>
        <option>option 1</option>
        option>
        <option>option 3</option>
        option>
        <option>option 5</option>
select>
</div>div></div>div></div>div></div>div></div>div>
</div>div></div>div></div>div></div>div></div>div>
</div>div></div>div></div>div></div>div></div>div>
</div>div></div>div></div>div></div>div></div>div>
</div>div></div>div></div>div></div>div></div>div>
</script>

</body>
</html>