<!DOCTYPE html>
<html>
<head>
    <script src="../../../resources/js-test-pre.js"></script>
    <script>
        jsTestIsAsync = true;

        function checkOrder()
        {
            description('Test inserting a fostering child into HTMLTemplateElement');
            shouldBe('template.firstChild', 'table');
            svg = template.content.querySelector("svg");
            shouldBe('template.content.lastChild', 'svg');
            shouldBeNull('svg.nextSibling');
            finishJSTest();
        }

        function eventhandler()
        {
            template.appendChild(table);
        }
    </script>
</head>
<!--The body element intends to be messy.-->
<body onload=checkOrder()>
    <template id="template">
    </template>
    <style onload="eventhandler()"></style>
    <table id="table">
        <iframe></iframe>
        <svg></svg>
    </table>
</body>
<script src="../../../resources/js-test-post.js"></script>
</html>