<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/js-test-pre.js"></script>
<script>
    description("Tests that <style scoped> is correctly applied as child of a ShadowRoot, and that it doesn't leak out. Can only run within DRT.");

    function test()
    {
        if (window.testRunner)
            testRunner.dumpAsText();

        var a = document.getElementById("A");
        var b = document.getElementById("B");
        shadow = b.webkitCreateShadowRoot();
        shouldBeDefined("shadow.innerHTML");
        shouldBeDefined("shadow.getElementById");
        shadow.innerHTML = "<style scoped>div { color: red; }</style><content></content><div id='C'>CCC</div>";
        var c = shadow.getElementById("C");
        var d = document.getElementById("D");
        
        debug("A: " + document.defaultView.getComputedStyle(a, null).getPropertyValue('color')); /* black */
        debug("B: " + document.defaultView.getComputedStyle(b, null).getPropertyValue('color')); /* black */
        debug("C: " + document.defaultView.getComputedStyle(c, null).getPropertyValue('color')); /* red */
        debug("D: " + document.defaultView.getComputedStyle(d, null).getPropertyValue('color')); /* black */
    }
</script>
</head>
<body>
    <div id="A">
        AAA
    </div>
    <div id="B">
        BBB
    </div>
    <div id="D">
        DDD
    </div>
    <script>test();</script>
    <script src="../../../resources/js-test-post.js"></script>
</body>
</html>