devtools/server/tests/chrome/test_styles-applied.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 { Assert } = ChromeUtils.importESModule(
  17   "resource://testing-common/Assert.sys.mjs"
  18 );
  19
  20 window.onload = function() {
  21   SimpleTest.waitForExplicitFinish();
  22   runNextTest();
  23 };
  24
  25 let gWalker = null;
  26 let gStyles = null;
  27
  28 addTest(async function setup() {
  29   const url = document.getElementById("inspectorContent").href;
  30   const { commands, target } = await attachURL(url);
  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
  42   runNextTest();
  43 });
  44
  45 addTest(async function inheritedUserStyles() {
  46   const node = await gWalker.querySelector(gWalker.rootNode, "#test-node")
  47   const applied = await gStyles.getApplied(node, { inherited: true, filter: "user" });
  48
  49   ok(!applied[0].inherited, "Entry 0 should be uninherited");
  50   is(applied[0].rule.type, 100, "Entry 0 should be an element style");
  51   ok(!!applied[0].rule.href, "Element styles should have a URL");
  52   is(applied[0].rule.cssText, "", "Entry 0 should be an empty style");
  53
  54   is(applied[1].inherited.id, "uninheritable-rule-inheritable-style",
  55       "Entry 1 should be inherited from the parent");
  56   is(applied[1].rule.type, 100, "Entry 1 should be an element style");
  57   is(applied[1].rule.cssText, "color: red;",
  58       "Entry 1 should have the expected cssText");
  59
  60   is(applied[2].inherited.id, "inheritable-rule-inheritable-style",
  61       "Entry 2 should be inherited from the parent's parent");
  62   is(applied[2].rule.type, 100, "Entry 2 should be an element style");
  63   is(applied[2].rule.cssText, "color: blue;",
  64       "Entry 2 should have the expected cssText");
  65
  66   is(applied[3].inherited.id, "inheritable-rule-inheritable-style",
  67       "Entry 3 should be inherited from the parent's parent");
  68   is(applied[3].rule.type, 1, "Entry 3 should be a rule style");
  69   is(applied[3].rule.cssText, "font-size: 15px;",
  70       "Entry 3 should have the expected cssText");
  71   ok(!applied[3].matchedSelectorIndexes,
  72       "Shouldn't get matchedSelectorIndexes with this request.");
  73
  74   is(applied[4].inherited.id, "inheritable-rule-uninheritable-style",
  75       "Entry 4 should be inherited from the parent's parent");
  76   is(applied[4].rule.type, 1, "Entry 4 should be an rule style");
  77   is(applied[4].rule.cssText, "font-size: 15px;",
  78       "Entry 4 should have the expected cssText");
  79   ok(!applied[4].matchedSelectorIndexes, "Shouldn't get matchedSelectorIndexes with this request.");
  80
  81   is(applied.length, 5, "Should have 5 rules.");
  82
  83   runNextTest();
  84 });
  85
  86 addTest(async function inheritedSystemStyles() {
  87   const node = await gWalker.querySelector(gWalker.rootNode, "#test-node");
  88   const applied = await gStyles.getApplied(node, { inherited: true, filter: "ua" });
  89   // If our system stylesheets are prone to churn, this might be a fragile
  90   // test.  If you're here because of that I apologize, file a bug
  91   // and we can find a different way to test.
  92
  93   ok(!applied[1].inherited, "Entry 1 should not be inherited");
  94   ok(applied[1].rule.parentStyleSheet.system, "Entry 1 should be a system style");
  95   is(applied[1].rule.type, 1, "Entry 1 should be a rule style");
  96   is(applied.length, 8, "Should have the expected number of rules.");
  97
  98   runNextTest();
  99 });
 100
 101 addTest(async function noInheritedStyles() {
 102   const node = await gWalker.querySelector(gWalker.rootNode, "#test-node")
 103   const applied = await gStyles.getApplied(node, { inherited: false, filter: "user" });
 104   ok(!applied[0].inherited, "Entry 0 should be uninherited");
 105   is(applied[0].rule.type, 100, "Entry 0 should be an element style");
 106   is(applied[0].rule.cssText, "", "Entry 0 should be an empty style");
 107   is(applied.length, 1, "Should have 1 rule.");
 108
 109   runNextTest();
 110 });
 111
 112 addTest(async function matchedSelectors() {
 113   const node = await gWalker.querySelector(gWalker.rootNode, "#test-node");
 114   const applied = await gStyles.getApplied(node, {
 115     inherited: true, filter: "user", matchedSelectors: true,
 116   });
 117   Assert.deepEqual(applied[3].matchedSelectorIndexes, [0], "Entry 3 should have a matched selector");
 118   Assert.deepEqual(applied[4].matchedSelectorIndexes, [0], "Entry 4 should have a matched selector");
 119   runNextTest();
 120 });
 121
 122 addTest(async function testMediaQuery() {
 123   const node = await gWalker.querySelector(gWalker.rootNode, "#mediaqueried")
 124   const applied = await gStyles.getApplied(node, {
 125     inherited: false,
 126     filter: "user",
 127     matchedSelectors: true,
 128   });
 129
 130   const ruleWithMedia = applied[1].rule;
 131   is(ruleWithMedia.type, 1, "Entry 1 is a rule style");
 132   is(ruleWithMedia.ancestorData[0].type, "media", "Entry 1's rule ancestor data holds the media rule data...");
 133   is(ruleWithMedia.ancestorData[0].value, "screen", "...with the expected value");
 134
 135   runNextTest();
 136 });
 137
 138 addTest(function cleanup() {
 139   gStyles = null;
 140   gWalker = null;
 141   runNextTest();
 142 });
 143
 144   </script>
 145 </head>
 146 <body>
 147 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=">Mozilla Bug </a>
 148 <a id="inspectorContent" target="_blank" href="inspector-styles-data.html">Test Document</a>
 149 <p id="display"></p>
 150 <div id="content" style="display: none">
 151
 152 </div>
 153 <pre id="test">
 154 </pre>
 155 </body>
 156 </html>