<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
        function log(msg)
        {
            document.getElementById('console').appendChild(document.createTextNode(msg + '\n'));
        }

        function test(id)
        {
            var elem = document.getElementById(id);
            log(id + ': ' + document.defaultView.getComputedStyle(elem, null).getPropertyValue('color'));
        }

        function testAll()
        {
            test('S1');
            test('P1');
            test('S2');
            test('P2');
            test('S3');
            test('P3');
        }

        function runTests()
        {
            if (window.testRunner) {
                testRunner.dumpAsText();
                testRunner.waitUntilDone();
            }

            log('--- ORIGINAL ---');
            testAll();

            log('--- AFTER ATTACHING <STYLE SCOPED> ---');
            var divElem = document.getElementById('DIV');
            var styleElem = document.createElement('style');
            styleElem.setAttribute('scoped', true);
            styleElem.innerHTML = 'div { color: red; } p { color: green; }';
            divElem.insertBefore(styleElem, divElem.firstChild);
            setTimeout(function() {
                testAll();
                log('--- FINISHED ---');
                if (window.testRunner)
                    testRunner.notifyDone();
            }, 0);
        }
    </script>
    <style type="text/css" scoped>
        body { color: black; }
    </style>
</head>
<body onload="runTests();">
    <p>Test attaching a new &lt;style scoped&gt; element</p>
    <div>
        <span id="S1">Text</span>
        <p id="P1">Text</p>
    </div>
    <div id="DIV">
        <span id="S2">Text</span>
        <p id="P2">Text</p>
    </div>
    <div>
        <span id="S3">Text</span>
        <p id="P3">Text</p>
    </div>
    <pre id="console"></pre>
</body>
</html>