browser/devtools/markupview/test/browser_markupview_css_completion_style_attribute.js

Wed, 31 Dec 2014 06:09:35 +0100

author
Michael Schloh von Bennewitz <michael@schloh.com>
date
Wed, 31 Dec 2014 06:09:35 +0100
changeset 0
6474c204b198
permissions
-rw-r--r--

Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.

     1 /* vim: set ts=2 et sw=2 tw=80: */
     2 /* Any copyright is dedicated to the Public Domain.
     3  http://creativecommons.org/publicdomain/zero/1.0/ */
     5 "use strict";
     7 // Test CSS state is correctly determined and the corresponding suggestions are
     8 // displayed. i.e. CSS property suggestions are shown when cursor is like:
     9 // ```style="di|"``` where | is the cursor; And CSS value suggestion is
    10 // displayed when the cursor is like: ```style="display:n|"``` properly. No
    11 // suggestions should ever appear when the attribute is not a style attribute.
    12 // The correctness and cycling of the suggestions is covered in the ruleview
    13 // tests.
    15 const TEST_URL = TEST_URL_ROOT + "doc_markup_edit.html";
    16 // test data format :
    17 //  [
    18 //    what key to press,
    19 //    expected input box value after keypress,
    20 //    expected input.selectionStart,
    21 //    expected input.selectionEnd,
    22 //    is popup expected to be open ?
    23 //  ]
    24 const TEST_DATA = [
    25   ['s', 's', 1, 1, false],
    26   ['t', 'st', 2, 2, false],
    27   ['y', 'sty', 3, 3, false],
    28   ['l', 'styl', 4, 4, false],
    29   ['e', 'style', 5, 5, false],
    30   ['=', 'style=', 6, 6, false],
    31   ['"', 'style="', 7, 7, false],
    32   ['d', 'style="direction', 8, 16, true],
    33   ['VK_DOWN', 'style="display', 8, 14, true],
    34   ['VK_TAB', 'style="display', 14, 14, true],
    35   ['VK_TAB', 'style="dominant-baseline', 24, 24, true],
    36   ['VK_TAB', 'style="direction', 16, 16, true],
    37   ['click_1', 'style="display', 14, 14, false],
    38   [':', 'style="display:-moz-box', 15, 23, true],
    39   ['n', 'style="display:none', 16, 19, false],
    40   ['VK_BACK_SPACE', 'style="display:n', 16, 16, false],
    41   ['VK_BACK_SPACE', 'style="display:', 15, 15, false],
    42   [' ', 'style="display: -moz-box', 16, 24, true],
    43   [' ', 'style="display:  -moz-box', 17, 25, true],
    44   ['i', 'style="display:  inherit', 18, 24, true],
    45   ['VK_RIGHT', 'style="display:  inherit', 24, 24, false],
    46   [';', 'style="display:  inherit;', 25, 25, false],
    47   [' ', 'style="display:  inherit; ', 26, 26, false],
    48   [' ', 'style="display:  inherit;  ', 27, 27, false],
    49   ['VK_LEFT', 'style="display:  inherit;  ', 26, 26, false],
    50   ['c', 'style="display:  inherit; caption-side ', 27, 38, true],
    51   ['o', 'style="display:  inherit; color ', 28, 31, true],
    52   ['VK_RIGHT', 'style="display:  inherit; color ', 31, 31, false],
    53   [' ', 'style="display:  inherit; color  ', 32, 32, false],
    54   ['c', 'style="display:  inherit; color c ', 33, 33, false],
    55   ['VK_BACK_SPACE', 'style="display:  inherit; color  ', 32, 32, false],
    56   [':', 'style="display:  inherit; color :aliceblue ', 33, 42, true],
    57   ['c', 'style="display:  inherit; color :cadetblue ', 34, 42, true],
    58   ['VK_DOWN', 'style="display:  inherit; color :chartreuse ', 34, 43, true],
    59   ['VK_RIGHT', 'style="display:  inherit; color :chartreuse ', 43, 43, false],
    60   [' ', 'style="display:  inherit; color :chartreuse !important; ', 44, 55, true],
    61   ['!', 'style="display:  inherit; color :chartreuse !important; ', 45, 55, false],
    62   ['VK_RIGHT', 'style="display:  inherit; color :chartreuse !important; ', 55, 55, false],
    63   ['VK_RETURN', 'style="display:  inherit; color :chartreuse !important;"', -1, -1, false]
    64 ];
    66 let test = asyncTest(function*() {
    67   info("Opening the inspector on the test URL");
    68   let {inspector} = yield addTab(TEST_URL).then(openInspector);
    70   yield inspector.markup.expandAll();
    72   let node = getContainerForRawNode("#node14", inspector).editor;
    73   let attr = node.newAttr;
    74   attr.focus();
    75   EventUtils.sendKey("return", inspector.panelWin);
    76   let editor = inplaceEditor(attr);
    78   for (let i = 0; i < TEST_DATA.length; i ++) {
    79     yield enterData(i, editor, inspector);
    80     checkData(i, editor, inspector);
    81   }
    83   while (inspector.markup.undo.canUndo()) {
    84     yield undoChange(inspector);
    85   }
    87   yield inspector.once("inspector-updated");
    88 });
    90 function enterData(index, editor, inspector) {
    91   let [key] = TEST_DATA[index];
    92   info("Entering test data " + index + ": " + key + ", expecting: [" + TEST_DATA[index].slice(1) + "]");
    94   let def = promise.defer();
    96   if (/click_[0-9]/.test(key)) {
    97     let nb = +key.split("_")[1];
    98     info("Clicking on item " + nb + " in the list");
    99     editor.once("after-suggest", () => {
   100       executeSoon(def.resolve);
   101     });
   102     editor.popup._list.childNodes[nb].click();
   103     editor.input.blur();
   104     return def.promise;
   105   }
   107   if (/(down|left|right|back_space|return)/ig.test(key)) {
   108     info("Adding event listener for down|left|right|back_space|return keys");
   109     editor.input.addEventListener("keypress", function onKeypress() {
   110       if (editor.input) {
   111         editor.input.removeEventListener("keypress", onKeypress);
   112       }
   113       executeSoon(def.resolve);
   114     });
   115   } else {
   116     editor.once("after-suggest", () => {
   117       executeSoon(def.resolve);
   118     });
   119   }
   120   EventUtils.synthesizeKey(key, {}, inspector.panelWin);
   122   return def.promise;
   123 }
   125 function checkData(index, editor, inspector) {
   126   let [key, completion, selStart, selEnd, popupOpen] = TEST_DATA[index];
   127   info("Test data " + index + " entered. Checking state.");
   129   if (selEnd != -1) {
   130     is(editor.input.value, completion, "Completed value is correct");
   131     is(editor.input.selectionStart, selStart, "Selection start position is correct");
   132     is(editor.input.selectionEnd, selEnd, "Selection end position is correct");
   133     if (popupOpen) {
   134       ok(editor.popup.isOpen, "Popup is open");
   135     } else {
   136       ok(editor.popup._panel.state != "open" && editor.popup._panel.state != "showing",
   137         "Popup is closed");
   138     }
   139   } else {
   140     let editor = getContainerForRawNode("#node14", inspector).editor;
   141     let attr = editor.attrs["style"].querySelector(".editable");
   142     is(attr.textContent, completion, "Correct value is persisted after pressing Enter");
   143   }
   144 }

mercurial