browser_rules_completion-existing-property_01.js (5161B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 4 "use strict"; 5 6 // Tests that CSS property names are autocompleted and cycled correctly when 7 // editing an existing property in the rule view. 8 9 // format : 10 // [ 11 // what key to press, 12 // expected input box value after keypress, 13 // is the popup open, 14 // is a suggestion selected in the popup, 15 // ] 16 17 const OPEN = true, 18 SELECTED = true; 19 var testData = [ 20 ["VK_RIGHT", "font", !OPEN, !SELECTED], 21 ["-", "font-size", OPEN, SELECTED], 22 ["f", "font-family", OPEN, SELECTED], 23 ["VK_BACK_SPACE", "font-f", !OPEN, !SELECTED], 24 ["VK_BACK_SPACE", "font-", !OPEN, !SELECTED], 25 ["VK_BACK_SPACE", "font", !OPEN, !SELECTED], 26 ["VK_BACK_SPACE", "fon", !OPEN, !SELECTED], 27 ["VK_BACK_SPACE", "fo", !OPEN, !SELECTED], 28 ["VK_BACK_SPACE", "f", !OPEN, !SELECTED], 29 ["VK_BACK_SPACE", "", !OPEN, !SELECTED], 30 ["d", "display", OPEN, SELECTED], 31 ["VK_DOWN", "dominant-baseline", OPEN, SELECTED], 32 ["VK_DOWN", "d", OPEN, SELECTED], 33 ["VK_DOWN", "direction", OPEN, SELECTED], 34 ["VK_DOWN", "display", OPEN, SELECTED], 35 ["VK_UP", "direction", OPEN, SELECTED], 36 ["VK_UP", "d", OPEN, SELECTED], 37 ["VK_UP", "dominant-baseline", OPEN, SELECTED], 38 ["VK_UP", "display", OPEN, SELECTED], 39 ["VK_BACK_SPACE", "d", !OPEN, !SELECTED], 40 ["i", "display", OPEN, SELECTED], 41 ["s", "display", !OPEN, !SELECTED], 42 ["VK_BACK_SPACE", "dis", !OPEN, !SELECTED], 43 ["VK_BACK_SPACE", "di", !OPEN, !SELECTED], 44 ["VK_BACK_SPACE", "d", !OPEN, !SELECTED], 45 ["VK_BACK_SPACE", "", !OPEN, !SELECTED], 46 ["VK_HOME", "", !OPEN, !SELECTED], 47 ["VK_END", "", !OPEN, !SELECTED], 48 ["VK_PAGE_UP", "", !OPEN, !SELECTED], 49 ["VK_PAGE_DOWN", "", !OPEN, !SELECTED], 50 ["d", "display", OPEN, SELECTED], 51 ["VK_HOME", "display", !OPEN, !SELECTED], 52 ["VK_END", "display", !OPEN, !SELECTED], 53 // Press right key to ensure caret move to end of the input on Mac OS since 54 // Mac OS doesn't move caret after pressing HOME / END. 55 ["VK_RIGHT", "display", !OPEN, !SELECTED], 56 ["VK_BACK_SPACE", "displa", !OPEN, !SELECTED], 57 ["VK_BACK_SPACE", "displ", !OPEN, !SELECTED], 58 ["VK_BACK_SPACE", "disp", !OPEN, !SELECTED], 59 ["VK_BACK_SPACE", "dis", !OPEN, !SELECTED], 60 ["VK_BACK_SPACE", "di", !OPEN, !SELECTED], 61 ["VK_BACK_SPACE", "d", !OPEN, !SELECTED], 62 ["VK_BACK_SPACE", "", !OPEN, !SELECTED], 63 ["f", "font-size", OPEN, SELECTED], 64 ["i", "filter", OPEN, SELECTED], 65 ["VK_LEFT", "filter", !OPEN, !SELECTED], 66 ["VK_LEFT", "filter", !OPEN, !SELECTED], 67 ["i", "fiilter", !OPEN, !SELECTED], 68 ["VK_ESCAPE", null, !OPEN, !SELECTED], 69 ]; 70 71 const TEST_URI = "<h1 style='font: 24px serif'>Header</h1>"; 72 73 add_task(async function () { 74 await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); 75 const { toolbox, inspector, view } = await openRuleView(); 76 77 info("Test autocompletion after 1st page load"); 78 await runAutocompletionTest(toolbox, inspector, view); 79 80 info("Test autocompletion after page navigation"); 81 await reloadBrowser(); 82 await runAutocompletionTest(toolbox, inspector, view); 83 }); 84 85 async function runAutocompletionTest(toolbox, inspector, view) { 86 info("Selecting the test node"); 87 await selectNode("h1", inspector); 88 89 info("Focusing the css property editable field"); 90 const propertyName = view.styleDocument.querySelectorAll( 91 ".ruleview-propertyname" 92 )[0]; 93 const editor = await focusEditableField(view, propertyName); 94 95 info("Starting to test for css property completion"); 96 for (let i = 0; i < testData.length; i++) { 97 if (!testData[i].length) { 98 continue; 99 } 100 await testCompletion(testData[i], editor, view); 101 } 102 } 103 104 async function testCompletion([key, completion, open, selected], editor, view) { 105 info("Pressing key " + key); 106 info("Expecting " + completion); 107 info("Is popup opened: " + open); 108 info("Is item selected: " + selected); 109 110 // Listening for the right event that will tell us when the key has been 111 // entered and processed. 112 let onSuggest; 113 if (/(left|right|back_space|escape|home|end|page_up|page_down)/gi.test(key)) { 114 info( 115 "Adding event listener for " + 116 "left|right|back_space|escape|home|end|page_up|page_down keys" 117 ); 118 onSuggest = once(editor.input, "keypress"); 119 } else { 120 info("Waiting for after-suggest event on the editor"); 121 onSuggest = editor.once("after-suggest"); 122 } 123 124 // Also listening for popup opened/closed events if needed. 125 const popupEvent = open ? "popup-opened" : "popup-closed"; 126 const onPopupEvent = 127 editor.popup.isOpen !== open ? once(editor.popup, popupEvent) : null; 128 129 info("Synthesizing key " + key); 130 EventUtils.synthesizeKey(key, {}, view.styleWindow); 131 132 // Flush the debounce for the preview text. 133 view.debounce.flush(); 134 135 await onSuggest; 136 await onPopupEvent; 137 138 info("Checking the state"); 139 if (completion !== null) { 140 is(editor.input.value, completion, "Correct value is autocompleted"); 141 } 142 if (!open) { 143 ok(!(editor.popup && editor.popup.isOpen), "Popup is closed"); 144 } else { 145 ok(editor.popup.isOpen, "Popup is open"); 146 is(editor.popup.selectedIndex !== -1, selected, "An item is selected"); 147 } 148 }