The Tor Browser / file comparison
comparison: browser/devtools/styleinspector/test/browser_styleinspector_tooltip-transform.js
browser/devtools/styleinspector/test/browser_styleinspector_tooltip-transform.js
- changeset 0
- 6474c204b198
equal
deleted
inserted
replaced
| -1:000000000000 | 0:5866438dfe4a |
|---|---|
| 1 /* vim: set ft=javascript ts=2 et sw=2 tw=80: */ | |
| 2 /* Any copyright is dedicated to the Public Domain. | |
| 3 http://creativecommons.org/publicdomain/zero/1.0/ */ | |
| 4 | |
| 5 "use strict"; | |
| 6 | |
| 7 // Test that the css transform preview tooltip is shown on transform properties | |
| 8 | |
| 9 const PAGE_CONTENT = [ | |
| 10 '<style type="text/css">', | |
| 11 ' #testElement {', | |
| 12 ' width: 500px;', | |
| 13 ' height: 300px;', | |
| 14 ' background: red;', | |
| 15 ' transform: skew(16deg);', | |
| 16 ' }', | |
| 17 ' .test-element {', | |
| 18 ' transform-origin: top left;', | |
| 19 ' transform: rotate(45deg);', | |
| 20 ' }', | |
| 21 ' div {', | |
| 22 ' transform: scaleX(1.5);', | |
| 23 ' transform-origin: bottom right;', | |
| 24 ' }', | |
| 25 ' [attr] {', | |
| 26 ' }', | |
| 27 '</style>', | |
| 28 '<div id="testElement" class="test-element" attr="value">transformed element</div>' | |
| 29 ].join("\n"); | |
| 30 | |
| 31 let test = asyncTest(function*() { | |
| 32 yield addTab("data:text/html,rule view css transform tooltip test"); | |
| 33 content.document.body.innerHTML = PAGE_CONTENT; | |
| 34 let {toolbox, inspector, view} = yield openRuleView(); | |
| 35 | |
| 36 info("Selecting the test node"); | |
| 37 yield selectNode("#testElement", inspector); | |
| 38 | |
| 39 info("Checking that transforms tooltips are shown in various rule-view properties"); | |
| 40 for (let selector of [".test-element", "div", "#testElement"]) { | |
| 41 yield testTransformTooltipOnSelector(view, selector); | |
| 42 } | |
| 43 | |
| 44 info("Checking that the transform tooltip doesn't appear for invalid transforms"); | |
| 45 yield testTransformTooltipNotShownOnInvalidTransform(view); | |
| 46 | |
| 47 info("Checking transforms in the computed-view"); | |
| 48 let {view} = yield openComputedView(); | |
| 49 yield testTransformTooltipOnComputedView(view); | |
| 50 }); | |
| 51 | |
| 52 function* testTransformTooltipOnSelector(view, selector) { | |
| 53 info("Testing that a transform tooltip appears on transform in " + selector); | |
| 54 | |
| 55 let {valueSpan} = getRuleViewProperty(view, selector, "transform"); | |
| 56 ok(valueSpan, "The transform property was found"); | |
| 57 yield assertHoverTooltipOn(view.previewTooltip, valueSpan); | |
| 58 | |
| 59 // The transform preview is canvas, so there's not much we can test, so for | |
| 60 // now, let's just be happy with the fact that the tooltips is shown! | |
| 61 ok(true, "Tooltip shown on the transform property in " + selector); | |
| 62 } | |
| 63 | |
| 64 function* testTransformTooltipNotShownOnInvalidTransform(view) { | |
| 65 let ruleEditor; | |
| 66 for (let rule of view._elementStyle.rules) { | |
| 67 if (rule.matchedSelectors[0] === "[attr]") { | |
| 68 ruleEditor = rule.editor; | |
| 69 } | |
| 70 } | |
| 71 ruleEditor.addProperty("transform", "muchTransform(suchAngle)", ""); | |
| 72 | |
| 73 let {valueSpan} = getRuleViewProperty(view, "[attr]", "transform"); | |
| 74 let isValid = yield isHoverTooltipTarget(view.previewTooltip, valueSpan); | |
| 75 ok(!isValid, "The tooltip did not appear on hover of an invalid transform value"); | |
| 76 } | |
| 77 | |
| 78 function* testTransformTooltipOnComputedView(view) { | |
| 79 info("Testing that a transform tooltip appears in the computed view too"); | |
| 80 | |
| 81 let {valueSpan} = getComputedViewProperty(view, "transform"); | |
| 82 yield assertHoverTooltipOn(view.tooltip, valueSpan); | |
| 83 | |
| 84 // The transform preview is canvas, so there's not much we can test, so for | |
| 85 // now, let's just be happy with the fact that the tooltips is shown! | |
| 86 ok(true, "Tooltip shown on the computed transform property"); | |
| 87 } |
