1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/browser/devtools/layoutview/test/browser_editablemodel.js Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,146 @@
1.4 +/* Any copyright is dedicated to the Public Domain.
1.5 + http://creativecommons.org/publicdomain/zero/1.0/ */
1.6 +
1.7 +function getStyle(node, property) {
1.8 + return node.style.getPropertyValue(property);
1.9 +}
1.10 +
1.11 +let doc;
1.12 +let inspector;
1.13 +
1.14 +let test = asyncTest(function*() {
1.15 + let style = "div { margin: 10px; padding: 3px } #div1 { margin-top: 5px } #div2 { border-bottom: 1em solid black; } #div3 { padding: 2em; }";
1.16 + let html = "<style>" + style + "</style><div id='div1'></div><div id='div2'></div><div id='div3'></div>"
1.17 +
1.18 + let content = yield loadTab("data:text/html," + encodeURIComponent(html));
1.19 + doc = content.document;
1.20 +
1.21 + let target = TargetFactory.forTab(gBrowser.selectedTab);
1.22 + let toolbox = yield gDevTools.showToolbox(target, "inspector");
1.23 + inspector = toolbox.getCurrentPanel();
1.24 +
1.25 + inspector.sidebar.select("layoutview");
1.26 + yield inspector.sidebar.once("layoutview-ready");
1.27 + yield runTests();
1.28 + // TODO: Closing the toolbox in this test leaks - bug 994314
1.29 + // yield gDevTools.closeToolbox(target);
1.30 +});
1.31 +
1.32 +addTest("Test that editing margin dynamically updates the document, pressing escape cancels the changes",
1.33 +function*() {
1.34 + let node = doc.getElementById("div1");
1.35 + is(getStyle(node, "margin-top"), "", "Should be no margin-top on the element.")
1.36 + let view = yield selectNode(node);
1.37 +
1.38 + let span = view.document.querySelector(".margin.top > span");
1.39 + is(span.textContent, 5, "Should have the right value in the box model.");
1.40 +
1.41 + EventUtils.synthesizeMouseAtCenter(span, {}, view);
1.42 + let editor = view.document.querySelector(".styleinspector-propertyeditor");
1.43 + ok(editor, "Should have opened the editor.");
1.44 + is(editor.value, "5px", "Should have the right value in the editor.");
1.45 +
1.46 + EventUtils.synthesizeKey("3", {}, view);
1.47 + yield waitForUpdate();
1.48 +
1.49 + is(getStyle(node, "margin-top"), "3px", "Should have updated the margin.");
1.50 +
1.51 + EventUtils.synthesizeKey("VK_ESCAPE", {}, view);
1.52 + yield waitForUpdate();
1.53 +
1.54 + is(getStyle(node, "margin-top"), "", "Should be no margin-top on the element.")
1.55 + is(span.textContent, 5, "Should have the right value in the box model.");
1.56 +});
1.57 +
1.58 +addTest("Test that arrow keys work correctly and pressing enter commits the changes",
1.59 +function*() {
1.60 + let node = doc.getElementById("div1");
1.61 + is(getStyle(node, "margin-left"), "", "Should be no margin-top on the element.")
1.62 + let view = yield selectNode(node);
1.63 +
1.64 + let span = view.document.querySelector(".margin.left > span");
1.65 + is(span.textContent, 10, "Should have the right value in the box model.");
1.66 +
1.67 + EventUtils.synthesizeMouseAtCenter(span, {}, view);
1.68 + let editor = view.document.querySelector(".styleinspector-propertyeditor");
1.69 + ok(editor, "Should have opened the editor.");
1.70 + is(editor.value, "10px", "Should have the right value in the editor.");
1.71 +
1.72 + EventUtils.synthesizeKey("VK_UP", {}, view);
1.73 + yield waitForUpdate();
1.74 +
1.75 + is(editor.value, "11px", "Should have the right value in the editor.");
1.76 + is(getStyle(node, "margin-left"), "11px", "Should have updated the margin.");
1.77 +
1.78 + EventUtils.synthesizeKey("VK_DOWN", {}, view);
1.79 + yield waitForUpdate();
1.80 +
1.81 + is(editor.value, "10px", "Should have the right value in the editor.");
1.82 + is(getStyle(node, "margin-left"), "10px", "Should have updated the margin.");
1.83 +
1.84 + EventUtils.synthesizeKey("VK_UP", { shiftKey: true }, view);
1.85 + yield waitForUpdate();
1.86 +
1.87 + is(editor.value, "20px", "Should have the right value in the editor.");
1.88 + is(getStyle(node, "margin-left"), "20px", "Should have updated the margin.");
1.89 +
1.90 + EventUtils.synthesizeKey("VK_RETURN", {}, view);
1.91 + yield waitForUpdate();
1.92 +
1.93 + is(getStyle(node, "margin-left"), "20px", "Should be the right margin-top on the element.")
1.94 + is(span.textContent, 20, "Should have the right value in the box model.");
1.95 +});
1.96 +
1.97 +addTest("Test that deleting the value removes the property but escape undoes that",
1.98 +function*() {
1.99 + let node = doc.getElementById("div1");
1.100 + is(getStyle(node, "margin-left"), "20px", "Should be the right margin-top on the element.")
1.101 + let view = yield selectNode(node);
1.102 +
1.103 + let span = view.document.querySelector(".margin.left > span");
1.104 + is(span.textContent, 20, "Should have the right value in the box model.");
1.105 +
1.106 + EventUtils.synthesizeMouseAtCenter(span, {}, view);
1.107 + let editor = view.document.querySelector(".styleinspector-propertyeditor");
1.108 + ok(editor, "Should have opened the editor.");
1.109 + is(editor.value, "20px", "Should have the right value in the editor.");
1.110 +
1.111 + EventUtils.synthesizeKey("VK_DELETE", {}, view);
1.112 + yield waitForUpdate();
1.113 +
1.114 + is(editor.value, "", "Should have the right value in the editor.");
1.115 + is(getStyle(node, "margin-left"), "", "Should have updated the margin.");
1.116 +
1.117 + EventUtils.synthesizeKey("VK_ESCAPE", {}, view);
1.118 + yield waitForUpdate();
1.119 +
1.120 + is(getStyle(node, "margin-left"), "20px", "Should be the right margin-top on the element.")
1.121 + is(span.textContent, 20, "Should have the right value in the box model.");
1.122 +});
1.123 +
1.124 +addTest("Test that deleting the value removes the property",
1.125 +function*() {
1.126 + let node = doc.getElementById("div1");
1.127 + node.style.marginRight = "15px";
1.128 + let view = yield selectNode(node);
1.129 +
1.130 + let span = view.document.querySelector(".margin.right > span");
1.131 + is(span.textContent, 15, "Should have the right value in the box model.");
1.132 +
1.133 + EventUtils.synthesizeMouseAtCenter(span, {}, view);
1.134 + let editor = view.document.querySelector(".styleinspector-propertyeditor");
1.135 + ok(editor, "Should have opened the editor.");
1.136 + is(editor.value, "15px", "Should have the right value in the editor.");
1.137 +
1.138 + EventUtils.synthesizeKey("VK_DELETE", {}, view);
1.139 + yield waitForUpdate();
1.140 +
1.141 + is(editor.value, "", "Should have the right value in the editor.");
1.142 + is(getStyle(node, "margin-right"), "", "Should have updated the margin.");
1.143 +
1.144 + EventUtils.synthesizeKey("VK_RETURN", {}, view);
1.145 + yield waitForUpdate();
1.146 +
1.147 + is(getStyle(node, "margin-right"), "", "Should be the right margin-top on the element.")
1.148 + is(span.textContent, 10, "Should have the right value in the box model.");
1.149 +});
