<!doctype html>
<script src="../../resources/js-test.js"></script>
<script src="../../fast/dom/shadow/resources/shadow-dom.js"></script>
<style id="style1">
</style>
<body></body>
<script>
function prepareShadowTree(hostId, mode1, mode2, div1, div2, div3) {
    var parent = document.body;
    parent.appendChild(
        createDOM('div', {'id': hostId},
            attachShadow({'mode': mode1},
                createDOM('div', {'id': div1},
                    attachShadow({'mode': mode2},
                        createDOM('div', {'id': div2})),
                    createDOM('div', {'id': div3})))));
}

var results;
var expected;
var node;
function queryResultsShouldBe(host, query, expectedArgument) {
    results = host.querySelectorAll(query);
    expected = expectedArgument;
    shouldBe('results.length', '' + expected.length);
    for (var i = 0; i < expected.length; ++i) {
        node = results[i];
        shouldBeEqualToString.bind(this)('node.id', expected[i]);
    }
}

prepareShadowTree('host_open_open', 'open', 'open', 'div1', 'div2', 'div1b');
prepareShadowTree('host_open_closed', 'open', 'closed', 'div3', 'div4', 'div3b');
prepareShadowTree('host_closed_open', 'closed', 'open', 'div5', 'div6', 'div5b');
prepareShadowTree('host_closed_closed', 'closed', 'closed', 'div7', 'div8', 'div7b');

debug('(1/6) /deep/ style rule on top-level document.');
var styleElement = document.getElementById('style1');
styleElement.textContent = 'div /deep/ div { background-color: blue; }';

backgroundColorShouldBe('host_open_open', 'rgba(0, 0, 0, 0)');
backgroundColorShouldBe('host_open_open/div1', 'rgba(0, 0, 0, 0)');
backgroundColorShouldBe('host_open_open/div1/div2', 'rgba(0, 0, 0, 0)');
backgroundColorShouldBe('host_open_open/div1b', 'rgba(0, 0, 0, 0)');
backgroundColorShouldBe('host_open_closed', 'rgba(0, 0, 0, 0)');
backgroundColorShouldBe('host_open_closed/div3', 'rgba(0, 0, 0, 0)');
backgroundColorShouldBe('host_open_closed/div3/div4', 'rgba(0, 0, 0, 0)');
backgroundColorShouldBe('host_open_closed/div3b', 'rgba(0, 0, 0, 0)');
backgroundColorShouldBe('host_closed_open', 'rgba(0, 0, 0, 0)');
backgroundColorShouldBe('host_closed_open/div5', 'rgba(0, 0, 0, 0)');
backgroundColorShouldBe('host_closed_open/div5/div6', 'rgba(0, 0, 0, 0)');
backgroundColorShouldBe('host_closed_open/div5b', 'rgba(0, 0, 0, 0)');
backgroundColorShouldBe('host_closed_closed', 'rgba(0, 0, 0, 0)');
backgroundColorShouldBe('host_closed_closed/div7', 'rgba(0, 0, 0, 0)');
backgroundColorShouldBe('host_closed_closed/div7/div8', 'rgba(0, 0, 0, 0)');
backgroundColorShouldBe('host_closed_closed/div7b', 'rgba(0, 0, 0, 0)');

debug('(2/6) ::shadow style rule on top-level document.');
styleElement.innerHTML = 'div::shadow div { background-color: green; }';

backgroundColorShouldBe('host_open_open', 'rgba(0, 0, 0, 0)');
backgroundColorShouldBe('host_open_open/div1', 'rgba(0, 0, 0, 0)');
backgroundColorShouldBe('host_open_open/div1/div2', 'rgba(0, 0, 0, 0)');
backgroundColorShouldBe('host_open_open/div1b', 'rgba(0, 0, 0, 0)');
backgroundColorShouldBe('host_open_closed', 'rgba(0, 0, 0, 0)');
backgroundColorShouldBe('host_open_closed/div3', 'rgba(0, 0, 0, 0)');
backgroundColorShouldBe('host_open_closed/div3/div4', 'rgba(0, 0, 0, 0)');
backgroundColorShouldBe('host_open_closed/div3b', 'rgba(0, 0, 0, 0)');
backgroundColorShouldBe('host_closed_open', 'rgba(0, 0, 0, 0)');
backgroundColorShouldBe('host_closed_open/div5', 'rgba(0, 0, 0, 0)');
backgroundColorShouldBe('host_closed_open/div5/div6', 'rgba(0, 0, 0, 0)');
backgroundColorShouldBe('host_closed_open/div5b', 'rgba(0, 0, 0, 0)');
backgroundColorShouldBe('host_closed_closed', 'rgba(0, 0, 0, 0)');
backgroundColorShouldBe('host_closed_closed/div7', 'rgba(0, 0, 0, 0)');
backgroundColorShouldBe('host_closed_closed/div7/div8', 'rgba(0, 0, 0, 0)');
backgroundColorShouldBe('host_closed_closed/div7b', 'rgba(0, 0, 0, 0)');

debug('(3/6) /deep/ style on shadow tree.');
styleElement.innerHTML = '';
var div1 = getNodeInComposedTree('host_open_open/div1');
div1.insertAdjacentHTML('afterbegin', '<style>div /deep/ div { background-color: blue; }</style>');
backgroundColorShouldBe('host_open_open/div1', 'rgba(0, 0, 0, 0)');
backgroundColorShouldBe('host_open_open/div1/div2', 'rgba(0, 0, 0, 0)');
backgroundColorShouldBe('host_open_open/div1b', 'rgb(0, 0, 255)');
div1.removeChild(div1.firstElementChild);

var div3 = getNodeInComposedTree('host_open_closed/div3');
div3.insertAdjacentHTML('afterbegin', '<style>div /deep/ div { background-color: blue; }</style>');
backgroundColorShouldBe('host_open_closed/div3', 'rgba(0, 0, 0, 0)');
backgroundColorShouldBe('host_open_closed/div3/div4', 'rgba(0, 0, 0, 0)');
backgroundColorShouldBe('host_open_closed/div3b', 'rgb(0, 0, 255)');
div3.removeChild(div3.firstElementChild);

var div5 = getNodeInComposedTree('host_closed_open/div5');
div5.insertAdjacentHTML('afterbegin', '<style>div /deep/ div { background-color: blue; }</style>');
backgroundColorShouldBe('host_closed_open/div5', 'rgba(0, 0, 0, 0)');
backgroundColorShouldBe('host_closed_open/div5/div6', 'rgba(0, 0, 0, 0)');
backgroundColorShouldBe('host_closed_open/div5b', 'rgb(0, 0, 255)');
div5.removeChild(div5.firstElementChild);

var div7 = getNodeInComposedTree('host_closed_closed/div7');
div7.insertAdjacentHTML('afterbegin', '<style>div /deep/ div { background-color: blue; }</style>');
backgroundColorShouldBe('host_closed_closed/div7', 'rgba(0, 0, 0, 0)');
backgroundColorShouldBe('host_closed_closed/div7/div8', 'rgba(0, 0, 0, 0)');
backgroundColorShouldBe('host_closed_closed/div7b', 'rgb(0, 0, 255)');
div7.removeChild(div7.firstElementChild);

debug('(4/6) ::shadow style on shadow tree.');
div1.insertAdjacentHTML('afterbegin', '<style>div::shadow div { background-color: green; }</style>');
backgroundColorShouldBe('host_open_open/div1', 'rgba(0, 0, 0, 0)');
backgroundColorShouldBe('host_open_open/div1/div2', 'rgba(0, 0, 0, 0)');
backgroundColorShouldBe('host_open_open/div1b', 'rgba(0, 0, 0, 0)');
div1.removeChild(div1.firstElementChild);

div3.insertAdjacentHTML('afterbegin', '<style>div::shadow div { background-color: green; }</style>');
backgroundColorShouldBe('host_open_closed/div3', 'rgba(0, 0, 0, 0)');
backgroundColorShouldBe('host_open_closed/div3/div4', 'rgba(0, 0, 0, 0)');
backgroundColorShouldBe('host_open_closed/div3b', 'rgba(0, 0, 0, 0)');
div3.removeChild(div3.firstElementChild);

div5.insertAdjacentHTML('afterbegin', '<style>div::shadow div { background-color: green; }</style>');
backgroundColorShouldBe('host_closed_open/div5', 'rgba(0, 0, 0, 0)');
backgroundColorShouldBe('host_closed_open/div5/div6', 'rgba(0, 0, 0, 0)');
backgroundColorShouldBe('host_closed_open/div5b', 'rgba(0, 0, 0, 0)');
div5.removeChild(div5.firstElementChild);

div7.insertAdjacentHTML('afterbegin', '<style>div::shadow div { background-color: green; }</style>');
backgroundColorShouldBe('host_closed_closed/div7', 'rgba(0, 0, 0, 0)');
backgroundColorShouldBe('host_closed_closed/div7/div8', 'rgba(0, 0, 0, 0)');
backgroundColorShouldBe('host_closed_closed/div7b', 'rgba(0, 0, 0, 0)');
div7.removeChild(div7.firstElementChild);

debug('(5/6) /deep/ selector in querySelectorAll()');
shouldBe('host_open_open.querySelectorAll("div /deep/ div").length', '0');
shouldBe('host_open_closed.querySelectorAll("div /deep/ div").length', '0');
shouldBe('host_closed_open.querySelectorAll("div /deep/ div").length', '0');
shouldBe('host_closed_closed.querySelectorAll("div /deep/ div").length', '0');

queryResultsShouldBe(div1, 'div /deep/ div', ['div1b']);
queryResultsShouldBe(div3, 'div /deep/ div', ['div3b']);
queryResultsShouldBe(div5, 'div /deep/ div', ['div5b']);
queryResultsShouldBe(div7, 'div /deep/ div', ['div7b']);

debug('(6/6) ::shadow selector in querySelectorAll()');
shouldBe('host_open_open.querySelectorAll("div::shadow div").length', '0');
shouldBe('host_open_closed.querySelectorAll("div::shadow div").length', '0');
shouldBe('host_closed_open.querySelectorAll("div::shadow div").length', '0');
shouldBe('host_closed_closed.querySelectorAll("div::shadow div").length', '0');

shouldBe('div1.querySelectorAll("div::shadow div").length', '0');
shouldBe('div3.querySelectorAll("div::shadow div").length', '0');
shouldBe('div5.querySelectorAll("div::shadow div").length', '0');
shouldBe('div7.querySelectorAll("div::shadow div").length', '0');
</script>