Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
/* Any copyright is dedicated to the Public Domain.
"use strict";
// Test that increasing/decreasing values in rule view using
// arrow keys works correctly.
requestLongerTimeout(2);
const lazy = {};
ChromeUtils.defineESModuleGetters(lazy, {
});
const TEST_URI = `
<style>
#test {
margin-top: 0px;
padding-top: 0px;
color: #000000;
background-color: #000000;
background: none;
transition: initial;
z-index: 0;
opacity: 1;
line-height: 1;
--custom: 0;
}
</style>
<div id="test"></div>
`;
add_task(async function () {
await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
const { inspector, view } = await openRuleView();
await selectNode("#test", inspector);
await testMarginIncrements(view);
await testVariousUnitIncrements(view);
await testHexIncrements(view);
await testAlphaHexIncrements(view);
await testRgbIncrements(view);
await testHslIncrements(view);
await testRgbCss4Increments(view);
await testHslCss4Increments(view);
await testHwbIncrements(view);
await testShorthandIncrements(view);
await testOddCases(view);
await testZeroValueIncrements(view);
await testOpacityIncrements(view);
await testLineHeightIncrements(view);
await testCssVariableIncrements(view);
});
async function testMarginIncrements(view) {
info("Testing keyboard increments on the margin property");
const marginPropEditor = getTextProperty(view, 1, {
"margin-top": "0px",
}).editor;
await runIncrementTest(marginPropEditor, view, {
1: {
...getSmallIncrementKey(),
start: "0px",
end: "0.1px",
selectAll: true,
},
2: { start: "0px", end: "1px", selectAll: true },
3: { shift: true, start: "0px", end: "10px", selectAll: true },
4: {
down: true,
...getSmallIncrementKey(),
start: "0.1px",
end: "0px",
selectAll: true,
},
5: { down: true, start: "0px", end: "-1px", selectAll: true },
6: { down: true, shift: true, start: "0px", end: "-10px", selectAll: true },
7: {
pageUp: true,
shift: true,
start: "0px",
end: "100px",
selectAll: true,
},
8: {
pageDown: true,
shift: true,
start: "0px",
end: "-100px",
selectAll: true,
},
9: { start: "0", end: "1px", selectAll: true },
10: { down: true, start: "0", end: "-1px", selectAll: true },
});
}
async function testVariousUnitIncrements(view) {
info("Testing keyboard increments on values with various units");
const paddingPropEditor = getTextProperty(view, 1, {
"padding-top": "0px",
}).editor;
await runIncrementTest(paddingPropEditor, view, {
1: { start: "0px", end: "1px", selectAll: true },
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 },
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 },
10: { start: "0", end: "1px", selectAll: true },
11: { down: true, start: "0", end: "-1px", selectAll: true },
});
}
async function testHexIncrements(view) {
info("Testing keyboard increments with hex colors");
const hexColorPropEditor = getTextProperty(view, 1, {
color: "#000000",
}).editor;
await 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] },
5: { start: "#FFFFFF", end: "#FFFFFF", selectAll: true },
6: {
down: true,
shift: true,
start: "#000000",
end: "#000000",
selectAll: true,
},
});
}
async function testAlphaHexIncrements(view) {
info("Testing keyboard increments with alpha hex colors");
const hexColorPropEditor = getTextProperty(view, 1, {
color: "#000000",
}).editor;
await runIncrementTest(hexColorPropEditor, view, {
1: { start: "#CCCCCCAA", end: "#CDCDCDAB", selectAll: true },
2: { shift: true, start: "#CCCCCCAA", end: "#DCDCDCBA", selectAll: true },
3: { start: "#CCCCCCAA", end: "#CDCCCCAA", selection: [1, 3] },
4: { shift: true, start: "#CCCCCCAA", end: "#DCCCCCAA", selection: [1, 3] },
5: { start: "#FFFFFFFF", end: "#FFFFFFFF", selectAll: true },
6: {
down: true,
shift: true,
start: "#00000000",
end: "#00000000",
selectAll: true,
},
});
}
async function testRgbIncrements(view) {
info("Testing keyboard increments with rgb(a) colors");
const rgbColorPropEditor = getTextProperty(view, 1, {
"background-color": "#000000",
}).editor;
await 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],
},
7: {
start: "rgba(0,0,0,1)",
end: "rgba(0,0,0,1)",
selection: [11, 12],
},
8: {
...getSmallIncrementKey(),
start: "rgba(0,0,0,0.5)",
end: "rgba(0,0,0,0.6)",
selection: [12, 13],
},
9: {
down: true,
start: "rgba(0,0,0,0)",
end: "rgba(0,0,0,0)",
selection: [11, 12],
},
});
}
async function testHslIncrements(view) {
info("Testing keyboard increments with hsl(a) colors");
const hslColorPropEditor = getTextProperty(view, 1, {
"background-color": "#000000",
}).editor;
await runIncrementTest(hslColorPropEditor, view, {
1: { start: "hsl(0,0%,0%)", end: "hsl(0,1%,0%)", selection: [6, 8] },
2: {
shift: true,
start: "hsl(0,0%,0%)",
end: "hsl(0,10%,0%)",
selection: [6, 8],
},
3: { start: "hsl(0,100%,0%)", end: "hsl(0,100%,0%)", selection: [6, 10] },
4: {
shift: true,
start: "hsl(0,95%,0%)",
end: "hsl(0,100%,0%)",
selection: [6, 10],
},
5: {
down: true,
start: "hsl(0,0%,0%)",
end: "hsl(0,0%,0%)",
selection: [6, 8],
},
6: {
down: true,
shift: true,
start: "hsl(0,5%,0%)",
end: "hsl(0,0%,0%)",
selection: [6, 8],
},
7: {
start: "hsla(0,0%,0%,1)",
end: "hsla(0,0%,0%,1)",
selection: [13, 14],
},
8: {
...getSmallIncrementKey(),
start: "hsla(0,0%,0%,0.5)",
end: "hsla(0,0%,0%,0.6)",
selection: [14, 15],
},
9: {
down: true,
start: "hsla(0,0%,0%,0)",
end: "hsla(0,0%,0%,0)",
selection: [13, 14],
},
});
}
async function testRgbCss4Increments(view) {
info("Testing keyboard increments with rgb colors using CSS 4 Color syntax");
const rgbColorPropEditor = getTextProperty(view, 1, {
"background-color": "#000000",
}).editor;
await 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],
},
7: {
start: "rgb(0 0 0/1)",
end: "rgb(0 0 0/1)",
selection: [10, 11],
},
8: {
...getSmallIncrementKey(),
start: "rgb(0 0 0/0.5)",
end: "rgb(0 0 0/0.6)",
selection: [11, 12],
},
9: {
down: true,
start: "rgb(0 0 0/0)",
end: "rgb(0 0 0/0)",
selection: [10, 11],
},
});
}
async function testHslCss4Increments(view) {
info("Testing keyboard increments with hsl colors using CSS 4 Color syntax");
const hslColorPropEditor = getTextProperty(view, 1, {
"background-color": "#000000",
}).editor;
await runIncrementTest(hslColorPropEditor, view, {
1: { start: "hsl(0 0% 0%)", end: "hsl(0 1% 0%)", selection: [6, 8] },
2: {
shift: true,
start: "hsl(0 0% 0%)",
end: "hsl(0 10% 0%)",
selection: [6, 8],
},
3: { start: "hsl(0 100% 0%)", end: "hsl(0 100% 0%)", selection: [6, 10] },
4: {
shift: true,
start: "hsl(0 95% 0%)",
end: "hsl(0 100% 0%)",
selection: [6, 10],
},
5: {
down: true,
start: "hsl(0 0% 0%)",
end: "hsl(0 0% 0%)",
selection: [6, 8],
},
6: {
down: true,
shift: true,
start: "hsl(0 5% 0%)",
end: "hsl(0 0% 0%)",
selection: [6, 8],
},
7: {
start: "hsl(0 0% 0%/1)",
end: "hsl(0 0% 0%/1)",
selection: [12, 13],
},
8: {
...getSmallIncrementKey(),
start: "hsl(0 0% 0%/0.5)",
end: "hsl(0 0% 0%/0.6)",
selection: [13, 14],
},
9: {
down: true,
start: "hsl(0 0% 0%/0)",
end: "hsl(0 0% 0%/0)",
selection: [12, 13],
},
});
}
async function testHwbIncrements(view) {
info("Testing keyboard increments with hwb colors");
const hwbColorPropEditor = getTextProperty(view, 1, {
"background-color": "#000000",
}).editor;
await runIncrementTest(hwbColorPropEditor, view, {
1: { start: "hwb(0 0% 0%)", end: "hwb(0 1% 0%)", selection: [6, 8] },
2: {
shift: true,
start: "hwb(0 0% 0%)",
end: "hwb(0 10% 0%)",
selection: [6, 8],
},
3: { start: "hwb(0 100% 0%)", end: "hwb(0 100% 0%)", selection: [6, 10] },
4: {
shift: true,
start: "hwb(0 95% 0%)",
end: "hwb(0 100% 0%)",
selection: [6, 10],
},
5: {
down: true,
start: "hwb(0 0% 0%)",
end: "hwb(0 0% 0%)",
selection: [6, 8],
},
6: {
down: true,
shift: true,
start: "hwb(0 5% 0%)",
end: "hwb(0 0% 0%)",
selection: [6, 8],
},
7: {
start: "hwb(0 0% 0%/1)",
end: "hwb(0 0% 0%/1)",
selection: [12, 13],
},
8: {
...getSmallIncrementKey(),
start: "hwb(0 0% 0%/0.5)",
end: "hwb(0 0% 0%/0.6)",
selection: [13, 14],
},
9: {
down: true,
start: "hwb(0 0% 0%/0)",
end: "hwb(0 0% 0%/0)",
selection: [12, 13],
},
});
}
async function testShorthandIncrements(view) {
info("Testing keyboard increments within shorthand values");
const paddingPropEditor = getTextProperty(view, 1, {
"padding-top": "0px",
}).editor;
await 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],
},
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],
},
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,
...getSmallIncrementKey(),
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],
},
});
}
async function testOddCases(view) {
info("Testing some more odd cases");
const marginPropEditor = getTextProperty(view, 1, {
"margin-top": "0px",
}).editor;
await runIncrementTest(marginPropEditor, view, {
1: { start: "98.7%", end: "99.7%", selection: [3, 3] },
2: {
...getSmallIncrementKey(),
start: "98.7%",
end: "98.8%",
selection: [3, 3],
},
3: { start: "0", end: "1px" },
4: { down: true, start: "0", end: "-1px" },
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,
...getSmallIncrementKey(),
start: "url('test-0.png')",
end: "url('test--0.1.png')",
selection: [10, 11],
},
14: {
...getSmallIncrementKey(),
start: "url('test--0.1.png')",
end: "url('test-0.png')",
selection: [10, 14],
},
});
}
async function testZeroValueIncrements(view) {
info("Testing a valid unit is added when incrementing from 0");
const backgroundPropEditor = getTextProperty(view, 1, {
background: "none",
}).editor;
await runIncrementTest(backgroundPropEditor, view, {
1: {
start: "url(test-0.png) no-repeat 0 0",
end: "url(test-0.png) no-repeat 1px 0",
selection: [26, 26],
},
2: {
start: "url(test-0.png) no-repeat 0 0",
end: "url(test-0.png) no-repeat 0 1px",
selection: [28, 28],
},
3: {
start: "url(test-0.png) no-repeat center/0",
end: "url(test-0.png) no-repeat center/1px",
selection: [34, 34],
},
4: {
start: "url(test-0.png) no-repeat 0 0",
end: "url(test-1.png) no-repeat 0 0",
selection: [10, 10],
},
5: {
start: "linear-gradient(0, red 0, blue 0)",
end: "linear-gradient(1deg, red 0, blue 0)",
selection: [17, 17],
},
6: {
start: "linear-gradient(1deg, red 0, blue 0)",
end: "linear-gradient(1deg, red 1px, blue 0)",
selection: [27, 27],
},
7: {
start: "linear-gradient(1deg, red 0, blue 0)",
end: "linear-gradient(1deg, red 0, blue 1px)",
selection: [35, 35],
},
});
const transitionPropEditor = getTextProperty(view, 1, {
transition: "initial",
}).editor;
await runIncrementTest(transitionPropEditor, view, {
1: { start: "all 0 ease-out", end: "all 1s ease-out", selection: [5, 5] },
2: {
start: "margin 4s, color 0",
end: "margin 4s, color 1s",
selection: [18, 18],
},
});
const zIndexPropEditor = getTextProperty(view, 1, { "z-index": "0" }).editor;
await runIncrementTest(zIndexPropEditor, view, {
1: { start: "0", end: "1", selection: [1, 1] },
});
}
async function testOpacityIncrements(view) {
info("Testing keyboard increments on the opacity property");
const opacityPropEditor = getTextProperty(view, 1, { opacity: "1" }).editor;
await runIncrementTest(opacityPropEditor, view, {
1: {
...getSmallIncrementKey(),
start: "0.5",
end: "0.51",
selectAll: true,
},
2: { start: "0", end: "0.1", selectAll: true },
3: { shift: true, start: "0", end: "1", selectAll: true },
4: {
down: true,
...getSmallIncrementKey(),
start: "0.1",
end: "0.09",
selectAll: true,
},
5: { down: true, start: "0", end: "-0.1", selectAll: true },
6: { down: true, shift: true, start: "0", end: "-1", selectAll: true },
7: { pageUp: true, shift: true, start: "0", end: "10", selectAll: true },
8: { pageDown: true, shift: true, start: "0", end: "-10", selectAll: true },
9: { start: "0.7", end: "0.8", selectAll: true },
10: { down: true, start: "0", end: "-0.1", selectAll: true },
});
}
async function testLineHeightIncrements(view) {
info("Testing keyboard increments on the line height property");
const opacityPropEditor = getTextProperty(view, 1, {
"line-height": "1",
}).editor;
// line-height accepts both values with or without units, check that we don't
// force using a unit if none was specified.
await runIncrementTest(opacityPropEditor, view, {
1: {
...getSmallIncrementKey(),
start: "0",
end: "0.1",
selectAll: true,
},
2: {
...getSmallIncrementKey(),
start: "0px",
end: "0.1px",
selectAll: true,
},
3: {
start: "0",
end: "1",
selectAll: true,
},
4: {
start: "0px",
end: "1px",
selectAll: true,
},
5: {
down: true,
...getSmallIncrementKey(),
start: "0",
end: "-0.1",
selectAll: true,
},
6: {
down: true,
...getSmallIncrementKey(),
start: "0px",
end: "-0.1px",
selectAll: true,
},
7: {
down: true,
start: "0",
end: "-1",
selectAll: true,
},
8: {
down: true,
start: "0px",
end: "-1px",
selectAll: true,
},
});
}
async function testCssVariableIncrements(view) {
info("Testing keyboard increments on the css variable property");
const opacityPropEditor = getTextProperty(view, 1, {
"--custom": "0",
}).editor;
await runIncrementTest(opacityPropEditor, view, {
1: {
...getSmallIncrementKey(),
start: "0",
end: "0.1",
selectAll: true,
},
2: {
start: "0",
end: "1",
selectAll: true,
},
3: {
down: true,
...getSmallIncrementKey(),
start: "0",
end: "-0.1",
selectAll: true,
},
4: {
down: true,
start: "0",
end: "-1",
selectAll: true,
},
});
}
async function runIncrementTest(propertyEditor, view, tests) {
propertyEditor.valueSpan.scrollIntoView();
const editor = await focusEditableField(view, propertyEditor.valueSpan);
for (const test in tests) {
await 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).
const onRuleViewChanged = view.once("ruleview-changed");
EventUtils.synthesizeKey("VK_ESCAPE", {}, view.styleWindow);
view.debounce.flush();
await onRuleViewChanged;
}
async function testIncrement(editor, options, view) {
editor.input.value = options.start;
const input = editor.input;
if (options.selectAll) {
input.select();
} else if (options.selection) {
input.setSelectionRange(options.selection[0], options.selection[1]);
}
is(input.value, options.start, "Value initialized at " + options.start);
const onRuleViewChanged = view.once("ruleview-changed");
const onKeyUp = once(input, "keyup");
let key;
key = options.down ? "VK_DOWN" : "VK_UP";
if (options.pageDown) {
key = "VK_PAGE_DOWN";
} else if (options.pageUp) {
key = "VK_PAGE_UP";
}
let smallIncrementKey = { ctrlKey: options.ctrl };
if (lazy.AppConstants.platform === "macosx") {
smallIncrementKey = { altKey: options.alt };
}
EventUtils.synthesizeKey(
key,
{ ...smallIncrementKey, shiftKey: options.shift },
view.styleWindow
);
await onKeyUp;
// Only expect a change if the value actually changed!
if (options.start !== options.end) {
view.debounce.flush();
await onRuleViewChanged;
}
is(input.value, options.end, "Value changed to " + options.end);
}
function getSmallIncrementKey() {
if (lazy.AppConstants.platform === "macosx") {
return { alt: true };
}
return { ctrl: true };
}