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
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test several types of rule-view property edition
const TEST_URI = `
<style type="text/css">
#testid {
background-color: blue;
}
.testclass, .unmatched {
background-color: green;
}
</style>
<div id="testid" class="testclass">Styled Node</div>
<div id="testid2">Styled Node</div>
`;
add_task(async function () {
await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
const { inspector, view } = await openRuleView();
await selectNode("#testid", inspector);
await testEditProperty(inspector, view);
await testDisableProperty(inspector, view);
await testPropertyStillMarkedDirty(inspector, view);
});
async function testEditProperty(inspector, ruleView) {
const idRule = getRuleViewRuleEditor(ruleView, 1).rule;
const prop = getTextProperty(ruleView, 1, { "background-color": "blue" });
let editor = await focusEditableField(ruleView, prop.editor.nameSpan);
let input = editor.input;
is(
inplaceEditor(prop.editor.nameSpan),
editor,
"Next focused editor should be the name editor."
);
ok(
input.selectionStart === 0 && input.selectionEnd === input.value.length,
"Editor contents are selected."
);
// Try clicking on the editor's input again, shouldn't cause trouble
// (see bug 761665).
EventUtils.synthesizeMouse(input, 1, 1, {}, ruleView.styleWindow);
input.select();
info(
'Entering property name "border-color" followed by a colon to ' +
"focus the value"
);
const onNameDone = ruleView.once("ruleview-changed");
const onFocus = once(idRule.editor.element, "focus", true);
EventUtils.sendString("border-color:", ruleView.styleWindow);
await onFocus;
await onNameDone;
info("Verifying that the focused field is the valueSpan");
editor = inplaceEditor(ruleView.styleDocument.activeElement);
input = editor.input;
is(
inplaceEditor(prop.editor.valueSpan),
editor,
"Focus should have moved to the value."
);
ok(
input.selectionStart === 0 && input.selectionEnd === input.value.length,
"Editor contents are selected."
);
info("Entering a value following by a semi-colon to commit it");
const onBlur = once(editor.input, "blur");
// Use sendChar() to pass each character as a string so that we can test
// prop.editor.warning.hidden after each character.
for (const ch of "red;") {
const onPreviewDone = ruleView.once("ruleview-changed");
EventUtils.sendChar(ch, ruleView.styleWindow);
ruleView.debounce.flush();
await onPreviewDone;
is(
prop.editor.warning.hidden,
true,
"warning triangle is hidden or shown as appropriate"
);
}
await onBlur;
const newValue = await getRulePropertyValue(0, 0, "border-color");
is(newValue, "red", "border-color should have been set.");
ruleView.styleDocument.activeElement.blur();
await addProperty(ruleView, 1, "color", "red", { commitValueWith: ";" });
const props = ruleView.element.querySelectorAll(".ruleview-property");
for (let i = 0; i < props.length; i++) {
is(
props[i].hasAttribute("dirty"),
i <= 1,
"props[" + i + "] marked dirty as appropriate"
);
}
}
async function testDisableProperty(inspector, ruleView) {
const prop = getTextProperty(ruleView, 1, {
"border-color": "red",
color: "red",
});
info("Disabling a property");
await togglePropStatus(ruleView, prop);
let newValue = await getRulePropertyValue(0, 0, "border-color");
is(newValue, "", "Border-color should have been unset.");
info("Enabling the property again");
await togglePropStatus(ruleView, prop);
newValue = await getRulePropertyValue(0, 0, "border-color");
is(newValue, "red", "Border-color should have been reset.");
}
async function testPropertyStillMarkedDirty(inspector, ruleView) {
// Select an unstyled node.
await selectNode("#testid2", inspector);
// Select the original node again.
await selectNode("#testid", inspector);
const props = ruleView.element.querySelectorAll(".ruleview-property");
for (let i = 0; i < props.length; i++) {
is(
props[i].hasAttribute("dirty"),
i <= 1,
"props[" + i + "] marked dirty as appropriate"
);
}
}
|
