devtools/server/tests/chrome/test_css-logic-specificity.html

   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");
  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>