The Tor Browser / file diff

     1.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     1.2 +++ b/browser/devtools/styleinspector/test/browser_styleinspector_tooltip-transform.js	Wed Dec 31 06:09:35 2014 +0100
     1.3 @@ -0,0 +1,87 @@
     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 that the css transform preview tooltip is shown on transform properties
    1.11 +
    1.12 +const PAGE_CONTENT = [
    1.13 +  '<style type="text/css">',
    1.14 +  '  #testElement {',
    1.15 +  '    width: 500px;',
    1.16 +  '    height: 300px;',
    1.17 +  '    background: red;',
    1.18 +  '    transform: skew(16deg);',
    1.19 +  '  }',
    1.20 +  '  .test-element {',
    1.21 +  '    transform-origin: top left;',
    1.22 +  '    transform: rotate(45deg);',
    1.23 +  '  }',
    1.24 +  '  div {',
    1.25 +  '    transform: scaleX(1.5);',
    1.26 +  '    transform-origin: bottom right;',
    1.27 +  '  }',
    1.28 +  '  [attr] {',
    1.29 +  '  }',
    1.30 +  '</style>',
    1.31 +  '<div id="testElement" class="test-element" attr="value">transformed element</div>'
    1.32 +].join("\n");
    1.33 +
    1.34 +let test = asyncTest(function*() {
    1.35 +  yield addTab("data:text/html,rule view css transform tooltip test");
    1.36 +  content.document.body.innerHTML = PAGE_CONTENT;
    1.37 +  let {toolbox, inspector, view} = yield openRuleView();
    1.38 +
    1.39 +  info("Selecting the test node");
    1.40 +  yield selectNode("#testElement", inspector);
    1.41 +
    1.42 +  info("Checking that transforms tooltips are shown in various rule-view properties");
    1.43 +  for (let selector of [".test-element", "div", "#testElement"]) {
    1.44 +    yield testTransformTooltipOnSelector(view, selector);
    1.45 +  }
    1.46 +
    1.47 +  info("Checking that the transform tooltip doesn't appear for invalid transforms");
    1.48 +  yield testTransformTooltipNotShownOnInvalidTransform(view);
    1.49 +
    1.50 +  info("Checking transforms in the computed-view");
    1.51 +  let {view} = yield openComputedView();
    1.52 +  yield testTransformTooltipOnComputedView(view);
    1.53 +});
    1.54 +
    1.55 +function* testTransformTooltipOnSelector(view, selector) {
    1.56 +  info("Testing that a transform tooltip appears on transform in " + selector);
    1.57 +
    1.58 +  let {valueSpan} = getRuleViewProperty(view, selector, "transform");
    1.59 +  ok(valueSpan, "The transform property was found");
    1.60 +  yield assertHoverTooltipOn(view.previewTooltip, valueSpan);
    1.61 +
    1.62 +  // The transform preview is canvas, so there's not much we can test, so for
    1.63 +  // now, let's just be happy with the fact that the tooltips is shown!
    1.64 +  ok(true, "Tooltip shown on the transform property in " + selector);
    1.65 +}
    1.66 +
    1.67 +function* testTransformTooltipNotShownOnInvalidTransform(view) {
    1.68 +  let ruleEditor;
    1.69 +  for (let rule of view._elementStyle.rules) {
    1.70 +    if (rule.matchedSelectors[0] === "[attr]") {
    1.71 +      ruleEditor = rule.editor;
    1.72 +    }
    1.73 +  }
    1.74 +  ruleEditor.addProperty("transform", "muchTransform(suchAngle)", "");
    1.75 +
    1.76 +  let {valueSpan} = getRuleViewProperty(view, "[attr]", "transform");
    1.77 +  let isValid = yield isHoverTooltipTarget(view.previewTooltip, valueSpan);
    1.78 +  ok(!isValid, "The tooltip did not appear on hover of an invalid transform value");
    1.79 +}
    1.80 +
    1.81 +function* testTransformTooltipOnComputedView(view) {
    1.82 +  info("Testing that a transform tooltip appears in the computed view too");
    1.83 +
    1.84 +  let {valueSpan} = getComputedViewProperty(view, "transform");
    1.85 +  yield assertHoverTooltipOn(view.tooltip, valueSpan);
    1.86 +
    1.87 +  // The transform preview is canvas, so there's not much we can test, so for
    1.88 +  // now, let's just be happy with the fact that the tooltips is shown!
    1.89 +  ok(true, "Tooltip shown on the computed transform property");
    1.90 +}