1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 1.2 +++ b/browser/devtools/styleinspector/test/browser_styleinspector_tooltip-shorthand-fontfamily.js Wed Dec 31 06:09:35 2014 +0100 1.3 @@ -0,0 +1,72 @@ 1.4 +/* vim: set ft=javascript ts=2 et sw=2 tw=80: */ 1.5 +/* Any copyright is dedicated to the Public Domain. 1.6 + http://creativecommons.org/publicdomain/zero/1.0/ */ 1.7 + 1.8 +"use strict"; 1.9 + 1.10 +// Test the fontfamily tooltip on shorthand properties 1.11 + 1.12 +const PAGE_CONTENT = [ 1.13 + '<style type="text/css">', 1.14 + ' #testElement {', 1.15 + ' font: italic bold .8em/1.2 Arial;', 1.16 + ' }', 1.17 + '</style>', 1.18 + '<div id="testElement">test element</div>' 1.19 +].join("\n"); 1.20 + 1.21 +let test = asyncTest(function*() { 1.22 + yield addTab("data:text/html;charset=utf-8,font family shorthand tooltip test"); 1.23 + 1.24 + info("Creating the test document"); 1.25 + content.document.body.innerHTML = PAGE_CONTENT; 1.26 + 1.27 + info("Opening the rule view"); 1.28 + let {toolbox, inspector, view} = yield openRuleView(); 1.29 + 1.30 + info("Selecting the test node"); 1.31 + yield selectNode("#testElement", inspector); 1.32 + 1.33 + yield testRuleView(view); 1.34 + 1.35 + info("Opening the computed view"); 1.36 + let {toolbox, inspector, view} = yield openComputedView(); 1.37 + 1.38 + yield testComputedView(view); 1.39 +}); 1.40 + 1.41 +function* testRuleView(ruleView) { 1.42 + info("Testing font-family tooltips in the rule view"); 1.43 + 1.44 + let panel = ruleView.previewTooltip.panel; 1.45 + 1.46 + // Check that the rule view has a tooltip and that a XUL panel has been created 1.47 + ok(ruleView.previewTooltip, "Tooltip instance exists"); 1.48 + ok(panel, "XUL panel exists"); 1.49 + 1.50 + // Get the computed font family property inside the font rule view 1.51 + let propertyList = ruleView.element.querySelectorAll(".ruleview-propertylist"); 1.52 + let fontExpander = propertyList[1].querySelectorAll(".ruleview-expander")[0]; 1.53 + fontExpander.click(); 1.54 + 1.55 + let rule = getRuleViewRule(ruleView, "#testElement"); 1.56 + let valueSpan = rule.querySelector(".ruleview-computed .ruleview-propertyvalue"); 1.57 + 1.58 + // And verify that the tooltip gets shown on this property 1.59 + yield assertHoverTooltipOn(ruleView.previewTooltip, valueSpan); 1.60 + 1.61 + let description = panel.getElementsByTagName("description")[0]; 1.62 + is(description.style.fontFamily, "Arial", "Tooltips contains correct font-family style"); 1.63 +} 1.64 + 1.65 +function* testComputedView(computedView) { 1.66 + info("Testing font-family tooltips in the computed view"); 1.67 + 1.68 + let panel = computedView.tooltip.panel; 1.69 + let {valueSpan} = getComputedViewProperty(computedView, "font-family"); 1.70 + 1.71 + yield assertHoverTooltipOn(computedView.tooltip, valueSpan); 1.72 + 1.73 + let description = panel.getElementsByTagName("description")[0]; 1.74 + is(description.style.fontFamily, "Arial", "Tooltips contains correct font-family style"); 1.75 +}