mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
Bug 1241527 - 5 - Use ruleview-changed event to fix remaining pending requests in tests; r=gl
This commit is contained in:
Patrick Brosset
parent
29a9ceaff8
commit
df9ad38165
@ -10,8 +10,8 @@
|
||||
add_task(function*() {
|
||||
yield addTab("data:text/html;charset=utf-8,sample document for bug 722691");
|
||||
createDocument();
|
||||
let {toolbox, inspector, view} = yield openRuleView();
|
||||
|
||||
let {inspector, view} = yield openRuleView();
|
||||
yield selectNode("#test", inspector);
|
||||
|
||||
yield testMarginIncrements(view);
|
||||
@ -23,16 +23,16 @@ add_task(function*() {
|
||||
});
|
||||
|
||||
function createDocument() {
|
||||
content.document.body.innerHTML = '' +
|
||||
'<style>' +
|
||||
' #test {' +
|
||||
' margin-top:0px;' +
|
||||
' padding-top: 0px;' +
|
||||
' color:#000000;' +
|
||||
' background-color: #000000;' +
|
||||
' }' +
|
||||
'</style>' +
|
||||
'<div id="test"></div>';
|
||||
content.document.body.innerHTML = "" +
|
||||
"<style>" +
|
||||
" #test {" +
|
||||
" margin-top:0px;" +
|
||||
" padding-top: 0px;" +
|
||||
" color:#000000;" +
|
||||
" background-color: #000000;" +
|
||||
" }" +
|
||||
"</style>" +
|
||||
"<div id=\"test\"></div>";
|
||||
}
|
||||
|
||||
function* testMarginIncrements(view) {
|
||||
@ -64,13 +64,13 @@ function* testVariousUnitIncrements(view) {
|
||||
2: {start: "0pt", end: "1pt", selectAll: true},
|
||||
3: {start: "0pc", end: "1pc", selectAll: true},
|
||||
4: {start: "0em", end: "1em", selectAll: true},
|
||||
5: {start: "0%", end: "1%", selectAll: true},
|
||||
5: {start: "0%", end: "1%", selectAll: true},
|
||||
6: {start: "0in", end: "1in", selectAll: true},
|
||||
7: {start: "0cm", end: "1cm", selectAll: true},
|
||||
8: {start: "0mm", end: "1mm", selectAll: true},
|
||||
9: {start: "0ex", end: "1ex", selectAll: true}
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
function* testHexIncrements(view) {
|
||||
info("Testing keyboard increments with hex colors");
|
||||
@ -81,12 +81,12 @@ function* testHexIncrements(view) {
|
||||
yield runIncrementTest(hexColorPropEditor, view, {
|
||||
1: {start: "#CCCCCC", end: "#CDCDCD", selectAll: true},
|
||||
2: {shift: true, start: "#CCCCCC", end: "#DCDCDC", selectAll: true},
|
||||
3: {start: "#CCCCCC", end: "#CDCCCC", selection: [1,3]},
|
||||
4: {shift: true, start: "#CCCCCC", end: "#DCCCCC", selection: [1,3]},
|
||||
3: {start: "#CCCCCC", end: "#CDCCCC", selection: [1, 3]},
|
||||
4: {shift: true, start: "#CCCCCC", end: "#DCCCCC", selection: [1, 3]},
|
||||
5: {start: "#FFFFFF", end: "#FFFFFF", selectAll: true},
|
||||
6: {down: true, shift: true, start: "#000000", end: "#000000", selectAll: true}
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
function* testRgbIncrements(view) {
|
||||
info("Testing keyboard increments with rgb colors");
|
||||
@ -95,14 +95,14 @@ function* testRgbIncrements(view) {
|
||||
let rgbColorPropEditor = idRuleEditor.rule.textProps[3].editor;
|
||||
|
||||
yield runIncrementTest(rgbColorPropEditor, view, {
|
||||
1: {start: "rgb(0,0,0)", end: "rgb(0,1,0)", selection: [6,7]},
|
||||
2: {shift: true, start: "rgb(0,0,0)", end: "rgb(0,10,0)", selection: [6,7]},
|
||||
3: {start: "rgb(0,255,0)", end: "rgb(0,255,0)", selection: [6,9]},
|
||||
4: {shift: true, start: "rgb(0,250,0)", end: "rgb(0,255,0)", selection: [6,9]},
|
||||
5: {down: true, start: "rgb(0,0,0)", end: "rgb(0,0,0)", selection: [6,7]},
|
||||
6: {down: true, shift: true, start: "rgb(0,5,0)", end: "rgb(0,0,0)", selection: [6,7]}
|
||||
1: {start: "rgb(0,0,0)", end: "rgb(0,1,0)", selection: [6, 7]},
|
||||
2: {shift: true, start: "rgb(0,0,0)", end: "rgb(0,10,0)", selection: [6, 7]},
|
||||
3: {start: "rgb(0,255,0)", end: "rgb(0,255,0)", selection: [6, 9]},
|
||||
4: {shift: true, start: "rgb(0,250,0)", end: "rgb(0,255,0)", selection: [6, 9]},
|
||||
5: {down: true, start: "rgb(0,0,0)", end: "rgb(0,0,0)", selection: [6, 7]},
|
||||
6: {down: true, shift: true, start: "rgb(0,5,0)", end: "rgb(0,0,0)", selection: [6, 7]}
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
function* testShorthandIncrements(view) {
|
||||
info("Testing keyboard increments within shorthand values");
|
||||
@ -111,17 +111,17 @@ function* testShorthandIncrements(view) {
|
||||
let paddingPropEditor = idRuleEditor.rule.textProps[1].editor;
|
||||
|
||||
yield runIncrementTest(paddingPropEditor, view, {
|
||||
1: {start: "0px 0px 0px 0px", end: "0px 1px 0px 0px", selection: [4,7]},
|
||||
2: {shift: true, start: "0px 0px 0px 0px", end: "0px 10px 0px 0px", selection: [4,7]},
|
||||
1: {start: "0px 0px 0px 0px", end: "0px 1px 0px 0px", selection: [4, 7]},
|
||||
2: {shift: true, start: "0px 0px 0px 0px", end: "0px 10px 0px 0px", selection: [4, 7]},
|
||||
3: {start: "0px 0px 0px 0px", end: "1px 0px 0px 0px", selectAll: true},
|
||||
4: {shift: true, start: "0px 0px 0px 0px", end: "10px 0px 0px 0px", selectAll: true},
|
||||
5: {down: true, start: "0px 0px 0px 0px", end: "0px 0px -1px 0px", selection: [8,11]},
|
||||
5: {down: true, start: "0px 0px 0px 0px", end: "0px 0px -1px 0px", selection: [8, 11]},
|
||||
6: {down: true, shift: true, start: "0px 0px 0px 0px", end: "-10px 0px 0px 0px", selectAll: true},
|
||||
7: {up: true, start: "0.1em .1em 0em 0em", end: "0.1em 1.1em 0em 0em", selection: [6, 9]},
|
||||
8: {up: true, alt: true, start: "0.1em .9em 0em 0em", end: "0.1em 1em 0em 0em", selection: [6, 9]},
|
||||
9: {up: true, shift: true, start: "0.2em .2em 0em 0em", end: "0.2em 10.2em 0em 0em", selection: [6, 9]}
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
function* testOddCases(view) {
|
||||
info("Testing some more odd cases");
|
||||
@ -130,32 +130,38 @@ function* testOddCases(view) {
|
||||
let marginPropEditor = idRuleEditor.rule.textProps[0].editor;
|
||||
|
||||
yield runIncrementTest(marginPropEditor, view, {
|
||||
1: {start: "98.7%", end: "99.7%", selection: [3,3]},
|
||||
2: {alt: true, start: "98.7%", end: "98.8%", selection: [3,3]},
|
||||
1: {start: "98.7%", end: "99.7%", selection: [3, 3]},
|
||||
2: {alt: true, start: "98.7%", end: "98.8%", selection: [3, 3]},
|
||||
3: {start: "0", end: "1"},
|
||||
4: {down: true, start: "0", end: "-1"},
|
||||
5: {start: "'a=-1'", end: "'a=0'", selection: [4,4]},
|
||||
6: {start: "0 -1px", end: "0 0px", selection: [2,2]},
|
||||
7: {start: "url(-1)", end: "url(-1)", selection: [4,4]},
|
||||
8: {start: "url('test1.1.png')", end: "url('test1.2.png')", selection: [11,11]},
|
||||
9: {start: "url('test1.png')", end: "url('test2.png')", selection: [9,9]},
|
||||
10: {shift: true, start: "url('test1.1.png')", end: "url('test11.1.png')", selection: [9,9]},
|
||||
11: {down: true, start: "url('test-1.png')", end: "url('test-2.png')", selection: [9,11]},
|
||||
12: {start: "url('test1.1.png')", end: "url('test1.2.png')", selection: [11,12]},
|
||||
13: {down: true, alt: true, start: "url('test-0.png')", end: "url('test--0.1.png')", selection: [10,11]},
|
||||
14: {alt: true, start: "url('test--0.1.png')", end: "url('test-0.png')", selection: [10,14]}
|
||||
5: {start: "'a=-1'", end: "'a=0'", selection: [4, 4]},
|
||||
6: {start: "0 -1px", end: "0 0px", selection: [2, 2]},
|
||||
7: {start: "url(-1)", end: "url(-1)", selection: [4, 4]},
|
||||
8: {start: "url('test1.1.png')", end: "url('test1.2.png')", selection: [11, 11]},
|
||||
9: {start: "url('test1.png')", end: "url('test2.png')", selection: [9, 9]},
|
||||
10: {shift: true, start: "url('test1.1.png')", end: "url('test11.1.png')", selection: [9, 9]},
|
||||
11: {down: true, start: "url('test-1.png')", end: "url('test-2.png')", selection: [9, 11]},
|
||||
12: {start: "url('test1.1.png')", end: "url('test1.2.png')", selection: [11, 12]},
|
||||
13: {down: true, alt: true, start: "url('test-0.png')", end: "url('test--0.1.png')", selection: [10, 11]},
|
||||
14: {alt: true, start: "url('test--0.1.png')", end: "url('test-0.png')", selection: [10, 14]}
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
function* runIncrementTest(propertyEditor, view, tests) {
|
||||
let editor = yield focusEditableField(view, propertyEditor.valueSpan);
|
||||
|
||||
for(let test in tests) {
|
||||
for (let test in tests) {
|
||||
yield testIncrement(editor, tests[test], view, propertyEditor);
|
||||
}
|
||||
|
||||
// Blur the field to put back the UI in its initial state (and avoid pending
|
||||
// requests when the test ends).
|
||||
let onRuleViewChanged = view.once("ruleview-changed");
|
||||
EventUtils.synthesizeKey("VK_ESCAPE", {}, view.styleWindow);
|
||||
yield onRuleViewChanged;
|
||||
}
|
||||
|
||||
function* testIncrement(editor, options, view, {ruleEditor}) {
|
||||
function* testIncrement(editor, options, view) {
|
||||
editor.input.value = options.start;
|
||||
let input = editor.input;
|
||||
|
||||
|
||||
@ -33,14 +33,16 @@ add_task(function*() {
|
||||
yield focusEditableField(view, propEditor.valueSpan);
|
||||
|
||||
info("Deleting all the text out of a value field");
|
||||
let waitForUpdates = view.once("ruleview-changed");
|
||||
let onRuleViewChanged = view.once("ruleview-changed");
|
||||
yield sendCharsAndWaitForFocus(view, ruleEditor.element,
|
||||
["VK_DELETE", "VK_RETURN"]);
|
||||
yield waitForUpdates;
|
||||
yield onRuleViewChanged;
|
||||
|
||||
info("Pressing enter a couple times to cycle through editors");
|
||||
yield sendCharsAndWaitForFocus(view, ruleEditor.element, ["VK_RETURN"]);
|
||||
onRuleViewChanged = view.once("ruleview-changed");
|
||||
yield sendCharsAndWaitForFocus(view, ruleEditor.element, ["VK_RETURN"]);
|
||||
yield onRuleViewChanged;
|
||||
|
||||
isnot(ruleEditor.rule.textProps[1].editor.nameSpan.style.display, "none",
|
||||
"The name span is visible");
|
||||
|
||||
@ -19,25 +19,27 @@ add_task(function*() {
|
||||
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
|
||||
let {inspector, view} = yield openRuleView();
|
||||
yield selectNode("#testid", inspector);
|
||||
yield testRenameProperty(inspector, view);
|
||||
});
|
||||
|
||||
function* testRenameProperty(inspector, view) {
|
||||
info("Get the color property editor");
|
||||
let ruleEditor = getRuleViewRuleEditor(view, 0);
|
||||
let propEditor = ruleEditor.rule.textProps[0].editor;
|
||||
|
||||
is(ruleEditor.rule.textProps[0].name, "color");
|
||||
|
||||
info("Focus on property name");
|
||||
let editor = yield focusEditableField(ruleEditor.ruleView,
|
||||
propEditor.nameSpan, 32, 1);
|
||||
info("Focus the property name field");
|
||||
yield focusEditableField(ruleEditor.ruleView, propEditor.nameSpan, 32, 1);
|
||||
|
||||
info("Renaming the property");
|
||||
info("Rename the property to background-color");
|
||||
// Expect 3 events: the value editor being focused, the ruleview-changed event
|
||||
// which signals that the new value has been previewed (fires once when the
|
||||
// value gets focused), and the markupmutation event since we're modifying an
|
||||
// inline style.
|
||||
let onValueFocus = once(ruleEditor.element, "focus", true);
|
||||
let onModifications = ruleEditor.ruleView.once("ruleview-changed");
|
||||
let onRuleViewChanged = ruleEditor.ruleView.once("ruleview-changed");
|
||||
let onMutation = inspector.once("markupmutation");
|
||||
EventUtils.sendString("background-color:", ruleEditor.doc.defaultView);
|
||||
yield onValueFocus;
|
||||
yield onModifications;
|
||||
yield onRuleViewChanged;
|
||||
yield onMutation;
|
||||
|
||||
is(ruleEditor.rule.textProps[0].name, "background-color");
|
||||
yield waitForComputedStyleProperty("#testid", null, "background-color",
|
||||
@ -45,4 +47,11 @@ function* testRenameProperty(inspector, view) {
|
||||
|
||||
is((yield getComputedStyleProperty("#testid", null, "color")),
|
||||
"rgb(255, 255, 255)", "color is white");
|
||||
}
|
||||
|
||||
// The value field is still focused. Blur it now and wait for the
|
||||
// ruleview-changed event to avoid pending requests.
|
||||
onRuleViewChanged = view.once("ruleview-changed");
|
||||
EventUtils.synthesizeKey("VK_ESCAPE", {});
|
||||
yield onRuleViewChanged;
|
||||
});
|
||||
|
||||
|
||||
@ -30,51 +30,65 @@ add_task(function*() {
|
||||
yield testEditableFieldFocus(inspector, view, "VK_TAB");
|
||||
});
|
||||
|
||||
function* testEditableFieldFocus(inspector, view, commitKey, options={}) {
|
||||
function* testEditableFieldFocus(inspector, view, commitKey) {
|
||||
info("Click on the selector of the inline style ('element')");
|
||||
let ruleEditor = getRuleViewRuleEditor(view, 0);
|
||||
|
||||
let onFocus = once(ruleEditor.element, "focus", true);
|
||||
ruleEditor.selectorText.click();
|
||||
yield onFocus;
|
||||
assertEditor(view, ruleEditor.newPropSpan,
|
||||
"Focus should be in the element property span");
|
||||
|
||||
info("Focus the next field with " + commitKey);
|
||||
ruleEditor = getRuleViewRuleEditor(view, 1);
|
||||
|
||||
yield focusNextEditableField(view, ruleEditor, commitKey, options);
|
||||
yield assertEditor(view, ruleEditor.selectorText,
|
||||
yield focusNextEditableField(view, ruleEditor, commitKey);
|
||||
assertEditor(view, ruleEditor.selectorText,
|
||||
"Focus should have moved to the next rule selector");
|
||||
|
||||
for (let textProp of ruleEditor.rule.textProps) {
|
||||
for (let i = 0; i < ruleEditor.rule.textProps.length; i++) {
|
||||
let textProp = ruleEditor.rule.textProps[i];
|
||||
let propEditor = textProp.editor;
|
||||
|
||||
yield focusNextEditableField(view, ruleEditor, commitKey, options);
|
||||
yield assertEditor(view, propEditor.nameSpan,
|
||||
info("Focus the next field with " + commitKey);
|
||||
// Expect a ruleview-changed event if we are moving from a property value
|
||||
// to the next property name (which occurs after the first iteration, as for
|
||||
// i=0, the previous field is the selector).
|
||||
let onRuleViewChanged = i > 0 ? view.once("ruleview-changed") : null;
|
||||
yield focusNextEditableField(view, ruleEditor, commitKey);
|
||||
yield onRuleViewChanged;
|
||||
assertEditor(view, propEditor.nameSpan,
|
||||
"Focus should have moved to the property name");
|
||||
|
||||
yield focusNextEditableField(view, ruleEditor, commitKey, options);
|
||||
yield assertEditor(view, propEditor.valueSpan,
|
||||
info("Focus the next field with " + commitKey);
|
||||
yield focusNextEditableField(view, ruleEditor, commitKey);
|
||||
assertEditor(view, propEditor.valueSpan,
|
||||
"Focus should have moved to the property value");
|
||||
}
|
||||
|
||||
yield focusNextEditableField(view, ruleEditor, commitKey, options);
|
||||
yield assertEditor(view, ruleEditor.newPropSpan,
|
||||
// Expect a ruleview-changed event again as we're bluring a property value.
|
||||
let onRuleViewChanged = view.once("ruleview-changed");
|
||||
yield focusNextEditableField(view, ruleEditor, commitKey);
|
||||
yield onRuleViewChanged;
|
||||
assertEditor(view, ruleEditor.newPropSpan,
|
||||
"Focus should have moved to the new property span");
|
||||
|
||||
ruleEditor = getRuleViewRuleEditor(view, 2);
|
||||
|
||||
yield focusNextEditableField(view, ruleEditor, commitKey, options);
|
||||
yield assertEditor(view, ruleEditor.selectorText,
|
||||
yield focusNextEditableField(view, ruleEditor, commitKey);
|
||||
assertEditor(view, ruleEditor.selectorText,
|
||||
"Focus should have moved to the next rule selector");
|
||||
|
||||
info("Blur the selector field");
|
||||
EventUtils.synthesizeKey("VK_ESCAPE", {});
|
||||
}
|
||||
|
||||
function* focusNextEditableField(view, ruleEditor, commitKey, options) {
|
||||
function* focusNextEditableField(view, ruleEditor, commitKey) {
|
||||
let onFocus = once(ruleEditor.element, "focus", true);
|
||||
EventUtils.synthesizeKey(commitKey, options, view.styleWindow);
|
||||
EventUtils.synthesizeKey(commitKey, {}, view.styleWindow);
|
||||
yield onFocus;
|
||||
}
|
||||
|
||||
function* assertEditor(view, element, message) {
|
||||
function assertEditor(view, element, message) {
|
||||
let editor = inplaceEditor(view.styleDocument.activeElement);
|
||||
is(inplaceEditor(element), editor, message);
|
||||
}
|
||||
|
||||
@ -37,36 +37,42 @@ function* testEditableFieldFocus(inspector, view, commitKey, options={}) {
|
||||
|
||||
ruleEditor = getRuleViewRuleEditor(view, 1);
|
||||
|
||||
yield focusNextEditableField(view, ruleEditor, commitKey, options);
|
||||
yield focusNextField(view, ruleEditor, commitKey, options);
|
||||
assertEditor(view, ruleEditor.newPropSpan,
|
||||
"Focus should have moved to the new property span");
|
||||
|
||||
for (let textProp of ruleEditor.rule.textProps.slice(0).reverse()) {
|
||||
let propEditor = textProp.editor;
|
||||
|
||||
yield focusNextEditableField(view, ruleEditor, commitKey, options);
|
||||
yield focusNextField(view, ruleEditor, commitKey, options);
|
||||
yield assertEditor(view, propEditor.valueSpan,
|
||||
"Focus should have moved to the property value");
|
||||
|
||||
yield focusNextEditableField(view, ruleEditor, commitKey, options);
|
||||
yield focusNextFieldAndExpectChange(view, ruleEditor, commitKey, options);
|
||||
yield assertEditor(view, propEditor.nameSpan,
|
||||
"Focus should have moved to the property name");
|
||||
}
|
||||
|
||||
ruleEditor = getRuleViewRuleEditor(view, 1);
|
||||
|
||||
yield focusNextEditableField(view, ruleEditor, commitKey, options);
|
||||
yield focusNextField(view, ruleEditor, commitKey, options);
|
||||
yield assertEditor(view, ruleEditor.selectorText,
|
||||
"Focus should have moved to the '#testid' rule selector");
|
||||
|
||||
ruleEditor = getRuleViewRuleEditor(view, 0);
|
||||
|
||||
yield focusNextEditableField(view, ruleEditor, commitKey, options);
|
||||
yield focusNextField(view, ruleEditor, commitKey, options);
|
||||
assertEditor(view, ruleEditor.newPropSpan,
|
||||
"Focus should have moved to the new property span");
|
||||
}
|
||||
|
||||
function* focusNextEditableField(view, ruleEditor, commitKey, options) {
|
||||
function* focusNextFieldAndExpectChange(view, ruleEditor, commitKey, options) {
|
||||
let onRuleViewChanged = view.once("ruleview-changed");
|
||||
yield focusNextField(view, ruleEditor, commitKey, options);
|
||||
yield onRuleViewChanged;
|
||||
}
|
||||
|
||||
function* focusNextField(view, ruleEditor, commitKey, options) {
|
||||
let onFocus = once(ruleEditor.element, "focus", true);
|
||||
EventUtils.synthesizeKey(commitKey, options, view.styleWindow);
|
||||
yield onFocus;
|
||||
|
||||
@ -11,11 +11,11 @@ add_task(function*() {
|
||||
yield addTab(TEST_URL);
|
||||
let {view} = yield openRuleView();
|
||||
|
||||
info("Getting the filter swatch element");
|
||||
info("Get the filter swatch element");
|
||||
let swatch = getRuleViewProperty(view, "body", "filter").valueSpan
|
||||
.querySelector(".ruleview-filterswatch");
|
||||
|
||||
let filterTooltip = view.tooltips.filterEditor;
|
||||
info("Click on the filter swatch element");
|
||||
// Clicking on a cssfilter swatch sets the current filter value in the tooltip
|
||||
// which, in turn, makes the FilterWidget emit an "updated" event that causes
|
||||
// the rule-view to refresh. So we must wait for the ruleview-changed event.
|
||||
@ -23,17 +23,20 @@ add_task(function*() {
|
||||
swatch.click();
|
||||
yield onRuleViewChanged;
|
||||
|
||||
info("Get the cssfilter widget instance");
|
||||
let filterTooltip = view.tooltips.filterEditor;
|
||||
let widget = yield filterTooltip.widget;
|
||||
|
||||
info("Set a new value in the cssfilter widget");
|
||||
onRuleViewChanged = view.once("ruleview-changed");
|
||||
widget.setCssValue("blur(2px)");
|
||||
yield waitForComputedStyleProperty("body", null, "filter", "blur(2px)");
|
||||
yield onRuleViewChanged;
|
||||
|
||||
ok(true, "Changes previewed on the element");
|
||||
|
||||
onRuleViewChanged = view.once("ruleview-changed");
|
||||
info("Pressing RETURN to commit changes");
|
||||
info("Press RETURN to commit changes");
|
||||
// Pressing return in the cssfilter tooltip triggeres 2 ruleview-changed
|
||||
onRuleViewChanged = waitForNEvents(view, "ruleview-changed", 2);
|
||||
EventUtils.sendKey("RETURN", widget.styleWindow);
|
||||
yield onRuleViewChanged;
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user