Browse files

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

  • Loading branch information...
1 parent 15a2857 commit 8f3e48bcc1e76451ce979b091cfa03f076a4bc54 @SebastianZ SebastianZ committed May 15, 2012
View
BIN tests/content/css/computed/5449/firebug.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
48 tests/content/css/computed/5449/issue5449.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Issue 5449: Show infotips in Computed side panel</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+ <link href="../../../_common/testcase.css" type="text/css" rel="stylesheet"/>
+ <style type="text/css">
+ #element {
+ width: 100px;
+ height: 100px;
+ background-image: url(firebug.png), -moz-linear-gradient(135deg, #788CFF, #B4C8FF);
+ background-repeat: no-repeat;
+ background-color: #8C8CFF;
+ font-family: Arial,Helvetica,sans-serif;
+ text-align: center;
+ vertical-align: middle;
+ line-height: 100px;
+ }
+ </style>
+ </head>
+ <body>
+ <header>
+ <h1><a href="http://code.google.com/p/fbug/issues/detail?id=5449">Issue 5449</a>: Show infotips in Computed side panel</h1>
+ </header>
+ <div>
+ <section id="content">
+ <div id="element">Text</div>
+ </section>
+ <section id="description">
+ <h3>Steps to reproduce</h3>
+ <ol>
+ <li>Switch to the CSS Panel</li>
+ <li>
+ Hover the values of the <code>background-color</code> styles of <code>#hex</code>, <code>#name</code>,
+ <code>#rgb</code>, <code>#rgba</code>, <code>#hsl</code> and <code>#hsla</code>
+ </li>
+ </ol>
+ <h3>Expected Result</h3>
+ <ul>
+ <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>
+ </ul>
+ </section>
+ <footer>
+ Sebastian Zartner, sebastianzartner@gmx.de
+ </footer>
+ </div>
+ </body>
+</html>
View
97 tests/content/css/computed/5449/issue5449.js
@@ -0,0 +1,97 @@
+const infoTipTypes = {
+ "color": {class: "infoTipColorBox", prop: "backgroundColor"},
+ "gradient": {class: "infoTipColorBox", prop: "backgroundImage"},
+ "image": {class: "infoTipImageBox", prop: "backgroundImage"},
+ "fontFamily": {class: "infoTipFontFamilyBox", prop: "fontFamily"}
+}
+
+function runTest()
+{
+ FBTest.sysout("issue5449.START");
+
+ FBTest.openNewTab(basePath + "css/computed/5449/issue5449.html", function(win)
+ {
+ FBTest.openFirebug();
+ FBTest.setSidePanelWidth(520);
+ FBTest.selectPanel("html");
+
+ FBTest.selectElementInHtmlPanel("element", function(node)
+ {
+ var tests = [];
+ tests.push(fontFamily);
+ tests.push(color);
+ tests.push(gradient);
+ tests.push(image);
+
+ FBTest.runTestSuite(tests, function()
+ {
+ FBTest.testDone("issue5449; DONE");
+ });
+ });
+ });
+}
+
+function fontFamily(callback)
+{
+ executeTest("font-family", 0, 0, "fontFamily", /Arial/, callback);
+}
+
+function color(callback)
+{
+ executeTest("background-color", 0, 0, "color", /rgb\(140,\s*140,\s*255\)/, callback);
+}
+
+function gradient(callback)
+{
+ executeTest("background-image", 1, 25, "gradient",
+ /-moz-linear-gradient\(135deg,\s*rgb\(120,\s*140,\s*255\),\s*rgb\(180,\s*200,\s*255\)/,
+ callback);
+}
+
+function image(callback)
+{
+ executeTest("background-image", 0, 0, "image",
+ new RegExp(basePath+"css\/computed\/5449\/firebug.png"), callback);
+}
+
+//************************************************************************************************
+
+function executeTest(propName, offsetX, offsetY, type, expectedValue, callback)
+{
+ var panel = FBTest.selectSidePanel("computed");
+ var propNames = panel.panelNode.getElementsByClassName("stylePropName");
+
+ for (var i = 0; i < propNames.length; ++i)
+ {
+ if (propNames[i].textContent == propName)
+ {
+ var style = FW.FBL.getAncestorByClass(propNames[i], "computedStyle");
+ var propValue = style.getElementsByClassName("stylePropValue").item(0);
+
+ var config = {tagName: "div", classes: infoTipTypes[type].class};
+ FBTest.waitForDisplayedElement("computed", config, function (infoTip)
+ {
+ var infoTipActive = infoTip.parentNode.getAttribute("active");
+
+ if (FBTest.ok(infoTipActive,
+ "There must be an infotip shown when hovering the value of the '"+propName+
+ "' property "))
+ {
+ var win = infoTip.ownerDocument.defaultView;
+ var cs = win.getComputedStyle(infoTip.firstChild);
+
+ FBTest.compare(expectedValue, infoTip.innerHTML,
+ "The infotip must contain the same value as specified in the " +
+ "style '"+propName+"'.");
+ }
+
+ // Hover something else, so the infotip gets hidden again
+ FBTest.mouseOver(infoTip.ownerDocument.body, 0, 0);
+
+ callback();
+ });
+
+ FBTest.mouseOver(propValue, offsetX, offsetY);
+ }
+ }
+}
View
1 tests/content/firebug.html
@@ -199,6 +199,7 @@
{group: "css", uri: "css/5262/issue5262.js", desc: "Show @charset rules inside CSS panel", testPage: "css/5262/issue5262.html"},
{group: "css", uri: "css/5277/issue5277.js", desc: "Display @import rule media queries and allow editing them", testPage: "css/5277/issue5277.html"},
{group: "css", uri: "css/5412/issue5412.js", desc: "Auto-completion for CSS selectors", testPage: "css/5412/issue5412.html"},
+ {group: "css/computed", uri: "css/computed/5449/issue5449.js", desc: "Show infotips in Computed side panel", testPage: "css/computed/5449/issue5449.html"},
{group: "css/computed", uri: "css/computed/5451/issue5451.js", desc: "Persist scrolling in Computed side panel", testPage: "css/computed/5451/issue5451.html"},
{group: "script", uri: "script/debuggerKeyword/testDriver1.6.js", desc: "Break on debugger keyword in various contexts.", testPage: "script/debuggerKeyword/testPage.html"},
{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.