1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/browser/devtools/styleinspector/test/browser_ruleview_edit-property-increments.js Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,176 @@
1.4 +/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
1.5 +/* Any copyright is dedicated to the Public Domain.
1.6 + http://creativecommons.org/publicdomain/zero/1.0/ */
1.7 +
1.8 +"use strict";
1.9 +
1.10 +// Test that increasing/decreasing values in rule view using
1.11 +// arrow keys works correctly.
1.12 +
1.13 +let test = asyncTest(function*() {
1.14 + yield addTab("data:text/html,sample document for bug 722691");
1.15 + createDocument();
1.16 + let {toolbox, inspector, view} = yield openRuleView();
1.17 +
1.18 + yield selectNode("#test", inspector);
1.19 +
1.20 + yield testMarginIncrements(view);
1.21 + yield testVariousUnitIncrements(view);
1.22 + yield testHexIncrements(view);
1.23 + yield testRgbIncrements(view);
1.24 + yield testShorthandIncrements(view);
1.25 + yield testOddCases(view);
1.26 +});
1.27 +
1.28 +function createDocument() {
1.29 + content.document.body.innerHTML = '<div id="test" style="' +
1.30 + 'margin-top:0px;' +
1.31 + 'padding-top: 0px;' +
1.32 + 'color:#000000;' +
1.33 + 'background-color: #000000;" >'+
1.34 + '</div>';
1.35 +}
1.36 +
1.37 +function* testMarginIncrements(view) {
1.38 + info("Testing keyboard increments on the margin property");
1.39 +
1.40 + let idRuleEditor = view.element.children[0]._ruleEditor;
1.41 + let marginPropEditor = idRuleEditor.rule.textProps[0].editor;
1.42 +
1.43 + yield runIncrementTest(marginPropEditor, view, {
1.44 + 1: {alt: true, start: "0px", end: "0.1px", selectAll: true},
1.45 + 2: {start: "0px", end: "1px", selectAll: true},
1.46 + 3: {shift: true, start: "0px", end: "10px", selectAll: true},
1.47 + 4: {down: true, alt: true, start: "0.1px", end: "0px", selectAll: true},
1.48 + 5: {down: true, start: "0px", end: "-1px", selectAll: true},
1.49 + 6: {down: true, shift: true, start: "0px", end: "-10px", selectAll: true},
1.50 + 7: {pageUp: true, shift: true, start: "0px", end: "100px", selectAll: true},
1.51 + 8: {pageDown: true, shift: true, start: "0px", end: "-100px", selectAll: true}
1.52 + });
1.53 +}
1.54 +
1.55 +function* testVariousUnitIncrements(view) {
1.56 + info("Testing keyboard increments on values with various units");
1.57 +
1.58 + let idRuleEditor = view.element.children[0]._ruleEditor;
1.59 + let paddingPropEditor = idRuleEditor.rule.textProps[1].editor;
1.60 +
1.61 + yield runIncrementTest(paddingPropEditor, view, {
1.62 + 1: {start: "0px", end: "1px", selectAll: true},
1.63 + 2: {start: "0pt", end: "1pt", selectAll: true},
1.64 + 3: {start: "0pc", end: "1pc", selectAll: true},
1.65 + 4: {start: "0em", end: "1em", selectAll: true},
1.66 + 5: {start: "0%", end: "1%", selectAll: true},
1.67 + 6: {start: "0in", end: "1in", selectAll: true},
1.68 + 7: {start: "0cm", end: "1cm", selectAll: true},
1.69 + 8: {start: "0mm", end: "1mm", selectAll: true},
1.70 + 9: {start: "0ex", end: "1ex", selectAll: true}
1.71 + });
1.72 +};
1.73 +
1.74 +function* testHexIncrements(view) {
1.75 + info("Testing keyboard increments with hex colors");
1.76 +
1.77 + let idRuleEditor = view.element.children[0]._ruleEditor;
1.78 + let hexColorPropEditor = idRuleEditor.rule.textProps[2].editor;
1.79 +
1.80 + yield runIncrementTest(hexColorPropEditor, view, {
1.81 + 1: {start: "#CCCCCC", end: "#CDCDCD", selectAll: true},
1.82 + 2: {shift: true, start: "#CCCCCC", end: "#DCDCDC", selectAll: true},
1.83 + 3: {start: "#CCCCCC", end: "#CDCCCC", selection: [1,3]},
1.84 + 4: {shift: true, start: "#CCCCCC", end: "#DCCCCC", selection: [1,3]},
1.85 + 5: {start: "#FFFFFF", end: "#FFFFFF", selectAll: true},
1.86 + 6: {down: true, shift: true, start: "#000000", end: "#000000", selectAll: true}
1.87 + });
1.88 +};
1.89 +
1.90 +function* testRgbIncrements(view) {
1.91 + info("Testing keyboard increments with rgb colors");
1.92 +
1.93 + let idRuleEditor = view.element.children[0]._ruleEditor;
1.94 + let rgbColorPropEditor = idRuleEditor.rule.textProps[3].editor;
1.95 +
1.96 + yield runIncrementTest(rgbColorPropEditor, view, {
1.97 + 1: {start: "rgb(0,0,0)", end: "rgb(0,1,0)", selection: [6,7]},
1.98 + 2: {shift: true, start: "rgb(0,0,0)", end: "rgb(0,10,0)", selection: [6,7]},
1.99 + 3: {start: "rgb(0,255,0)", end: "rgb(0,255,0)", selection: [6,9]},
1.100 + 4: {shift: true, start: "rgb(0,250,0)", end: "rgb(0,255,0)", selection: [6,9]},
1.101 + 5: {down: true, start: "rgb(0,0,0)", end: "rgb(0,0,0)", selection: [6,7]},
1.102 + 6: {down: true, shift: true, start: "rgb(0,5,0)", end: "rgb(0,0,0)", selection: [6,7]}
1.103 + });
1.104 +};
1.105 +
1.106 +function* testShorthandIncrements(view) {
1.107 + info("Testing keyboard increments within shorthand values");
1.108 +
1.109 + let idRuleEditor = view.element.children[0]._ruleEditor;
1.110 + let paddingPropEditor = idRuleEditor.rule.textProps[1].editor;
1.111 +
1.112 + yield runIncrementTest(paddingPropEditor, view, {
1.113 + 1: {start: "0px 0px 0px 0px", end: "0px 1px 0px 0px", selection: [4,7]},
1.114 + 2: {shift: true, start: "0px 0px 0px 0px", end: "0px 10px 0px 0px", selection: [4,7]},
1.115 + 3: {start: "0px 0px 0px 0px", end: "1px 0px 0px 0px", selectAll: true},
1.116 + 4: {shift: true, start: "0px 0px 0px 0px", end: "10px 0px 0px 0px", selectAll: true},
1.117 + 5: {down: true, start: "0px 0px 0px 0px", end: "0px 0px -1px 0px", selection: [8,11]},
1.118 + 6: {down: true, shift: true, start: "0px 0px 0px 0px", end: "-10px 0px 0px 0px", selectAll: true}
1.119 + });
1.120 +};
1.121 +
1.122 +function* testOddCases(view) {
1.123 + info("Testing some more odd cases");
1.124 +
1.125 + let idRuleEditor = view.element.children[0]._ruleEditor;
1.126 + let marginPropEditor = idRuleEditor.rule.textProps[0].editor;
1.127 +
1.128 + yield runIncrementTest(marginPropEditor, view, {
1.129 + 1: {start: "98.7%", end: "99.7%", selection: [3,3]},
1.130 + 2: {alt: true, start: "98.7%", end: "98.8%", selection: [3,3]},
1.131 + 3: {start: "0", end: "1"},
1.132 + 4: {down: true, start: "0", end: "-1"},
1.133 + 5: {start: "'a=-1'", end: "'a=0'", selection: [4,4]},
1.134 + 6: {start: "0 -1px", end: "0 0px", selection: [2,2]},
1.135 + 7: {start: "url(-1)", end: "url(-1)", selection: [4,4]},
1.136 + 8: {start: "url('test1.1.png')", end: "url('test1.2.png')", selection: [11,11]},
1.137 + 9: {start: "url('test1.png')", end: "url('test2.png')", selection: [9,9]},
1.138 + 10: {shift: true, start: "url('test1.1.png')", end: "url('test11.1.png')", selection: [9,9]},
1.139 + 11: {down: true, start: "url('test-1.png')", end: "url('test-2.png')", selection: [9,11]},
1.140 + 12: {start: "url('test1.1.png')", end: "url('test1.2.png')", selection: [11,12]},
1.141 + 13: {down: true, alt: true, start: "url('test-0.png')", end: "url('test--0.1.png')", selection: [10,11]},
1.142 + 14: {alt: true, start: "url('test--0.1.png')", end: "url('test-0.png')", selection: [10,14]}
1.143 + });
1.144 +};
1.145 +
1.146 +function* runIncrementTest(propertyEditor, view, tests) {
1.147 + let editor = yield focusEditableField(propertyEditor.valueSpan);
1.148 +
1.149 + for(let test in tests) {
1.150 + yield testIncrement(editor, tests[test], view);
1.151 + }
1.152 +
1.153 + // Once properties have been set, wait for the inspector to update
1.154 + yield view.inspector.once("inspector-updated");
1.155 +}
1.156 +
1.157 +function* testIncrement(editor, options, view) {
1.158 + editor.input.value = options.start;
1.159 + let input = editor.input;
1.160 +
1.161 + if (options.selectAll) {
1.162 + input.select();
1.163 + } else if (options.selection) {
1.164 + input.setSelectionRange(options.selection[0], options.selection[1]);
1.165 + }
1.166 +
1.167 + is(input.value, options.start, "Value initialized at " + options.start);
1.168 +
1.169 + let onKeyUp = once(input, "keyup");
1.170 +
1.171 + let key;
1.172 + key = options.down ? "VK_DOWN" : "VK_UP";
1.173 + key = options.pageDown ? "VK_PAGE_DOWN" : options.pageUp ? "VK_PAGE_UP" : key;
1.174 + EventUtils.synthesizeKey(key, {altKey: options.alt, shiftKey: options.shift}, view.doc.defaultView);
1.175 +
1.176 + yield onKeyUp;
1.177 + input = editor.input;
1.178 + is(input.value, options.end, "Value changed to " + options.end);
1.179 +}
