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 that the css transform preview tooltip is shown on transform properties
michael@0: 
michael@0: const PAGE_CONTENT = [
michael@0:   '<style type="text/css">',
michael@0:   '  #testElement {',
michael@0:   '    width: 500px;',
michael@0:   '    height: 300px;',
michael@0:   '    background: red;',
michael@0:   '    transform: skew(16deg);',
michael@0:   '  }',
michael@0:   '  .test-element {',
michael@0:   '    transform-origin: top left;',
michael@0:   '    transform: rotate(45deg);',
michael@0:   '  }',
michael@0:   '  div {',
michael@0:   '    transform: scaleX(1.5);',
michael@0:   '    transform-origin: bottom right;',
michael@0:   '  }',
michael@0:   '  [attr] {',
michael@0:   '  }',
michael@0:   '</style>',
michael@0:   '<div id="testElement" class="test-element" attr="value">transformed element</div>'
michael@0: ].join("\n");
michael@0: 
michael@0: let test = asyncTest(function*() {
michael@0:   yield addTab("data:text/html,rule view css transform tooltip test");
michael@0:   content.document.body.innerHTML = PAGE_CONTENT;
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:   info("Checking that transforms tooltips are shown in various rule-view properties");
michael@0:   for (let selector of [".test-element", "div", "#testElement"]) {
michael@0:     yield testTransformTooltipOnSelector(view, selector);
michael@0:   }
michael@0: 
michael@0:   info("Checking that the transform tooltip doesn't appear for invalid transforms");
michael@0:   yield testTransformTooltipNotShownOnInvalidTransform(view);
michael@0: 
michael@0:   info("Checking transforms in the computed-view");
michael@0:   let {view} = yield openComputedView();
michael@0:   yield testTransformTooltipOnComputedView(view);
michael@0: });
michael@0: 
michael@0: function* testTransformTooltipOnSelector(view, selector) {
michael@0:   info("Testing that a transform tooltip appears on transform in " + selector);
michael@0: 
michael@0:   let {valueSpan} = getRuleViewProperty(view, selector, "transform");
michael@0:   ok(valueSpan, "The transform property was found");
michael@0:   yield assertHoverTooltipOn(view.previewTooltip, valueSpan);
michael@0: 
michael@0:   // The transform preview is canvas, so there's not much we can test, so for
michael@0:   // now, let's just be happy with the fact that the tooltips is shown!
michael@0:   ok(true, "Tooltip shown on the transform property in " + selector);
michael@0: }
michael@0: 
michael@0: function* testTransformTooltipNotShownOnInvalidTransform(view) {
michael@0:   let ruleEditor;
michael@0:   for (let rule of view._elementStyle.rules) {
michael@0:     if (rule.matchedSelectors[0] === "[attr]") {
michael@0:       ruleEditor = rule.editor;
michael@0:     }
michael@0:   }
michael@0:   ruleEditor.addProperty("transform", "muchTransform(suchAngle)", "");
michael@0: 
michael@0:   let {valueSpan} = getRuleViewProperty(view, "[attr]", "transform");
michael@0:   let isValid = yield isHoverTooltipTarget(view.previewTooltip, valueSpan);
michael@0:   ok(!isValid, "The tooltip did not appear on hover of an invalid transform value");
michael@0: }
michael@0: 
michael@0: function* testTransformTooltipOnComputedView(view) {
michael@0:   info("Testing that a transform tooltip appears in the computed view too");
michael@0: 
michael@0:   let {valueSpan} = getComputedViewProperty(view, "transform");
michael@0:   yield assertHoverTooltipOn(view.tooltip, valueSpan);
michael@0: 
michael@0:   // The transform preview is canvas, so there's not much we can test, so for
michael@0:   // now, let's just be happy with the fact that the tooltips is shown!
michael@0:   ok(true, "Tooltip shown on the computed transform property");
michael@0: }