| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../../resources/js-test-pre.js"></script> |
| <script src="resources/nodesFromRect.js"></script> |
| <style> |
| .box { |
| width: 30px; |
| height: 30px; |
| padding: 0px; |
| } |
| </style> |
| </head> |
| <body id="body"> |
| <div id="d1" class="box"></div> |
| |
| <div id="d2" class="box"></div> |
| |
| <div id="shadowHost" class="box"></div> |
| |
| <div id="console"></div> |
| |
| <script> |
| checkRect(10, 45, 15, 30, "DIV#shadowHost, DIV#d2, BODY#body"); |
| |
| var host = document.getElementById("shadowHost"); |
| var shadow = host.attachShadow({mode: 'closed'}); |
| shadow.innerHTML="<content>text</content>"; |
| |
| checkRect(10, 45, 15, 30, "'text', CONTENT, DIV#shadowHost, DIV#d2, BODY#body"); |
| |
| shadow.innerHTML="<slot></slot>"; |
| host.innerHTML="<inner-host></inner-host>"; |
| var innerHost = host.querySelector("inner-host"); |
| var innerShadow = innerHost.attachShadow({mode: 'closed'}); |
| innerShadow.innerHTML = "<content>text</content>"; |
| |
| checkRect(10, 45, 15, 30, "'text', CONTENT, INNER-HOST, DIV#shadowHost, DIV#d2, BODY#body"); |
| </script> |
| <script src="../../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
| |
