tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

browser_rules_completion-new-property_02.js (4661B)

      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 and values are autocompleted and cycled
      7 // correctly when editing new properties in the rule view.
      8 
      9 // format :
     10 //  [
     11 //    what key to press,
     12 //    modifers,
     13 //    expected input box value after keypress,
     14 //    is the popup open,
     15 //    is a suggestion selected in the popup,
     16 //    expect ruleview-changed,
     17 //  ]
     18 
     19 const OPEN = true,
     20  SELECTED = true,
     21  CHANGE = true;
     22 const testData = [
     23  ["d", {}, "display", OPEN, SELECTED, !CHANGE],
     24  ["VK_TAB", {}, "", OPEN, !SELECTED, CHANGE],
     25  ["VK_DOWN", {}, "block", OPEN, SELECTED, CHANGE],
     26  ["n", {}, "none", !OPEN, !SELECTED, CHANGE],
     27  ["VK_TAB", { shiftKey: true }, "display", !OPEN, !SELECTED, CHANGE],
     28  ["VK_BACK_SPACE", {}, "", !OPEN, !SELECTED, !CHANGE],
     29  ["o", {}, "overflow", OPEN, SELECTED, !CHANGE],
     30  ["u", {}, "outline", OPEN, SELECTED, !CHANGE],
     31  ["VK_DOWN", {}, "outline-color", OPEN, SELECTED, !CHANGE],
     32  ["VK_TAB", {}, "none", !OPEN, !SELECTED, CHANGE],
     33  ["r", {}, "rebeccapurple", OPEN, SELECTED, CHANGE],
     34  ["VK_DOWN", {}, "red", OPEN, SELECTED, CHANGE],
     35  ["VK_DOWN", {}, "revert", OPEN, SELECTED, CHANGE],
     36  ["VK_DOWN", {}, "revert-layer", OPEN, SELECTED, CHANGE],
     37  ["VK_DOWN", {}, "rgb", OPEN, SELECTED, CHANGE],
     38  ["VK_DOWN", {}, "rgba", OPEN, SELECTED, CHANGE],
     39  ["VK_DOWN", {}, "rosybrown", OPEN, SELECTED, CHANGE],
     40  ["VK_DOWN", {}, "royalblue", OPEN, SELECTED, CHANGE],
     41  ["VK_RIGHT", {}, "royalblue", !OPEN, !SELECTED, !CHANGE],
     42  [" ", {}, "royalblue aliceblue", OPEN, SELECTED, CHANGE],
     43  ["!", {}, "royalblue !important", !OPEN, !SELECTED, CHANGE],
     44  ["VK_ESCAPE", {}, null, !OPEN, !SELECTED, CHANGE],
     45 ];
     46 
     47 const TEST_URI = `
     48  <style type="text/css">
     49    h1 {
     50      border: 1px solid red;
     51    }
     52  </style>
     53  <h1>Test element</h1>
     54 `;
     55 
     56 add_task(async function () {
     57  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
     58  const { toolbox, inspector, view } = await openRuleView();
     59 
     60  info("Test autocompletion after 1st page load");
     61  await runAutocompletionTest(toolbox, inspector, view);
     62 
     63  info("Test autocompletion after page navigation");
     64  await reloadBrowser();
     65  await runAutocompletionTest(toolbox, inspector, view);
     66 });
     67 
     68 async function runAutocompletionTest(toolbox, inspector, view) {
     69  info("Selecting the test node");
     70  await selectNode("h1", inspector);
     71 
     72  info("Focusing a new css property editable property");
     73  const ruleEditor = getRuleViewRuleEditor(view, 1);
     74  let editor = await focusNewRuleViewProperty(ruleEditor);
     75 
     76  info("Starting to test for css property completion");
     77  for (let i = 0; i < testData.length; i++) {
     78    // Re-define the editor at each iteration, because the focus may have moved
     79    // from property to value and back
     80    editor = inplaceEditor(view.styleDocument.activeElement);
     81    await testCompletion(testData[i], editor, view);
     82  }
     83 }
     84 
     85 async function testCompletion(
     86  [key, modifiers, completion, open, selected, change],
     87  editor,
     88  view
     89 ) {
     90  info("Pressing key " + key);
     91  info("Expecting " + completion);
     92  info("Is popup opened: " + open);
     93  info("Is item selected: " + selected);
     94 
     95  let onDone;
     96  if (change) {
     97    // If the key triggers a ruleview-changed, wait for that event, it will
     98    // always be the last to be triggered and tells us when the preview has
     99    // been done.
    100    onDone = view.once("ruleview-changed");
    101  } else {
    102    // Otherwise, expect an after-suggest event (except if the popup gets
    103    // closed).
    104    onDone =
    105      key !== "VK_RIGHT" && key !== "VK_BACK_SPACE"
    106        ? editor.once("after-suggest")
    107        : null;
    108  }
    109 
    110  // Also listening for popup opened/closed events if needed.
    111  const popupEvent = open ? "popup-opened" : "popup-closed";
    112  const onPopupEvent =
    113    editor.popup.isOpen !== open ? once(editor.popup, popupEvent) : null;
    114 
    115  info("Synthesizing key " + key + ", modifiers: " + Object.keys(modifiers));
    116  EventUtils.synthesizeKey(key, modifiers, view.styleWindow);
    117 
    118  // Flush the debounce for the preview text.
    119  view.debounce.flush();
    120 
    121  await onDone;
    122  await onPopupEvent;
    123 
    124  info("Checking the state");
    125  if (completion !== null) {
    126    // The key might have been a TAB or shift-TAB, in which case the editor will
    127    // be a new one
    128    editor = inplaceEditor(view.styleDocument.activeElement);
    129    is(editor.input.value, completion, "Correct value is autocompleted");
    130  }
    131  if (!open) {
    132    ok(!(editor.popup && editor.popup.isOpen), "Popup is closed");
    133  } else {
    134    ok(editor.popup.isOpen, "Popup is open");
    135    is(editor.popup.selectedIndex !== -1, selected, "An item is selected");
    136  }
    137 }