The Tor Browser / file comparison
comparison: browser/devtools/layoutview/test/browser_layoutview.js
browser/devtools/layoutview/test/browser_layoutview.js
- branch
- TOR_BUG_9701
- changeset 15
- b8a032363ba2
equal
deleted
inserted
replaced
| -1:000000000000 | 0:96e4ba8c5e76 |
|---|---|
| 1 /* Any copyright is dedicated to the Public Domain. | |
| 2 http://creativecommons.org/publicdomain/zero/1.0/ */ | |
| 3 | |
| 4 // Expected values: | |
| 5 let res1 = [ | |
| 6 {selector: "#element-size", value: "160x160"}, | |
| 7 {selector: ".size > span", value: "100x100"}, | |
| 8 {selector: ".margin.top > span", value: 30}, | |
| 9 {selector: ".margin.left > span", value: "auto"}, | |
| 10 {selector: ".margin.bottom > span", value: 30}, | |
| 11 {selector: ".margin.right > span", value: "auto"}, | |
| 12 {selector: ".padding.top > span", value: 20}, | |
| 13 {selector: ".padding.left > span", value: 20}, | |
| 14 {selector: ".padding.bottom > span", value: 20}, | |
| 15 {selector: ".padding.right > span", value: 20}, | |
| 16 {selector: ".border.top > span", value: 10}, | |
| 17 {selector: ".border.left > span", value: 10}, | |
| 18 {selector: ".border.bottom > span", value: 10}, | |
| 19 {selector: ".border.right > span", value: 10}, | |
| 20 ]; | |
| 21 | |
| 22 let res2 = [ | |
| 23 {selector: "#element-size", value: "190x210"}, | |
| 24 {selector: ".size > span", value: "100x150"}, | |
| 25 {selector: ".margin.top > span", value: 30}, | |
| 26 {selector: ".margin.left > span", value: "auto"}, | |
| 27 {selector: ".margin.bottom > span", value: 30}, | |
| 28 {selector: ".margin.right > span", value: "auto"}, | |
| 29 {selector: ".padding.top > span", value: 20}, | |
| 30 {selector: ".padding.left > span", value: 20}, | |
| 31 {selector: ".padding.bottom > span", value: 20}, | |
| 32 {selector: ".padding.right > span", value: 50}, | |
| 33 {selector: ".border.top > span", value: 10}, | |
| 34 {selector: ".border.left > span", value: 10}, | |
| 35 {selector: ".border.bottom > span", value: 10}, | |
| 36 {selector: ".border.right > span", value: 10}, | |
| 37 ]; | |
| 38 | |
| 39 let inspector; | |
| 40 let view; | |
| 41 | |
| 42 let test = asyncTest(function*() { | |
| 43 let style = "div { position: absolute; top: 42px; left: 42px; height: 100px; width: 100px; border: 10px solid black; padding: 20px; margin: 30px auto;}"; | |
| 44 let html = "<style>" + style + "</style><div></div>" | |
| 45 | |
| 46 let content = yield loadTab("data:text/html," + encodeURIComponent(html)); | |
| 47 let node = content.document.querySelector("div"); | |
| 48 ok(node, "node found"); | |
| 49 | |
| 50 let target = TargetFactory.forTab(gBrowser.selectedTab); | |
| 51 let toolbox = yield gDevTools.showToolbox(target, "inspector"); | |
| 52 inspector = toolbox.getCurrentPanel(); | |
| 53 | |
| 54 info("Inspector open"); | |
| 55 | |
| 56 inspector.sidebar.select("layoutview"); | |
| 57 yield inspector.sidebar.once("layoutview-ready"); | |
| 58 | |
| 59 inspector.selection.setNode(node); | |
| 60 yield inspector.once("inspector-updated"); | |
| 61 | |
| 62 info("Layout view ready"); | |
| 63 | |
| 64 view = inspector.sidebar.getWindowForTab("layoutview"); | |
| 65 ok(!!view.layoutview, "LayoutView document is alive."); | |
| 66 | |
| 67 yield runTests(); | |
| 68 | |
| 69 executeSoon(function() { | |
| 70 inspector._toolbox.destroy(); | |
| 71 }); | |
| 72 | |
| 73 yield gDevTools.once("toolbox-destroyed"); | |
| 74 }); | |
| 75 | |
| 76 addTest("Test that the initial values of the box model are correct", | |
| 77 function*() { | |
| 78 let viewdoc = view.document; | |
| 79 | |
| 80 for (let i = 0; i < res1.length; i++) { | |
| 81 let elt = viewdoc.querySelector(res1[i].selector); | |
| 82 is(elt.textContent, res1[i].value, res1[i].selector + " has the right value."); | |
| 83 } | |
| 84 }); | |
| 85 | |
| 86 addTest("Test that changing the document updates the box model", | |
| 87 function*() { | |
| 88 let viewdoc = view.document; | |
| 89 | |
| 90 inspector.selection.node.style.height = "150px"; | |
| 91 inspector.selection.node.style.paddingRight = "50px"; | |
| 92 | |
| 93 yield waitForUpdate(); | |
| 94 | |
| 95 for (let i = 0; i < res2.length; i++) { | |
| 96 let elt = viewdoc.querySelector(res2[i].selector); | |
| 97 is(elt.textContent, res2[i].value, res2[i].selector + " has the right value after style update."); | |
| 98 } | |
| 99 }); | |
| 100 | |
| 101 addTest("Test that long labels on left/right are rotated 90 degrees", | |
| 102 function*() { | |
| 103 let viewdoc = view.document; | |
| 104 const LONG_TEXT_ROTATE_LIMIT = 3; | |
| 105 | |
| 106 for (let i = 0; i < res1.length; i++) { | |
| 107 let elt = viewdoc.querySelector(res1[i].selector); | |
| 108 let isLong = elt.textContent.length > LONG_TEXT_ROTATE_LIMIT; | |
| 109 let classList = elt.parentNode.classList | |
| 110 let canBeRotated = classList.contains("left") || classList.contains("right"); | |
| 111 let isRotated = classList.contains("rotate"); | |
| 112 | |
| 113 is(canBeRotated && isLong, isRotated, res1[i].selector + " correctly rotated."); | |
| 114 } | |
| 115 }); |
