1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/toolkit/devtools/server/tests/mochitest/test_styles-applied.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,152 @@
1.4 +<!DOCTYPE HTML>
1.5 +<html>
1.6 +<!--
1.7 +https://bugzilla.mozilla.org/show_bug.cgi?id=
1.8 +-->
1.9 +<head>
1.10 + <meta charset="utf-8">
1.11 + <title>Test for Bug </title>
1.12 +
1.13 + <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
1.14 + <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
1.15 + <script type="application/javascript;version=1.8" src="inspector-helpers.js"></script>
1.16 + <script type="application/javascript;version=1.8">
1.17 +Components.utils.import("resource://gre/modules/devtools/Loader.jsm");
1.18 +const {Promise: promise} = Components.utils.import("resource://gre/modules/Promise.jsm", {});
1.19 +
1.20 +const inspector = devtools.require("devtools/server/actors/inspector");
1.21 +
1.22 +window.onload = function() {
1.23 + SimpleTest.waitForExplicitFinish();
1.24 + runNextTest();
1.25 +}
1.26 +
1.27 +var gWalker = null;
1.28 +var gStyles = null;
1.29 +var gClient = null;
1.30 +
1.31 +addTest(function setup() {
1.32 + let url = document.getElementById("inspectorContent").href;
1.33 + attachURL(url, function(err, client, tab, doc) {
1.34 + let {InspectorFront} = devtools.require("devtools/server/actors/inspector");
1.35 + let inspector = InspectorFront(client, tab);
1.36 + promiseDone(inspector.getWalker().then(walker => {
1.37 + ok(walker, "getWalker() should return an actor.");
1.38 + gClient = client;
1.39 + gWalker = walker;
1.40 + return inspector.getPageStyle();
1.41 + }).then(styles => {
1.42 + gStyles = styles;
1.43 + }).then(runNextTest));
1.44 + });
1.45 +});
1.46 +
1.47 +addTest(function inheritedUserStyles() {
1.48 + let node = node;
1.49 + promiseDone(gWalker.querySelector(gWalker.rootNode, "#test-node").then(node => {
1.50 + return gStyles.getApplied(node, { inherited: true, filter: "user" });
1.51 + }).then(applied => {
1.52 + ok(!applied[0].inherited, "Entry 0 should be uninherited");
1.53 + is(applied[0].rule.type, 100, "Entry 0 should be an element style");
1.54 + ok(!!applied[0].rule.href, "Element styles should have a URL");
1.55 + is(applied[0].rule.cssText, "", "Entry 0 should be an empty style");
1.56 +
1.57 + is(applied[1].inherited.id, "uninheritable-rule-inheritable-style",
1.58 + "Entry 1 should be inherited from the parent");
1.59 + is(applied[1].rule.type, 100, "Entry 1 should be an element style");
1.60 + is(applied[1].rule.cssText, "color: red;", "Entry 1 should have the expected cssText");
1.61 +
1.62 + is(applied[2].inherited.id, "inheritable-rule-inheritable-style",
1.63 + "Entry 2 should be inherited from the parent's parent");
1.64 + is(applied[2].rule.type, 100, "Entry 2 should be an element style");
1.65 + is(applied[2].rule.cssText, "color: blue;", "Entry 2 should have the expected cssText");
1.66 +
1.67 + is(applied[3].inherited.id, "inheritable-rule-inheritable-style",
1.68 + "Entry 3 should be inherited from the parent's parent");
1.69 + is(applied[3].rule.type, 1, "Entry 3 should be a rule style");
1.70 + is(applied[3].rule.cssText, "font-size: 15px;", "Entry 3 should have the expected cssText");
1.71 + ok(!applied[3].matchedSelectors, "Shouldn't get matchedSelectors with this request.");
1.72 +
1.73 + is(applied[4].inherited.id, "inheritable-rule-uninheritable-style",
1.74 + "Entry 4 should be inherited from the parent's parent");
1.75 + is(applied[4].rule.type, 1, "Entry 4 should be an rule style");
1.76 + is(applied[4].rule.cssText, "font-size: 15px;", "Entry 4 should have the expected cssText");
1.77 + ok(!applied[4].matchedSelectors, "Shouldn't get matchedSelectors with this request.");
1.78 +
1.79 + is(applied.length, 5, "Should have 5 rules.");
1.80 + }).then(runNextTest));
1.81 +});
1.82 +
1.83 +addTest(function inheritedSystemStyles() {
1.84 + let node = node;
1.85 + promiseDone(gWalker.querySelector(gWalker.rootNode, "#test-node").then(node => {
1.86 + return gStyles.getApplied(node, { inherited: true, filter: "ua" });
1.87 + }).then(applied => {
1.88 + // If our system stylesheets are prone to churn, this might be a fragile
1.89 + // test. If you're here because of that I apologize, file a bug
1.90 + // and we can find a different way to test.
1.91 +
1.92 + ok(!applied[1].inherited, "Entry 1 should not be inherited");
1.93 + ok(!applied[1].rule.parentStyleSheet.system, "Entry 1 should be a system style");
1.94 + is(applied[1].rule.type, 1, "Entry 1 should be a rule style");
1.95 +
1.96 + is(applied.length, 7, "Should have 7 rules.");
1.97 + }).then(runNextTest));
1.98 +});
1.99 +
1.100 +addTest(function noInheritedStyles() {
1.101 + let node = node;
1.102 + promiseDone(gWalker.querySelector(gWalker.rootNode, "#test-node").then(node => {
1.103 + return gStyles.getApplied(node, { inherited: false, filter: "user" });
1.104 + }).then(applied => {
1.105 + ok(!applied[0].inherited, "Entry 0 should be uninherited");
1.106 + is(applied[0].rule.type, 100, "Entry 0 should be an element style");
1.107 + is(applied[0].rule.cssText, "", "Entry 0 should be an empty style");
1.108 + is(applied.length, 1, "Should have 1 rule.");
1.109 + }).then(runNextTest));
1.110 +});
1.111 +
1.112 +addTest(function matchedSelectors() {
1.113 + promiseDone(gWalker.querySelector(gWalker.rootNode, "#test-node").then(node => {
1.114 + return gStyles.getApplied(node, {
1.115 + inherited: true, filter: "user", matchedSelectors: true
1.116 + });
1.117 + }).then(applied => {
1.118 + is(applied[3].matchedSelectors[0], ".inheritable-rule", "Entry 3 should have a matched selector");
1.119 + is(applied[4].matchedSelectors[0], ".inheritable-rule", "Entry 4 should have a matched selector");
1.120 + }).then(runNextTest));
1.121 +});
1.122 +
1.123 +addTest(function testMediaQuery() {
1.124 + let node = node;
1.125 + promiseDone(gWalker.querySelector(gWalker.rootNode, "#mediaqueried").then(node => {
1.126 + return gStyles.getApplied(node, {
1.127 + inherited: false, filter: "user", matchedSelectors: true
1.128 + });
1.129 + }).then(applied => {
1.130 + is(applied[1].rule.type, 1, "Entry 1 is a rule style");
1.131 + is(applied[1].rule.parentRule.type, 4, "Entry 1's parent rule is a media rule");
1.132 + is(applied[1].rule.parentRule.media[0], "screen", "Entry 1's parent rule has the expected medium");
1.133 + }).then(runNextTest));
1.134 +});
1.135 +
1.136 +addTest(function cleanup() {
1.137 + delete gStyles;
1.138 + delete gWalker;
1.139 + delete gClient;
1.140 + runNextTest();
1.141 +});
1.142 +
1.143 + </script>
1.144 +</head>
1.145 +<body>
1.146 +<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=">Mozilla Bug </a>
1.147 +<a id="inspectorContent" target="_blank" href="inspector-styles-data.html">Test Document</a>
1.148 +<p id="display"></p>
1.149 +<div id="content" style="display: none">
1.150 +
1.151 +</div>
1.152 +<pre id="test">
1.153 +</pre>
1.154 +</body>
1.155 +</html>
