| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <script src="../../inspector/inspector-test.js" id="script-id"></script> |
| <script src="../../inspector/elements-test.js"></script> |
| <script id="test-script"> |
| function matchingElements(selector) |
| { |
| return document.querySelectorAll(selector).length; |
| } |
| |
| function test() { |
| var nodeQueue = []; |
| ElementsTestRunner.expandElementsTree(enqueueNodes); |
| |
| function enqueueNodes() { |
| enqueueNode('', getDocumentElement()); |
| dumpNodeData(); |
| } |
| |
| function dumpNodeData() { |
| var entry = nodeQueue.shift(); |
| if (!entry) { |
| TestRunner.completeTest(); |
| return; |
| } |
| var cssPath = Components.DOMPresentationUtils.cssPath(entry.node, true); |
| var result = entry.prefix + cssPath; |
| TestRunner.addResult(result.replace(/\n/g, '\\n')); |
| var escapedPath = cssPath.replace(/\\/g, '\\\\'); |
| TestRunner.evaluateInPage('matchingElements(\'' + escapedPath + '\')', callback); |
| |
| function callback(result) { |
| TestRunner.assertEquals(1, result.value); |
| dumpNodeData(); |
| } |
| } |
| |
| function getDocumentElement() { |
| var map = TestRunner.domModel._idToDOMNode; |
| for (var id in map) { |
| if (map[id].nodeName() === '#document') |
| return map[id]; |
| } |
| |
| return null; |
| } |
| |
| function enqueueNode(prefix, node) { |
| if (node.nodeType() === Node.ELEMENT_NODE) |
| nodeQueue.push({prefix: prefix, node: node}); |
| var children = node.children(); |
| for (var i = 0; children && i < children.length; ++i) |
| enqueueNode(prefix + ' ', children[i]); |
| } |
| } |
| </script> |
| </head> |
| |
| <body onload="runTest()"> |
| <p>Tests DOMNode.cssPath()</p> |
| |
| <article></article> |
| <article></article> |
| <input type="number"/> |
| |
| <!-- Comment node --> |
| |
| <div id="ids"> |
| <!-- Comment node --> |
| <div></div> |
| <div></div> |
| <div id="inner-id"></div> |
| <div id="__proto__"></div> |
| <div id='#"ridiculous".id'></div> |
| <div id="'quoted.value'"></div> |
| <div id=".foo.bar"></div> |
| <div id="-"></div> |
| <div id="-a"></div> |
| <div id="-0"></div> |
| <div id="7"></div> |
| <div id="ид">ид</div> |
| <input type="text" id="input-id"/> |
| <input type="text"/> |
| <p></p> |
| </div> |
| |
| <div id="classes"> |
| <!-- Comment node 1 --> |
| <div class="foo bar"></div> |
| <!-- Comment node 2 --> |
| <div class=" foo foo "></div> |
| <div class=".foo"></div> |
| <div class=".foo.bar"></div> |
| <div class="-"></div> |
| <div class="-a"></div> |
| <div class="-0"></div> |
| <div class="--a"></div> |
| <div class="---a"></div> |
| <div class="7"></div> |
| <div class="класс">класс</div> |
| <div class="__proto__"></div> |
| <div class="__proto__ foo"></div> |
| <span class="bar"></span> |
| <div id="id-with-class" class="moo"></div> |
| <input type="text" class="input-class-one"/> |
| <input type="text" class="input-class-two"/> |
| <!-- Comment node 3 --> |
| </div> |
| |
| <div id="non-unique-classes"> |
| <!-- Comment node 1 --> |
| <span class="c1"></span> |
| <!-- Comment node 2 --> |
| <span class="c1"></span> |
| <!-- Comment node 3 --> |
| <span class="c1 c2"></span> |
| <!-- Comment node 4 --> |
| <span class="c1 c2 c3"></span> |
| <!-- Comment node 5 --> |
| <span></span> |
| <!-- Comment node 6 --> |
| <div class="c1"></div> |
| <!-- Comment node 7 --> |
| <div class="c1 c2"></div> |
| <!-- Comment node 8 --> |
| <div class="c3 c2"></div> |
| <!-- Comment node 9 --> |
| <div class="c3 c4"></div> |
| <!-- Comment node 10 --> |
| <div class="c1 c4"></div> |
| <!-- Comment node 11 --> |
| <input type="text" class="input-class"/> |
| <input type="text" class="input-class"/> |
| <div></div> |
| </div> |
| </body> |
| </html> |
