<!DOCTYPE html>
<html>
<head>
    <script src="../../../resources/js-test-pre.js"></script>
    <script src="resources/nodesFromRect.js"></script>
    <style>
        .box {
            width: 30px;
            height: 30px;
            padding: 0px;
        }
     </style>
</head>
<body id="body">
    <div id="d1" class="box"></div>

    <div id="d2" class="box"></div>

    <div id="shadowHost" class="box"></div>

    <div id="console"></div>

    <script>
        checkRect(10, 45, 15, 30, "DIV#shadowHost, DIV#d2, BODY#body");

        var host = document.getElementById("shadowHost");
        var shadow = host.attachShadow({mode: 'closed'});
        shadow.innerHTML="<content>text</content>";

        checkRect(10, 45, 15, 30, "'text', CONTENT, DIV#shadowHost, DIV#d2, BODY#body");

        shadow.innerHTML="<slot></slot>";
        host.innerHTML="<inner-host></inner-host>";
        var innerHost = host.querySelector("inner-host");
        var innerShadow = innerHost.attachShadow({mode: 'closed'});
        innerShadow.innerHTML = "<content>text</content>";

        checkRect(10, 45, 15, 30, "'text', CONTENT, INNER-HOST, DIV#shadowHost, DIV#d2, BODY#body");
    </script>
    <script src="../../../resources/js-test-post.js"></script>
</body>
</html>

