Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

FBTest for issue 5449 (Show infotips in Computed side panel)

  • Loading branch information...
commit 8f3e48bcc1e76451ce979b091cfa03f076a4bc54 1 parent 15a2857
Sebastian Zartner SebastianZ authored
BIN  tests/content/css/computed/5449/firebug.png
48 tests/content/css/computed/5449/issue5449.html
... ... @@ -0,0 +1,48 @@
  1 +<!DOCTYPE html>
  2 +<html>
  3 + <head>
  4 + <title>Issue 5449: Show infotips in Computed side panel</title>
  5 + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  6 + <link href="../../../_common/testcase.css" type="text/css" rel="stylesheet"/>
  7 + <style type="text/css">
  8 + #element {
  9 + width: 100px;
  10 + height: 100px;
  11 + background-image: url(firebug.png), -moz-linear-gradient(135deg, #788CFF, #B4C8FF);
  12 + background-repeat: no-repeat;
  13 + background-color: #8C8CFF;
  14 + font-family: Arial,Helvetica,sans-serif;
  15 + text-align: center;
  16 + vertical-align: middle;
  17 + line-height: 100px;
  18 + }
  19 + </style>
  20 + </head>
  21 + <body>
  22 + <header>
  23 + <h1><a href="http://code.google.com/p/fbug/issues/detail?id=5449">Issue 5449</a>: Show infotips in Computed side panel</h1>
  24 + </header>
  25 + <div>
  26 + <section id="content">
  27 + <div id="element">Text</div>
  28 + </section>
  29 + <section id="description">
  30 + <h3>Steps to reproduce</h3>
  31 + <ol>
  32 + <li>Switch to the CSS Panel</li>
  33 + <li>
  34 + Hover the values of the <code>background-color</code> styles of <code>#hex</code>, <code>#name</code>,
  35 + <code>#rgb</code>, <code>#rgba</code>, <code>#hsl</code> and <code>#hsla</code>
  36 + </li>
  37 + </ol>
  38 + <h3>Expected Result</h3>
  39 + <ul>
  40 + <li>Infotips should always be shown regardless of how the color was specified. Colors with alpha channel should have a background pattern to make the transparency more visible.</li>
  41 + </ul>
  42 + </section>
  43 + <footer>
  44 + Sebastian Zartner, sebastianzartner@gmx.de
  45 + </footer>
  46 + </div>
  47 + </body>
  48 +</html>
97 tests/content/css/computed/5449/issue5449.js
... ... @@ -0,0 +1,97 @@
  1 +const infoTipTypes = {
  2 + "color": {class: "infoTipColorBox", prop: "backgroundColor"},
  3 + "gradient": {class: "infoTipColorBox", prop: "backgroundImage"},
  4 + "image": {class: "infoTipImageBox", prop: "backgroundImage"},
  5 + "fontFamily": {class: "infoTipFontFamilyBox", prop: "fontFamily"}
  6 +}
  7 +
  8 +function runTest()
  9 +{
  10 + FBTest.sysout("issue5449.START");
  11 +
  12 + FBTest.openNewTab(basePath + "css/computed/5449/issue5449.html", function(win)
  13 + {
  14 + FBTest.openFirebug();
  15 + FBTest.setSidePanelWidth(520);
  16 + FBTest.selectPanel("html");
  17 +
  18 + FBTest.selectElementInHtmlPanel("element", function(node)
  19 + {
  20 + var tests = [];
  21 + tests.push(fontFamily);
  22 + tests.push(color);
  23 + tests.push(gradient);
  24 + tests.push(image);
  25 +
  26 + FBTest.runTestSuite(tests, function()
  27 + {
  28 + FBTest.testDone("issue5449; DONE");
  29 + });
  30 + });
  31 + });
  32 +}
  33 +
  34 +function fontFamily(callback)
  35 +{
  36 + executeTest("font-family", 0, 0, "fontFamily", /Arial/, callback);
  37 +}
  38 +
  39 +function color(callback)
  40 +{
  41 + executeTest("background-color", 0, 0, "color", /rgb\(140,\s*140,\s*255\)/, callback);
  42 +}
  43 +
  44 +function gradient(callback)
  45 +{
  46 + executeTest("background-image", 1, 25, "gradient",
  47 + /-moz-linear-gradient\(135deg,\s*rgb\(120,\s*140,\s*255\),\s*rgb\(180,\s*200,\s*255\)/,
  48 + callback);
  49 +}
  50 +
  51 +function image(callback)
  52 +{
  53 + executeTest("background-image", 0, 0, "image",
  54 + new RegExp(basePath+"css\/computed\/5449\/firebug.png"), callback);
  55 +}
  56 +
  57 +//************************************************************************************************
  58 +
  59 +function executeTest(propName, offsetX, offsetY, type, expectedValue, callback)
  60 +{
  61 + var panel = FBTest.selectSidePanel("computed");
  62 + var propNames = panel.panelNode.getElementsByClassName("stylePropName");
  63 +
  64 + for (var i = 0; i < propNames.length; ++i)
  65 + {
  66 + if (propNames[i].textContent == propName)
  67 + {
  68 + var style = FW.FBL.getAncestorByClass(propNames[i], "computedStyle");
  69 + var propValue = style.getElementsByClassName("stylePropValue").item(0);
  70 +
  71 + var config = {tagName: "div", classes: infoTipTypes[type].class};
  72 + FBTest.waitForDisplayedElement("computed", config, function (infoTip)
  73 + {
  74 + var infoTipActive = infoTip.parentNode.getAttribute("active");
  75 +
  76 + if (FBTest.ok(infoTipActive,
  77 + "There must be an infotip shown when hovering the value of the '"+propName+
  78 + "' property "))
  79 + {
  80 + var win = infoTip.ownerDocument.defaultView;
  81 + var cs = win.getComputedStyle(infoTip.firstChild);
  82 +
  83 + FBTest.compare(expectedValue, infoTip.innerHTML,
  84 + "The infotip must contain the same value as specified in the " +
  85 + "style '"+propName+"'.");
  86 + }
  87 +
  88 + // Hover something else, so the infotip gets hidden again
  89 + FBTest.mouseOver(infoTip.ownerDocument.body, 0, 0);
  90 +
  91 + callback();
  92 + });
  93 +
  94 + FBTest.mouseOver(propValue, offsetX, offsetY);
  95 + }
  96 + }
  97 +}
1  tests/content/firebug.html
@@ -199,6 +199,7 @@
199 199 {group: "css", uri: "css/5262/issue5262.js", desc: "Show @charset rules inside CSS panel", testPage: "css/5262/issue5262.html"},
200 200 {group: "css", uri: "css/5277/issue5277.js", desc: "Display @import rule media queries and allow editing them", testPage: "css/5277/issue5277.html"},
201 201 {group: "css", uri: "css/5412/issue5412.js", desc: "Auto-completion for CSS selectors", testPage: "css/5412/issue5412.html"},
  202 + {group: "css/computed", uri: "css/computed/5449/issue5449.js", desc: "Show infotips in Computed side panel", testPage: "css/computed/5449/issue5449.html"},
202 203 {group: "css/computed", uri: "css/computed/5451/issue5451.js", desc: "Persist scrolling in Computed side panel", testPage: "css/computed/5451/issue5451.html"},
203 204 {group: "script", uri: "script/debuggerKeyword/testDriver1.6.js", desc: "Break on debugger keyword in various contexts.", testPage: "script/debuggerKeyword/testPage.html"},
204 205 {group: "script", uri: "script/dynamicScriptEval/test1.js", desc: "Dynamic script evaluation", testPage: "script/dynamicScriptEval/test1.html"},

0 comments on commit 8f3e48b

Please sign in to comment.
Something went wrong with that request. Please try again.