<!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>