diff options
Diffstat (limited to 'devtools/client/inspector/rules/test/browser_rules_completion-new-property_multiline.js')
-rw-r--r-- | devtools/client/inspector/rules/test/browser_rules_completion-new-property_multiline.js | 140 |
1 files changed, 140 insertions, 0 deletions
diff --git a/devtools/client/inspector/rules/test/browser_rules_completion-new-property_multiline.js b/devtools/client/inspector/rules/test/browser_rules_completion-new-property_multiline.js new file mode 100644 index 0000000000..ba892ea8aa --- /dev/null +++ b/devtools/client/inspector/rules/test/browser_rules_completion-new-property_multiline.js @@ -0,0 +1,140 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test the behaviour of the CSS autocomplete for CSS value displayed on +// multiple lines. Expected behavior is: +// - UP/DOWN should navigate in the input and not increment/decrement numbers +// - typing a new value should still trigger the autocomplete +// - UP/DOWN when the autocomplete popup is displayed should cycle through +// suggestions + +const LONG_CSS_VALUE = + "transparent linear-gradient(0deg, blue 0%, white 5%, red 10%, blue 15%, " + + "white 20%, red 25%, blue 30%, white 35%, red 40%, blue 45%, white 50%, " + + "red 55%, blue 60%, white 65%, red 70%, blue 75%, white 80%, red 85%, " + + "blue 90%, white 95% ) repeat scroll 0% 0%"; + +const EXPECTED_CSS_VALUE = LONG_CSS_VALUE.replace("95%", "95%, red"); + +const TEST_URI = `<style> + .title { + background: ${LONG_CSS_VALUE}; + } + </style> + <h1 class=title>Header</h1>`; + +add_task(async function () { + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + const { inspector, view } = await openRuleView(); + + info("Selecting the test node"); + await selectNode("h1", inspector); + + info("Focusing the property editable field"); + const prop = getTextProperty(view, 1, { background: LONG_CSS_VALUE }); + + // Calculate offsets to click in the middle of the first box quad. + const rect = prop.editor.valueSpan.getBoundingClientRect(); + const firstQuadBounds = prop.editor.valueSpan.getBoxQuads()[0].getBounds(); + // For a multiline value, the first quad left edge is not aligned with the + // bounding rect left edge. The offsets expected by focusEditableField are + // relative to the bouding rectangle, so we need to translate the x-offset. + const x = firstQuadBounds.left - rect.left + firstQuadBounds.width / 2; + // The first quad top edge is aligned with the bounding top edge, no + // translation needed here. + const y = firstQuadBounds.height / 2; + + info("Focusing the css property editable value"); + const editor = await focusEditableField(view, prop.editor.valueSpan, x, y); + + info("Moving the caret next to a number"); + let pos = editor.input.value.indexOf("0deg") + 1; + editor.input.setSelectionRange(pos, pos); + is( + editor.input.value[editor.input.selectionStart - 1], + "0", + "Input caret is after a 0" + ); + + info("Check that UP/DOWN navigates in the input, even when next to a number"); + EventUtils.synthesizeKey("VK_DOWN", {}, view.styleWindow); + Assert.notStrictEqual(editor.input.selectionStart, pos, "Input caret moved"); + is(editor.input.value, LONG_CSS_VALUE, "Input value was not decremented."); + + info("Move the caret to the end of the gradient definition."); + pos = editor.input.value.indexOf("95%") + 3; + editor.input.setSelectionRange(pos, pos); + + info('Sending ", re" to the editable field.'); + for (const key of ", re") { + await synthesizeKeyForAutocomplete(key, editor, view.styleWindow); + } + + info("Check the autocomplete can still be displayed."); + ok(editor.popup && editor.popup.isOpen, "Autocomplete popup is displayed."); + is( + editor.popup.selectedIndex, + 0, + "Autocomplete has an item selected by default" + ); + + let item = editor.popup.getItemAtIndex(editor.popup.selectedIndex); + is( + item.label, + "rebeccapurple", + "Check autocomplete displays expected value." + ); + + info("Check autocomplete suggestions can be cycled using UP/DOWN arrows."); + + await synthesizeKeyForAutocomplete("VK_DOWN", editor, view.styleWindow); + is(editor.popup.selectedIndex, 1, "Using DOWN cycles autocomplete values."); + await synthesizeKeyForAutocomplete("VK_DOWN", editor, view.styleWindow); + is(editor.popup.selectedIndex, 2, "Using DOWN cycles autocomplete values."); + await synthesizeKeyForAutocomplete("VK_UP", editor, view.styleWindow); + is(editor.popup.selectedIndex, 1, "Using UP cycles autocomplete values."); + item = editor.popup.getItemAtIndex(editor.popup.selectedIndex); + is(item.label, "red", "Check autocomplete displays expected value."); + + info("Select the background-color suggestion with a mouse click."); + let onRuleviewChanged = view.once("ruleview-changed"); + const onSuggest = editor.once("after-suggest"); + + const node = editor.popup._list.childNodes[editor.popup.selectedIndex]; + EventUtils.synthesizeMouseAtCenter(node, {}, editor.popup._window); + + view.debounce.flush(); + await onSuggest; + await onRuleviewChanged; + + is( + editor.input.value, + EXPECTED_CSS_VALUE, + "Input value correctly autocompleted" + ); + + info("Press ESCAPE to leave the input."); + onRuleviewChanged = view.once("ruleview-changed"); + EventUtils.synthesizeKey("VK_ESCAPE", {}, view.styleWindow); + await onRuleviewChanged; +}); + +/** + * Send the provided key to the currently focused input of the provided window. + * Wait for the editor to emit "after-suggest" to make sure the autocompletion + * process is finished. + * + * @param {String} key + * The key to send to the input. + * @param {InplaceEditor} editor + * The inplace editor which owns the focused input. + * @param {Window} win + * Window in which the key event will be dispatched. + */ +async function synthesizeKeyForAutocomplete(key, editor, win) { + const onSuggest = editor.once("after-suggest"); + EventUtils.synthesizeKey(key, {}, win); + await onSuggest; +} |