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