<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/js-test-pre.js"></script>
<script src="../../dom/shadow/resources/polyfill.js"></script>
<script>
if (window.testRunner)
    testRunner.dumpAsText();

shouldBeDefined("window.internals");

function dumpComputedStyle(node)
{
    debug(node.id + ": " + document.defaultView.getComputedStyle(node, null).getPropertyValue('border-color'));
}

function testBasic()
{
    debug('test a scoped style in document is applied to a node in shadow dom subtree when apply-author-styles is true.');
    var div = document.createElement('div');
    div.innerHTML = '<div><style scoped>div { border: 1px solid red; }</style><div id="host"></div></div>';
    document.body.appendChild(div);

    var shadow = document.getElementById("host").webkitCreateShadowRoot();
    shadow.innerHTML = '<div id="target">target</div>';
    document.body.appendChild(div);

    // before
    shadow.applyAuthorStyles = false;
    dumpComputedStyle(shadow.getElementById("target"));

    // after
    shadow.applyAuthorStyles = true;
    dumpComputedStyle(shadow.getElementById("target"));

    document.body.removeChild(div);
}

function testEnclosingShadow()
{
    debug('test a style in an enclosing shadow dom tree is applied to a node in shadow subtree when apply-author-styles is true.');

    var div = document.createElement('div');
    document.body.appendChild(div);

    var outerShadow = div.webkitCreateShadowRoot();
    outerShadow.innerHTML = '<style>div { border: 1px solid red; }</style><div id="outer">outer</div>';
    var shadow = outerShadow.getElementById("outer").webkitCreateShadowRoot();
    shadow.innerHTML = '<div id="target">target</div>';

    // before
    shadow.applyAuthorStyles = false;
    dumpComputedStyle(shadow.getElementById("target"));

    // after
    shadow.applyAuthorStyles = true;
    dumpComputedStyle(shadow.getElementById("target"));
    document.body.removeChild(div);   
}

function testEnclosingShadowWithScoped()
{
    debug('test a scoped style in an enclosing shadow dom tree is applied to a node in shadow subtree when apply-author-styles is true and the node is in the scope.');

    var div = document.createElement('div');
    document.body.appendChild(div);

    var outerShadow = div.webkitCreateShadowRoot();
    outerShadow.innerHTML = '<div><style scoped>div { border: 1px solid red; }</style><div id="outerInScope">outerInScope</div></div><div id="outerOutOfScope">outerOutOfScope</div>';

    var shadow1 = outerShadow.getElementById("outerInScope").webkitCreateShadowRoot();
    shadow1.innerHTML = '<div id="targetInScope">targetInScope</div>';
    var shadow2 = outerShadow.getElementById("outerOutOfScope").webkitCreateShadowRoot();
    shadow2.innerHTML = '<div id="targetOutOfScope">targetOutOfScope</div>';

    // before
    shadow1.applyAuthorStyles = false;
    shadow2.applyAuthorStyles = false;
    dumpComputedStyle(shadow1.getElementById("targetInScope"));
    dumpComputedStyle(shadow2.getElementById("targetOutOfScope"));

    // after
    shadow1.applyAuthorStyles = true;
    shadow2.applyAuthorStyles = true;
    dumpComputedStyle(shadow1.getElementById("targetInScope"));
    dumpComputedStyle(shadow2.getElementById("targetOutOfScope"));

    document.body.removeChild(div);   
}

function testNestedShadow()
{
    debug('test a style in a shadow subtree is applied to a node in its descendant shadow subtree when all apply-author-styles in shadow subtrees between the shadow subtree and the descendant are true.');

    var div = document.createElement('div');
    div.innerHTML = '<style scoped>div { border: 1px solid red }</style><div id="host"></div>';
    document.body.appendChild(div);

    var outerMostShadow = document.getElementById("host").webkitCreateShadowRoot();
    outerMostShadow.innerHTML = '<style>div { border: 1px solid blue; }</style><div id="outerMost">outerMost</div>';
    outerMostShadow.applyAuthorStyles = false;

    var outerShadow = outerMostShadow.getElementById("outerMost").webkitCreateShadowRoot();
    outerShadow.innerHTML = '<div id="outer">outer</div>';
    outerShadow.applyAuthorStyles = false;

    var shadow = outerShadow.getElementById("outer").webkitCreateShadowRoot();
    shadow.innerHTML = '<div id="target">target</div>';
    shadow.applyAuthorStyles = false;

    // No styles should be applied.
    dumpComputedStyle(shadow.getElementById("target"));

    shadow.applyAuthorStyles = true;
    // A style in document should be applied.
    dumpComputedStyle(shadow.getElementById("target"));

    outerShadow.applyAuthorStyles = true
    // A style in 'outerMost' shadow should be applied.
    dumpComputedStyle(shadow.getElementById("target"));

    document.body.removeChild(div);   
}

function testMultipleShadow()
{
    debug('test a style in document is applied to nodes in multiple shadow subtrees when apply-author-styles is true.');

    var div = document.createElement('div');
    div.innerHTML = '<style scoped>div { border: 1px solid red }</style><div>test</div>';
    document.body.appendChild(div);

    var oldestShadow = div.webkitCreateShadowRoot();
    oldestShadow.innerHTML = '<shadow></shadow><div id="oldestShadow">oldestShadow</div>';
    oldestShadow.applyAuthorStyles = false;

    var olderShadow =  div.webkitCreateShadowRoot();
    olderShadow.innerHTML = '<style scoped>div { border: 1px solid blue }</style><shadow></shadow><div id="olderShadow">olderShadow</div>';
    olderShadow.applyAuthorStyles = false;

    var shadow = div.webkitCreateShadowRoot();
    shadow.innerHTML = '<shadow></shadow><div id="target">shadow</div>';
    shadow.applyAuthorStyles = false;

    // before
    dumpComputedStyle(oldestShadow.getElementById("oldestShadow"));
    dumpComputedStyle(olderShadow.getElementById("olderShadow"));
    dumpComputedStyle(shadow.getElementById("target"));

    // document ---+--- oldestShadow
    //             |
    //             +--- olderShadow
    //             |
    //             +--- shadow

    // apply-author-styles affects between shadow and document.
    shadow.applyAuthorStyles = true;
    dumpComputedStyle(oldestShadow.getElementById("oldestShadow"));
    dumpComputedStyle(olderShadow.getElementById("olderShadow"));
    dumpComputedStyle(shadow.getElementById("target"));

    // apply-author-styles affects between older shadow and document.
    shadow.applyAuthorStyles = false;
    olderShadow.applyAuthorStyles = true;
    dumpComputedStyle(oldestShadow.getElementById("oldestShadow"));
    dumpComputedStyle(olderShadow.getElementById("olderShadow"));
    dumpComputedStyle(shadow.getElementById("target"));

    // apply-author-styles affects between oldest shadow and document.
    olderShadow.applyAuthorStyles = false;
    oldestShadow.applyAuthorStyles = true;
    dumpComputedStyle(oldestShadow.getElementById("oldestShadow"));
    dumpComputedStyle(olderShadow.getElementById("olderShadow"));
    dumpComputedStyle(shadow.getElementById("target"));

    document.body.removeChild(div);
}

function testOrderOfApplyStyle()
{
    debug('test a style is applied in document order.');

    var div = document.createElement('div');
    div.innerHTML = '<style scoped>div { border: 1px solid red }</style><div id="host"></div>';
    document.body.appendChild(div);

    var outerMostShadow = document.getElementById("host").webkitCreateShadowRoot();
    outerMostShadow.innerHTML = '<style>div { border: 1px solid blue; }</style><div id="outerMost">outerMost</div>';
    outerMostShadow.applyAuthorStyles = true;

    var outerShadow = outerMostShadow.getElementById("outerMost").webkitCreateShadowRoot();
    outerShadow.innerHTML = '<style>div { border: 1px solid green; }</style><div id="outer">outer</div>';
    outerShadow.applyAuthorStyles = true;

    var shadow = outerShadow.getElementById("outer").webkitCreateShadowRoot();
    shadow.innerHTML = '<style>div { border: 1px solid yellow; }</style><div id="target">target</div>';
    shadow.applyAuthorStyles = true;

    // The last scoped style should be applied.
    dumpComputedStyle(shadow.getElementById("target"));

    shadow.innerHTML = '<div id="target">target</div>';
    // The outer's scoped style should be applied.
    dumpComputedStyle(shadow.getElementById("target"));

    document.body.removeChild(div);   
}

function runTests() {
    testBasic();
    testEnclosingShadow();
    testEnclosingShadowWithScoped();
    testNestedShadow();
    testMultipleShadow();
    testOrderOfApplyStyle();
}

</script>
</head>
<body onload="runTests()">
  <script src="../../../resources/js-test-post.js"></script>
</body>
</html>