| <!DOCTYPE html> |
| <script src="../../../resources/testharness.js"></script> |
| <script src="../../../resources/testharnessreport.js"></script> |
| <style> |
| .target { |
| background-color:blue; |
| color:white; |
| width:100px; height:40px; |
| margin:10px; |
| } |
| </style> |
| <div id="container"> |
| <p>To test manually, hover over blue boxes and see if the tooltip says "PASS"</p> |
| <div id="fromdoc" title="PASS-fromdoc"></div> |
| <div id="distributed" title="NG-distributed"><div class="target">Distributed</div></div> |
| <div id="multilevel" title="NG-multilevel"><div class="target">Multi-level Distributed</div></div> |
| </div> |
| <script> |
| setup({ explicit_done: true }); |
| var style = "<style>.target { background-color:blue; color:white; width:100px; height:40px; margin:10px; }</style>"; |
| |
| if (!window.eventSender || !window.testRunner) |
| test(function () { assert_unreached(); }, "Cannot automate the tests without eventSender and testRunner"); |
| |
| var host = document.getElementById("fromdoc"); |
| var root = createShadowRootWithInnerHtml(host, style + "<div class=target>Shadow</div>"); |
| testTooltipTextInShadow("The title of elements in shadow inherits from the document", root.querySelector(".target"), "PASS-fromdoc"); |
| |
| host = document.getElementById("distributed"); |
| createShadowRootWithInnerHtml(host, "<div title='PASS-distributed'><content></content></div>"); |
| testTooltipTextInShadow("The title of distributed elements inherits in the flat tree", host.querySelector(".target"), "PASS-distributed"); |
| |
| host = document.getElementById("multilevel"); |
| var host2ndLevel = createShadowRootWithInnerHtml(host, "<div title='NG-multilevel'><content></content></div>").firstChild; |
| createShadowRootWithInnerHtml(host2ndLevel, "<div title='PASS-multilevel'><content></content></div>"); |
| testTooltipTextInShadow("The title of distributed elements inherits in the flat tree (multiple levels)", host.querySelector(".target"), "PASS-multilevel"); |
| |
| function testTooltipTextInShadow(description, element, expected) { |
| if (!window.eventSender || !window.testRunner) |
| return; |
| eventSender.dragMode = false; |
| eventSender.mouseMoveTo(element.offsetLeft, element.offsetTop + element.offsetHeight / 2); |
| test(function () { |
| assert_equals(testRunner.tooltipText, expected); |
| }, description); |
| } |
| |
| function createShadowRootWithInnerHtml(host, shadowHtml) { |
| var root = host.createShadowRoot(); |
| root.innerHTML = shadowHtml; |
| return root; |
| } |
| |
| if (window.testRunner) |
| container.style.display = "none"; |
| done(); |
| </script> |