| 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/elements-test.js"></script> | 4 <script src="../../../http/tests/inspector/elements-test.js"></script> |
| 5 <script> | 5 <script> |
| 6 | 6 |
| 7 function createShadowRoot(id) | 7 function createShadowRoot(id) |
| 8 { | 8 { |
| 9 var container = document.getElementById("container"); | 9 var container = document.getElementById("container"); |
| 10 var root = container.createShadowRoot(); | 10 var root = container.createShadowRoot(); |
| 11 root.innerHTML = "<div id='" + id + "'></div>"; | 11 root.innerHTML = "<div id='" + id + "'></div>"; |
| 12 } | 12 } |
| 13 | 13 |
| 14 function createShadowRootV1(containerId, id, mode) |
| 15 { |
| 16 var container = document.getElementById(containerId); |
| 17 var root = container.attachShadow({ mode: mode }); |
| 18 root.innerHTML = "<div id='" + id + "'></div>"; |
| 19 } |
| 20 |
| 14 function test() | 21 function test() |
| 15 { | 22 { |
| 16 var containerNode; | |
| 17 | |
| 18 InspectorTest.runTestSuite([ | 23 InspectorTest.runTestSuite([ |
| 19 function testDumpInitial(next) | |
| 20 { | |
| 21 function callback(node) | |
| 22 { | |
| 23 containerNode = InspectorTest.expandedNodeWithId("container"); | |
| 24 expandAndDumpContainerNode("========= Original ========", next)(
); | |
| 25 } | |
| 26 InspectorTest.expandElementsTree(callback); | |
| 27 }, | |
| 28 | |
| 29 function testCreateShadowRoot(next) | 24 function testCreateShadowRoot(next) |
| 30 { | 25 { |
| 31 InspectorTest.evaluateInPage( | 26 testShadowRoot("container", "createShadowRoot('shadow-1')", next); |
| 32 "createShadowRoot('shadow-1')", | |
| 33 expandAndDumpContainerNode("===== After createShadowRoot =====",
next)); | |
| 34 }, | 27 }, |
| 35 | 28 |
| 36 function testCreateSecondShadowRoot(next) | 29 function testCreateSecondShadowRoot(next) |
| 37 { | 30 { |
| 38 InspectorTest.evaluateInPage( | 31 testShadowRoot("container", "createShadowRoot('shadow-2')", next); |
| 39 "createShadowRoot('shadow-2')", | 32 }, |
| 40 expandAndDumpContainerNode("===== After second createShadowRoot
=====", next)); | 33 |
| 41 } | 34 function testCreateOpenShadowRoot(next) |
| 35 { |
| 36 testShadowRoot("containerOpen", "createShadowRootV1('containerOpen',
'shadow-3', 'open')", next); |
| 37 }, |
| 38 |
| 39 function testCreateCloseShadowRoot(next) |
| 40 { |
| 41 testShadowRoot("containerClosed", "createShadowRootV1('containerClos
ed', 'shadow-4', 'closed')", next); |
| 42 }, |
| 42 ]); | 43 ]); |
| 43 | 44 |
| 44 function expandAndDumpContainerNode(title, next) | 45 function testShadowRoot(containerId, code, next) |
| 45 { | 46 { |
| 46 return function() | 47 var containerNode; |
| 48 InspectorTest.expandElementsTree(dumpBefore); |
| 49 |
| 50 function dumpBefore() |
| 47 { | 51 { |
| 48 InspectorTest.addResult(title); | 52 containerNode = InspectorTest.expandedNodeWithId(containerId); |
| 49 InspectorTest.expandElementsTree(callback); | 53 InspectorTest.addResult("==== before ===="); |
| 54 InspectorTest.dumpElementsTree(containerNode); |
| 55 InspectorTest.evaluateInPage(code, InspectorTest.expandElementsTree.
bind(InspectorTest, dumpAfter)); |
| 56 } |
| 50 | 57 |
| 51 function callback() | 58 function dumpAfter() |
| 52 { | 59 { |
| 53 InspectorTest.dumpElementsTree(containerNode); | 60 InspectorTest.addResult("==== after ===="); |
| 54 next(); | 61 InspectorTest.dumpElementsTree(containerNode); |
| 55 } | 62 next(); |
| 56 } | 63 } |
| 57 } | 64 } |
| 58 } | 65 } |
| 59 | 66 |
| 60 </script> | 67 </script> |
| 61 </head> | 68 </head> |
| 62 | 69 |
| 63 <body onload="runTest()"> | 70 <body onload="runTest()"> |
| 64 <p> | 71 <p> |
| 65 Tests that elements panel updates dom tree structure upon shadow root creation. | 72 Tests that elements panel updates dom tree structure upon shadow root creation. |
| 66 </p> | 73 </p> |
| 67 | 74 |
| 68 <div id="container"><div id="child"></div></div> | 75 <div id="container"><div id="child"></div></div> |
| 76 <div id="containerOpen"><div id="childOpen"></div></div> |
| 77 <div id="containerClosed"><div id="childClosed"></div></div> |
| 69 | 78 |
| 70 </body> | 79 </body> |
| 71 </html> | 80 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2347963002:
[DevTools] Show distribution for Shadow DOM V1. (Closed)
