Index: LayoutTests/fast/css/style-scoped/style-scoped-set-scoped.html |
diff --git a/LayoutTests/fast/css/style-scoped/style-scoped-set-scoped.html b/LayoutTests/fast/css/style-scoped/style-scoped-set-scoped.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..9a478ac113191b5620b66537efc2ca2fa5ab7237 |
--- /dev/null |
+++ b/LayoutTests/fast/css/style-scoped/style-scoped-set-scoped.html |
@@ -0,0 +1,77 @@ |
+<!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> |