|
1 <!DOCTYPE HTML> |
|
2 <html> |
|
3 <!-- |
|
4 https://bugzilla.mozilla.org/show_bug.cgi?id=806506 |
|
5 --> |
|
6 <head> |
|
7 <title>Test for styling fallback content</title> |
|
8 <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script> |
|
9 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> |
|
10 </head> |
|
11 <body> |
|
12 <div id="grabme"></div> |
|
13 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=806506">Bug 806506</a> |
|
14 <script> |
|
15 var host = document.getElementById("grabme"); |
|
16 var shadow = host.createShadowRoot(); |
|
17 shadow.innerHTML = '<style id="innerstyle"></style><span id="container"><content><span id="innerspan">Hello</span></content></span>'; |
|
18 var innerStyle = shadow.getElementById("innerstyle"); |
|
19 |
|
20 innerStyle.innerHTML = '#innerspan { margin-top: 10px; }'; |
|
21 var innerSpan = shadow.getElementById("innerspan"); |
|
22 is(getComputedStyle(innerSpan, null).getPropertyValue("margin-top"), "10px", "Default content should be style by id selector."); |
|
23 |
|
24 innerStyle.innerHTML = '#container > content > #innerspan { margin-top: 30px; }'; |
|
25 is(getComputedStyle(innerSpan, null).getPropertyValue("margin-top"), "30px", "Default content should be style by child combinators."); |
|
26 </script> |
|
27 </body> |
|
28 </html> |