devtools/client/shared/test/browser_inplace-editor_autocomplete_css_variable.js

   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 testData = [
  31   ["v", "v", -1, 0, null, !COLORSWATCH],
  32   ["a", "va", -1, 0, null, !COLORSWATCH],
  33   ["r", "var", -1, 0, null, !COLORSWATCH],
  34   ["(", "var()", -1, 0, 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 CSS_VARIABLES = [
  53   ["--abc", "inherit"],
  54   ["--def", "transparent"],
  55   ["--ghi", "#00FF00"],
  56   ["--jkl", "rgb(255, 0, 0)"],
  57   ["--mno", "hsl(120, 60%, 70%)"],
  58   ["--pqr", "BlueViolet"],
  59   ["--stu", "15px"],
  60   ["--vwx", "rgba(255, 0, 0, 0.4)"],
  61   ["--yz", "hsla(120, 60%, 70%, 0.3)"],
  62 ];
  63
  64 add_task(async function () {
  65   await addTab(
  66     "data:text/html;charset=utf-8,inplace editor CSS variable autocomplete"
  67   );
  68   const { host, doc } = await createHost();
  69
  70   const popup = new AutocompletePopup(doc, { autoSelect: true });
  71
  72   await new Promise(resolve => {
  73     createInplaceEditorAndClick(
  74       {
  75         start: runAutocompletionTest,
  76         contentType: InplaceEditor.CONTENT_TYPES.CSS_VALUE,
  77         property: {
  78           name: "color",
  79         },
  80         cssProperties: {
  81           getNames: () => [],
  82           getValues: () => [],
  83         },
  84         cssVariables: new Map(CSS_VARIABLES),
  85         done: resolve,
  86         popup,
  87       },
  88       doc
  89     );
  90   });
  91
  92   popup.destroy();
  93   host.destroy();
  94   gBrowser.removeCurrentTab();
  95 });
  96
  97 const runAutocompletionTest = async function (editor) {
  98   info("Starting to test for css variable completion");
  99   for (const data of testData) {
 100     await testCompletion(data, editor);
 101   }
 102
 103   EventUtils.synthesizeKey("VK_RETURN", {}, editor.input.defaultView);
 104 };