browser_inplace-editor_autocomplete_css_variable.js (4903B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 /* import-globals-from helper_inplace_editor.js */ 4 5 "use strict"; 6 7 const AutocompletePopup = require("resource://devtools/client/shared/autocomplete-popup.js"); 8 const { 9 InplaceEditor, 10 } = require("resource://devtools/client/shared/inplace-editor.js"); 11 loadHelperScript("helper_inplace_editor.js"); 12 13 // Test the inplace-editor autocomplete popup for variable suggestions. 14 // Using a mocked list of CSS variables to avoid test failures linked to 15 // engine changes (new property, removed property, ...). 16 // Also using a mocked list of CSS properties to avoid autocompletion when 17 // typing in "var" 18 19 // Used for representing the expectation of a visible color swatch 20 const COLORSWATCH = true; 21 // format : 22 // [ 23 // what key to press, 24 // expected input box value after keypress, 25 // selected suggestion index (-1 if popup is hidden), 26 // number of suggestions in the popup (0 if popup is hidden), 27 // expected post label corresponding with the input box value, 28 // boolean representing if there should be a colour swatch visible, 29 // ] 30 const SIMPLE_TEST_DATA = [ 31 ["v", "v", -1, 0, null, !COLORSWATCH], 32 ["a", "va", -1, 0, null, !COLORSWATCH], 33 ["r", "var", -1, 0, null, !COLORSWATCH], 34 ["(", "var(--abc)", 0, 9, null, !COLORSWATCH], 35 ["-", "var(--abc)", 0, 9, "inherit", !COLORSWATCH], 36 ["VK_BACK_SPACE", "var(-)", -1, 0, null, !COLORSWATCH], 37 ["-", "var(--abc)", 0, 9, "inherit", !COLORSWATCH], 38 ["VK_DOWN", "var(--def)", 1, 9, "transparent", !COLORSWATCH], 39 ["VK_DOWN", "var(--ghi)", 2, 9, "#00FF00", COLORSWATCH], 40 ["VK_DOWN", "var(--jkl)", 3, 9, "rgb(255, 0, 0)", COLORSWATCH], 41 ["VK_DOWN", "var(--mno)", 4, 9, "hsl(120, 60%, 70%)", COLORSWATCH], 42 ["VK_DOWN", "var(--pqr)", 5, 9, "BlueViolet", COLORSWATCH], 43 ["VK_DOWN", "var(--stu)", 6, 9, "15px", !COLORSWATCH], 44 ["VK_DOWN", "var(--vwx)", 7, 9, "rgba(255, 0, 0, 0.4)", COLORSWATCH], 45 ["VK_DOWN", "var(--yz)", 8, 9, "hsla(120, 60%, 70%, 0.3)", COLORSWATCH], 46 ["VK_DOWN", "var(--abc)", 0, 9, "inherit", !COLORSWATCH], 47 ["VK_DOWN", "var(--def)", 1, 9, "transparent", !COLORSWATCH], 48 ["VK_DOWN", "var(--ghi)", 2, 9, "#00FF00", COLORSWATCH], 49 ["VK_LEFT", "var(--ghi)", -1, 0, null, !COLORSWATCH], 50 ]; 51 52 const IN_FUNCTION_TEST_DATA = [ 53 ["c", "c", -1, 0, null, !COLORSWATCH], 54 ["a", "ca", -1, 0, null, !COLORSWATCH], 55 ["l", "cal", -1, 0, null, !COLORSWATCH], 56 ["c", "calc", -1, 0, null, !COLORSWATCH], 57 ["(", "calc()", -1, 0, null, !COLORSWATCH], 58 // include all the "simple test" steps, only wrapping the expected input value 59 // inside `calc()` 60 ...SIMPLE_TEST_DATA.map(data => [ 61 data[0], 62 `calc(${data[1]})`, 63 ...data.slice(2), 64 ]), 65 ]; 66 67 const FALLBACK_VALUE_TEST_DATA = [ 68 ["v", "v", -1, 0, null, !COLORSWATCH], 69 ["a", "va", -1, 0, null, !COLORSWATCH], 70 ["r", "var", -1, 0, null, !COLORSWATCH], 71 ["(", "var(--abc)", 0, 9, null, !COLORSWATCH], 72 ["VK_RIGHT", "var(--abc)", -1, 0, null, !COLORSWATCH], 73 [",", "var(--abc,wheat)", 0, 3, null, COLORSWATCH], 74 ["w", "var(--abc,wheat)", 0, 2, null, COLORSWATCH], 75 ]; 76 77 const CSS_VARIABLES = [ 78 ["--abc", "inherit"], 79 ["--def", "transparent"], 80 ["--ghi", "#00FF00"], 81 ["--jkl", "rgb(255, 0, 0)"], 82 ["--mno", "hsl(120, 60%, 70%)"], 83 ["--pqr", "BlueViolet"], 84 ["--stu", "15px"], 85 ["--vwx", "rgba(255, 0, 0, 0.4)"], 86 ["--yz", "hsla(120, 60%, 70%, 0.3)"], 87 ]; 88 89 add_task(async function () { 90 await addTab( 91 "data:text/html;charset=utf-8,inplace editor CSS variable autocomplete" 92 ); 93 const { host, doc } = await createHost(); 94 95 info("Test simple var() completion"); 96 await createEditorAndRunCompletionTest(doc, SIMPLE_TEST_DATA); 97 98 info("Test var() in calc() completion"); 99 await createEditorAndRunCompletionTest(doc, IN_FUNCTION_TEST_DATA); 100 101 info("Test var() fallback completion"); 102 await createEditorAndRunCompletionTest(doc, FALLBACK_VALUE_TEST_DATA, { 103 color: ["wheat", "white", "yellow"], 104 }); 105 106 host.destroy(); 107 gBrowser.removeCurrentTab(); 108 }); 109 110 async function createEditorAndRunCompletionTest( 111 doc, 112 testData, 113 mockValues = {} 114 ) { 115 const popup = new AutocompletePopup(doc, { autoSelect: true }); 116 117 await new Promise(resolve => { 118 createInplaceEditorAndClick( 119 { 120 start: async editor => { 121 for (const data of testData) { 122 await testCompletion(data, editor); 123 } 124 125 EventUtils.synthesizeKey("VK_RETURN", {}, editor.input.defaultView); 126 }, 127 contentType: InplaceEditor.CONTENT_TYPES.CSS_VALUE, 128 property: { 129 name: "color", 130 }, 131 cssProperties: { 132 getNames: () => Object.keys(mockValues), 133 getValues: propertyName => mockValues[propertyName] || [], 134 }, 135 getCssVariables: () => new Map(CSS_VARIABLES), 136 done: resolve, 137 popup, 138 }, 139 doc 140 ); 141 }); 142 143 popup.destroy(); 144 }