The Tor Browser: browser/devtools/styleinspector/test/browser_ruleview_refresh-on-attribute-change

Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.

     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/ */

     5 "use strict";

     7 // Test that changing the current element's style attribute refreshes the rule-view

     9 let test = asyncTest(function*() {

    10   yield addTab("data:text/html;charset=utf-8,browser_ruleview_update.js");

    12   content.document.body.innerHTML = '<div id="testid" class="testclass">Styled Node</div>';

    13   let testElement = getNode("#testid");

    14   testElement.setAttribute("style", "margin-top: 1px; padding-top: 5px;");

    16   let {toolbox, inspector, view} = yield openRuleView();

    17   yield selectNode(testElement, inspector);

    19   yield testPropertyChanges(inspector, view, testElement);

    20   yield testPropertyChange0(inspector, view, testElement);

    21   yield testPropertyChange1(inspector, view, testElement);

    22   yield testPropertyChange2(inspector, view, testElement);

    23   yield testPropertyChange3(inspector, view, testElement);

    24   yield testPropertyChange4(inspector, view, testElement);

    25   yield testPropertyChange5(inspector, view, testElement);

    26   yield testPropertyChange6(inspector, view, testElement);

    27 });

    29 function* testPropertyChanges(inspector, ruleView, testElement) {

    30   info("Adding a second margin-top value in the element selector");

    31   let ruleEditor = ruleView._elementStyle.rules[0].editor;

    32   let onRefreshed = inspector.once("rule-view-refreshed");

    33   ruleEditor.addProperty("margin-top", "5px", "");

    34   yield onRefreshed;

    36   let rule = ruleView._elementStyle.rules[0];

    37   validateTextProp(rule.textProps[0], false, "margin-top", "1px", "Original margin property active");

    38 }

    40 function* testPropertyChange0(inspector, ruleView, testElement) {

    41   yield changeElementStyle(testElement, "margin-top: 1px; padding-top: 5px", inspector);

    43   let rule = ruleView._elementStyle.rules[0];

    44   is(rule.editor.element.querySelectorAll(".ruleview-property").length, 3, "Correct number of properties");

    45   validateTextProp(rule.textProps[0], true, "margin-top", "1px", "First margin property re-enabled");

    46   validateTextProp(rule.textProps[2], false, "margin-top", "5px", "Second margin property disabled");

    47 }

    49 function* testPropertyChange1(inspector, ruleView, testElement) {

    50   info("Now set it back to 5px, the 5px value should be re-enabled.");

    51   yield changeElementStyle(testElement, "margin-top: 5px; padding-top: 5px;", inspector);

    53   let rule = ruleView._elementStyle.rules[0];

    54   is(rule.editor.element.querySelectorAll(".ruleview-property").length, 3, "Correct number of properties");

    55   validateTextProp(rule.textProps[0], false, "margin-top", "1px", "First margin property re-enabled");

    56   validateTextProp(rule.textProps[2], true, "margin-top", "5px", "Second margin property disabled");

    57 }

    59 function* testPropertyChange2(inspector, ruleView, testElement) {

    60   info("Set the margin property to a value that doesn't exist in the editor.");

    61   info("Should reuse the currently-enabled element (the second one.)");

    62   yield changeElementStyle(testElement, "margin-top: 15px; padding-top: 5px;", inspector);

    64   let rule = ruleView._elementStyle.rules[0];

    65   is(rule.editor.element.querySelectorAll(".ruleview-property").length, 3, "Correct number of properties");

    66   validateTextProp(rule.textProps[0], false, "margin-top", "1px", "First margin property re-enabled");

    67   validateTextProp(rule.textProps[2], true, "margin-top", "15px", "Second margin property disabled");

    68 }

    70 function* testPropertyChange3(inspector, ruleView, testElement) {

    71   info("Remove the padding-top attribute.  Should disable the padding property but not remove it.");

    72   yield changeElementStyle(testElement, "margin-top: 5px;", inspector);

    74   let rule = ruleView._elementStyle.rules[0];

    75   is(rule.editor.element.querySelectorAll(".ruleview-property").length, 3, "Correct number of properties");

    76   validateTextProp(rule.textProps[1], false, "padding-top", "5px", "Padding property disabled");

    77 }

    79 function* testPropertyChange4(inspector, ruleView, testElement) {

    80   info("Put the padding-top attribute back in, should re-enable the padding property.");

    81   yield changeElementStyle(testElement, "margin-top: 5px; padding-top: 25px", inspector);

    83   let rule = ruleView._elementStyle.rules[0];

    84   is(rule.editor.element.querySelectorAll(".ruleview-property").length, 3, "Correct number of properties");

    85   validateTextProp(rule.textProps[1], true, "padding-top", "25px", "Padding property enabled");

    86 }

    88 function* testPropertyChange5(inspector, ruleView, testElement) {

    89   info("Add an entirely new property");

    90   yield changeElementStyle(testElement, "margin-top: 5px; padding-top: 25px; padding-left: 20px;", inspector);

    92   let rule = ruleView._elementStyle.rules[0];

    93   is(rule.editor.element.querySelectorAll(".ruleview-property").length, 4, "Added a property");

    94   validateTextProp(rule.textProps[3], true, "padding-left", "20px", "Padding property enabled");

    95 }

    97 function* testPropertyChange6(inspector, ruleView, testElement) {

    98   info("Add an entirely new property again");

    99   yield changeElementStyle(testElement, "background: url(\"chrome://branding/content/about-logo.png\") repeat scroll 0% 0% red", inspector);

   101   let rule = ruleView._elementStyle.rules[0];

   102   is(rule.editor.element.querySelectorAll(".ruleview-property").length, 5, "Added a property");

   103   validateTextProp(rule.textProps[4], true, "background",

   104                    "url(\"chrome://branding/content/about-logo.png\") repeat scroll 0% 0% red",

   105                    "shortcut property correctly set",

   106                    "url('chrome://branding/content/about-logo.png') repeat scroll 0% 0% #F00");

   107 }

   109 function* changeElementStyle(testElement, style, inspector) {

   110   let onRefreshed = inspector.once("rule-view-refreshed");

   111   testElement.setAttribute("style", style);

   112   yield onRefreshed;

   113 }

   115 function validateTextProp(aProp, aEnabled, aName, aValue, aDesc, valueSpanText) {

   116   is(aProp.enabled, aEnabled, aDesc + ": enabled.");

   117   is(aProp.name, aName, aDesc + ": name.");

   118   is(aProp.value, aValue, aDesc + ": value.");

   120   is(aProp.editor.enable.hasAttribute("checked"), aEnabled, aDesc + ": enabled checkbox.");

   121   is(aProp.editor.nameSpan.textContent, aName, aDesc + ": name span.");

   122   is(aProp.editor.valueSpan.textContent, valueSpanText || aValue, aDesc + ": value span.");

   123 }

The Tor Browser / file revision