<!DOCTYPE html>
<html>
<head>
<style>
/* relative positioning ensures underlying RenderLayer */
.container {
    position: relative;
}

.span {
    display: boxed-inline;
    margin: 2px;
    border: solid;
}
</style>
<script src="../resources/shadow-test-driver.js"></script>
<script>
function testRemoveContent(callIfDone) {
    var root = document.createElement('div');

    // Create light tree.
    root.innerHTML = "<span>LIGHT</span>";

    // Create shadow tree.
    var content = createContentWithSelect('span', 'FALLBACK');
    var sr = internals.ensureShadowRoot(root);
    sr.appendChild(createSpanWithText("BEFORE"));
    sr.appendChild(content);
    sr.appendChild(createSpanWithText("AFTER"));

    document.getElementById('actual-container').appendChild(root);

    var f = (function(root, content, callIfDone) {
        return function() {
            content.parentNode.removeChild(content);
            document.getElementById('expect-container').innerHTML = "<div><span>BEFORE</span><span>AFTER</span></div>";
            callIfDone();
        };
    })(root, content, callIfDone);

    setTimeout(f, 0);
}

function testRemoveContentToRecalc1(callIfDone) {
    var root = document.createElement('div');

    // Create light tree.
    root.innerHTML = "<span class='c1'>LIGHT 1</span><span>LIGHT 2</span>";

    // Create shadow tree.
    var content1 = createContentWithSelect('.c1', 'FALLBACK');
    var content2 = createContentWithSelect('span', 'FALLBACK');
    var sr = internals.ensureShadowRoot(root);
    sr.appendChild(createSpanWithText("BEFORE"));
    sr.appendChild(content1);
    sr.appendChild(createSpanWithText("MID"));
    sr.appendChild(content2);
    sr.appendChild(createSpanWithText("AFTER"));

    document.getElementById('actual-container').appendChild(root);

    var f = (function(root, content1, callIfDone) {
        return function() {
            content1.parentNode.removeChild(content1);
            document.getElementById('expect-container').innerHTML = "<div><span>BEFORE</span><span>MID</span><span>LIGHT 1</span><span>LIGHT 2</span><span>AFTER</span></div>";
            callIfDone();
        };
    })(root, content1, callIfDone);

    setTimeout(f, 0);
}

function testRemoveContentToRecalc2(callIfDone) {
    var root = document.createElement('div');

    // Create light tree.
    root.innerHTML = "<span>LIGHT 1</span><span class='c1'>LIGHT 2</span>";

    // Create shadow tree.
    var content1 = createContentWithSelect('.c1', 'FALLBACK');
    var content2 = createContentWithSelect('span', 'FALLBACK');
    var sr = internals.ensureShadowRoot(root);
    sr.appendChild(createSpanWithText("BEFORE"));
    sr.appendChild(content1);
    sr.appendChild(createSpanWithText("MID"));
    sr.appendChild(content2);
    sr.appendChild(createSpanWithText("AFTER"));

    document.getElementById('actual-container').appendChild(root);

    var f = (function(root, content1, callIfDone) {
        return function() {
            content1.parentNode.removeChild(content1);
            document.getElementById('expect-container').innerHTML = "<div><span>BEFORE</span><span>MID</span><span>LIGHT 1</span><span>LIGHT 2</span><span>AFTER</span></div>";
            callIfDone();
        };
    })(root, content1, callIfDone);

    setTimeout(f, 0);
}

function testRemoveContentAndRemoveLightChildren(callIfDone) {
    var root = document.createElement('div');

    // Create light tree.
    root.innerHTML = "<span>LIGHT</span>";

    // Create shadow tree.
    var content = createContentWithSelect('span');
    var sr = internals.ensureShadowRoot(root);
    sr.appendChild(createSpanWithText("BEFORE"));
    sr.appendChild(content);
    sr.appendChild(createSpanWithText("AFTER"));

    document.getElementById('actual-container').appendChild(root);

    var f = (function(root, content, callIfDone) {
        return function() {
            content.parentNode.removeChild(content);
            removeAllChildren(root);
            document.getElementById('expect-container').innerHTML = "<div><span>BEFORE</span><span>AFTER</span></div>";
            callIfDone();
        };
    })(root, content, callIfDone);

    setTimeout(f, 0);
}

function testAppendContent1(callIfDone) {
    var root = document.createElement('div');

    // Create light tree.
    root.innerHTML = "<span>LIGHT</span>";

    // Create shadow tree.
    var sr = internals.ensureShadowRoot(root);
    sr.appendChild(createSpanWithText("BEFORE"));
    sr.appendChild(createSpanWithText("AFTER"));

    document.getElementById('actual-container').appendChild(root);

    var f = (function(root, callIfDone) {
        return function() {
            var content = createContentWithSelect('span', 'FALLBACK');
            var sr = internals.ensureShadowRoot(root);
            sr.insertBefore(content, sr.lastChild);
            document.getElementById('expect-container').innerHTML = "<div><span>BEFORE</span><SPAN>LIGHT</span><span>AFTER</span></div>";
            callIfDone();
        };
    })(root, callIfDone);

    setTimeout(f, 0);
}

function testAppendContent2(callIfDone) {
    var root = document.createElement('div');

    // Create light tree.
    root.innerHTML = "<span>LIGHT 1</span><span class='c2'>LIGHT 2</span>";

    // Create shadow tree.
    var sr = internals.ensureShadowRoot(root);
    sr.appendChild(createSpanWithText("BEFORE"));
    sr.appendChild(createSpanWithText("AFTER"));

    document.getElementById('actual-container').appendChild(root);

    var f = (function(root, callIfDone) {
        return function() {
            var content1 = createContentWithSelect('.c2', 'FALLBACK');
            var content2 = createContentWithSelect('span', 'FALLBACK');
            var sr = internals.ensureShadowRoot(root);
            sr.insertBefore(content1, sr.lastChild);
            sr.insertBefore(content2, sr.lastChild);
            document.getElementById('expect-container').innerHTML = "<div><span>BEFORE</span><span>LIGHT 2</span><span>LIGHT 1</span><span>AFTER</span></div>";
            callIfDone();
        };
    })(root, callIfDone);

    setTimeout(f, 0);
}

function testAppendContent3(callIfDone) {
    var root = document.createElement('div');

    // Create light tree.
    root.innerHTML = "<span>LIGHT 1</span><span class='c2'>LIGHT 2</span>";

    // Create shadow tree.
    var sr = internals.ensureShadowRoot(root);
    var mid = createSpanWithText("MID");
    sr.appendChild(createSpanWithText("BEFORE"));
    sr.appendChild(mid);
    sr.appendChild(createContentWithSelect('.c2', 'FALLBACK'));
    sr.appendChild(createSpanWithText("AFTER"));

    document.getElementById('actual-container').appendChild(root);

    var f = (function(root, mid, callIfDone) {
        return function() {
            var content = createContentWithSelect('span', 'FALLBACK');
            var sr = internals.ensureShadowRoot(root);
            sr.insertBefore(content, mid);
            document.getElementById('expect-container').innerHTML =
                "<div><span>BEFORE</span><span>LIGHT 1</span><span>LIGHT 2</span><span>MID</span><span>FALLBACK</span><span>AFTER</span></div>";
            callIfDone();
        };
    })(root, mid, callIfDone);

    setTimeout(f, 0);
}

function testChangeOrderOfContent(callIfDone) {
    var root = document.createElement('div');

    // Create light tree.
    root.innerHTML = "<span class='c1'>LIGHT 1</span><span>LIGHT 2</span>";

    // Create shadow tree.
    var sr = internals.ensureShadowRoot(root);
    var content1 = createContentWithSelect('.c1', 'FALLBACK');
    var content2 = createContentWithSelect('span', 'FALLBACK');
    sr.appendChild(createSpanWithText("BEFORE"));
    sr.appendChild(content1);
    sr.appendChild(content2);
    sr.appendChild(createSpanWithText("AFTER"));

    document.getElementById('actual-container').appendChild(root);

    var f = (function(root, content1, callIfDone) {
        return function() {
            var sr = internals.ensureShadowRoot(root);
            sr.removeChild(content1);
            sr.insertBefore(content1, sr.lastChild);
            document.getElementById('expect-container').innerHTML =
                "<div><span>BEFORE</span><SPAN>LIGHT 1</span><span>LIGHT 2</span><span>FALLBACK</span><span>AFTER</span></div>";
            callIfDone();
        };
    })(root, content1, callIfDone);

    setTimeout(f, 0);
}

function testMoveLightChildOut(callIfDone) {
    var root = document.createElement('div');

    // Create light tree.
    var n1 = document.createElement('div');
    n1.setAttribute('id', 'n1');
    n1.innerHTML = "<span id='light1'>LIGHT 1</span><span>LIGHT 2</span>";
    var n2 = document.createElement('div');
    n2.setAttribute('id', 'n2');

    root.appendChild(n1);
    root.appendChild(n2);

    // Create shadow tree in 'n1'
    var sr = internals.ensureShadowRoot(n1);
    var content = createContentWithSelect('span', 'FALLBACK');
    sr.appendChild(createSpanWithText("BEFORE"));
    sr.appendChild(content);
    sr.appendChild(createSpanWithText("AFTER"));

    document.getElementById('actual-container').appendChild(root);

    var f = (function(root, n2, callIfDone) {
        return function() {
            var e = document.getElementById('light1');
            e.parentNode.removeChild(e);
            n2.appendChild(e);

            document.getElementById('expect-container').innerHTML =
                "<div><div><span>BEFORE</span><span>LIGHT 2</span><span>AFTER</span></div><div><span>LIGHT 1</span></div></div>"
            callIfDone();
        };
    })(root, n2, callIfDone);

    setTimeout(f, 0);
}

function testInsertBeforeFallback(callIfDone) {
    document.getElementById('expect-container').innerHTML =
        "<div><span>BEFORE</span><span>HOGE</span><span>FALLBACK</span><span>AFTER</span></div>";

    var target = document.createElement('div');
    document.getElementById('actual-container').appendChild(target);

    var span1 = document.createElement('span');
    var root = internals.ensureShadowRoot(span1);
    root.appendChild(createContentWithText("FALLBACK"));

    target.appendChild(createSpanWithText('BEFORE'));
    target.appendChild(span1);
    target.appendChild(createSpanWithText('AFTER'));

    var f = (function(target, span1, callIfDone) { return function() {
        target.insertBefore(createSpanWithText('HOGE'), span1);
        callIfDone();
    };})(target, span1, callIfDone);

    setTimeout(f, 0);
}

var testFuncs = [
    testRemoveContent,
    testRemoveContentToRecalc1,
    testRemoveContentToRecalc2,
    testRemoveContentAndRemoveLightChildren,
    testAppendContent1,
    testAppendContent2,
    testAppendContent3,
    testChangeOrderOfContent,
    testMoveLightChildOut,
    testInsertBeforeFallback
];

</script>
</head>
<body onload="doTest(testFuncs)">

<div id="actual-container" class="container"></div>
<div id="expect-container" class="container"></div>
<pre id="console"></pre>

</body>
</html>