|
1 /* vim: set ft=javascript ts=2 et sw=2 tw=80: */ |
|
2 /* Any copyright is dedicated to the Public Domain. |
|
3 http://creativecommons.org/publicdomain/zero/1.0/ */ |
|
4 |
|
5 "use strict"; |
|
6 |
|
7 // Test that changing the current element's attributes refreshes the rule-view |
|
8 |
|
9 let test = asyncTest(function*() { |
|
10 yield addTab("data:text/html;charset=utf-8,browser_ruleview_refresh-on-attribute-change.js"); |
|
11 |
|
12 info("Preparing the test document and node"); |
|
13 let style = '' + |
|
14 '#testid {' + |
|
15 ' background-color: blue;' + |
|
16 '} ' + |
|
17 '.testclass {' + |
|
18 ' background-color: green;' + |
|
19 '}'; |
|
20 let styleNode = addStyle(content.document, style); |
|
21 content.document.body.innerHTML = '<div id="testid" class="testclass">Styled Node</div>'; |
|
22 let testElement = getNode("#testid"); |
|
23 let elementStyle = 'margin-top: 1px; padding-top: 5px;' |
|
24 testElement.setAttribute("style", elementStyle); |
|
25 |
|
26 let {toolbox, inspector, view} = yield openRuleView(); |
|
27 yield selectNode(testElement, inspector); |
|
28 |
|
29 info("Checking that the rule-view has the element, #testid and .testclass selectors"); |
|
30 checkRuleViewContent(view, ["element", "#testid", ".testclass"]); |
|
31 |
|
32 info("Changing the node's ID attribute and waiting for the rule-view refresh"); |
|
33 let ruleViewRefreshed = inspector.once("rule-view-refreshed"); |
|
34 testElement.setAttribute("id", "differentid"); |
|
35 yield ruleViewRefreshed; |
|
36 |
|
37 info("Checking that the rule-view doesn't have the #testid selector anymore"); |
|
38 checkRuleViewContent(view, ["element", ".testclass"]); |
|
39 |
|
40 info("Reverting the ID attribute change"); |
|
41 let ruleViewRefreshed = inspector.once("rule-view-refreshed"); |
|
42 testElement.setAttribute("id", "testid"); |
|
43 yield ruleViewRefreshed; |
|
44 |
|
45 info("Checking that the rule-view has all the selectors again"); |
|
46 checkRuleViewContent(view, ["element", "#testid", ".testclass"]); |
|
47 }); |
|
48 |
|
49 function checkRuleViewContent(view, expectedSelectors) { |
|
50 let selectors = view.doc.querySelectorAll(".ruleview-selector"); |
|
51 |
|
52 is(selectors.length, expectedSelectors.length, |
|
53 expectedSelectors.length + " selectors are displayed"); |
|
54 |
|
55 for (let i = 0; i < expectedSelectors.length; i ++) { |
|
56 is(selectors[i].textContent.indexOf(expectedSelectors[i]), 0, |
|
57 "Selector " + (i + 1) + " is " + expectedSelectors[i]); |
|
58 } |
|
59 } |