<!DOCTYPE html>
<html>
<body>
<p>This tests tooltip across shadow boundaries. To manually test, hover over two boxes below. You should see tooltips for each.</p>
<div class="container"><a title="Tooltip"><span id="hostWithTitle"></span></a></div>
<div class="container"><span id="hostWithSlottedContent"><span id="content">Hover over here 2</span></span></a></div>
<style>

.container {
    border: solid 1px blue;
    width: 100px;
    height: 100px;
    position: relative;
    margin-bottom: 10px;
}

#content {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100px;
    height: 100px;
    background: #eee;
}

</style>
<pre><script>

var hostWithTitle = document.getElementById('hostWithTitle');
var shadowRoot = hostWithTitle.attachShadow({mode: 'closed'});
shadowRoot.innerHTML = `
    <style>
        #content {
            position: absolute;
            left: 0px;
            top: 0px;
            width: 100px;
            height: 100px;
            background: #eee;
        }
    </style>
    <div id="content">Hover over here 1</div>
`;

var nodeInsideShadowRoot = shadowRoot.querySelector('#content');
var slottedNode = document.querySelector('#content');

shadowRootWithSlot = document.getElementById('hostWithSlottedContent').attachShadow({mode: 'closed'});
shadowRootWithSlot.innerHTML = `<slot title="Tooltip"></slot>`;

if (window.internals) {
    testRunner.dumpAsText();

    document.write((internals.toolTipFromElement(nodeInsideShadowRoot) == 'Tooltip' ? 'PASS' : 'FAIL')
        + ' - Tooltip on a node inside a shadow tree with title on its shadow host ancestor\n');

    document.write((internals.toolTipFromElement(slottedNode) == 'Tooltip' ? 'PASS' : 'FAIL')
        + ' - Tooltip on a slotted node with title on its slot\n');

    Array.from(document.querySelectorAll('.container')).map(function (node) { node.remove(); });
}

</script></pre>
</body>
</html>