<!DOCTYPE html>

<html>
<body>

<script src="resources/polyfill.js"></script>

<div id="host1">
    <div class="selected">A</div>
    <div>B</div>
    <div>C</div>
    <div class="selected">D</div>
    <div>E</div>
    <div id="F">F</div>
</div>

<script>
if (window.testRunner)
    testRunner.waitUntilDone();

var shadowRoot1 = host1.webkitCreateShadowRoot();
shadowRoot1.innerHTML = '<div id="host2"><shadow></shadow></div>';

var host2 = shadowRoot1.getElementById('host2');
var shadowRoot2 = host2.webkitCreateShadowRoot();
shadowRoot2.innerHTML = '<content select=".selected"></content>';

setTimeout(function() {
    F.className = 'selected';
    if (window.testRunner)
        testRunner.notifyDone();
}, 0);
</script>
</html>