1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 1.2 +++ b/browser/devtools/layoutview/test/browser_editablemodel_stylerules.js Wed Dec 31 06:09:35 2014 +0100 1.3 @@ -0,0 +1,109 @@ 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 entering units works", 1.33 +function*() { 1.34 + let node = doc.getElementById("div1"); 1.35 + is(getStyle(node, "padding-top"), "", "Should have the right padding"); 1.36 + let view = yield selectNode(node); 1.37 + 1.38 + let span = view.document.querySelector(".padding.top > span"); 1.39 + is(span.textContent, 3, "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, "3px", "Should have the right value in the editor."); 1.45 + 1.46 + EventUtils.synthesizeKey("1", {}, view); 1.47 + yield waitForUpdate(); 1.48 + EventUtils.synthesizeKey("e", {}, view); 1.49 + yield waitForUpdate(); 1.50 + 1.51 + is(getStyle(node, "padding-top"), "", "An invalid value is handled cleanly"); 1.52 + 1.53 + EventUtils.synthesizeKey("m", {}, view); 1.54 + yield waitForUpdate(); 1.55 + 1.56 + is(editor.value, "1em", "Should have the right value in the editor."); 1.57 + is(getStyle(node, "padding-top"), "1em", "Should have updated the padding."); 1.58 + 1.59 + EventUtils.synthesizeKey("VK_RETURN", {}, view); 1.60 + yield waitForUpdate(); 1.61 + 1.62 + is(getStyle(node, "padding-top"), "1em", "Should be the right padding.") 1.63 + is(span.textContent, 16, "Should have the right value in the box model."); 1.64 +}); 1.65 + 1.66 +addTest("Test that we pick up the value from a higher style rule", 1.67 +function*() { 1.68 + let node = doc.getElementById("div2"); 1.69 + is(getStyle(node, "border-bottom-width"), "", "Should have the right border-bottom-width"); 1.70 + let view = yield selectNode(node); 1.71 + 1.72 + let span = view.document.querySelector(".border.bottom > span"); 1.73 + is(span.textContent, 16, "Should have the right value in the box model."); 1.74 + 1.75 + EventUtils.synthesizeMouseAtCenter(span, {}, view); 1.76 + let editor = view.document.querySelector(".styleinspector-propertyeditor"); 1.77 + ok(editor, "Should have opened the editor."); 1.78 + is(editor.value, "1em", "Should have the right value in the editor."); 1.79 + 1.80 + EventUtils.synthesizeKey("0", {}, view); 1.81 + yield waitForUpdate(); 1.82 + 1.83 + is(editor.value, "0", "Should have the right value in the editor."); 1.84 + is(getStyle(node, "border-bottom-width"), "0px", "Should have updated the border."); 1.85 + 1.86 + EventUtils.synthesizeKey("VK_RETURN", {}, view); 1.87 + yield waitForUpdate(); 1.88 + 1.89 + is(getStyle(node, "border-bottom-width"), "0px", "Should be the right border-bottom-width.") 1.90 + is(span.textContent, 0, "Should have the right value in the box model."); 1.91 +}); 1.92 + 1.93 +addTest("Test that shorthand properties are parsed correctly", 1.94 +function*() { 1.95 + let node = doc.getElementById("div3"); 1.96 + is(getStyle(node, "padding-right"), "", "Should have the right padding"); 1.97 + let view = yield selectNode(node); 1.98 + 1.99 + let span = view.document.querySelector(".padding.right > span"); 1.100 + is(span.textContent, 32, "Should have the right value in the box model."); 1.101 + 1.102 + EventUtils.synthesizeMouseAtCenter(span, {}, view); 1.103 + let editor = view.document.querySelector(".styleinspector-propertyeditor"); 1.104 + ok(editor, "Should have opened the editor."); 1.105 + is(editor.value, "2em", "Should have the right value in the editor."); 1.106 + 1.107 + EventUtils.synthesizeKey("VK_RETURN", {}, view); 1.108 + yield waitForUpdate(); 1.109 + 1.110 + is(getStyle(node, "padding-right"), "", "Should be the right padding.") 1.111 + is(span.textContent, 32, "Should have the right value in the box model."); 1.112 +});