third_party/WebKit/LayoutTests/inspector/elements/elements-css-path.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <meta charset="utf-8">
   5 <script src="../../http/tests/inspector/inspector-test.js" id="script-id"></script>
   6 <script src="../../http/tests/inspector/elements-test.js"></script>
   7 <script id="test-script">
   8 function matchingElements(selector)
   9 {
  10     return document.querySelectorAll(selector).length;
  11 }
  12
  13 function test()
  14 {
  15     var nodeQueue = [];
  16     InspectorTest.expandElementsTree(enqueueNodes);
  17
  18     function enqueueNodes()
  19     {
  20         enqueueNode("", getDocumentElement());
  21         dumpNodeData();
  22     }
  23
  24     function dumpNodeData()
  25     {
  26         var entry = nodeQueue.shift();
  27         if (!entry) {
  28             InspectorTest.completeTest();
  29             return;
  30         }
  31         var cssPath = WebInspector.DOMPresentationUtils.cssPath(entry.node, true);
  32         var result = entry.prefix + cssPath;
  33         InspectorTest.addResult(result.replace(/\n/g, "\\n"));
  34         var escapedPath = cssPath.replace(/\\/g, "\\\\");
  35         InspectorTest.evaluateInPage("matchingElements('" + escapedPath  + "')", callback);
  36
  37         function callback(result)
  38         {
  39             InspectorTest.assertEquals(1, result.value);
  40             dumpNodeData();
  41         }
  42     }
  43
  44     function getDocumentElement()
  45     {
  46         var map = InspectorTest.domModel._idToDOMNode;
  47         for (var id in map) {
  48             if (map[id].nodeName() === "#document")
  49                 return map[id];
  50         }
  51
  52         return null;
  53     }
  54
  55     function enqueueNode(prefix, node)
  56     {
  57         if (node.nodeType() === Node.ELEMENT_NODE)
  58             nodeQueue.push({prefix: prefix, node: node});
  59         var children = node.children();
  60         for (var i = 0; children && i < children.length; ++i)
  61             enqueueNode(prefix + "  ", children[i]);
  62     }
  63
  64 }
  65 </script>
  66 </head>
  67
  68 <body onload="runTest()">
  69 <p>Tests DOMNode.cssPath()</p>
  70
  71 <article></article>
  72 <article></article>
  73 <input type="number"/>
  74
  75 <!-- Comment node -->
  76
  77 <div id="ids">
  78     <!-- Comment node -->
  79     <div></div>
  80     <div></div>
  81     <div id="inner-id"></div>
  82     <div id="__proto__"></div>
  83     <div id='#"ridiculous".id'></div>
  84     <div id="'quoted.value'"></div>
  85     <div id=".foo.bar"></div>
  86     <div id="-"></div>
  87     <div id="-a"></div>
  88     <div id="-0"></div>
  89     <div id="7"></div>
  90     <div id="ид">ид</div>
  91     <input type="text" id="input-id"/>
  92     <input type="text"/>
  93     <p></p>
  94 </div>
  95
  96 <div id="classes">
  97     <!-- Comment node 1 -->
  98     <div class="foo bar"></div>
  99     <!-- Comment node 2 -->
 100     <div class=" foo foo "></div>
 101     <div class=".foo"></div>
 102     <div class=".foo.bar"></div>
 103     <div class="-"></div>
 104     <div class="-a"></div>
 105     <div class="-0"></div>
 106     <div class="7"></div>
 107     <div class="класс">класс</div>
 108     <div class="__proto__"></div>
 109     <div class="__proto__ foo"></div>
 110     <span class="bar"></span>
 111     <div id="id-with-class" class="moo"></div>
 112     <input type="text" class="input-class-one"/>
 113     <input type="text" class="input-class-two"/>
 114     <!-- Comment node 3 -->
 115 </div>
 116
 117 <div id="non-unique-classes">
 118   <!-- Comment node 1 -->
 119   <span class="c1"></span>
 120   <!-- Comment node 2 -->
 121   <span class="c1"></span>
 122   <!-- Comment node 3 -->
 123   <span class="c1 c2"></span>
 124   <!-- Comment node 4 -->
 125   <span class="c1 c2 c3"></span>
 126   <!-- Comment node 5 -->
 127   <span></span>
 128   <!-- Comment node 6 -->
 129   <div class="c1"></div>
 130   <!-- Comment node 7 -->
 131   <div class="c1 c2"></div>
 132   <!-- Comment node 8 -->
 133   <div class="c3 c2"></div>
 134   <!-- Comment node 9 -->
 135   <div class="c3 c4"></div>
 136   <!-- Comment node 10 -->
 137   <div class="c1 c4"></div>
 138   <!-- Comment node 11 -->
 139   <input type="text" class="input-class"/>
 140   <input type="text" class="input-class"/>
 141   <div></div>
 142 </div>
 143 </body>
 144 </html>