<!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('color'));
}

function testScopedStyleInShadow()
{
    debug("test a scoped style in shadow subtree.");
    var div = document.createElement("div");
    document.body.appendChild(div);
    var shadow = div.webkitCreateShadowRoot();
    shadow.innerHTML = "<div><style scoped>div { color: red; }</style><div id='E'>EEE</div></div><div id='F'>FFF</div>";
    document.body.offsetLeft;

    dumpComputedStyle(shadow.getElementById("E"));
    dumpComputedStyle(shadow.getElementById("F"));
    document.body.removeChild(div);
}

function testStyleInShadow()
{
    debug("test a style in shadow subtree.");
    var div = document.createElement("div");
    document.body.appendChild(div);
    var shadow = div.webkitCreateShadowRoot();
    shadow.innerHTML = "<div><div id='E'>EEE</div><style>div { color: red; }</style></div><div id='F'>FFF</div>";
    document.body.offsetLeft;

    dumpComputedStyle(shadow.getElementById("E"));
    dumpComputedStyle(shadow.getElementById("F"));
    document.body.removeChild(div);
}

function testStyleInMultipleShadow()
{
    debug("test styles in multiple shadow subtrees.");
    var div = document.createElement("div");

    var shadow1 = div.webkitCreateShadowRoot();
    shadow1.innerHTML = "<div><style>div { color: red; }</style><div id='E'>EEE</div></div><div id='F'>FFF</div>";

    var shadow2 = div.webkitCreateShadowRoot();
    shadow2.innerHTML = "<div><style scoped>div { color: blue }</style><shadow></shadow><div id='G'>GGG</div></div>";

    document.body.appendChild(div);
    document.body.offsetLeft;

    dumpComputedStyle(shadow1.getElementById("E"));
    dumpComputedStyle(shadow1.getElementById("F"));
    dumpComputedStyle(shadow2.getElementById("G"));
    document.body.removeChild(div);
}

function testScopedStyleInNestedShadow()
{
    debug("test a scoped style in nested shadow subtree.");
    var div = document.createElement("div");
    document.body.appendChild(div);
    var shadow1 = div.webkitCreateShadowRoot();
    shadow1.innerHTML = "<div><style scoped>div { color: red; }</style><div id='E'>EEE</div></div><div id='F'>FFF</div>";
    var e = shadow1.getElementById("E");
    var shadow2 = e.webkitCreateShadowRoot();
    shadow2.innerHTML = "<div><style scoped>div { color: blue; }</style><div id='G'>GGGG</div></div><div id='H'>HHHH</div>";
    document.body.offsetLeft;

    dumpComputedStyle(shadow1.getElementById("E"));
    dumpComputedStyle(shadow1.getElementById("F"));
    dumpComputedStyle(shadow2.getElementById("G"));
    dumpComputedStyle(shadow2.getElementById("H"));
    document.body.removeChild(div);
}

function testStyleInNestedShadow()
{
    debug("test a style in nested shadow subtree.");
    var div = document.createElement("div");
    document.body.appendChild(div);
    var shadow1 = div.webkitCreateShadowRoot();
    shadow1.innerHTML = "<div><style>div { color: red; }</style><div id='E'>EEE</div></div><div id='F'>FFF</div>";
    var e = shadow1.getElementById("E");
    var shadow2 = e.webkitCreateShadowRoot();
    shadow2.innerHTML = "<div><style>div { color: blue; }</style><div id='G'>GGGG</div></div><div id='H'>HHHH</div>";
    document.body.offsetLeft;

    dumpComputedStyle(shadow1.getElementById("E"));
    dumpComputedStyle(shadow1.getElementById("F"));
    dumpComputedStyle(shadow2.getElementById("G"));
    dumpComputedStyle(shadow2.getElementById("H"));
    document.body.removeChild(div);
}

function testChangeScopedToScoped()
{
    debug("test changing a style in shadow subtree from scoped to scoped.");
    var div = document.createElement("div");
    document.body.appendChild(div);
    var shadow = div.webkitCreateShadowRoot();
    shadow.innerHTML = "<div><style scoped id='style-in-shadow'>div { color: red; }</style><div id='E'>EEE</div></div><div id='F'>FFF</div>";
    document.body.offsetLeft;

    // before
    dumpComputedStyle(shadow.getElementById("E"));
    dumpComputedStyle(shadow.getElementById("F"));

    shadow.getElementById("style-in-shadow").setAttribute("scoped", "scoped");
    document.body.offsetLeft;

    // after
    dumpComputedStyle(shadow.getElementById("E"));
    dumpComputedStyle(shadow.getElementById("F"));
    document.body.removeChild(div);
}

function testChangeScopedToNotScoped()
{
    debug("test changing a style in shadow subtree from scoped to not-scoped.");
    var div = document.createElement("div");
    document.body.appendChild(div);
    var shadow = div.webkitCreateShadowRoot();
    shadow.innerHTML = "<div><style scoped id='style-in-shadow'>div { color: red; }</style><div id='E'>EEE</div></div><div id='F'>FFF</div>";
    document.body.offsetLeft;

    // before
    dumpComputedStyle(shadow.getElementById("E"));
    dumpComputedStyle(shadow.getElementById("F"));

    shadow.getElementById("style-in-shadow").removeAttribute("scoped");
    document.body.offsetLeft;

    // after
    dumpComputedStyle(shadow.getElementById("E"));
    dumpComputedStyle(shadow.getElementById("F"));
    document.body.removeChild(div);
}

function testChangeNotScopedToScoped()
{
    debug("test changing a style in shadow subtree from not-scoped to scoped.");
    var div = document.createElement("div");
    document.body.appendChild(div);
    var shadow = div.webkitCreateShadowRoot();
    shadow.innerHTML = "<div><style id='style-in-shadow'>div { color: red; }</style><div id='E'>EEE</div></div><div id='F'>FFF</div>";
    document.body.offsetLeft;

    // before
    dumpComputedStyle(shadow.getElementById("E"));
    dumpComputedStyle(shadow.getElementById("F"));

    shadow.getElementById("style-in-shadow").setAttribute("scoped", "scoped");
    document.body.offsetLeft;

    // after
    dumpComputedStyle(shadow.getElementById("E"));
    dumpComputedStyle(shadow.getElementById("F"));
    document.body.removeChild(div);
}

function testRemoveScopedStyleFromDocument()
{
    debug("test removing a scoped style from shadow subtree.");
    var div = document.createElement("div");
    document.body.appendChild(div);
    var shadow = div.webkitCreateShadowRoot();
    shadow.innerHTML = "<div><style scoped id='style-in-shadow'>div { color: red; }</style><div id='E'>EEE</div></div><div id='F'>FFF</div>";
    document.body.offsetLeft;

    // before
    dumpComputedStyle(shadow.getElementById("E"));
    dumpComputedStyle(shadow.getElementById("F"));

    var styleInShadow = shadow.getElementById("style-in-shadow");
    styleInShadow.parentNode.removeChild(styleInShadow);
    document.body.offsetLeft;

    // after
    dumpComputedStyle(shadow.getElementById("E"));
    dumpComputedStyle(shadow.getElementById("F"));
    document.body.removeChild(div);
}

function testRemoveStyleFromDocument()
{
    debug("test removing a style from shadow subtree.");
    var div = document.createElement("div");
    document.body.appendChild(div);
    var shadow = div.webkitCreateShadowRoot();
    shadow.innerHTML = "<div><style id='style-in-shadow'>div { color: red; }</style><div id='E'>EEE</div></div><div id='F'>FFF</div>";
    document.body.offsetLeft;

    // before
    dumpComputedStyle(shadow.getElementById("E"));
    dumpComputedStyle(shadow.getElementById("F"));

    var styleInShadow = shadow.getElementById("style-in-shadow");
    styleInShadow.parentNode.removeChild(styleInShadow);
    document.body.offsetLeft;

    // after
    dumpComputedStyle(shadow.getElementById("E"));
    dumpComputedStyle(shadow.getElementById("F"));
    document.body.removeChild(div);
}

function testInsertScopedStyleIntoDocument()
{
    debug("test inserting a scoped style into shadow subtree.");
    var div = document.createElement("div");
    document.body.appendChild(div);
    var shadow = div.webkitCreateShadowRoot();
    shadow.innerHTML = "<div><div id='E'>EEE</div></div><div id='F'>FFF</div>";
    document.body.offsetLeft;

    var style = document.createElement("style");
    style.innerHTML = "div { color: red; }";
    style.setAttribute("scoped", "scoped");
    shadow.getElementById("E").parentNode.appendChild(style);
    document.body.offsetLeft;

    dumpComputedStyle(shadow.getElementById("E"));
    dumpComputedStyle(shadow.getElementById("F"));
    document.body.removeChild(div);
}

function testInsertStyleIntoDocument()
{
    debug("test inserting a style into shadow subtree.");
    var div = document.createElement("div");
    document.body.appendChild(div);
    var shadow = div.webkitCreateShadowRoot();
    shadow.innerHTML = "<div><div id='E'>EEE</div></div><div id='F'>FFF</div>";
    document.body.offsetLeft;

    var style = document.createElement("style");
    style.innerHTML = "div { color: red; }";
    shadow.getElementById("E").parentNode.appendChild(style);
    document.body.offsetLeft;

    dumpComputedStyle(shadow.getElementById("E"));
    dumpComputedStyle(shadow.getElementById("F"));
    document.body.removeChild(div);
}

function testChangeScopedToNotScopedNotInDocument()
{
    debug("test re-inserting a style after changing scoped to not scoped offline.");
    var div = document.createElement("div");
    document.body.appendChild(div);
    var shadow = div.webkitCreateShadowRoot();
    shadow.innerHTML = "<div><style scoped id='style-in-shadow'>div { color: red; }</style><div id='E'>EEE</div></div><div id='F'>FFF</div>";
    document.body.offsetLeft;

    var style = shadow.getElementById("style-in-shadow");
    style.parentNode.removeChild(style);
    style.removeAttribute("scoped");
    shadow.getElementById("E").parentNode.appendChild(style);
    document.body.offsetLeft;

    dumpComputedStyle(shadow.getElementById("E"));
    dumpComputedStyle(shadow.getElementById("F"));
    document.body.removeChild(div);
}

function testChangeNotScopedToScopedNotInDocument()
{
    debug("test re-inserting a style after changing not scoped to scoped offline.");
    var div = document.createElement("div");
    document.body.appendChild(div);
    var shadow = div.webkitCreateShadowRoot();
    shadow.innerHTML = "<div><style id='style-in-shadow'>div { color: red; }</style><div id='E'>EEE</div></div><div id='F'>FFF</div>";
    document.body.offsetLeft;

    var style = shadow.getElementById("style-in-shadow");
    style.parentNode.removeChild(style);
    style.setAttribute("scoped", "scoped");
    shadow.getElementById("E").parentNode.appendChild(style);
    document.body.offsetLeft;

    dumpComputedStyle(shadow.getElementById("E"));
    dumpComputedStyle(shadow.getElementById("F"));
    document.body.removeChild(div);
}

function runTests()
{
    testScopedStyleInShadow();
    testStyleInShadow();
    testStyleInMultipleShadow();
    testScopedStyleInNestedShadow();
    testStyleInNestedShadow();
    testChangeScopedToScoped();
    testChangeScopedToNotScoped();
    testChangeNotScopedToScoped();
    testRemoveScopedStyleFromDocument();
    testRemoveStyleFromDocument();
    testInsertScopedStyleIntoDocument();
    testInsertStyleIntoDocument();
    testChangeScopedToNotScopedNotInDocument();
    testChangeNotScopedToScopedNotInDocument();
}
</script>
</head>
<body onload="runTests()">
  <script src="../../../resources/js-test-post.js"></script>
</body>
</html>