Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

FBTest for issue 5644 (Editing a disabled property makes another)

  • Loading branch information...
commit e61a1b5101872a73441cf0375284a7820984c2cb 1 parent f9f40ab
Simon Lindholm authored August 31, 2012
78  tests/content/css/5644/issue5644.html
... ...
@@ -0,0 +1,78 @@
  1
+<!DOCTYPE html>
  2
+<html>
  3
+    <head>
  4
+        <meta charset="utf-8"/>
  5
+        <title>Issue 5644: Editing a disabled property makes another</title>
  6
+        <link href="../../_common/testcase.css" type="text/css" rel="stylesheet"/>
  7
+        <style type="text/css">
  8
+            #element1 {
  9
+                color: #700020;
  10
+                font: 1em Verdana;
  11
+            }
  12
+            span.ok {
  13
+                display: block;
  14
+            }
  15
+        </style>
  16
+    </head>
  17
+    <body>
  18
+        <header>
  19
+            <h1><a href="http://code.google.com/p/fbug/issues/detail?id=5644">Issue 5644</a>: Editing a disabled property makes another</h1>
  20
+        </header>
  21
+        <div>
  22
+            <section id="content">
  23
+              <p id="element1">Inspect me</p>
  24
+            </section>
  25
+            <section id="description">
  26
+                <h3>Steps to reproduce</h3>
  27
+                <ol>
  28
+                    <li>Inspect the <code>&lt;p&gt;</code> above (<code>#element1</code>)</li>
  29
+                    <li>
  30
+                        Switch to the <em>Style</em> side panel
  31
+                        <span class="ok">&rArr; The "#element1" rule should have two enabled properties - "font" and "color"</span>
  32
+                    </li>
  33
+                    <li>
  34
+                        Disable both of them
  35
+                        <span class="ok">&rArr; They should be grayed out</span>
  36
+                    </li>
  37
+                    <li>
  38
+                        Rename the rule from "#element1" to "p#element1"
  39
+                        <span class="ok">&rArr; The disabled properties should still be there</span>
  40
+                    </li>
  41
+                    <li>
  42
+                        Start changing "color" to contain "gray", then press <code class="key">ESCAPE</code>
  43
+                        <span class="ok">&rArr; It should revert to a disabled state containing "#700020"</span>
  44
+                    </li>
  45
+                    <li>
  46
+                        Change "color" to contain "gray"
  47
+                        <span class="ok">&rArr; It should change value and become enabled again</span>
  48
+                    </li>
  49
+                    <li>
  50
+                        Start adding a new property "font" containing "gray", then press <code class="key">ESCAPE</code>
  51
+                        <span class="ok">&rArr; Nothing should happen</span>
  52
+                    </li>
  53
+                    <li>
  54
+                        Add a new property "font" containing "gray"
  55
+                        <span class="ok">&rArr; The disabled "font" property should disappear</span>
  56
+                    </li>
  57
+                    <li>Disable the "color" property</li>
  58
+                    <li>
  59
+                        Right-click to edit the inline element style and add a property "padding: 1px", then disable that property
  60
+                        <span class="ok">&rArr; It should succeed</span>
  61
+                    </li>
  62
+                    <li>
  63
+                        In the command line, run "$0.style.margin = '1px';"
  64
+                        <span class="ok">&rArr; "padding" should still remain, disabled</span>
  65
+                    </li>
  66
+                    <li>
  67
+                        In order, right-click and choose "<code>Delete "&lt;property&gt;"</code>" on "margin", "padding", and "font".
  68
+                        <span class="ok">&rArr; Property removal should work</span>
  69
+                    </li>
  70
+                </ol>
  71
+                </ul>
  72
+            </section>
  73
+            <footer>
  74
+                Simon Lindholm, simon.lindholm10@gmail.com
  75
+            </footer>
  76
+        </div>
  77
+    </body>
  78
+</html>
237  tests/content/css/5644/issue5644.js
... ...
@@ -0,0 +1,237 @@
  1
+function runTest()
  2
+{
  3
+    FBTest.sysout("issue5644.START");
  4
+    FBTest.openNewTab(basePath + "css/5644/issue5644.html", function(win)
  5
+    {
  6
+        FBTest.openFirebug();
  7
+        FBTest.selectPanel("html");
  8
+
  9
+        // Search for 'element1' within the HTML panel
  10
+        FBTest.searchInHtmlPanel("element1", function(sel)
  11
+        {
  12
+            // Click on the element to make sure it's selected.
  13
+            var nodeLabelBox = FW.FBL.getAncestorByClass(sel.anchorNode, "nodeLabelBox");
  14
+            var nodeTag = nodeLabelBox.querySelector(".nodeTag");
  15
+            FBTest.mouseDown(nodeTag);
  16
+
  17
+            var sidePanel = FBTest.selectSidePanel("css");
  18
+
  19
+            var iterateFirstRule = function(callback)
  20
+            {
  21
+                var firstRule = sidePanel.panelNode.querySelector(".cssRule");
  22
+                if (!firstRule)
  23
+                    FBTest.ok(false, "There must be at least one rule.");
  24
+                var props = firstRule.getElementsByClassName("cssProp");
  25
+                for (var i = 0; i < props.length; ++i)
  26
+                {
  27
+                    var prop = props[i];
  28
+                    var isDisabled = prop.classList.contains("disabledStyle");
  29
+                    var name = prop.getElementsByClassName("cssPropName")[0];
  30
+                    var value = prop.getElementsByClassName("cssPropValue")[0];
  31
+                    name = name ? name.textContent : "<no name>";
  32
+                    value = value ? value.textContent : "<no value>";
  33
+                    callback(prop, name, value, isDisabled);
  34
+                }
  35
+            };
  36
+
  37
+            var verify = function(callback, disabled, enabled)
  38
+            {
  39
+                iterateFirstRule(function(prop, name, value, isDisabled)
  40
+                {
  41
+                    var wantedValue = enabled[name] || disabled[name];
  42
+                    if (wantedValue)
  43
+                    {
  44
+                        var shouldBeDisabled = !!disabled[name];
  45
+                        delete enabled[name];
  46
+                        delete disabled[name];
  47
+                        FBTest.compare(shouldBeDisabled, isDisabled,
  48
+                            "Property \"" + name + "\" must be " + dis(shouldBeDisabled));
  49
+                        FBTest.compare(wantedValue, value,
  50
+                            "Property \"" + name + "\" must have value \"" + wantedValue + "\"");
  51
+                    }
  52
+                    else
  53
+                    {
  54
+                        FBTest.ok(false, "Property \"" + name +
  55
+                            "\" (value \"" + value + "\", " + dis(isDisabled) + ") should not exist!");
  56
+                    }
  57
+                });
  58
+
  59
+                for (var extraProp in disabled)
  60
+                    FBTest.ok(false, "Should have disabled property \"" + extraProp + "\"");
  61
+                for (var extraProp in enabled)
  62
+                    FBTest.ok(false, "Should have enabled property \"" + extraProp + "\"");
  63
+
  64
+                callback();
  65
+            };
  66
+
  67
+            var findProperty = function(wantedName)
  68
+            {
  69
+                var found;
  70
+                iterateFirstRule(function(prop, name)
  71
+                {
  72
+                    if (name === wantedName)
  73
+                        found = prop;
  74
+                });
  75
+                if (!found)
  76
+                    FBTest.ok(false, "Property " + wantedName + " must exist");
  77
+                return found;
  78
+            };
  79
+
  80
+            var toggleDisable = function(callback, name)
  81
+            {
  82
+                FBTest.progress("Disabling \"" + name + "\"");
  83
+                var prop = findProperty(name);
  84
+
  85
+                // Try to hit the disable button.
  86
+                FBTest.synthesizeMouse(prop, 2, 2);
  87
+                callback();
  88
+            };
  89
+
  90
+            var gc = function(callback)
  91
+            {
  92
+                // If we switch to WeakMap, this is to confirm that it doesn't
  93
+                // randomly drop disabled properties after a GC.
  94
+                FBTest.progress("Running garbage collection.");
  95
+                Components.utils.schedulePreciseGC(callback);
  96
+            };
  97
+
  98
+            var renameRule = function(callback)
  99
+            {
  100
+                FBTest.progress("Renaming rule \"#element1\" → \"p#element1\"");
  101
+                var firstRule = sidePanel.panelNode.querySelector(".cssRule");
  102
+                if (!firstRule)
  103
+                    FBTest.ok(false, "There must be at least one rule.");
  104
+                var selectors = firstRule.getElementsByClassName("cssSelector");
  105
+                FBTest.compare(1, selectors.length, "There must be one CSS selector");
  106
+                var selector = selectors.item(0);
  107
+
  108
+                FBTest.synthesizeMouse(selector);
  109
+                var editor = sidePanel.panelNode.querySelector(".textEditorInner");
  110
+                FBTest.ok(editor, "Editor must be available now");
  111
+                typeValue(editor, "p#element1");
  112
+
  113
+                // Stop inline editing
  114
+                FBTest.synthesizeMouse(editor, -2, -2);
  115
+
  116
+                sidePanel.refresh();
  117
+                callback();
  118
+            };
  119
+
  120
+            var addProperty = function(callback, name, value, accept)
  121
+            {
  122
+                FBTest.progress("Adding property \"" + name + "\": \"" + value + "\"" +
  123
+                    (accept ? "" : ", then reverting"));
  124
+
  125
+                var lastProp;
  126
+                iterateFirstRule(function(prop) { lastProp = prop; });
  127
+                var valueEl = lastProp.getElementsByClassName("cssPropValue")[0];
  128
+
  129
+                FBTest.synthesizeMouse(valueEl);
  130
+                var editor = sidePanel.panelNode.querySelector(".textEditorInner");
  131
+                FBTest.ok(editor, "Editor must be available now");
  132
+
  133
+                FBTest.synthesizeKey("VK_RETURN", null, win);
  134
+                typeValue(editor, name);
  135
+                FBTest.synthesizeKey("VK_RETURN", null, win);
  136
+                typeValue(editor, value);
  137
+                FW.Firebug.Editor.update(true);
  138
+
  139
+                if (accept)
  140
+                    FBTest.synthesizeKey("VK_RETURN", null, win);
  141
+                FBTest.synthesizeKey("VK_ESCAPE", null, win);
  142
+
  143
+                sidePanel.refresh();
  144
+                callback();
  145
+            };
  146
+
  147
+            var changeProperty = function(callback, name, value, accept)
  148
+            {
  149
+                FBTest.progress("Setting property \"" + name + "\" to \"" + value + "\"" +
  150
+                    (accept ? "" : ", then reverting"));
  151
+                var prop = findProperty(name);
  152
+                var valueEl = prop.getElementsByClassName("cssPropValue")[0];
  153
+
  154
+                FBTest.synthesizeMouse(valueEl);
  155
+                var editor = sidePanel.panelNode.querySelector(".textEditorInner");
  156
+                FBTest.ok(editor, "Editor must be available now");
  157
+                typeValue(editor, value);
  158
+                FW.Firebug.Editor.update(true);
  159
+
  160
+                if (accept)
  161
+                    FBTest.synthesizeKey("VK_RETURN", null, win);
  162
+                FBTest.synthesizeKey("VK_ESCAPE", null, win);
  163
+
  164
+                sidePanel.refresh();
  165
+                callback();
  166
+            };
  167
+
  168
+            var addInlineStyle = function(callback, prop, value)
  169
+            {
  170
+                FBTest.progress("Adding \"" + prop + "\": \"" + value + "\" as an inline style");
  171
+                var contentEl = win.document.getElementById("element1");
  172
+                contentEl.style[prop] = value;
  173
+
  174
+                sidePanel.refresh();
  175
+                callback();
  176
+            };
  177
+
  178
+            var deleteProperty = function(callback, name)
  179
+            {
  180
+                var prop = findProperty(name);
  181
+                FBTest.executeContextMenuCommand(prop, "fbDeleteCSSProp", function()
  182
+                {
  183
+                    sidePanel.refresh();
  184
+                    callback();
  185
+                });
  186
+            };
  187
+
  188
+            var tasks = new FBTest.TaskList();
  189
+            tasks.push(verify, {}, {"color": "#700020", "font": "1em Verdana"});
  190
+            tasks.push(toggleDisable, "color");
  191
+            tasks.push(toggleDisable, "font");
  192
+            tasks.push(verify, {"color": "#700020", "font": "1em Verdana"}, {});
  193
+            tasks.push(gc);
  194
+            tasks.push(renameRule);
  195
+            tasks.push(verify, {"color": "#700020", "font": "1em Verdana"}, {});
  196
+            tasks.push(addProperty, "color", "gray", false);
  197
+            tasks.push(verify, {"color": "#700020", "font": "1em Verdana"}, {});
  198
+            tasks.push(addProperty, "color", "gray", true);
  199
+            tasks.push(verify, {"font": "1em Verdana"}, {"color": "gray"});
  200
+            tasks.push(changeProperty, "font", "1em Times New Roman", false);
  201
+            tasks.push(verify, {"font": "1em Verdana"}, {"color": "gray"});
  202
+            tasks.push(changeProperty, "font", "1em Times New Roman", true);
  203
+            tasks.push(verify, {}, {"color": "gray", "font": "1em Times New Roman"});
  204
+            tasks.push(toggleDisable, "color");
  205
+            tasks.push(addInlineStyle, "padding", "1px");
  206
+            tasks.push(verify, {}, {"padding": "1px"});
  207
+            tasks.push(toggleDisable, "padding");
  208
+            tasks.push(verify, {"padding": "1px"}, {});
  209
+            tasks.push(addInlineStyle, "margin", "1px");
  210
+            tasks.push(gc);
  211
+            tasks.push(verify, {"padding": "1px"}, {"margin": "1px"});
  212
+            tasks.push(deleteProperty, "margin");
  213
+            tasks.push(verify, {"padding": "1px"}, {});
  214
+            tasks.push(deleteProperty, "padding");
  215
+            tasks.push(verify, {"color": "gray"}, {"font": "1em Times New Roman"});
  216
+            tasks.push(deleteProperty, "font");
  217
+            tasks.push(verify, {"color": "gray"}, {});
  218
+
  219
+            tasks.run(function()
  220
+            {
  221
+                FBTest.testDone("issue5644.DONE");
  222
+            }, 0);
  223
+        });
  224
+    });
  225
+}
  226
+
  227
+// Optimized version of FBTest.sendString
  228
+function typeValue(editor, value)
  229
+{
  230
+    editor.value = value.slice(0, -1);
  231
+    FBTest.sendString(value.slice(-1), editor);
  232
+}
  233
+
  234
+function dis(disabled)
  235
+{
  236
+    return (disabled ? "disabled" : "enabled");
  237
+}
1  tests/content/firebug.html
@@ -222,6 +222,7 @@
222 222
     {group: "css",                uri: "css/5438/issue5438.js",                   desc: "Allow jumping from web font usage in Style side panel to its definition", testPage: "css/5438/issue5438.html"},
223 223
     {group: "css",                uri: "css/5461/issue5461.js",                   desc: "When copying selected parts from Style side panel don't copy source link or inherited styles header", testPage: "css/5461/issue5461.html"},
224 224
     {group: "css",                uri: "css/5469/issue5469.js",                   desc: "Add units when changing the length '0' with up/down keys", testPage: "css/5469/issue5469.html"},
  225
+    {group: "css",                uri: "css/5644/issue5644.js",                   desc: "Editing a disabled property makes another", testPage: "css/5644/issue5644.html"},
225 226
     {group: "css/computed",       uri: "css/computed/3207/issue3207.js",          desc: "CSS properties in the \"Computed\" tab are not updated correctly", testPage: "css/computed/3207/issue3207.html"},
226 227
     {group: "css/computed",       uri: "css/computed/4132/issue4132.js",          desc: "Only show applied styles in Computed side panel", testPage: "css/computed/4132/issue4132.html"},
227 228
     {group: "css/computed",       uri: "css/computed/5449/issue5449.js",          desc: "Show infotips in Computed side panel", testPage: "css/computed/5449/issue5449.html"},

3 notes on commit e61a1b5

Sebastian Zartner

It shouldn't disappear when you enter an invalid value.
I guess you mixed up entering gray and 1em Times New Roman. The test for 1em Times New Roman is missing.

Sebastian

Sebastian Zartner

Do you think we should put this into our FBTest API?

Sebastian

Sebastian Zartner
Collaborator

Your test case contains several functions, which could be worth moving into our FBTest API.

Sebastian

Sebastian Zartner

Better use the UI functions for this, i.e. call the context menu option.

Sebastian

Simon Lindholm

Yeah, the descriptions in .html file are just mirrors of the .js tests, with not much care given to them, so it's not surprising that it contains a few typos. I think Honza will complain if I leave them out though.
But invalid values would make a good test actually. I should add that.

Simon Lindholm

Components.utils.schedulePreciseGC(callback); is already very short, and I don't expect it to be of general use.

Simon Lindholm

Eh. It's more code, slower and not what I want to test here. I'll add the test coverage elsewhere if we don't have it already.

Simon Lindholm
Collaborator

Which ones? Most of the editing functions can be done directly with page-interacting JavaScript, with no adverse effects as long as there is some test that checks that they work (e.g. this one).

FBTest.sendString I suppose I could optimize.

Sebastian Zartner

I always start writing the HTML file and then work on the FBTest.
What I wanted to say is that the HTML files should get as much care as the JS files. If the automatic test fails, you want to reproduce the things manually. If the description is wrong, you're lost.
The FBTest should be as near to the HTML test as possible.

Sebastian

Sebastian Zartner

Again, the FBTests should always be as close to the description in the HTML files as possible. Even if that's slower and more code.
If you think different, we should discuss this in the FWG discussion group, so others can give their opinion.

Sebastian

Sebastian Zartner
Collaborator

Which ones?

renameRule, findProperty, toggleDisable, renameRule, addProperty, changeProperty, deleteProperty, addInlineStyle

Most of the editing functions can be done directly with page-interacting JavaScript

Same reason as before. No page-interacting JavaScript.

Sebastian

Sebastian Zartner

If you don't get the discussion group mails, I already created a thread.

Sebastian

Please sign in to comment.
Something went wrong with that request. Please try again.