 <!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 testChangeSelect1(callIfDone) {
    document.getElementById('expect-container').innerHTML =
        "<div><span>BEFORE</span><span>LIGHT 2</span><span>AFTER</span></div>";

    var root = document.createElement('div');

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

    // Create shadow tree.
    var content = createContentWithSelect('.c1');
    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.setAttribute('select', '.c2');
            callIfDone();
        };
    })(root, content, callIfDone);

    setTimeout(f, 0);
}

function testChangeSelect2(callIfDone) {
    document.getElementById('expect-container').innerHTML =
        "<div><span>BEFORE</span><span>LIGHT 1</span><span>LIGHT 2</span><span>AFTER</span></div>";

    var root = document.createElement('div');

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

    // Create shadow tree.
    var content = createContentWithSelect('.c1');
    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.setAttribute('select', 'span');
            callIfDone();
        };
    })(root, content, callIfDone);

    setTimeout(f, 0);
}

function testChangeSelectToEmpty(callIfDone) {
    document.getElementById('expect-container').innerHTML =
        "<div><span>BEFORE</span><span>LIGHT 1</span><span>LIGHT 2</span><span>AFTER</span></div>";

    var root = document.createElement('div');

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

    // Create shadow tree.
    var content = createContentWithSelect('.c1');
    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.removeAttribute('select');
            callIfDone();
        };
    })(root, content, callIfDone);

    setTimeout(f, 0);
}

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

    var root = document.createElement('div');

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

    // Create shadow tree.
    var content = createContentWithSelect('.c1');
    content.innerHTML = "<span>FALLBACK</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.setAttribute('select', 'div')
            callIfDone();
        };
    })(root, content, callIfDone);

    setTimeout(f, 0);
}

function testChangeSelectFromFallback(callIfDone) {
    document.getElementById('expect-container').innerHTML =
        "<div><span>BEFORE</span><span>LIGHT 1</span><span>LIGHT 2</span><span>AFTER</span></div>";

    var root = document.createElement('div');

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

    // Create shadow tree.
    var content = createContentWithSelect('div');
    content.innerHTML = "<span>FALLBACK</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.setAttribute('select', 'span')
            callIfDone();
        };
    })(root, content, callIfDone);

    setTimeout(f, 0);
}

var testFuncs = [
    testChangeSelect1,
    testChangeSelect2,
    testChangeSelectToEmpty,
    testChangeSelectToFallback,
    testChangeSelectFromFallback,
];

</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>