| OLD | NEW |
|---|
| 1 <html> | 1 <html> |
| 2 <head> | 2 <head> |
| 3 <script src="../../../http/tests/inspector/inspector-test.js"></script> | 3 <script src="../../../http/tests/inspector/inspector-test.js"></script> |
| 4 <script src="../../../http/tests/inspector/console-test.js"></script> | 4 <script src="../../../http/tests/inspector/console-test.js"></script> |
| 5 <script src="../../../http/tests/inspector/elements-test.js"></script> | 5 <script src="../../../http/tests/inspector/elements-test.js"></script> |
| 6 <script> | 6 <script> |
| 7 | 7 |
| 8 function test() | 8 function test() |
| 9 { | 9 { |
| 10 InspectorTest.firstElementsTreeOutline().addEventListener(WebInspector.Eleme
ntsTreeOutline.Events.SelectedNodeChanged, selectedNodeChanged, this); | 10 InspectorTest.firstElementsTreeOutline().addEventListener(WebInspector.Eleme
ntsTreeOutline.Events.SelectedNodeChanged, selectedNodeChanged); |
| 11 |
| 12 var tests = [ |
| 13 ["shadow", "inspect(host.shadowRoot.firstChild.firstChild.firstChild)"], |
| 14 ["shadow-open", "inspect(hostOpen.shadowRoot.firstChild.firstChild.first
Child)"] |
| 15 ]; |
| 16 |
| 11 function selectedNodeChanged(event) | 17 function selectedNodeChanged(event) |
| 12 { | 18 { |
| 13 var node = event.data; | 19 var node = event.data; |
| 14 if (!node) | 20 if (!node) |
| 15 return; | 21 return; |
| 16 if (node.getAttribute("id") == "shadow") { | 22 if (node.getAttribute("id") == tests[0][0]) { |
| 17 InspectorTest.addResult(WebInspector.DOMPresentationUtils.xPath(node
, false)); | 23 InspectorTest.addResult(WebInspector.DOMPresentationUtils.xPath(node
, false)); |
| 18 InspectorTest.completeTest(); | 24 tests.shift(); |
| 25 nextTest(); |
| 19 } | 26 } |
| 20 } | 27 } |
| 21 InspectorTest.evaluateInConsole("inspect(host.shadowRoot.firstChild.firstChi
ld.firstChild)"); | 28 |
| 29 function nextTest() |
| 30 { |
| 31 if (!tests.length) { |
| 32 InspectorTest.completeTest(); |
| 33 return; |
| 34 } |
| 35 InspectorTest.evaluateInConsole(tests[0][1]); |
| 36 } |
| 37 |
| 38 nextTest(); |
| 22 } | 39 } |
| 23 | 40 |
| 24 </script> | 41 </script> |
| 25 </head> | 42 </head> |
| 26 | 43 |
| 27 <body onload="runTest()"> | 44 <body onload="runTest()"> |
| 28 <p> | 45 <p> |
| 29 Tests that inspect element action works for deep shadow elements. | 46 Tests that inspect element action works for deep shadow elements. |
| 30 </p> | 47 </p> |
| 31 | 48 |
| 32 <div> | 49 <div> |
| 33 <div> | 50 <div> |
| 34 <div id="host"> | 51 <div id="host"></div> |
| 35 </div> | 52 <span id="hostOpen"></span> |
| 36 </div> | 53 </div> |
| 37 </div> | 54 </div> |
| 38 | 55 |
| 39 <script> | 56 <script> |
| 40 var host = document.querySelector('#host'); | 57 document.querySelector('#host').createShadowRoot().innerHTML = "<div><div><s
pan id='shadow'>Shadow</span></div></div>"; |
| 41 var sr = host.createShadowRoot(); | 58 document.querySelector('#hostOpen').attachShadow({ mode: "open" }).innerHTML
= "<div><div><span id='shadow-open'>Shadow</span></div></div>"; |
| 42 sr.innerHTML = "<div><div><span id='shadow'>Shadow</span></div></div>"; | |
| 43 </script> | 59 </script> |
| 44 | 60 |
| 45 </body> | 61 </body> |
| 46 </html> | 62 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2347963002:
[DevTools] Show distribution for Shadow DOM V1. (Closed)
