1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test that changing the current element's attributes refreshes the rule-view
const TEST_URI = `
<style type="text/css">
#testid {
background-color: blue;
}
.testclass {
background-color: green;
}
</style>
<div id="testid" class="testclass" style="margin-top: 1px; padding-top: 5px;">
Styled Node
</div>
`;
add_task(async function () {
await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
const { inspector, view } = await openRuleView();
await selectNode("#testid", inspector);
info(
"Checking that the rule-view has the element, #testid and " +
".testclass selectors"
);
checkRuleViewContent(view, ["element", "#testid", ".testclass"]);
info(
"Changing the node's ID attribute and waiting for the " +
"rule-view refresh"
);
let ruleViewRefreshed = inspector.once("rule-view-refreshed");
await setContentPageElementAttribute("#testid", "id", "differentid");
await ruleViewRefreshed;
info("Checking that the rule-view doesn't have the #testid selector anymore");
checkRuleViewContent(view, ["element", ".testclass"]);
info("Reverting the ID attribute change");
ruleViewRefreshed = inspector.once("rule-view-refreshed");
await setContentPageElementAttribute("#differentid", "id", "testid");
await ruleViewRefreshed;
info("Checking that the rule-view has all the selectors again");
checkRuleViewContent(view, ["element", "#testid", ".testclass"]);
});
function checkRuleViewContent(view, expectedSelectors) {
const selectors = view.styleDocument.querySelectorAll(
".ruleview-selectors-container"
);
is(
selectors.length,
expectedSelectors.length,
expectedSelectors.length + " selectors are displayed"
);
for (let i = 0; i < expectedSelectors.length; i++) {
is(
selectors[i].textContent.indexOf(expectedSelectors[i]),
0,
"Selector " + (i + 1) + " is " + expectedSelectors[i]
);
}
}
|
