<!DOCTYPE html>
<script src="../resources/js-test.js"></script>
<script src="../fast/dom/shadow/resources/shadow-dom.js"></script>
<style>
div {
    background-color: white;
}

div#shadow-host:focus {
    background-color: green;
}
</style>
<body>
<div id="sandbox"></div>
</body>
<script>
function buildSingleShadowTree(delegatesFocus) {
    var sandbox = document.querySelector('#sandbox');
    sandbox.innerHTML = '';
    sandbox.appendChild(
        createDOM('div', {},
            createDOM('input', {'id': 'outer-input'}),
            createDOM('div', {'id': 'shadow-host'},
                createDOM('input', {'id': 'lightdom-input'}),
                attachShadow(
                    {'mode': 'open', 'delegatesFocus': delegatesFocus},
                    createDOM('slot'),
                    createDOM('input', {'id': 'inner-input'})))));

}

function testSingleShadow() {
    debug('(1/6) Testing how :focus matches on shadow host with delegatesFocus=false.');
    buildSingleShadowTree(false);

    var host = document.querySelector('#shadow-host');
    var lightdomInput = document.querySelector('#lightdom-input');
    var innerInput = getNodeInComposedTree('shadow-host/inner-input');
    var outerInput = document.querySelector('#outer-input');

    outerInput.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
    lightdomInput.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
    innerInput.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
    host.focus();  // host will not get focus as it is not focusable.
    backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');

    debug('(2/6) Testing how :focus matches on shadow host with tabindex=-1, delegatesFocus=false.');
    host.tabIndex = -1;
    outerInput.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
    lightdomInput.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
    innerInput.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
    host.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');

    debug('(3/6) Testing how :focus matches on shadow host with tabindex=0, delegatesFocus=false.');
    host.tabIndex = 0;
    outerInput.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
    lightdomInput.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
    innerInput.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
    host.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');


    debug('(4/6) Testing how :focus matches on shadow host with delegatesFocus=true.');
    buildSingleShadowTree(true);

    var host = document.querySelector('#shadow-host');
    var lightdomInput = document.querySelector('#lightdom-input');
    var innerInput = getNodeInComposedTree('shadow-host/inner-input');
    var outerInput = document.querySelector('#outer-input');

    outerInput.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
    lightdomInput.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
    innerInput.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
    host.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');

    debug('(5/6) Testing how :focus matches on shadow host with tabindex=-1, delegatesFocus=true.');
    host.tabIndex = -1;
    outerInput.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
    lightdomInput.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
    innerInput.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
    host.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');

    debug('(6/6) Testing how :focus matches on shadow host with tabindex=0, delegatesFocus=true.');
    host.tabIndex = 0;
    outerInput.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
    lightdomInput.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
    innerInput.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
    host.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
}

testSingleShadow();
</script>