Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

file 153 lines (146 sloc) 6.143 kb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153
<!DOCTYPE html>
<html>
    <head>
        <title>Matryoshka test</title>

        <link href='css/bootstrap-2.1.1.min.css' rel='stylesheet'>
        <link href='css/bootstrap-responsive-2.1.1.min.css' rel='stylesheet'>
        <style>
            body {
                margin-top: 20px;
            }
            .container {
                max-width: 479px;
            }
        </style>
    </head>
    <body>
        <div class='container'>
            <img src='img/dolls.jpg'>
            <h1>Matryoshka test</h1>
            <p>
                Test your browser's ability to handle absurd numbers of nested
                elements, generated with JavaScript.
            </p>
            <p>
                See the
                <a href='https://github.com/robatron/matryoshka-test'>github
                project page</a> for more details.
            </p>
            <p>
                <a href='img/screenshot.png'>
                    <img src="img/screenshot.png" alt="">
                </a>
            </p>
            <p>
                <a href='img/ff-3d-view.png'>
                    <img src="img/ff-3d-view.png" alt="">
                </a>
            </p>

            <h2>Why?</h2>
            <p>
                My coworkers and I wanted to explore some interesting
                browser-specifc nested-element behavior we found when viewing
                bloated <a href='http://sharepoint.microsoft.com'>
                SharePoint</a> pages.
            </p>
            <p>
                Also, because Fridays are meant for silly projects.
            </p>

            <h2 id='matryoshkify'>Matryoshkify!</h2>
            <form class='form-horizontal'>
                <div class='control-group'>
                    <label for='tag' class='control-label'>
                        Tag
                    </label>
                    <div class='controls'>
                        <span rel='tooltip' data-placement='right'
                                data-original-title=
                                        'Type of tag to nest'>
                            <input id='tag' type='text' value='div'>
                        </span>
                    </div>
                </div>
                <div class='control-group'>
                    <label for='count' class='control-label'>
                        Count:
                    </label>
                    <div class='controls'>
                        <span rel='tooltip' data-placement='right'
                                data-original-title=
                                        'How many tags to nest'>
                            <input id='count' type='number'
                                    value='500'>
                        </span>
                    </div>
                </div>
                <div class='control-group'>
                    <label for='container' class='control-label'>
                        Container tag:
                    </label>
                    <div class='controls'>
                        <span rel='tooltip' data-placement='right'
                                data-original-title=
                                        'Tag to contain nested tags'>
                            <input id='container' type='text'
                                    value='body'/>
                        </span>
                    </div>
                </div>
                <div class='control-group'>
                    <div class='controls'>
                        <label class='checkbox'>
                            <span rel='tooltip'
                                    data-placement='right'
                                    data-original-title='
Clear the container before<br>
creating nested tags'>
                                <input id='clear-container'
                                    type='checkbox' checked='true'>
                                Clear container first
                            </span>
                        </label>
                        <label class='checkbox'>
                            <span rel='tooltip'
                                    data-placement='right'
                                    data-original-title='Include performance
report after<br>creating nested
tags'>
                                <input id='include-report' type='checkbox'
                                        checked='true'>
                                Include report
                            </span>
                        </label>
                        <button id='create'>
                            Create nested tags
                        </button>
                    </div>
                </div>
            </form>
        </div>
        <hr>
        <!-- Nested divs will be rendered below here -->

        <script src='js/jquery-1.8.2.min.js'></script>
        <script src='js/bootstrap-2.1.1.min.js'></script>
        <script src='js/matryoshka.js'></script>
        <script>
            $(function(){
                // Initialize the form tooltips
                $('[rel=tooltip]').tooltip()

                // Matryoshkify on click
                $('button#create').click(function(){
                    matryoshka(
                        $('input#tag').val(),
                        $('input#count').val(),
                        $('input#container').val(),
                        $('input#clear-container').is(':checked'),
                        $('input#include-report').is(':checked')
                    )

                    // Scroll window to the top
                    window.scrollTo(0, 0)

                    // Prevent default button behavior
                    return false
                })
            })
        </script>
    </body>
</html>
Something went wrong with that request. Please try again.