michael@0: /* vim: set ft=javascript ts=2 et sw=2 tw=80: */
michael@0: /* Any copyright is dedicated to the Public Domain.
michael@0:  http://creativecommons.org/publicdomain/zero/1.0/ */
michael@0: 
michael@0: "use strict";
michael@0: 
michael@0: // Test that changing the current element's attributes refreshes the rule-view
michael@0: 
michael@0: let test = asyncTest(function*() {
michael@0:   yield addTab("data:text/html;charset=utf-8,browser_ruleview_refresh-on-attribute-change.js");
michael@0: 
michael@0:   info("Preparing the test document and node");
michael@0:   let style = '' +
michael@0:     '#testid {' +
michael@0:     '  background-color: blue;' +
michael@0:     '} ' +
michael@0:     '.testclass {' +
michael@0:     '  background-color: green;' +
michael@0:     '}';
michael@0:   let styleNode = addStyle(content.document, style);
michael@0:   content.document.body.innerHTML = '<div id="testid" class="testclass">Styled Node</div>';
michael@0:   let testElement = getNode("#testid");
michael@0:   let elementStyle = 'margin-top: 1px; padding-top: 5px;'
michael@0:   testElement.setAttribute("style", elementStyle);
michael@0: 
michael@0:   let {toolbox, inspector, view} = yield openRuleView();
michael@0:   yield selectNode(testElement, inspector);
michael@0: 
michael@0:   info("Checking that the rule-view has the element, #testid and .testclass selectors");
michael@0:   checkRuleViewContent(view, ["element", "#testid", ".testclass"]);
michael@0: 
michael@0:   info("Changing the node's ID attribute and waiting for the rule-view refresh");
michael@0:   let ruleViewRefreshed = inspector.once("rule-view-refreshed");
michael@0:   testElement.setAttribute("id", "differentid");
michael@0:   yield ruleViewRefreshed;
michael@0: 
michael@0:   info("Checking that the rule-view doesn't have the #testid selector anymore");
michael@0:   checkRuleViewContent(view, ["element", ".testclass"]);
michael@0: 
michael@0:   info("Reverting the ID attribute change");
michael@0:   let ruleViewRefreshed = inspector.once("rule-view-refreshed");
michael@0:   testElement.setAttribute("id", "testid");
michael@0:   yield ruleViewRefreshed;
michael@0: 
michael@0:   info("Checking that the rule-view has all the selectors again");
michael@0:   checkRuleViewContent(view, ["element", "#testid", ".testclass"]);
michael@0: });
michael@0: 
michael@0: function checkRuleViewContent(view, expectedSelectors) {
michael@0:   let selectors = view.doc.querySelectorAll(".ruleview-selector");
michael@0: 
michael@0:   is(selectors.length, expectedSelectors.length,
michael@0:     expectedSelectors.length + " selectors are displayed");
michael@0: 
michael@0:   for (let i = 0; i < expectedSelectors.length; i ++) {
michael@0:     is(selectors[i].textContent.indexOf(expectedSelectors[i]), 0,
michael@0:       "Selector " + (i + 1) + " is " + expectedSelectors[i]);
michael@0:   }
michael@0: }