| <html> |
| <head> |
| <script src="../../../inspector/inspector-test.js"></script> |
| <script src="../../../inspector/elements-test.js"></script> |
| <script> |
| |
| function createShadowRoot(id) |
| { |
| var container = document.getElementById("container"); |
| var root = container.createShadowRoot(); |
| root.innerHTML = "<div id='" + id + "'></div>"; |
| } |
| |
| function createShadowRootV1(containerId, id, mode) |
| { |
| var container = document.getElementById(containerId); |
| var root = container.attachShadow({ mode: mode }); |
| root.innerHTML = "<div id='" + id + "'></div>"; |
| } |
| |
| function test() { |
| TestRunner.runTestSuite([ |
| function testCreateShadowRoot(next) { |
| testShadowRoot('container', 'createShadowRoot(\'shadow-1\')', next); |
| }, |
| |
| function testCreateOpenShadowRoot(next) { |
| testShadowRoot('containerOpen', 'createShadowRootV1(\'containerOpen\', \'shadow-3\', \'open\')', next); |
| }, |
| |
| function testCreateCloseShadowRoot(next) { |
| testShadowRoot('containerClosed', 'createShadowRootV1(\'containerClosed\', \'shadow-4\', \'closed\')', next); |
| }, |
| ]); |
| |
| function testShadowRoot(containerId, code, next) { |
| var containerNode; |
| ElementsTestRunner.expandElementsTree(dumpBefore); |
| |
| function dumpBefore() { |
| containerNode = ElementsTestRunner.expandedNodeWithId(containerId); |
| TestRunner.addResult('==== before ===='); |
| ElementsTestRunner.dumpElementsTree(containerNode); |
| TestRunner.evaluateInPage(code, ElementsTestRunner.expandElementsTree.bind(InspectorTest, dumpAfter)); |
| } |
| |
| function dumpAfter() { |
| TestRunner.addResult('==== after ===='); |
| ElementsTestRunner.dumpElementsTree(containerNode); |
| next(); |
| } |
| } |
| } |
| |
| </script> |
| </head> |
| |
| <body onload="runTest()"> |
| <p> |
| Tests that elements panel updates dom tree structure upon shadow root creation. |
| </p> |
| |
| <div id="container"><div id="child"></div></div> |
| <div id="containerOpen"><div id="childOpen"></div></div> |
| <div id="containerClosed"><div id="childClosed"></div></div> |
| |
| </body> |
| </html> |
