1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/browser/devtools/markupview/test/browser_markupview_css_completion_style_attribute.js Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,144 @@
1.4 +/* vim: set ts=2 et sw=2 tw=80: */
1.5 +/* Any copyright is dedicated to the Public Domain.
1.6 + http://creativecommons.org/publicdomain/zero/1.0/ */
1.7 +
1.8 +"use strict";
1.9 +
1.10 +// Test CSS state is correctly determined and the corresponding suggestions are
1.11 +// displayed. i.e. CSS property suggestions are shown when cursor is like:
1.12 +// ```style="di|"``` where | is the cursor; And CSS value suggestion is
1.13 +// displayed when the cursor is like: ```style="display:n|"``` properly. No
1.14 +// suggestions should ever appear when the attribute is not a style attribute.
1.15 +// The correctness and cycling of the suggestions is covered in the ruleview
1.16 +// tests.
1.17 +
1.18 +const TEST_URL = TEST_URL_ROOT + "doc_markup_edit.html";
1.19 +// test data format :
1.20 +// [
1.21 +// what key to press,
1.22 +// expected input box value after keypress,
1.23 +// expected input.selectionStart,
1.24 +// expected input.selectionEnd,
1.25 +// is popup expected to be open ?
1.26 +// ]
1.27 +const TEST_DATA = [
1.28 + ['s', 's', 1, 1, false],
1.29 + ['t', 'st', 2, 2, false],
1.30 + ['y', 'sty', 3, 3, false],
1.31 + ['l', 'styl', 4, 4, false],
1.32 + ['e', 'style', 5, 5, false],
1.33 + ['=', 'style=', 6, 6, false],
1.34 + ['"', 'style="', 7, 7, false],
1.35 + ['d', 'style="direction', 8, 16, true],
1.36 + ['VK_DOWN', 'style="display', 8, 14, true],
1.37 + ['VK_TAB', 'style="display', 14, 14, true],
1.38 + ['VK_TAB', 'style="dominant-baseline', 24, 24, true],
1.39 + ['VK_TAB', 'style="direction', 16, 16, true],
1.40 + ['click_1', 'style="display', 14, 14, false],
1.41 + [':', 'style="display:-moz-box', 15, 23, true],
1.42 + ['n', 'style="display:none', 16, 19, false],
1.43 + ['VK_BACK_SPACE', 'style="display:n', 16, 16, false],
1.44 + ['VK_BACK_SPACE', 'style="display:', 15, 15, false],
1.45 + [' ', 'style="display: -moz-box', 16, 24, true],
1.46 + [' ', 'style="display: -moz-box', 17, 25, true],
1.47 + ['i', 'style="display: inherit', 18, 24, true],
1.48 + ['VK_RIGHT', 'style="display: inherit', 24, 24, false],
1.49 + [';', 'style="display: inherit;', 25, 25, false],
1.50 + [' ', 'style="display: inherit; ', 26, 26, false],
1.51 + [' ', 'style="display: inherit; ', 27, 27, false],
1.52 + ['VK_LEFT', 'style="display: inherit; ', 26, 26, false],
1.53 + ['c', 'style="display: inherit; caption-side ', 27, 38, true],
1.54 + ['o', 'style="display: inherit; color ', 28, 31, true],
1.55 + ['VK_RIGHT', 'style="display: inherit; color ', 31, 31, false],
1.56 + [' ', 'style="display: inherit; color ', 32, 32, false],
1.57 + ['c', 'style="display: inherit; color c ', 33, 33, false],
1.58 + ['VK_BACK_SPACE', 'style="display: inherit; color ', 32, 32, false],
1.59 + [':', 'style="display: inherit; color :aliceblue ', 33, 42, true],
1.60 + ['c', 'style="display: inherit; color :cadetblue ', 34, 42, true],
1.61 + ['VK_DOWN', 'style="display: inherit; color :chartreuse ', 34, 43, true],
1.62 + ['VK_RIGHT', 'style="display: inherit; color :chartreuse ', 43, 43, false],
1.63 + [' ', 'style="display: inherit; color :chartreuse !important; ', 44, 55, true],
1.64 + ['!', 'style="display: inherit; color :chartreuse !important; ', 45, 55, false],
1.65 + ['VK_RIGHT', 'style="display: inherit; color :chartreuse !important; ', 55, 55, false],
1.66 + ['VK_RETURN', 'style="display: inherit; color :chartreuse !important;"', -1, -1, false]
1.67 +];
1.68 +
1.69 +let test = asyncTest(function*() {
1.70 + info("Opening the inspector on the test URL");
1.71 + let {inspector} = yield addTab(TEST_URL).then(openInspector);
1.72 +
1.73 + yield inspector.markup.expandAll();
1.74 +
1.75 + let node = getContainerForRawNode("#node14", inspector).editor;
1.76 + let attr = node.newAttr;
1.77 + attr.focus();
1.78 + EventUtils.sendKey("return", inspector.panelWin);
1.79 + let editor = inplaceEditor(attr);
1.80 +
1.81 + for (let i = 0; i < TEST_DATA.length; i ++) {
1.82 + yield enterData(i, editor, inspector);
1.83 + checkData(i, editor, inspector);
1.84 + }
1.85 +
1.86 + while (inspector.markup.undo.canUndo()) {
1.87 + yield undoChange(inspector);
1.88 + }
1.89 +
1.90 + yield inspector.once("inspector-updated");
1.91 +});
1.92 +
1.93 +function enterData(index, editor, inspector) {
1.94 + let [key] = TEST_DATA[index];
1.95 + info("Entering test data " + index + ": " + key + ", expecting: [" + TEST_DATA[index].slice(1) + "]");
1.96 +
1.97 + let def = promise.defer();
1.98 +
1.99 + if (/click_[0-9]/.test(key)) {
1.100 + let nb = +key.split("_")[1];
1.101 + info("Clicking on item " + nb + " in the list");
1.102 + editor.once("after-suggest", () => {
1.103 + executeSoon(def.resolve);
1.104 + });
1.105 + editor.popup._list.childNodes[nb].click();
1.106 + editor.input.blur();
1.107 + return def.promise;
1.108 + }
1.109 +
1.110 + if (/(down|left|right|back_space|return)/ig.test(key)) {
1.111 + info("Adding event listener for down|left|right|back_space|return keys");
1.112 + editor.input.addEventListener("keypress", function onKeypress() {
1.113 + if (editor.input) {
1.114 + editor.input.removeEventListener("keypress", onKeypress);
1.115 + }
1.116 + executeSoon(def.resolve);
1.117 + });
1.118 + } else {
1.119 + editor.once("after-suggest", () => {
1.120 + executeSoon(def.resolve);
1.121 + });
1.122 + }
1.123 + EventUtils.synthesizeKey(key, {}, inspector.panelWin);
1.124 +
1.125 + return def.promise;
1.126 +}
1.127 +
1.128 +function checkData(index, editor, inspector) {
1.129 + let [key, completion, selStart, selEnd, popupOpen] = TEST_DATA[index];
1.130 + info("Test data " + index + " entered. Checking state.");
1.131 +
1.132 + if (selEnd != -1) {
1.133 + is(editor.input.value, completion, "Completed value is correct");
1.134 + is(editor.input.selectionStart, selStart, "Selection start position is correct");
1.135 + is(editor.input.selectionEnd, selEnd, "Selection end position is correct");
1.136 + if (popupOpen) {
1.137 + ok(editor.popup.isOpen, "Popup is open");
1.138 + } else {
1.139 + ok(editor.popup._panel.state != "open" && editor.popup._panel.state != "showing",
1.140 + "Popup is closed");
1.141 + }
1.142 + } else {
1.143 + let editor = getContainerForRawNode("#node14", inspector).editor;
1.144 + let attr = editor.attrs["style"].querySelector(".editable");
1.145 + is(attr.textContent, completion, "Correct value is persisted after pressing Enter");
1.146 + }
1.147 +}
