<!DOCTYPE html>
<html>
<head>
<title>selection-of-shadowroot</title>
<script src="../../resources/js-test.js"></script>
<script src="../../fast/dom/resources/event-sender-util.js"></script>
<script src="../../fast/dom/resources/shadow-test-driver.js"></script>
<script src="../../fast/dom/shadow/resources/shadow-dom.js"></script>
</head>
<body>

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

<script>
var treeScopes = new Array();
treeScopes.push(document);

function indent(level) {
    var v = "";
    while (level--)
        v = v + "&nbsp;&nbsp;&nbsp;&nbsp;";
    return v;
}

function createComplexShadowTree(container) {
    function createInnerShadowDOM(shadowRoot, id, name, indentLevel) {
        shadowRoot.innerHTML = 
            "<div title='DIV1 IN " + name + "'>" + indent(indentLevel) + "DIV 1 (" + name + ")</div>" +
            "<div>" + indent(indentLevel) + "<div title='SHADOW HOST IN " + name + "'>DIV HOST (" + name + ")</div></div>" +
            "<div title='DIV2 IN " + name + "'>" + indent(indentLevel) + "DIV 2 (" + name + ")</div>" +
            "<shadow>SHADOW FALLBACK</shadow>" +
            "<div title='DIV3 IN " + name + "'>" + indent(indentLevel) + "DIV 3 (" + name + ")</div>";

        var hostInShadowRoot = shadowRoot.firstChild.nextSibling;
        var nestedShadowRoot = hostInShadowRoot.createShadowRoot();
        nestedShadowRoot.title = 'NESTED SHADOW ROOT IN ' + name;
        treeScopes.push(nestedShadowRoot);

        nestedShadowRoot.innerHTML =
            "<div title='DIV 1 IN NESTED SHADOW DOM OF " + name + "'>" + indent(indentLevel) + "DIV 1 IN NESTED SHADOW (" + name + ")</div>" + 
            "<shadow>NESTED SHADOW FALLBACK</shadow>" + 
            "<div id='" + id + "' title='DIV 2 IN NESTED SHADOW DOM OF " + name + "'>" + indent(indentLevel) + "DIV 2 IN NESTED SHADOW (" + name + ")</div>";
    }

    container.innerHTML = 
        "<div title='DIV BEFORE HOST ELEMENT'>BEFORE HOST</div>" +
        "<div><div title='HOST ELEMENT'>HOST</div></div>" +
        "<div title='DIV AFTER HOST ELEMENT'>AFTER HOST</div>";

    var host = container.firstChild.nextSibling;

    var olderShadowRoot = host.createShadowRoot();
    olderShadowRoot.title = 'OLDER SHADOW ROOT';
    treeScopes.push(olderShadowRoot);

    var youngerShadowRoot = host.createShadowRoot();
    youngerShadowRoot.title = 'YOUNGER SHADOW ROOT';
    treeScopes.push(youngerShadowRoot);

    createInnerShadowDOM(olderShadowRoot, 'older', 'OLDER SHADOW ROOT', 2);
    createInnerShadowDOM(youngerShadowRoot, 'younger', 'YOUNGER SHADOW ROOT', 1);
}

var container = document.getElementById('container');
createComplexShadowTree(container);

debug('In this test, we create a complex Shadow DOM and try to drag from a div in nested shadow root of older shadow root to a div in nested shadow root of younger shadow root. Then we get selection from the following TreeScopes:');
for (var k = 0; k < treeScopes.length; ++k) {
    if (treeScopes[k] == document)
        debug(" * treeScopes[" + k + "] = document");
    else
        debug(" * treeScopes[" + k + "] = " + treeScopes[k].title);
}

debug('and check selection.anchorNode, selection.focusNode, selection.baseNode, and selection.extentNode are null or in the same treescope.');
debug('');

var older = getElementByIdConsideringShadowDOM(document, 'older');
var younger = getElementByIdConsideringShadowDOM(document, 'younger');
dragFromTo(older, younger);

debug('Dragged from (' + older.title + ') to (' + younger.title + ')');
debug('');

debug("treeScopes[0] is document");
shouldBe("internals.treeScopeRootNode(treeScopes[0].getSelection().anchorNode)", "document");
shouldBe("internals.treeScopeRootNode(treeScopes[0].getSelection().focusNode)", "document");
shouldBe("internals.treeScopeRootNode(treeScopes[0].getSelection().baseNode)", "document");
shouldBe("internals.treeScopeRootNode(treeScopes[0].getSelection().extentNode)", "document");
debug('');

debug("treeScopes[1] is " + treeScopes[1].title);
shouldBe("internals.treeScopeRootNode(treeScopes[1].getSelection().anchorNode)", "treeScopes[1]");
shouldBe("internals.treeScopeRootNode(treeScopes[1].getSelection().focusNode)", "treeScopes[1]");
shouldBe("internals.treeScopeRootNode(treeScopes[1].getSelection().baseNode)", "treeScopes[1]");
shouldBe("internals.treeScopeRootNode(treeScopes[1].getSelection().extentNode)", "treeScopes[1]");
debug('');

debug("treeScopes[2] is " + treeScopes[2].title);
debug('Since treeScope[2] is outside of selection start point, no node should not be taken.');
shouldBe("treeScopes[2].getSelection().anchorNode", "null");
shouldBe("treeScopes[2].getSelection().focusNode", "null");
shouldBe("treeScopes[2].getSelection().baseNode", "null");
shouldBe("treeScopes[2].getSelection().extentNode", "null");
debug('');

debug("treeScopes[3] is " + treeScopes[3].title);
shouldBe("internals.treeScopeRootNode(treeScopes[3].getSelection().anchorNode)", "treeScopes[3]");
shouldBe("internals.treeScopeRootNode(treeScopes[3].getSelection().focusNode)", "treeScopes[3]");
shouldBe("internals.treeScopeRootNode(treeScopes[3].getSelection().baseNode)", "treeScopes[3]");
shouldBe("internals.treeScopeRootNode(treeScopes[3].getSelection().extentNode)", "treeScopes[3]");
debug('');

debug("treeScopes[4] is " + treeScopes[4].title);
debug('Since treeScope[4] is outside of selection start point, no node should not be taken.');
shouldBe("treeScopes[4].getSelection().anchorNode", "null");
shouldBe("treeScopes[4].getSelection().focusNode", "null");
shouldBe("treeScopes[4].getSelection().baseNode", "null");
shouldBe("treeScopes[4].getSelection().extentNode", "null");
debug('');

window.getSelection().removeAllRanges();

while (container.firstChild)
    container.removeChild(container.firstChild);

var successfullyParsed = true;
</script>
</body>

</html>