|
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 type="application/javascript" 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;version=1.8" src="inspector-helpers.js"></script> |
|
13 <script type="application/javascript;version=1.8"> |
|
14 Components.utils.import("resource://gre/modules/devtools/Loader.jsm"); |
|
15 const {Promise: promise} = Components.utils.import("resource://gre/modules/Promise.jsm", {}); |
|
16 |
|
17 const inspector = devtools.require("devtools/server/actors/inspector"); |
|
18 const {CssLogic} = devtools.require("devtools/styleinspector/css-logic"); |
|
19 |
|
20 window.onload = function() { |
|
21 SimpleTest.waitForExplicitFinish(); |
|
22 runNextTest(); |
|
23 } |
|
24 |
|
25 var gWalker = null; |
|
26 var gStyles = null; |
|
27 var gClient = null; |
|
28 |
|
29 addTest(function setup() { |
|
30 let url = document.getElementById("inspectorContent").href; |
|
31 attachURL(url, function(err, client, tab, doc) { |
|
32 gInspectee = doc; |
|
33 let {InspectorFront} = devtools.require("devtools/server/actors/inspector"); |
|
34 let inspector = InspectorFront(client, tab); |
|
35 promiseDone(inspector.getWalker().then(walker => { |
|
36 ok(walker, "getWalker() should return an actor."); |
|
37 gClient = client; |
|
38 gWalker = walker; |
|
39 return inspector.getPageStyle(); |
|
40 }).then(styles => { |
|
41 gStyles = styles; |
|
42 }).then(runNextTest)); |
|
43 }); |
|
44 }); |
|
45 |
|
46 addTest(function testMatchedStyles() { |
|
47 promiseDone(gWalker.querySelector(gWalker.rootNode, "#matched-test-node").then(node => { |
|
48 return gStyles.getMatchedSelectors(node, "font-size", {}); |
|
49 }).then(matched => { |
|
50 is(matched[0].sourceText, "this.style", "First match comes from the element style"); |
|
51 is(matched[0].selector, "@element.style", "Element style has a special selector"); |
|
52 is(matched[0].value, "10px", "First match has the expected value"); |
|
53 is(matched[0].status, CssLogic.STATUS.BEST, "First match is the best match") |
|
54 is(matched[0].rule.type, 100, "First match is an element style"); |
|
55 is(matched[0].rule.href, gInspectee.defaultView.location.href, "Node style comes from this document") |
|
56 |
|
57 is(matched[1].sourceText, ".inheritable-rule", "Second match comes from a rule"); |
|
58 is(matched[1].selector, ".inheritable-rule", "Second style has a selector"); |
|
59 is(matched[1].value, "15px", "Second match has the expected value"); |
|
60 is(matched[1].status, CssLogic.STATUS.PARENT_MATCH, "Second match is from the parent") |
|
61 is(matched[1].rule.parentStyleSheet.href, null, "Inline stylesheet shouldn't have an href"); |
|
62 is(matched[1].rule.parentStyleSheet.nodeHref, gInspectee.defaultView.location.href, "Inline stylesheet's nodeHref should match the current document"); |
|
63 ok(!matched[1].rule.parentStyleSheet.system, "Inline stylesheet shouldn't be a system stylesheet."); |
|
64 }).then(runNextTest)); |
|
65 }); |
|
66 |
|
67 addTest(function testSystemStyles() { |
|
68 let testNode = null; |
|
69 |
|
70 promiseDone(gWalker.querySelector(gWalker.rootNode, "#matched-test-node").then(node => { |
|
71 testNode = node; |
|
72 return gStyles.getMatchedSelectors(testNode, "display", { filter: "user" }); |
|
73 }).then(matched => { |
|
74 is(matched.length, 0, "No user selectors apply to this rule."); |
|
75 return gStyles.getMatchedSelectors(testNode, "display", { filter: "ua" }); |
|
76 }).then(matched => { |
|
77 is(matched[0].selector, "div", "Should match system div selector"); |
|
78 is(matched[0].value, "block"); |
|
79 }).then(runNextTest)); |
|
80 }); |
|
81 |
|
82 addTest(function cleanup() { |
|
83 delete gStyles; |
|
84 delete gWalker; |
|
85 delete gClient; |
|
86 runNextTest(); |
|
87 }); |
|
88 |
|
89 </script> |
|
90 </head> |
|
91 <body> |
|
92 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=">Mozilla Bug </a> |
|
93 <a id="inspectorContent" target="_blank" href="inspector-styles-data.html">Test Document</a> |
|
94 <p id="display"></p> |
|
95 <div id="content" style="display: none"> |
|
96 |
|
97 </div> |
|
98 <pre id="test"> |
|
99 </pre> |
|
100 </body> |
|
101 </html> |