test_css-logic-getCssPath.html 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. <!DOCTYPE HTML>
  2. <html>
  3. <!--
  4. https://bugzilla.mozilla.org/show_bug.cgi?id=1323700
  5. -->
  6. <head>
  7. <meta charset="utf-8">
  8. <title>Test for Bug 1323700</title>
  9. <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
  10. <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
  11. <script type="application/javascript;version=1.8">
  12. const { classes: Cc, interfaces: Ci, utils: Cu } = Components;
  13. let { require } = Cu.import("resource://devtools/shared/Loader.jsm", {});
  14. const CssLogic = require("devtools/shared/inspector/css-logic");
  15. var _tests = [];
  16. function addTest(test) {
  17. _tests.push(test);
  18. }
  19. function runNextTest() {
  20. if (_tests.length == 0) {
  21. SimpleTest.finish()
  22. return;
  23. }
  24. _tests.shift()();
  25. }
  26. window.onload = function() {
  27. SimpleTest.waitForExplicitFinish();
  28. runNextTest();
  29. }
  30. addTest(function getCssPathForUnattachedElement() {
  31. var unattached = document.createElement("div");
  32. unattached.id = "unattached";
  33. try {
  34. CssLogic.getCssPath(unattached);
  35. ok(false, "Unattached node did not throw")
  36. } catch(e) {
  37. ok(e, "Unattached node throws an exception");
  38. }
  39. var unattachedChild = document.createElement("div");
  40. unattached.appendChild(unattachedChild);
  41. try {
  42. CssLogic.getCssPath(unattachedChild);
  43. ok(false, "Unattached child node did not throw")
  44. } catch(e) {
  45. ok(e, "Unattached child node throws an exception");
  46. }
  47. var unattachedBody = document.createElement("body");
  48. try {
  49. CssLogic.getCssPath(unattachedBody);
  50. ok(false, "Unattached body node did not throw")
  51. } catch(e) {
  52. ok(e, "Unattached body node throws an exception");
  53. }
  54. runNextTest();
  55. });
  56. addTest(function cssPathHasOneStepForEachAncestor() {
  57. for (let el of [...document.querySelectorAll('*')]) {
  58. let splitPath = CssLogic.getCssPath(el).split(" ");
  59. let expectedNbOfParts = 0;
  60. var parent = el.parentNode;
  61. while (parent) {
  62. expectedNbOfParts ++;
  63. parent = parent.parentNode;
  64. }
  65. is(splitPath.length, expectedNbOfParts, "There are enough parts in the full path");
  66. }
  67. runNextTest();
  68. });
  69. addTest(function getCssPath() {
  70. let data = [{
  71. selector: "#id",
  72. path: "html body div div div.class div#id"
  73. }, {
  74. selector: "html",
  75. path: "html"
  76. }, {
  77. selector: "body",
  78. path: "html body"
  79. }, {
  80. selector: ".c1.c2.c3",
  81. path: "html body span.c1.c2.c3"
  82. }, {
  83. selector: "#i",
  84. path: "html body span#i.c1.c2"
  85. }];
  86. for (let {selector, path} of data) {
  87. let node = document.querySelector(selector);
  88. is (CssLogic.getCssPath(node), path, `Full css path is correct for ${selector}`);
  89. }
  90. runNextTest();
  91. });
  92. </script>
  93. </head>
  94. <body>
  95. <div>
  96. <div>
  97. <div class="class">
  98. <div id="id"></div>
  99. </div>
  100. </div>
  101. </div>
  102. <span class="c1 c2 c3"></span>
  103. <span id="i" class="c1 c2"></span>
  104. </body>
  105. </html>