test_css-logic-specificity.html (3031B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 Test that css-logic calculates CSS specificity properly 5 --> 6 <meta charset="utf-8"> 7 <title>Test css-logic specificity</title> 8 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 9 <body style="background:blue;"> 10 <script> 11 "use strict"; 12 13 window.onload = function() { 14 const {require} = ChromeUtils.importESModule("resource://devtools/shared/loader/Loader.sys.mjs"); 15 const {CssLogic, CssSelector} = require("devtools/server/actors/inspector/css-logic"); 16 17 const TEST_DATA = [ 18 {text: "*", expected: 0}, 19 {text: "LI", expected: 1}, 20 {text: "UL LI", expected: 2}, 21 {text: "UL OL + LI", expected: 3}, 22 {text: "H1 + [REL=\"up\"]", expected: 1025}, 23 {text: "UL OL LI.red", expected: 1027}, 24 {text: "LI.red.level", expected: 2049}, 25 {text: ".red .level", expected: 2048}, 26 {text: "#x34y", expected: 1048576}, 27 {text: "#s12:not(FOO)", expected: 1048577}, 28 {text: "body#home div#warning p.message", expected: 2098179}, 29 {text: "* body#home div#warning p.message", expected: 2098179}, 30 {text: "#footer :not(nav) li", expected: 1048578}, 31 {text: "bar:nth-child(n)", expected: 1025}, 32 {text: "li::marker", expected: 2}, 33 {text: "a:hover", expected: 1025}, 34 ]; 35 36 function createDocument() { 37 let text = TEST_DATA.map(i=>i.text).join(","); 38 text = '<style>' + text + " {color:red;}</style>"; 39 document.body.innerHTML = text; 40 } 41 42 function getExpectedSpecificity(selectorText) { 43 return TEST_DATA.filter(i => i.text === selectorText)[0].expected; 44 } 45 46 SimpleTest.waitForExplicitFinish(); 47 48 createDocument(); 49 const cssLogic = new CssLogic(); 50 51 cssLogic.highlight(document.body); 52 53 // There could be more stylesheets due to e.g, accessiblecaret, so find the 54 // right one. 55 info(`Sheets: ${cssLogic.sheets.map(s => s.href).join(", ")}`); 56 57 const cssSheet = cssLogic.sheets.find(s => s.href == location.href); 58 const cssRule = cssSheet.domSheet.cssRules[0]; 59 const selectors = CssLogic.getSelectors(cssRule); 60 61 is(selectors.length, TEST_DATA.length, "Should be the right rule"); 62 63 info("Iterating over the test selectors: " + selectors.join(", ")); 64 for (let i = 0; i < selectors.length; i++) { 65 const selectorText = selectors[i]; 66 info("Testing selector " + selectorText); 67 68 const selector = new CssSelector(cssRule, selectorText, i); 69 const expected = getExpectedSpecificity(selectorText); 70 const specificity = selector.cssRule.selectorSpecificityAt(selector.selectorIndex); 71 is(specificity, expected, 72 'Selector "' + selectorText + '" has a specificity of ' + expected); 73 } 74 75 info("Testing specificity of element.style"); 76 const colorProp = cssLogic.getPropertyInfo("background-color"); 77 is(colorProp.matchedSelectors[0].specificity, 0x40000000, 78 "Element styles have specificity of 0x40000000 (1073741824)."); 79 80 SimpleTest.finish(); 81 }; 82 </script> 83 </body> 84 </html>