layout/reftests/webcomponents/fallback-content-1.html

Fri, 16 Jan 2015 18:13:44 +0100

author
Michael Schloh von Bennewitz <michael@schloh.com>
date
Fri, 16 Jan 2015 18:13:44 +0100
branch
TOR_BUG_9701
changeset 14
925c144e1f1f
permissions
-rw-r--r--

Integrate suggestion from review to improve consistency with existing code.

michael@0 1 <!DOCTYPE HTML>
michael@0 2 <html>
michael@0 3 <head>
michael@0 4 <script>
michael@0 5 function tweak() {
michael@0 6 // div with style "border: 10px solid green"
michael@0 7 var shadowDiv = document.createElement("div");
michael@0 8 shadowDiv.style.border = "10px solid green";
michael@0 9
michael@0 10 // Insertion point will match nothing and use fallback content.
michael@0 11 var insertionPoint = document.createElement("content");
michael@0 12 shadowDiv.appendChild(insertionPoint);
michael@0 13
michael@0 14 // Append three nodes as children to use as fallback content.
michael@0 15 insertionPoint.innerHTML = '<span style="background-color: orange">Hello</span> <span style="background-color: green">World</span>';
michael@0 16
michael@0 17 var shadowRoot = document.getElementById('outer').createShadowRoot();
michael@0 18 shadowRoot.appendChild(shadowDiv);
michael@0 19 }
michael@0 20 </script>
michael@0 21 </head>
michael@0 22 <body onload="tweak()">
michael@0 23 <div id="outer"></div>
michael@0 24 </body>
michael@0 25 </html>

mercurial