Index: LayoutTests/fast/css/style-scoped/style-scoped-basic.html |
diff --git a/LayoutTests/fast/css/style-scoped/style-scoped-basic.html b/LayoutTests/fast/css/style-scoped/style-scoped-basic.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..ef73f9a1fc65c90e2b7db11712e23e8dbbd62e4b |
--- /dev/null |
+++ b/LayoutTests/fast/css/style-scoped/style-scoped-basic.html |
@@ -0,0 +1,88 @@ |
+<!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 runTests() |
+ { |
+ if (window.testRunner) |
+ testRunner.dumpAsText(); |
+ |
+ log('--- COMPUTED STYLES ---'); |
+ |
+ test('S1'); |
+ test('P1'); |
+ test('R1'); |
+ test('E1'); |
+ log(''); |
+ test('S2'); |
+ test('P2'); |
+ test('R2'); |
+ test('E2'); |
+ log(''); |
+ test('S3'); |
+ test('P3'); |
+ test('R3'); |
+ test('E3'); |
+ log(''); |
+ test('S4'); |
+ test('P4'); |
+ test('R4'); |
+ test('E4'); |
+ |
+ log('--- FINISHED ---'); |
+ } |
+ </script> |
+ <style type="text/css"> |
+ body { color: black; } |
+ </style> |
+</head> |
+<body onload="runTests();"> |
+ <p>Test <style scoped></p> |
+ <div class="foo"> |
+ <span id="S1">Text</span> |
+ <p id="P1">Text</p> |
+ <pre id="R1" class="bar">Text</pre> |
+ <pre id="E1" class="baz">Text</pre> |
+ </div> |
+ <div id="foo"> |
+ <div id="sib"></div> |
+ <div> |
+ <style type="text/css" scoped> |
+ div { color: red; } |
+ p { color: green; } |
+ div .bar { color: blue; } |
+ #foo .baz { color: rgb(10, 10, 10); } /* should NOT apply! */ |
+ #sib + * { color: rgb(20, 20, 20); } /* should NOT apply! */ |
+ #sib ~ * { color: rgb(30, 30, 30); } /* should NOT apply! */ |
+ div div { color: rgb(40, 40, 40); } /* should NOT apply! */ |
+ </style> |
+ <span id="S2">Text</span> |
+ <p id="P2">Text</p> |
+ <pre id="R2" class="bar">Text</pre> |
+ <pre id="E2" class="baz">Text</pre> |
+ </div> |
+ <span id="S3">Text</span> |
+ <p id="P3">Text</p> |
+ <pre id="R3" class="bar">Text</pre> |
+ <pre id="E3" class="baz">Text</pre> |
+ </div> |
+ <div class="foo"> |
+ <span id="S4">Text</span> |
+ <p id="P4">Text</p> |
+ <pre id="R4" class="bar">Text</pre> |
+ <pre id="E4" class="baz">Text</pre> |
+ </div> |
+ <pre id="console"></pre> |
+</body> |
+</html> |