| <!DOCTYPE html> |
| <html> |
| <body> |
| <p>Test passes if you see a single 100px by 100px green box below.</p> |
| <div></div> |
| <style> |
| div { |
| display: block; |
| width: 100px; |
| height: 100px; |
| background: red; |
| } |
| </style> |
| <script src="../../resources/ui-helper.js"></script> |
| <script> |
| |
| var div = document.querySelector('div'); |
| var outerShadow = div.attachShadow({mode: 'closed'}); |
| outerShadow.innerHTML = ` |
| <style> |
| div { width: 100%; height: 100%; } |
| </style> |
| <div><slot>hover over this text</slot></div>`; |
| |
| outerShadow.querySelector('div').attachShadow({mode: 'closed'}).innerHTML = ` |
| <style> |
| div { background: yellow; width: 100%; height: 100%; } |
| div:hover { background: green; color: green; } |
| </style> |
| <div><slot></slot></div>`; |
| |
| if (window.eventSender) |
| eventSender.mouseMoveTo(div.offsetLeft + 10, div.offsetTop + 10); |
| |
| </script> |
| </body> |
| </html> |
