<body>
    <p>
        Test for <i><a href="https://bugs.webkit.org/show_bug.cgi?id=19519">https://bugs.webkit.org/show_bug.cgi?id=19519</a> DOM modification causes stack exhaustion (BUTTON OBJECT COLGROUP)</i>.
    </p>
    <script>
        var tableParts = [
            "table-cell",
            "table-row",
            "table-row-group",
            "table-column-group",
            "table-caption"
        ];

        var childTypes = [
            "block",
            "inline",
            "table-cell",
            "table-row",
            "table-row-group",
            "table-column-group",
            "table-caption"
        ];

        for (var i = 0; i < tableParts.length; ++i) {
            for (var j = 0; j < childTypes.length; ++j) {
                document.body.appendChild(document.createElement("pre")).appendChild(document.createTextNode("Prepending " + childTypes[j] + " to " + tableParts[i] + ":"));
                var container = document.createElement("div");
                var tablePart = document.createElement("div");
                tablePart.style.display = tableParts[i];
                container.appendChild(tablePart);
                document.body.appendChild(container);
                document.body.offsetTop;
                var newChild = document.createElement("div");
                newChild.style.display = childTypes[j];
                container.insertBefore(newChild, tablePart);
                document.body.offsetTop;
                // The above should have the same render tree as you get when
                // you do it all at once, like this:
                document.body.appendChild(container.cloneNode(true));
                document.body.offsetTop;
            }
        }
    </script>
</body>