<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/js-test-pre.js"></script>
<script src="resources/shadow-dom.js"></script>
</head>
<body>
<div id="console"></div>
<div id="sandbox"></div>
<script>
description("Tests for Composed Shadow DOM Tree Traversal APIs. Can only run within DRT");

if (window.testRunner)
    testRunner.dumpAsText();

function dumpNode(node)
{
    if (!node)
        return '(null)'
    var output = node.nodeName + "\t";
    if (node.id)
        output += ' id=' + node.id;
    if (node.className)
        output += ' class=' + node.className;
    return output;
}

function dumpComposedShadowTree(node, indent)
{
    indent = indent || "";
    var output = indent + dumpNode(node) + "\n";
    var child;
    for (child = internals.firstChildByWalker(node); child; child = internals.nextSiblingByWalker(child))
         output += dumpComposedShadowTree(child, indent + "\t");
    return output;
}

function lastNodeByWalker(root)
{
    var lastNode = root;
    while (internals.lastChildByWalker(lastNode))
        lastNode = internals.lastChildByWalker(lastNode);
    return lastNode;
}

function showComposedShadowTreeByTraversingInForward(root)
{
    var node = root;
    var last = lastNodeByWalker(root);
    while (node) {
        debug(dumpNode(node));
        if (node == last)
            break;
        node = internals.nextNodeByWalker(node);
    }
}

function showComposedShadowTreeByTraversingInBackward(root)
{
    var node = lastNodeByWalker(root);
    while (node) {
        debug(dumpNode(node));
        if (node == root)
            break;
        node = internals.previousNodeByWalker(node);
    }
}

function showComposedShadowTree(node)
{
    debug('Composed Shadow Tree:');
    debug(dumpComposedShadowTree(node));

    debug('Traverse in forward.');
    showComposedShadowTreeByTraversingInForward(node);

    debug('Traverse in backward.');
    showComposedShadowTreeByTraversingInBackward(node);

    debug('');
}

function showNextNode(node) {
    var next = internals.nextNodeByWalker(node);
    debug('Next node of [' + dumpNode(node) + '] is [' + dumpNode(next) + ']');
}

function testComposedShadowTree(node)
{
    var sandbox = document.getElementById('sandbox');
    sandbox.innerHTML = '';
    sandbox.appendChild(node);
    document.body.offsetLeft;
    showComposedShadowTree(node);
}

debug('ShadowRoot should be used.');
testComposedShadowTree(
    createDOM('div', {'id': 'a'},
              createShadowRoot(createDOM('div', {'id': 'b'})),
              createDOM('div', {'id': 'c'})));

debug('A content element should select light children');
testComposedShadowTree(
    createDOM('div', {'id': 'a'},
              createShadowRoot(createDOM('div', {'id': 'b'}),
                               createDOM('content')),
              createDOM('div', {'id': 'c'}),
              createDOM('div', {'id': 'd'})));

debug('Test for content element selector.');
testComposedShadowTree(
    createDOM('div', {'id': 'a'},
              createShadowRoot(createDOM('div', {'id': 'b'}),
                               createDOM('content', {'select': '#d'})),
              createDOM('div', {'id': 'c'}),
              createDOM('div', {'id': 'd'}),
              createDOM('div', {'id': 'e'})));

debug('Light children should be selected only at once.');
testComposedShadowTree(
    createDOM('div', {'id': 'a'},
              createShadowRoot(createDOM('div', {'id': 'b'}),
                               createDOM('content', {'select': '#d'}),
                               createDOM('content')),
              createDOM('div', {'id': 'c'}),
              createDOM('div', {'id': 'd'}),
              createDOM('div', {'id': 'e'})));

debug('A content element can have fallback elements.');
testComposedShadowTree(
    createDOM('div', {'id': 'a'},
              createShadowRoot(createDOM('div', {'id': 'b'}),
                               createDOM('content', {'select': '#z'},
                                         createDOM('div', {'id': 'f1'}),
                                         createDOM('div', {'id': 'f2'}))),
              createDOM('div', {'id': 'c'})));

debug('Fallback elements should not be used if a content element selects an element.');
testComposedShadowTree(
    createDOM('div', {'id': 'a'},
              createShadowRoot(createDOM('div', {'id': 'b'}),
                               createDOM('content', {'select': '#c'},
                                         createDOM('div', {'id': 'f1'},
                                                   createDOM('div', {'id': 'f2'})))),
              createDOM('div', {'id': 'c'})));

debug('Test for traversal, starting with a fallback element which is not used.');
showComposedShadowTree(getNodeInShadowTreeStack('a/f1'));
showNextNode(getNodeInShadowTreeStack('a/f1'));
showNextNode(getNodeInShadowTreeStack('a/f2'));
debug('');

debug('Test for Nested ShadowRoots.');
testComposedShadowTree(
    createDOM('div', {'id': 'a'},
              createShadowRoot(createDOM('div', {'id': 'b'},
                                         createShadowRoot(createDOM('div', {'id': 'c'}),
                                                          createDOM('content'),
                                                          createDOM('div', {'id': 'd'})),
                                         createDOM('div', {'id': 'e'})),
                               createDOM('div', {'id': 'f'}),
                               createDOM('content'),
                               createDOM('div', {'id': 'g'})),
              createDOM('div', {'id': 'h'}),
              createDOM('div', {'id': 'i'})));

debug('Test for Multiple ShadowRoots.');
testComposedShadowTree(
    createDOM('div', {'id': 'a'},
              createShadowRoot(createDOM('div', {'id': 'b'}),
                               createDOM('content'),
                               createDOM('div', {'id': 'c'})),
              createShadowRoot(createDOM('div', {'id': 'd'}),
                               createDOM('shadow'),
                               createDOM('div', {'id': 'e'})),
              createDOM('div', {'id': 'f'})));

debug('Test for inactive insertion points.');
testComposedShadowTree(
    createDOM('div', {'id': 'a'},
              createDOM('content', {'id': 'b'},
                        createDOM('content', {'id': 'c'}))));

debug('Test for an orphaned shadow subtree.');
testComposedShadowTree(
    createDOM('div', {'id': 'a'},
              createShadowRoot(
                  createDOM('div', {'id': 'b'},
                            createDOM('div', {'id': 'c'}))),
              createShadowRoot(
                  createDOM('div', {'id': 'd'}))));

debug('Test for traversal, starting with a node in an orphaned shadow subtree.');
showComposedShadowTree(getNodeInShadowTreeStack('a/b'));

debug('Test for a content element which does not select any nodes nor have fallback elements.');
testComposedShadowTree(
    createDOM('div', {'id': 'a'},
              createShadowRoot(createDOM('content', {'select': '#none'}),
                               createDOM('div', {'id': 'b'}),
                               createDOM('content', {'select': '#none'}),
                               createDOM('div', {'id': 'c'}),
                               createDOM('content', {'select': '#none'}))));

debug('Test for a nested insertion point.');
testComposedShadowTree(
    createDOM('div', {'id': 'a'},
              createShadowRoot(createDOM('div', {'id': 'b'},
                                         createShadowRoot(createDOM('content', {})),
                                         createDOM('content', {}))),
              createDOM('div', {'id': 'c'})));

debug('Test for nested insertion points. Some of them are either empty insertion points or inactive insertion points.');
testComposedShadowTree(
    createDOM('div', {'id': 'a'},
              createShadowRoot(createDOM('content', {'select': '#none'}),
                               createDOM('div', {'id': 'b'},
                                         createShadowRoot(createDOM('content', {'select': '.select-1'}),
                                                          createDOM('div', {'id': 'c'}),
                                                          createDOM('content', {'select': '.select-2'})),
                                         createDOM('content', {'class': 'select-1', 'select': '.select-4'}),
                                         createDOM('content', {'class': 'select-2', 'select': '#none'}),
                                         createDOM('div', {'id': 'd', 'class': 'select-2'}),
                                         createDOM('content', {'class': 'select-2', 'select': '#none'}),
                                         createDOM('div', {'id': 'e', 'class': 'select-2'}),
                                         createDOM('content', {'class': 'select-2', 'select': '#none'}))),
              createDOM('content', {'id': 'inactive-insertion-point', 'class': 'select-4'}),
              createDOM('div', {'id': 'should-not-be-selected'}),
              createDOM('div', {'id': 'f', 'class': 'select-4'})));

debug('Test for a re-projection.');
testComposedShadowTree(
    createDOM('div', {'id': 'a'},
              createShadowRoot(
                  createDOM('div', {'id': 'b'},
                            createShadowRoot(createDOM('content', {'select': '#c'})),
                            createDOM('content', {'select': '#c'}))),
              createDOM('div', {'id': 'c'})));

debug('Test for a content element which is selected by another content element.');
testComposedShadowTree(
    createDOM('div', {'id': 'a'},
              createShadowRoot(
                  createDOM('div', {'id': 'b'},
                            createShadowRoot(createDOM('content', {'select': '#content'}),
                                             createDOM('div', {'id': 'most-inner-child'}),
                                             createDOM('content', {'select': '#host-child'})),
                            createDOM('content', {'id': 'content', 'select': '#host-child'},
                                      createDOM('div', {'id': 'should-not-be-used'})),
                            createDOM('div', {'id': 'inner-child', 'class': 'foo'}))),
              createDOM('div', {'id': 'host-child'})));

debug('Test for a reprojection. Content elements should be used in document order.');
testComposedShadowTree(
    createDOM('div', {'id': 'a'},
              createShadowRoot(
                  createDOM('content', {'select': '#host-child1'}),
                  createDOM('div', {'id': 'b'},
                            createShadowRoot(createDOM('content', {'select': '.child'})),
                            createDOM('content', {'select': '.child'}))),
              createDOM('div', {'id': 'host-child1', 'class': 'child'}),
              createDOM('div', {'id': 'host-child2', 'class': 'child'})));

debug('Test for complex re-projections.');
testComposedShadowTree(
    createDOM('div', {'id': 'a'},
              createShadowRoot(
                  createDOM('div', {'id': 'b'},
                            createShadowRoot(createDOM('content', {'select': '.foo'}),
                                             createDOM('div', {'id': 'c'})),
                            // Select #child-1
                            createDOM('content', {'select': '#child-1'},
                                      createDOM('div', {'class': 'should-not-be-used'}),
                                      // Should not select any nodes since it's inactive.
                                      createDOM('content', {'class': 'should-be-inactive', 'select': '.foo'})),
                            createDOM('div', {'id': 'd', 'class': 'foo'},
                                      createShadowRoot(createDOM('div', {'id': 'e'}),
                                                       // Should select #child-2 and #g.
                                                       createDOM('content', {'select': '.foo'}),
                                                       createDOM('div', {'id': 'f'})),
                                      // Select #child-2
                                      createDOM('content', {'select': '#child-2'}),
                                      createDOM('div', {'id': 'g', 'class': 'foo'})),
                            createDOM('div', {'class': 'should-not-be-selected'}),
                            createDOM('div', {'id': 'h', 'class': 'foo'}))),
              createDOM('div', {'id': 'child-1', 'class': 'foo'}),
              createDOM('div', {'id': 'not-selected', 'class': 'foo'}),
              createDOM('div', {'id': 'child-2', 'class': 'foo'})));
</script>
<script src="../../../resources/js-test-post.js"></script>
</body>
</html>