| <html> |
| <head> |
| <script src="../../http/tests/inspector/inspector-test.js"></script> |
| <script src="../../http/tests/inspector/elements-test.js"></script> |
| <style> |
| .border { |
| border: 1px solid black; |
| } |
| </style> |
| <script> |
| |
| function buildShadowDOM() |
| { |
| var host = document.querySelector("body"); |
| var root = host.createShadowRoot(); |
| var template = document.querySelector("#dom-template"); |
| var clone = document.importNode(template.content, true); |
| root.appendChild(clone); |
| var second = root.querySelector("#fifth"); |
| second.id = "inspected-shadow"; |
| runTest(); |
| } |
| |
| function test() |
| { |
| InspectorTest.runTestSuite([ |
| function setupProxyOverlay(next) |
| { |
| InspectorTest.evaluateFunctionInOverlay(drawHighlightProxy, next); |
| }, |
| |
| function testRegularNodeSelection(next) |
| { |
| InspectorTest.selectNodeAndWaitForStyles("inspected", onSelected); |
| |
| function onSelected() |
| { |
| resetHighlightCount(onHighlightCountReset); |
| } |
| |
| function onHighlightCountReset() |
| { |
| var section = InspectorTest.firstMatchedStyleSection(); |
| section._highlight(); |
| testRunner.layoutAndPaintAsyncThen(onHighlighted); |
| } |
| |
| function onHighlighted() |
| { |
| dumpHighlightCount(next); |
| } |
| }, |
| |
| function testShadowDOMNodeSelection(next) |
| { |
| InspectorTest.selectNodeAndWaitForStyles("inspected-shadow", onSelected); |
| |
| function onSelected() |
| { |
| resetHighlightCount(onHighlightCountReset); |
| } |
| |
| function onHighlightCountReset() |
| { |
| var section = InspectorTest.firstMatchedStyleSection(); |
| section._highlight(); |
| testRunner.layoutAndPaintAsyncThen(onHighlighted); |
| } |
| |
| function onHighlighted() |
| { |
| dumpHighlightCount(next); |
| } |
| }, |
| ]); |
| |
| function drawHighlightProxy() |
| { |
| window._highlightsForTest = []; |
| var oldDrawHighlight = drawHighlight; |
| drawHighlight = proxy; |
| |
| function proxy(highlight, context) |
| { |
| window._highlightsForTest.push(highlight); |
| oldDrawHighlight(highlight, context); |
| } |
| } |
| |
| function reportHighlights() |
| { |
| var result = window._highlightsForTest.length; |
| window._highlightsForTest = []; |
| return result + ""; |
| } |
| |
| function dumpHighlightCount(next) |
| { |
| InspectorTest.evaluateFunctionInOverlay(reportHighlights, onResults); |
| |
| function onResults(count) |
| { |
| InspectorTest.addResult("Highlights drawn: " + count); |
| next(); |
| } |
| } |
| |
| function resetHighlightCount(next) |
| { |
| InspectorTest.evaluateFunctionInOverlay(reportHighlights, next); |
| } |
| } |
| |
| </script> |
| </head> |
| |
| <body onload="buildShadowDOM()"> |
| <p> |
| Tests that long-hovering over StylesSidebar matched rule selector highlights |
| matching nodes in the page. |
| </p> |
| <div class="border">1st</div> |
| <div id="inspected" class="border">2nd</div> |
| <div class="border">3rd</div> |
| <template id="dom-template"> |
| <style> |
| .bck { |
| border: 1px solid black; |
| } |
| </style> |
| <div class="bck">1st</div> |
| <div class="bck">2nd</div> |
| <div class="bck">3rd</div> |
| <div class="bck">4th</div> |
| <div class="bck" id="fifth">5th</div> |
| </template> |
| </body> |
| </html> |
