| <!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 <style scoped> 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> |
