devtools/server/tests/chrome/test_styles-matched.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <!--
   4 https://bugzilla.mozilla.org/show_bug.cgi?id=
   5 -->
   6 <head>
   7   <meta charset="utf-8">
   8   <title>Test for Bug </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" src="inspector-helpers.js"></script>
  13   <script type="application/javascript">
  14 "use strict";
  15
  16 const CssLogic = require("devtools/shared/inspector/css-logic");
  17
  18 window.onload = function() {
  19   SimpleTest.waitForExplicitFinish();
  20   runNextTest();
  21 };
  22
  23 let gWalker = null;
  24 let gStyles = null;
  25 let gInspectee = null;
  26
  27 addTest(async function setup() {
  28   const url = document.getElementById("inspectorContent").href;
  29   const { commands, target, doc } = await attachURL(url);
  30   gInspectee = doc;
  31
  32   // We need an active resource command before initializing the inspector front.
  33   const resourceCommand = commands.resourceCommand;
  34   // We listen to any random resource, we only need to trigger the resource command
  35   // onTargetAvailable callback so the `resourceCommand` attribute is set on the target front.
  36   await resourceCommand.watchResources([resourceCommand.TYPES.DOCUMENT_EVENT], { onAvailable: () => {} });
  37
  38   const inspector = await target.getFront("inspector");
  39   gWalker = inspector.walker;
  40   gStyles = await inspector.getPageStyle();
  41   runNextTest();
  42 });
  43
  44 addTest(function testMatchedStyles() {
  45   promiseDone(gWalker.querySelector(gWalker.rootNode, "#matched-test-node").then(node => {
  46     return gStyles.getMatchedSelectors(node, "font-size", {});
  47   }).then(matched => {
  48     is(matched[0].sourceText, "this.style", "First match comes from the element style");
  49     is(matched[0].selector, "@element.style", "Element style has a special selector");
  50     is(matched[0].value, "10px", "First match has the expected value");
  51     is(matched[0].status, CssLogic.STATUS.BEST, "First match is the best match");
  52     is(matched[0].rule.type, 100, "First match is an element style");
  53     is(matched[0].rule.href, gInspectee.defaultView.location.href,
  54        "Node style comes from this document");
  55
  56     is(matched[1].sourceText, ".column-rule",
  57       "Second match comes from a rule");
  58     is(matched[1].selector, ".column-rule",
  59       "Second match comes from highest line number");
  60     is(matched[1].value, "25px", "Second match comes from highest column");
  61     is(matched[1].status, CssLogic.STATUS.PARENT_MATCH,
  62       "Second match is from the parent");
  63     is(matched[1].rule.parentStyleSheet.href, null,
  64       "Inline stylesheet shouldn't have an href");
  65     is(matched[1].rule.parentStyleSheet.nodeHref, gInspectee.defaultView.location.href,
  66       "Inline stylesheet's nodeHref should match the current document");
  67     ok(!matched[1].rule.parentStyleSheet.system,
  68       "Inline stylesheet shouldn't be a system stylesheet.");
  69
  70     // matched[2] is only there to test matched[1]; do not need to test
  71
  72     is(matched[3].value, "15px", "Third match has the expected value");
  73   }).then(runNextTest));
  74 });
  75
  76 addTest(function testSystemStyles() {
  77   let testNode = null;
  78
  79   promiseDone(gWalker.querySelector(gWalker.rootNode, "#matched-test-node").then(node => {
  80     testNode = node;
  81     return gStyles.getMatchedSelectors(testNode, "display", { filter: "user" });
  82   }).then(matched => {
  83     is(matched.length, 0, "No user selectors apply to this rule.");
  84     return gStyles.getMatchedSelectors(testNode, "display", { filter: "ua" });
  85   }).then(matched => {
  86     is(matched[0].selector, "div", "Should match system div selector");
  87     is(matched[0].value, "block");
  88   }).then(runNextTest));
  89 });
  90
  91 addTest(function cleanup() {
  92   gStyles = null;
  93   gWalker = null;
  94   gInspectee = null;
  95   runNextTest();
  96 });
  97
  98   </script>
  99 </head>
 100 <body>
 101 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=">Mozilla Bug </a>
 102 <a id="inspectorContent" target="_blank" href="inspector-styles-data.html">Test Document</a>
 103 <p id="display"></p>
 104 <div id="content" style="display: none">
 105
 106 </div>
 107 <pre id="test">
 108 </pre>
 109 </body>
 110 </html>