|
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 |
|
19 window.onload = function() { |
|
20 SimpleTest.waitForExplicitFinish(); |
|
21 runNextTest(); |
|
22 } |
|
23 |
|
24 var gWalker = null; |
|
25 var gStyles = null; |
|
26 var gClient = null; |
|
27 |
|
28 addTest(function setup() { |
|
29 let url = document.getElementById("inspectorContent").href; |
|
30 attachURL(url, function(err, client, tab, doc) { |
|
31 gInspectee = doc; |
|
32 let {InspectorFront} = devtools.require("devtools/server/actors/inspector"); |
|
33 let inspector = InspectorFront(client, tab); |
|
34 promiseDone(inspector.getWalker().then(walker => { |
|
35 ok(walker, "getWalker() should return an actor."); |
|
36 gClient = client; |
|
37 gWalker = walker; |
|
38 return inspector.getPageStyle(); |
|
39 }).then(styles => { |
|
40 gStyles = styles; |
|
41 }).then(runNextTest)); |
|
42 }); |
|
43 }); |
|
44 |
|
45 addTest(function testComputed() { |
|
46 let localNode = gInspectee.querySelector("#computed-test-node"); |
|
47 let elementStyle = null; |
|
48 promiseDone(gWalker.querySelector(gWalker.rootNode, "#computed-test-node").then(node => { |
|
49 return gStyles.getComputed(node, {}); |
|
50 }).then(computed => { |
|
51 // Test a smattering of properties that include some system-defined |
|
52 // props, some props that were defined in this node's stylesheet, |
|
53 // and some default props. |
|
54 is(computed["white-space"].value, "normal", "Default value should appear"); |
|
55 is(computed["display"].value, "block", "System stylesheet item should appear"); |
|
56 is(computed["cursor"].value, "crosshair", "Included stylesheet rule should appear"); |
|
57 is(computed["color"].value, "rgb(255, 0, 0)", "Inherited style attribute should appear"); |
|
58 is(computed["font-size"].value, "15px", "Inherited inline rule should appear"); |
|
59 |
|
60 // We didn't request markMatched, so these shouldn't be set |
|
61 ok(!computed["cursor"].matched, "Didn't ask for matched, shouldn't get it"); |
|
62 ok(!computed["color"].matched, "Didn't ask for matched, shouldn't get it"); |
|
63 ok(!computed["font-size"].matched, "Didn't ask for matched, shouldn't get it"); |
|
64 }).then(runNextTest)); |
|
65 }); |
|
66 |
|
67 addTest(function testComputedUserMatched() { |
|
68 let localNode = gInspectee.querySelector("#computed-test-node"); |
|
69 let elementStyle = null; |
|
70 promiseDone(gWalker.querySelector(gWalker.rootNode, "#computed-test-node").then(node => { |
|
71 return gStyles.getComputed(node, { filter: "user", markMatched: true }); |
|
72 }).then(computed => { |
|
73 ok(!computed["white-space"].matched, "Default style shouldn't match"); |
|
74 ok(!computed["display"].matched, "Only user styles should match"); |
|
75 ok(computed["cursor"].matched, "Asked for matched, should get it"); |
|
76 ok(computed["color"].matched, "Asked for matched, should get it"); |
|
77 ok(computed["font-size"].matched, "Asked for matched, should get it"); |
|
78 }).then(runNextTest)); |
|
79 }); |
|
80 |
|
81 addTest(function testComputedSystemMatched() { |
|
82 let localNode = gInspectee.querySelector("#computed-test-node"); |
|
83 let elementStyle = null; |
|
84 promiseDone(gWalker.querySelector(gWalker.rootNode, "#computed-test-node").then(node => { |
|
85 return gStyles.getComputed(node, { filter: "ua", markMatched: true }); |
|
86 }).then(computed => { |
|
87 ok(!computed["white-space"].matched, "Default style shouldn't match"); |
|
88 ok(computed["display"].matched, "System stylesheets should match"); |
|
89 ok(computed["cursor"].matched, "Asked for matched, should get it"); |
|
90 ok(computed["color"].matched, "Asked for matched, should get it"); |
|
91 ok(computed["font-size"].matched, "Asked for matched, should get it"); |
|
92 }).then(runNextTest)); |
|
93 }); |
|
94 |
|
95 addTest(function testComputedUserOnlyMatched() { |
|
96 let localNode = gInspectee.querySelector("#computed-test-node"); |
|
97 let elementStyle = null; |
|
98 promiseDone(gWalker.querySelector(gWalker.rootNode, "#computed-test-node").then(node => { |
|
99 return gStyles.getComputed(node, { filter: "user", onlyMatched: true }); |
|
100 }).then(computed => { |
|
101 ok(!("white-space" in computed), "Default style shouldn't exist"); |
|
102 ok(!("display" in computed), "System stylesheets shouldn't exist"); |
|
103 ok(("cursor" in computed), "User items should exist."); |
|
104 ok(("color" in computed), "User items should exist."); |
|
105 ok(("font-size" in computed), "User items should exist."); |
|
106 }).then(runNextTest)); |
|
107 }); |
|
108 |
|
109 addTest(function testComputedSystemOnlyMatched() { |
|
110 let localNode = gInspectee.querySelector("#computed-test-node"); |
|
111 let elementStyle = null; |
|
112 promiseDone(gWalker.querySelector(gWalker.rootNode, "#computed-test-node").then(node => { |
|
113 return gStyles.getComputed(node, { filter: "ua", onlyMatched: true }); |
|
114 }).then(computed => { |
|
115 ok(!("white-space" in computed), "Default style shouldn't exist"); |
|
116 ok(("display" in computed), "System stylesheets should exist"); |
|
117 ok(("cursor" in computed), "User items should exist."); |
|
118 ok(("color" in computed), "User items should exist."); |
|
119 ok(("font-size" in computed), "User items should exist."); |
|
120 }).then(runNextTest)); |
|
121 }); |
|
122 |
|
123 addTest(function cleanup() { |
|
124 delete gStyles; |
|
125 delete gWalker; |
|
126 delete gClient; |
|
127 runNextTest(); |
|
128 }); |
|
129 |
|
130 </script> |
|
131 </head> |
|
132 <body> |
|
133 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=">Mozilla Bug </a> |
|
134 <a id="inspectorContent" target="_blank" href="inspector-styles-data.html">Test Document</a> |
|
135 <p id="display"></p> |
|
136 <div id="content" style="display: none"> |
|
137 |
|
138 </div> |
|
139 <pre id="test"> |
|
140 </pre> |
|
141 </body> |
|
142 </html> |