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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
|
/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test that changing the current element's style attribute refreshes the
// rule-view
const TEST_URI = `
<div id="testid" class="testclass" style="margin-top: 1px; padding-top: 5px;">
Styled Node
</div>
`;
add_task(function* () {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view, testActor} = yield openRuleView();
yield selectNode("#testid", inspector);
yield testPropertyChanges(inspector, view);
yield testPropertyChange0(inspector, view, "#testid", testActor);
yield testPropertyChange1(inspector, view, "#testid", testActor);
yield testPropertyChange2(inspector, view, "#testid", testActor);
yield testPropertyChange3(inspector, view, "#testid", testActor);
yield testPropertyChange4(inspector, view, "#testid", testActor);
yield testPropertyChange5(inspector, view, "#testid", testActor);
yield testPropertyChange6(inspector, view, "#testid", testActor);
});
function* testPropertyChanges(inspector, ruleView) {
info("Adding a second margin-top value in the element selector");
let ruleEditor = ruleView._elementStyle.rules[0].editor;
let onRefreshed = inspector.once("rule-view-refreshed");
ruleEditor.addProperty("margin-top", "5px", "", true);
yield onRefreshed;
let rule = ruleView._elementStyle.rules[0];
validateTextProp(rule.textProps[0], false, "margin-top", "1px",
"Original margin property active");
}
function* testPropertyChange0(inspector, ruleView, selector, testActor) {
yield changeElementStyle(selector, "margin-top: 1px; padding-top: 5px",
inspector, testActor);
let rule = ruleView._elementStyle.rules[0];
is(rule.editor.element.querySelectorAll(".ruleview-property").length, 3,
"Correct number of properties");
validateTextProp(rule.textProps[0], true, "margin-top", "1px",
"First margin property re-enabled");
validateTextProp(rule.textProps[2], false, "margin-top", "5px",
"Second margin property disabled");
}
function* testPropertyChange1(inspector, ruleView, selector, testActor) {
info("Now set it back to 5px, the 5px value should be re-enabled.");
yield changeElementStyle(selector, "margin-top: 5px; padding-top: 5px;",
inspector, testActor);
let rule = ruleView._elementStyle.rules[0];
is(rule.editor.element.querySelectorAll(".ruleview-property").length, 3,
"Correct number of properties");
validateTextProp(rule.textProps[0], false, "margin-top", "1px",
"First margin property re-enabled");
validateTextProp(rule.textProps[2], true, "margin-top", "5px",
"Second margin property disabled");
}
function* testPropertyChange2(inspector, ruleView, selector, testActor) {
info("Set the margin property to a value that doesn't exist in the editor.");
info("Should reuse the currently-enabled element (the second one.)");
yield changeElementStyle(selector, "margin-top: 15px; padding-top: 5px;",
inspector, testActor);
let rule = ruleView._elementStyle.rules[0];
is(rule.editor.element.querySelectorAll(".ruleview-property").length, 3,
"Correct number of properties");
validateTextProp(rule.textProps[0], false, "margin-top", "1px",
"First margin property re-enabled");
validateTextProp(rule.textProps[2], true, "margin-top", "15px",
"Second margin property disabled");
}
function* testPropertyChange3(inspector, ruleView, selector, testActor) {
info("Remove the padding-top attribute. Should disable the padding " +
"property but not remove it.");
yield changeElementStyle(selector, "margin-top: 5px;", inspector, testActor);
let rule = ruleView._elementStyle.rules[0];
is(rule.editor.element.querySelectorAll(".ruleview-property").length, 3,
"Correct number of properties");
validateTextProp(rule.textProps[1], false, "padding-top", "5px",
"Padding property disabled");
}
function* testPropertyChange4(inspector, ruleView, selector, testActor) {
info("Put the padding-top attribute back in, should re-enable the " +
"padding property.");
yield changeElementStyle(selector, "margin-top: 5px; padding-top: 25px",
inspector, testActor);
let rule = ruleView._elementStyle.rules[0];
is(rule.editor.element.querySelectorAll(".ruleview-property").length, 3,
"Correct number of properties");
validateTextProp(rule.textProps[1], true, "padding-top", "25px",
"Padding property enabled");
}
function* testPropertyChange5(inspector, ruleView, selector, testActor) {
info("Add an entirely new property");
yield changeElementStyle(selector,
"margin-top: 5px; padding-top: 25px; padding-left: 20px;",
inspector, testActor);
let rule = ruleView._elementStyle.rules[0];
is(rule.editor.element.querySelectorAll(".ruleview-property").length, 4,
"Added a property");
validateTextProp(rule.textProps[3], true, "padding-left", "20px",
"Padding property enabled");
}
function* testPropertyChange6(inspector, ruleView, selector, testActor) {
info("Add an entirely new property again");
yield changeElementStyle(selector, "background: red " +
"url(\"chrome://branding/content/about-logo.png\") repeat scroll 0% 0%",
inspector, testActor);
let rule = ruleView._elementStyle.rules[0];
is(rule.editor.element.querySelectorAll(".ruleview-property").length, 5,
"Added a property");
validateTextProp(rule.textProps[4], true, "background",
"red url(\"chrome://branding/content/about-logo.png\") repeat scroll 0% 0%",
"shortcut property correctly set");
}
function* changeElementStyle(selector, style, inspector, testActor) {
let onRefreshed = inspector.once("rule-view-refreshed");
yield testActor.setAttribute(selector, "style", style);
yield onRefreshed;
}
function validateTextProp(prop, enabled, name, value, desc) {
is(prop.enabled, enabled, desc + ": enabled.");
is(prop.name, name, desc + ": name.");
is(prop.value, value, desc + ": value.");
is(prop.editor.enable.hasAttribute("checked"), enabled,
desc + ": enabled checkbox.");
is(prop.editor.nameSpan.textContent, name, desc + ": name span.");
is(prop.editor.valueSpan.textContent,
value, desc + ": value span.");
}
|
