| <!DOCTYPE html> |
| <style> |
| div { color: green; } |
| </style> |
| <p>Test passes if you see a single 100px by 100px green box below.</p> |
| <iframe></iframe> |
| <script> |
| const frameDocument = document.querySelector('iframe').contentDocument; |
| frameDocument.body.innerHTML = `<div></div>`; |
| const host = frameDocument.querySelector('div'); |
| host.attachShadow({mode:'closed'}).innerHTML = ` |
| <style> |
| :host { |
| color: red; |
| background: green; |
| width: 100px; |
| height: 100px; |
| } |
| </style> |
| <span>Test moving a host to a different document.</span> |
| `; |
| host.offsetWidth; |
| document.adoptNode(host); |
| document.body.appendChild(host); |
| document.body.removeChild(document.querySelector('iframe')); |
| if (window.GCController) |
| GCController.collect(); |
| </script> |
