test_css-logic-findCssSelector.html (3675B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Test for CSS logic helper </title> 6 7 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 8 <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"> 9 <script type="application/javascript"> 10 "use strict"; 11 12 const { require } = ChromeUtils.importESModule("resource://devtools/shared/loader/Loader.sys.mjs"); 13 const { findCssSelector } = require("devtools/shared/inspector/css-logic"); 14 15 var _tests = []; 16 function addTest(test) { 17 _tests.push(test); 18 } 19 20 function runNextTest() { 21 if (!_tests.length) { 22 SimpleTest.finish(); 23 return; 24 } 25 _tests.shift()(); 26 } 27 28 window.onload = function() { 29 SimpleTest.waitForExplicitFinish(); 30 runNextTest(); 31 }; 32 33 addTest(function findAllCssSelectors() { 34 const nodes = document.querySelectorAll("*"); 35 for (let i = 0; i < nodes.length; i++) { 36 const selector = findCssSelector(nodes[i]); 37 const matches = document.querySelectorAll(selector); 38 39 is(matches.length, 1, "There is a single match: " + selector); 40 is(matches[0], nodes[i], "The selector matches the correct node: " + selector); 41 } 42 43 runNextTest(); 44 }); 45 46 addTest(function findCssSelectorNotContainedInDocument() { 47 const unattached = document.createElement("div"); 48 unattached.id = "unattached"; 49 is(findCssSelector(unattached), "", "Unattached node returns empty string"); 50 51 const unattachedChild = document.createElement("div"); 52 unattached.appendChild(unattachedChild); 53 is(findCssSelector(unattachedChild), "", "Unattached child returns empty string"); 54 55 const unattachedBody = document.createElement("body"); 56 is(findCssSelector(unattachedBody), "", "Unattached body returns empty string"); 57 58 runNextTest(); 59 }); 60 61 addTest(function findCssSelectorBasic() { 62 const data = [ 63 "#one", 64 "#" + CSS.escape("2"), 65 ".three", 66 "." + CSS.escape("4"), 67 "#find-css-selector > div:nth-child(5)", 68 "#find-css-selector > p:nth-child(6)", 69 ".seven", 70 ".eight", 71 ".nine", 72 ".ten", 73 "div.sameclass:nth-child(11)", 74 "div.sameclass:nth-child(12)", 75 "div.sameclass:nth-child(13)", 76 "#" + CSS.escape("!, \", #, $, %, &, ', (, ), *, +, ,, -, ., /, :, ;, <, =, >, ?, @, [, \\, ], ^, `, {, |, }, ~"), 77 ]; 78 79 const container = document.querySelector("#find-css-selector"); 80 is(container.children.length, data.length, "Container has correct number of children."); 81 82 for (let i = 0; i < data.length; i++) { 83 const node = container.children[i]; 84 is(findCssSelector(node), data[i], "matched id for index " + (i - 1)); 85 } 86 87 runNextTest(); 88 }); 89 </script> 90 </head> 91 <body> 92 <div id="find-css-selector"> 93 <div id="one"></div> <!-- Basic ID --> 94 <div id="2"></div> <!-- Escaped ID --> 95 <div class="three"></div> <!-- Basic Class --> 96 <div class="4"></div> <!-- Escaped Class --> 97 <div attr="5"></div> <!-- Only an attribute --> 98 <p></p> <!-- Nothing unique --> 99 <div class="seven seven"></div> <!-- Two classes with same name --> 100 <div class="eight eight2"></div> <!-- Two classes with different names --> 101 102 <!-- Two elements with the same id - should not use ID --> 103 <div class="nine" id="nine-and-ten"></div> 104 <div class="ten" id="nine-and-ten"></div> 105 106 <!-- Three elements with the same id - should use class and nth-child instead --> 107 <div class="sameclass" id="11-12-13"></div> 108 <div class="sameclass" id="11-12-13"></div> 109 <div class="sameclass" id="11-12-13"></div> 110 111 <!-- Special characters --> 112 <div id="!, ", #, $, %, &, ', (, ), *, +, ,, -, ., /, :, ;, <, =, >, ?, @, [, \, ], ^, `, {, |, }, ~"></div> 113 </div> 114 </body> 115 </html>