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

.span {
    display: boxed-inline;
    margin: 2px;
    border: solid;
}
</style>
<script>
function log(message) {
    document.getElementById('console').innerHTML += (message + "\n");
}

function removeAllChildren(elem) {
    while (elem.firstChild)
        elem.removeChild(elem.firstChild);
}

function cleanUp() {
    removeAllChildren(document.getElementById('actual-container'));
    removeAllChildren(document.getElementById('expect-container'));
}

function removeContainerLines(text) {
    var lines = text.split('\n');
    lines.splice(0, 2);
    return lines.join('\n');
}

function check() {
    var refContainerRenderTree = internals.elementRenderTreeAsText(document.getElementById('expect-container'));
    var refRenderTree = removeContainerLines(refContainerRenderTree);

    var targetContainerRenderTree = internals.elementRenderTreeAsText(document.getElementById('actual-container'));
    var targetRenderTree = removeContainerLines(targetContainerRenderTree);

    if (targetRenderTree == refRenderTree)
        log("PASS");
    else {
        log("FAIL");
        log("Expected: ");
        log(refRenderTree);
        log("Actual: ");
        log(targetRenderTree);
    }

}

function createSpanWithText(text) {
    var span = document.createElement('span');
    span.appendChild(document.createTextNode(text));
    return span;
}

function appendShadow(target, select) {
    var root = internals.ensureShadowRoot(target);

    var content = internals.createContentElement();
    content.setAttribute('select', select);
    content.appendChild(createSpanWithText("FALLBACK"));

    root.appendChild(document.createTextNode("{SHADOW: "));
    root.appendChild(content);
    root.appendChild(document.createTextNode("}"));
}

function appendShadowDeep(target, select) {
    var root = internals.ensureShadowRoot(target);

    var child = document.createElement("span");
    {
        var content = internals.createContentElement();
        content.setAttribute('select', select);
        content.appendChild(createSpanWithText("FALLBACK"));

        child.appendChild(document.createTextNode("{INNER: "));
        child.appendChild(content);
        child.appendChild(document.createTextNode("}"));
    }

    root.appendChild(document.createTextNode("{SHADOW: "));
    root.appendChild(child);
    root.appendChild(document.createTextNode("}"));
}

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

    appendShadow(target, "#non-element");

    document.getElementById('actual-container').appendChild(target);
    document.getElementById('expect-container').innerHTML =
        "<div>{SHADOW: <span>FALLBACK</span>}</div>";
}

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

    appendShadowDeep(target, "#non-element");

    document.getElementById('actual-container').appendChild(target);
    document.getElementById('expect-container').innerHTML =
        "<div>{SHADOW: <span>{INNER: <span>FALLBACK</span>}</span>}</div>";
}

function testNonFallbackWithLightChildren() {
    var target = document.createElement('div');
    target.innerHTML = "<span id='selected-1'>SELECTED</span>";

    appendShadow(target, "#selected-1");

    document.getElementById('actual-container').appendChild(target);
    document.getElementById('expect-container').innerHTML =
        "<div>{SHADOW: <span>SELECTED</span>}</div>";
}

function testNonFallbackDeepWithLightChildren() {
    var target = document.createElement('div');
    target.innerHTML = "<span id='selected-2'>SELECTED</span>";

    appendShadowDeep(target, "#selected-2");

    document.getElementById('actual-container').appendChild(target);
    document.getElementById('expect-container').innerHTML =
        "<div>{SHADOW: <span>{INNER: <span>SELECTED</span>}</span>}</div>";
}

function testComplexFallback() {
    var target = document.createElement('div');
    appendShadow(target, '#complex-1');

    var selectContent = document.createElement('span');
    selectContent.setAttribute('id', 'complex-1');
    {
        selectContent.appendChild(createSpanWithText('SELECTED'));
    }
    appendShadow(selectContent, 'span');

    target.appendChild(document.createTextNode('[WONT SELECTED]'));
    target.appendChild(selectContent);
    target.appendChild(document.createTextNode('[WONT SELECTED]'));

    document.getElementById('actual-container').appendChild(target);
    document.getElementById('expect-container').innerHTML =
        "<div>{SHADOW: <span>{SHADOW: <span>SELECTED</span>}</span>}</div>";
}

function testComplexFallbackDeep() {
    var target = document.createElement('div');
    appendShadowDeep(target, '#complex-2');

    var selectContent = document.createElement('span');
    selectContent.setAttribute('id', 'complex-2');
    {
        selectContent.appendChild(createSpanWithText('SELECTED'));
    }
    appendShadowDeep(selectContent, 'span');

    target.appendChild(document.createTextNode('[WONT SELECTED]'));
    target.appendChild(selectContent);
    target.appendChild(document.createTextNode('[WONT SELECTED]'));

    document.getElementById('actual-container').appendChild(target);
    document.getElementById('expect-container').innerHTML =
        "<div>{SHADOW: <span>{INNER: <span>{SHADOW: <span>{INNER: <span>SELECTED</span>}</span>}</span>}</span>}</span></div>";
}

function testComplexFallbackAgain() {
    var target = document.createElement('div');
    appendShadow(target, '#complex-3');

    var selectContent = document.createElement('span');
    selectContent.setAttribute('id', 'complex-3');
    {
        selectContent.appendChild(createSpanWithText('SELECTED'));
    }
    appendShadow(selectContent, '#non-element');

    target.appendChild(document.createTextNode('[WONT SELECTED]'));
    target.appendChild(selectContent);
    target.appendChild(document.createTextNode('[WONT SELECTED]'));

    document.getElementById('actual-container').appendChild(target);
    document.getElementById('expect-container').innerHTML =
        "<div>{SHADOW: <span>{SHADOW: <span>FALLBACK</span>}</span>}</span></div>";
}

function testComplexFallbackDeepAgain() {
    var target = document.createElement('div');
    appendShadowDeep(target, '#complex-4');

    var selectContent = document.createElement('span');
    selectContent.setAttribute('id', 'complex-4');
    {
        selectContent.appendChild(createSpanWithText('SELECTED'));
    }
    appendShadowDeep(selectContent, '#non-element');

    target.appendChild(document.createTextNode('[WONT SELECTED]'));
    target.appendChild(selectContent);
    target.appendChild(document.createTextNode('[WONT SELECTED]'));

    document.getElementById('actual-container').appendChild(target);
    document.getElementById('expect-container').innerHTML =
        "<div>{SHADOW: <span>{INNER: <span>{SHADOW: <span>{INNER: <span>FALLBACK</span>}</span>}</span>}</span>}</span></div>";
}

function testContentkWithDisplayNone() {
    var target = document.createElement('div');

    var span1 = createSpanWithText('NOT RENDERED');
    span1.style.display = 'none';
    var span2 = createSpanWithText('NOT RENDERED');
    span2.style.display = 'none';
    var span3 = createSpanWithText('NOT RENDERED');
    span3.style.display = 'none';

    target.appendChild(span1);
    target.appendChild(createSpanWithText('S1'));
    target.appendChild(span2);
    target.appendChild(createSpanWithText('S2'));
    target.appendChild(span3);

    var root = internals.ensureShadowRoot(target);
    var content = internals.createContentElement();
    content.setAttribute('select', 'span');
    content.appendChild(createSpanWithText('FALLBACK'));

    var s = createSpanWithText('NOT RENDERED');
    s.style.display = 'none';
    root.appendChild(s);
    root.appendChild(document.createTextNode("{SHADOW: "));
    root.appendChild(content);
    root.appendChild(document.createTextNode("}"));

    document.getElementById('actual-container').appendChild(target);
    document.getElementById('expect-container').innerHTML =
        "<div>{SHADOW: <span>S1</span><span>S2</span>}</div>";
}

function testContentInContent() {
    var target = document.createElement('div');
    target.appendChild(createSpanWithText('S1'));
    target.appendChild(createSpanWithText('S2'));

    var root = internals.ensureShadowRoot(target);
    var content2 = internals.createContentElement();
    content2.setAttribute('select', 'span');
    content2.appendChild(createSpanWithText('CONTENT 2 FALLBACK'));

    var content1 = internals.createContentElement();
    content1.setAttribute('select', 'div');
    content1.appendChild(content2);

    root.appendChild(document.createTextNode("{SHADOW: "));
    root.appendChild(content1);
    root.appendChild(document.createTextNode("}"));

    document.getElementById('actual-container').appendChild(target);
    document.getElementById('expect-container').innerHTML =
        "<div>{SHADOW: <content><span>CONTENT 2 FALLBACK</span></content>}</div>";
}

function testContentInContentFallback() {
    var target = document.createElement('div');
    target.appendChild(createSpanWithText('S1'));
    target.appendChild(createSpanWithText('S2'));

    var root = internals.ensureShadowRoot(target);
    var content2 = internals.createContentElement();
    content2.setAttribute('select', 'div');
    content2.appendChild(createSpanWithText('CONTENT 2 FALLBACK'));

    var content1 = internals.createContentElement();
    content1.setAttribute('select', 'div');
    content1.appendChild(content2);

    root.appendChild(document.createTextNode("{SHADOW: "));
    root.appendChild(content1);
    root.appendChild(document.createTextNode("}"));

    document.getElementById('actual-container').appendChild(target);
    document.getElementById('expect-container').innerHTML =
        "<div>{SHADOW: <content><span>CONTENT 2 FALLBACK</span></content>}</div>";
}

function testContentInContentFallbackWithDisplayNone() {
    var target = document.createElement('div');
    target.appendChild(createSpanWithText('S1'));
    target.appendChild(createSpanWithText('S2'));

    var root = internals.ensureShadowRoot(target);
    var content2 = internals.createContentElement();
    content2.setAttribute('select', 'div');
    content2.appendChild(createSpanWithText('CONTENT 2 FALLBACK'));

    var content1 = internals.createContentElement();
    content1.setAttribute('select', 'div');
    content1.appendChild(content2);

    var s = createSpanWithText('NOT RENDERED');
    s.style.display = 'none';
    root.appendChild(s);
    root.appendChild(document.createTextNode("{SHADOW: "));
    root.appendChild(content1);
    root.appendChild(document.createTextNode("}"));

    document.getElementById('actual-container').appendChild(target);
    document.getElementById('expect-container').innerHTML =
        "<div>{SHADOW: <content><span>CONTENT 2 FALLBACK</span></content>}</div>";
}

function testContentInContentFallbackDirect() {
    var target = document.createElement('div');
    target.appendChild(createSpanWithText('S1'));
    target.appendChild(createSpanWithText('S2'));

    var root = internals.ensureShadowRoot(target);
    var content2 = internals.createContentElement();
    content2.setAttribute('select', 'div');
    content2.appendChild(createSpanWithText('CONTENT 2 FALLBACK'));

    var content1 = internals.createContentElement();
    content1.setAttribute('select', 'div');
    content1.appendChild(content2);

    root.appendChild(content1);

    document.getElementById('actual-container').appendChild(target);
    document.getElementById('expect-container').innerHTML =
        "<div><content><span>CONTENT 2 FALLBACK</span></content></div>";
}

var testFuncs = [
    testFallback,
    testFallbackDeep,
    testNonFallbackWithLightChildren,
    testNonFallbackDeepWithLightChildren,
    testComplexFallback,
    testComplexFallbackDeep,
    testComplexFallbackAgain,
    testComplexFallbackDeepAgain,
    testContentkWithDisplayNone,
    testContentInContent,
    testContentInContentFallback,
    testContentInContentFallbackWithDisplayNone,
    testContentInContentFallbackDirect
];

function doTest() {
    testRunner.dumpAsText();
    cleanUp();

    for (var i = 0; i < testFuncs.length; ++i) {
        testFuncs[i]();
        check();
        cleanUp();
    }
}
</script>
</head>
<body onload="doTest()">

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

</body>
</html>