browser/devtools/styleinspector/test/browser_computedview_matched-selectors-toggle.js@6474c204b198
browser/devtools/styleinspector/test/browser_computedview_matched-selectors-toggle.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 computed view properties can be expanded and collapsed with
8 // either the twisty or by dbl-clicking on the container
10 const TEST_URL = "data:text/html," + encodeURIComponent([
11 '<html>' +
12 '<head>' +
13 ' <title>Computed view toggling test</title>',
14 ' <style type="text/css"> ',
15 ' html { color: #000000; font-size: 15pt; } ',
16 ' h1 { color: red; } ',
17 ' </style>',
18 '</head>',
19 '<body>',
20 ' <h1>Some header text</h1>',
21 '</body>',
22 '</html>'
23 ].join("\n"));
25 let test = asyncTest(function*() {
26 yield addTab(TEST_URL);
27 let {toolbox, inspector, view} = yield openComputedView();
29 info("Selecting the test node");
30 yield selectNode("h1", inspector);
32 yield testExpandOnTwistyClick(view, inspector);
33 yield testCollapseOnTwistyClick(view, inspector);
34 yield testExpandOnDblClick(view, inspector);
35 yield testCollapseOnDblClick(view, inspector);
36 });
38 function* testExpandOnTwistyClick({styleDocument, styleWindow}, inspector) {
39 info("Testing that a property expands on twisty click");
41 info("Getting twisty element");
42 let twisty = styleDocument.querySelector(".expandable");
43 ok(twisty, "Twisty found");
45 let onExpand = inspector.once("computed-view-property-expanded");
46 info("Clicking on the twisty element");
47 twisty.click();
49 yield onExpand;
51 // Expanded means the matchedselectors div is not empty
52 let div = styleDocument.querySelector(".property-content .matchedselectors");
53 ok(div.childNodes.length > 0, "Matched selectors are expanded on twisty click");
54 }
56 function* testCollapseOnTwistyClick({styleDocument, styleWindow}, inspector) {
57 info("Testing that a property collapses on twisty click");
59 info("Getting twisty element");
60 let twisty = styleDocument.querySelector(".expandable");
61 ok(twisty, "Twisty found");
63 let onCollapse = inspector.once("computed-view-property-collapsed");
64 info("Clicking on the twisty element");
65 twisty.click();
67 yield onCollapse;
69 // Collapsed means the matchedselectors div is empty
70 let div = styleDocument.querySelector(".property-content .matchedselectors");
71 ok(div.childNodes.length === 0, "Matched selectors are collapsed on twisty click");
72 }
74 function* testExpandOnDblClick({styleDocument, styleWindow}, inspector) {
75 info("Testing that a property expands on container dbl-click");
77 info("Getting computed property container");
78 let container = styleDocument.querySelector(".property-view");
79 ok(container, "Container found");
81 let onExpand = inspector.once("computed-view-property-expanded");
82 info("Dbl-clicking on the container");
83 EventUtils.synthesizeMouseAtCenter(container, {clickCount: 2}, styleWindow);
85 yield onExpand;
87 // Expanded means the matchedselectors div is not empty
88 let div = styleDocument.querySelector(".property-content .matchedselectors");
89 ok(div.childNodes.length > 0, "Matched selectors are expanded on dblclick");
90 }
92 function* testCollapseOnDblClick({styleDocument, styleWindow}, inspector) {
93 info("Testing that a property collapses on container dbl-click");
95 info("Getting computed property container");
96 let container = styleDocument.querySelector(".property-view");
97 ok(container, "Container found");
99 let onCollapse = inspector.once("computed-view-property-collapsed");
100 info("Dbl-clicking on the container");
101 EventUtils.synthesizeMouseAtCenter(container, {clickCount: 2}, styleWindow);
103 yield onCollapse;
105 // Collapsed means the matchedselectors div is empty
106 let div = styleDocument.querySelector(".property-content .matchedselectors");
107 ok(div.childNodes.length === 0, "Matched selectors are collapsed on dblclick");
108 }
