layout/reftests/webcomponents/nested-shadow-element-1.html@8bccb770b82d
layout/reftests/webcomponents/nested-shadow-element-1.html
Wed, 31 Dec 2014 13:27:57 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 13:27:57 +0100
- branch
- TOR_BUG_3246
- changeset 6
- 8bccb770b82d
- permissions
- -rw-r--r--
Ignore runtime configuration files generated during quality assurance.
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <script>
5 function tweak() {
6 var olderShadow = document.getElementById('outer').createShadowRoot();
7 olderShadow.innerHTML = '<content></content><span>World</span>';
9 var youngerShadow = document.getElementById('outer').createShadowRoot();
10 youngerShadow.innerHTML = '<div id="shadowparent"><shadow id="youngshadow"><span>Hello</span></shadow></div>';
12 var shadowParent = youngerShadow.getElementById("shadowparent");
13 var nestedShadow = shadowParent.createShadowRoot();
14 nestedShadow.innerHTML = '<div style="background-color: green"><content></content></div>';
16 // Dynamically append a span to the shadow element in the younger ShadowRoot to make sure
17 // it is projected into the nested shadow.
18 var appendedSpan = document.createElement("span");
19 appendedSpan.textContent = ' ';
20 youngerShadow.getElementById("youngshadow").appendChild(appendedSpan);
21 }
22 </script>
23 </head>
24 <body onload="tweak()">
25 <div id="outer">
26 <div style="width:300px; height:100px; background-color:red;"></div>
27 </div>
28 </body>
29 </html>
