third_party/WebKit/LayoutTests/inspector/elements/shadow/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     var rootClosed = document.querySelector("#hostClosed").createShadowRoot({mode: 'closed'});
  14     rootClosed.appendChild(template.content.cloneNode(true));
  15     runTest();
  16 }
  17
  18 function test()
  19 {
  20     WebInspector.settingForTest("showUAShadowDOM").set(true);
  21     InspectorTest.expandElementsTree(step0);
  22
  23     function step0()
  24     {
  25         selectNode(matchUserAgentShadowRoot, step1);
  26     }
  27
  28     function step1()
  29     {
  30         InspectorTest.dumpBreadcrumb("User-agent shadow root breadcrumb");
  31         selectNode(matchOpenShadowRoot, step2);
  32     }
  33
  34     function step2()
  35     {
  36         InspectorTest.dumpBreadcrumb("Open shadow root breadcrumb");
  37         selectNode(matchClosedShadowRoot, step3);
  38     }
  39
  40     function step3()
  41     {
  42         InspectorTest.dumpBreadcrumb("Closed shadow root breadcrumb");
  43         InspectorTest.completeTest();
  44     }
  45
  46     function selectNode(matchFunction, next)
  47     {
  48         InspectorTest.findNode(matchFunction, callback);
  49         function callback(node)
  50         {
  51             WebInspector.Revealer.revealPromise(node).then(next);
  52         }
  53     }
  54
  55     function matchUserAgentShadowRoot(node)
  56     {
  57         return node.shadowRootType() === WebInspector.DOMNode.ShadowRootTypes.UserAgent;
  58     }
  59
  60     function matchOpenShadowRoot(node)
  61     {
  62         return node.shadowRootType() === WebInspector.DOMNode.ShadowRootTypes.Open;
  63     }
  64
  65     function matchClosedShadowRoot(node)
  66     {
  67         return node.shadowRootType() === WebInspector.DOMNode.ShadowRootTypes.Closed;
  68     }
  69 }
  70
  71 </script>
  72 </head>
  73
  74 <body onload="loaded()">
  75 <p>
  76 Tests that shadow roots are displayed correctly in breadcrumbs.
  77 </p>
  78
  79 <input type="text">
  80 <div id="host"></div>
  81 <div id="hostClosed"></div>
  82 <template id="tmpl">
  83     <style>.red { color: red; }</style>
  84     <div id="inner" class="red">inner</div>
  85 </template>
  86
  87
  88 </body>
  89 </html>