| <!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('R1'); |
| test('S2'); |
| test('P2'); |
| test('R2'); |
| test('S3'); |
| test('P3'); |
| test('R3'); |
| } |
| |
| function runTests() |
| { |
| if (window.testRunner) { |
| testRunner.dumpAsText(); |
| testRunner.waitUntilDone(); |
| } |
| |
| log('--- ORIGINAL ---'); |
| testAll(); |
| |
| log('--- AFTER SETTING @SCOPED ---'); |
| document.getElementById('STYLE').setAttribute('scoped', true); |
| 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 setting the 'scoped' attribute on a <style> element</p> |
| <div> |
| <span id="S1">Text</span> |
| <p id="P1">Text</p> |
| <pre id="R1">Text</p> |
| </div> |
| <div> |
| <style id="STYLE" type="text/css"> |
| div { color: red; } |
| p { color: green; } |
| p ~ div pre { color: blue; } /* should NOT apply while scoped! */ |
| </style> |
| <span id="S2">Text</span> |
| <p id="P2">Text</p> |
| <pre id="R2">Text</p> |
| </div> |
| <div> |
| <span id="S3">Text</span> |
| <p id="P3">Text</p> |
| <pre id="R3">Text</p> |
| </div> |
| <pre id="console"></pre> |
| </body> |
| </html> |
