| 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>
|
|
|