browser/devtools/styleinspector/test/browser_styleinspector_tooltip-transform.js@6474c204b198
browser/devtools/styleinspector/test/browser_styleinspector_tooltip-transform.js
Wed, 31 Dec 2014 06:09:35 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 06:09:35 +0100
- changeset 0
- 6474c204b198
- permissions
- -rw-r--r--
Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.
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/ */
5 "use strict";
7 // Test that the css transform preview tooltip is shown on transform properties
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");
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();
36 info("Selecting the test node");
37 yield selectNode("#testElement", inspector);
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 }
44 info("Checking that the transform tooltip doesn't appear for invalid transforms");
45 yield testTransformTooltipNotShownOnInvalidTransform(view);
47 info("Checking transforms in the computed-view");
48 let {view} = yield openComputedView();
49 yield testTransformTooltipOnComputedView(view);
50 });
52 function* testTransformTooltipOnSelector(view, selector) {
53 info("Testing that a transform tooltip appears on transform in " + selector);
55 let {valueSpan} = getRuleViewProperty(view, selector, "transform");
56 ok(valueSpan, "The transform property was found");
57 yield assertHoverTooltipOn(view.previewTooltip, valueSpan);
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 }
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)", "");
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 }
78 function* testTransformTooltipOnComputedView(view) {
79 info("Testing that a transform tooltip appears in the computed view too");
81 let {valueSpan} = getComputedViewProperty(view, "transform");
82 yield assertHoverTooltipOn(view.tooltip, valueSpan);
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 }
