src/third_party/WebKit/LayoutTests/inspector/elements/breadcrumb-shadow-roots.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
   2 <html>
   3 <head>
   4 <script src="../../http/tests/inspector/inspector-test.js"></script>
   5 <script src="../../http/tests/inspector/elements-test.js"></script>
   6 <script>
   7
   8 function loaded()
   9 {
  10     var template = document.querySelector("#tmpl");
  11     var root = document.querySelector("#host").createShadowRoot();
  12     root.appendChild(template.content.cloneNode(true));
  13     runTest();
  14 }
  15
  16 function test()
  17 {
  18     WebInspector.inspectorView.showPanel("elements");
  19     WebInspector.settings.showUAShadowDOM.set(true);
  20     InspectorTest.expandElementsTree(step0);
  21
  22     function step0()
  23     {
  24         selectNode(matchUserAgentShadowRoot, step1);
  25     }
  26
  27     function step1()
  28     {
  29         InspectorTest.dumpBreadcrumb("User-agent shadow root breadcrumb");
  30         selectNode(matchAuthorShadowRoot, step2);
  31     }
  32
  33     function step2()
  34     {
  35         InspectorTest.dumpBreadcrumb("Author shadow root breadcrumb");
  36         InspectorTest.completeTest();
  37     }
  38
  39     function selectNode(matchFunction, next)
  40     {
  41         InspectorTest.findNode(matchFunction, callback);
  42         function callback(node)
  43         {
  44             WebInspector.Revealer.reveal(node);
  45             next(node);
  46         }
  47     }
  48
  49     function matchUserAgentShadowRoot(node)
  50     {
  51         return node.shadowRootType() === WebInspector.DOMNode.ShadowRootTypes.UserAgent;
  52     }
  53
  54     function matchAuthorShadowRoot(node)
  55     {
  56         return node.shadowRootType() === WebInspector.DOMNode.ShadowRootTypes.Author;
  57     }
  58 }
  59
  60 </script>
  61 </head>
  62
  63 <body onload="loaded()">
  64 <p>
  65 Tests that shadow roots are displayed correctly in breadcrumbs.
  66 </p>
  67
  68 <input type="text">
  69 <div id="host"></div>
  70 <template id="tmpl">
  71     <style>.red { color: red; }</style>
  72     <div id="inner" class="red">inner</div>
  73 </template>
  74
  75
  76 </body>
  77 </html>