test_css-logic-getXPath.html (2452B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=987877 5 --> 6 <head> 7 <meta charset="utf-8"> 8 <title>Test for Bug 987877</title> 9 10 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 11 <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"> 12 <script type="application/javascript"> 13 "use strict"; 14 15 const { require } = ChromeUtils.importESModule("resource://devtools/shared/loader/Loader.sys.mjs"); 16 const CssLogic = require("devtools/shared/inspector/css-logic"); 17 18 const _tests = []; 19 function addTest(test) { 20 _tests.push(test); 21 } 22 23 function runNextTest() { 24 if (!_tests.length) { 25 SimpleTest.finish(); 26 return; 27 } 28 _tests.shift()(); 29 } 30 31 window.onload = function () { 32 SimpleTest.waitForExplicitFinish(); 33 runNextTest(); 34 }; 35 36 addTest(function getXPathForUnattachedElement() { 37 const unattached = document.createElement("div"); 38 unattached.id = "unattached"; 39 is(CssLogic.getXPath(unattached), "", "Unattached node returns empty string"); 40 41 const unattachedChild = document.createElement("div"); 42 unattached.appendChild(unattachedChild); 43 is(CssLogic.getXPath(unattachedChild), "", "Unattached child returns empty string"); 44 45 const unattachedBody = document.createElement("body"); 46 is(CssLogic.getXPath(unattachedBody), "", "Unattached body returns empty string"); 47 48 runNextTest(); 49 }); 50 51 addTest(function getXPath() { 52 const data = [{ 53 // Target elements that have an ID get a short XPath. 54 selector: "#i-have-an-id", 55 path: "//*[@id=\"i-have-an-id\"]" 56 }, { 57 selector: "html", 58 path: "/html" 59 }, { 60 selector: "body", 61 path: "/html/body" 62 }, { 63 selector: "body > div:nth-child(2) > div > div:nth-child(4)", 64 path: "/html/body/div[2]/div/div[4]" 65 }, { 66 // XPath should support namespace. 67 selector: "namespace\\:body", 68 path: "/html/body/namespace:test/namespace:body" 69 }]; 70 71 for (const {selector, path} of data) { 72 const node = document.querySelector(selector); 73 is(CssLogic.getXPath(node), path, `Full css path is correct for ${selector}`); 74 } 75 76 runNextTest(); 77 }); 78 </script> 79 </head> 80 <body> 81 <div id="i-have-an-id">find me</div> 82 <div> 83 <div> 84 <div></div> 85 <div></div> 86 <div></div> 87 <div>me too!</div> 88 </div> 89 </div> 90 <namespace:test> 91 <namespace:header></namespace:header> 92 <namespace:body>and me</namespace:body> 93 </namespace:test> 94 </body> 95 </html>