michael@0: /* vim: set ft=javascript ts=2 et sw=2 tw=80: */
michael@0: /* Any copyright is dedicated to the Public Domain.
michael@0:  http://creativecommons.org/publicdomain/zero/1.0/ */
michael@0: 
michael@0: "use strict";
michael@0: 
michael@0: // Test the fontfamily tooltip on shorthand properties
michael@0: 
michael@0: const PAGE_CONTENT = [
michael@0:   '<style type="text/css">',
michael@0:   '  #testElement {',
michael@0:   '    font: italic bold .8em/1.2 Arial;',
michael@0:   '  }',
michael@0:   '</style>',
michael@0:   '<div id="testElement">test element</div>'
michael@0: ].join("\n");
michael@0: 
michael@0: let test = asyncTest(function*() {
michael@0:   yield addTab("data:text/html;charset=utf-8,font family shorthand tooltip test");
michael@0: 
michael@0:   info("Creating the test document");
michael@0:   content.document.body.innerHTML = PAGE_CONTENT;
michael@0: 
michael@0:   info("Opening the rule view");
michael@0:   let {toolbox, inspector, view} = yield openRuleView();
michael@0: 
michael@0:   info("Selecting the test node");
michael@0:   yield selectNode("#testElement", inspector);
michael@0: 
michael@0:   yield testRuleView(view);
michael@0: 
michael@0:   info("Opening the computed view");
michael@0:   let {toolbox, inspector, view} = yield openComputedView();
michael@0: 
michael@0:   yield testComputedView(view);
michael@0: });
michael@0: 
michael@0: function* testRuleView(ruleView) {
michael@0:   info("Testing font-family tooltips in the rule view");
michael@0: 
michael@0:   let panel = ruleView.previewTooltip.panel;
michael@0: 
michael@0:   // Check that the rule view has a tooltip and that a XUL panel has been created
michael@0:   ok(ruleView.previewTooltip, "Tooltip instance exists");
michael@0:   ok(panel, "XUL panel exists");
michael@0: 
michael@0:   // Get the computed font family property inside the font rule view
michael@0:   let propertyList = ruleView.element.querySelectorAll(".ruleview-propertylist");
michael@0:   let fontExpander = propertyList[1].querySelectorAll(".ruleview-expander")[0];
michael@0:   fontExpander.click();
michael@0: 
michael@0:   let rule = getRuleViewRule(ruleView, "#testElement");
michael@0:   let valueSpan = rule.querySelector(".ruleview-computed .ruleview-propertyvalue");
michael@0: 
michael@0:   // And verify that the tooltip gets shown on this property
michael@0:   yield assertHoverTooltipOn(ruleView.previewTooltip, valueSpan);
michael@0: 
michael@0:   let description = panel.getElementsByTagName("description")[0];
michael@0:   is(description.style.fontFamily, "Arial", "Tooltips contains correct font-family style");
michael@0: }
michael@0: 
michael@0: function* testComputedView(computedView) {
michael@0:   info("Testing font-family tooltips in the computed view");
michael@0: 
michael@0:   let panel = computedView.tooltip.panel;
michael@0:   let {valueSpan} = getComputedViewProperty(computedView, "font-family");
michael@0: 
michael@0:   yield assertHoverTooltipOn(computedView.tooltip, valueSpan);
michael@0: 
michael@0:   let description = panel.getElementsByTagName("description")[0];
michael@0:   is(description.style.fontFamily, "Arial", "Tooltips contains correct font-family style");
michael@0: }