<!DOCTYPE html>
<html>
<head>
<style>
/* relative positioning ensures underlying RenderLayer */
.container {
    position: relative;
}
</style>
<script>
function appendShadow(target, select) {
    var root = internals.ensureShadowRoot(target);

    var child0 = document.createElement("span");
    child0.innerHTML = "Hello,";
    root.appendChild(child0);

    var content = internals.createContentElement();
    content.setAttribute('select', select);
    root.appendChild(content);

    var child1 = document.createElement("span");
    child1.innerHTML = "World.";
    root.appendChild(child1);
}

function testSelectIsNull() {
    var target = document.createElement('div');
    target.innerHTML = "<span>content</span>";

    appendShadow(target, "");

    document.getElementById('container').appendChild(target);
}

function testSelectIsId() {
    var target = document.createElement('div');
    target.innerHTML = "<span id='foo'>content</span><span id='azunyan'>peropero</span>";

    appendShadow(target, "#foo");

    document.getElementById('container').appendChild(target);
}

function testSelectIsIdButNotMatched() {
    var target = document.createElement('div');
    target.innerHTML = "<span id='foo'>content</span><span id='azunyan'>peropero</span>";

    appendShadow(target, "#foobar");

    document.getElementById('container').appendChild(target);
}

function testSelectIsIdButNotChild() {
    var target = document.createElement('div');
    target.innerHTML = "<span><span id='foo'>content</span><span id='azunyan'>peropero</span></span>";

    appendShadow(target, "#foo");

    document.getElementById('container').appendChild(target);
}

function testSelectIsMultiId() {
    var target = document.createElement('div');
    target.innerHTML = "<span id='foo'>content</span><span id='azunyan'>peropero</span><span id='foo'>content</span>";

    appendShadow(target, "#foo");

    // All matched elements will be selected.
    document.getElementById('container').appendChild(target);
}

function testSelectIsType() {
    var target = document.createElement('div');
    target.innerHTML = "<div>azunyan</div><span>content</span><div>peropero</div>";

    appendShadow(target, "span");

    document.getElementById('container').appendChild(target);
}

function testSelectIsTypeWithAttribute() {
    var target = document.createElement('div');
    target.innerHTML = "<span>azunyan</span><span title='content'>content</span><span>peropero</span>";

    appendShadow(target, "span[title='content']");

    document.getElementById('container').appendChild(target);
}

function testSelectIsTypeWithFirstOfType() {
    var target = document.createElement('div');
    target.innerHTML = "<div>azunyan</div><span>content</span><span>peropero</span>";

    appendShadow(target, "span:first-of-type");

    document.getElementById('container').appendChild(target);
}

function testSelectIsTypeWithFirstOfType2() {
    var target = document.createElement('div');
    target.innerHTML = "<div><span>azunyan</span></div><span>content</span><span>peropero</span>";

    appendShadow(target, "span:first-of-type");

    document.getElementById('container').appendChild(target);
}

function testSelectIsTypeWithLastOfType() {
    var target = document.createElement('div');
    target.innerHTML = "<span>azunyan</span><span>content</span><div>peropero</div>";

    appendShadow(target, "span:last-of-type");

    document.getElementById('container').appendChild(target);
}

function testSelectIsDetails() {
    var target = document.createElement('div');
    target.innerHTML = "<details>content</details>";

    appendShadow(target, "details");

    document.getElementById('container').appendChild(target);
}

function testSelectIsDetails2() {
    var target = document.createElement('div');
    target.innerHTML = "<details><summary>content</summary></details>";

    appendShadow(target, "details");

    document.getElementById('container').appendChild(target);
}

function testSelectWhenDynamicallyChildrenChanged() {
    var target = document.createElement('div');
    target.innerHTML = "<span>content</span><span id='toberemoved'>anunyan peropero</span>";

    appendShadow(target, "span");

    document.getElementById('container').appendChild(target);

    var elem = document.getElementById('toberemoved');
    elem.parentNode.removeChild(elem);
}

var testFuncs = [
    testSelectIsNull,
    testSelectIsId,
    testSelectIsIdButNotMatched,
    testSelectIsIdButNotChild,
    testSelectIsMultiId,
    testSelectIsType,
    testSelectIsTypeWithAttribute,
    testSelectIsTypeWithFirstOfType,
    testSelectIsTypeWithFirstOfType2,
    testSelectIsTypeWithLastOfType,
    testSelectIsDetails,
    testSelectIsDetails2,
    testSelectWhenDynamicallyChildrenChanged,
]

function doTest() {
    for (var i = 0; i < testFuncs.length; ++i) {
       testFuncs[i]();
    }
}
</script>
</head>
<body onload="doTest()">
<div id="container"></div>
</body>
</html>