The Tor Browser / file comparison
comparison: browser/devtools/styleinspector/test/browser_computedview_matched-selectors-toggle.js
browser/devtools/styleinspector/test/browser_computedview_matched-selectors-toggle.js
- changeset 0
- 6474c204b198
equal
deleted
inserted
replaced
| -1:000000000000 | 0:24465f71b43b |
|---|---|
| 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 computed view properties can be expanded and collapsed with | |
| 8 // either the twisty or by dbl-clicking on the container | |
| 9 | |
| 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")); | |
| 24 | |
| 25 let test = asyncTest(function*() { | |
| 26 yield addTab(TEST_URL); | |
| 27 let {toolbox, inspector, view} = yield openComputedView(); | |
| 28 | |
| 29 info("Selecting the test node"); | |
| 30 yield selectNode("h1", inspector); | |
| 31 | |
| 32 yield testExpandOnTwistyClick(view, inspector); | |
| 33 yield testCollapseOnTwistyClick(view, inspector); | |
| 34 yield testExpandOnDblClick(view, inspector); | |
| 35 yield testCollapseOnDblClick(view, inspector); | |
| 36 }); | |
| 37 | |
| 38 function* testExpandOnTwistyClick({styleDocument, styleWindow}, inspector) { | |
| 39 info("Testing that a property expands on twisty click"); | |
| 40 | |
| 41 info("Getting twisty element"); | |
| 42 let twisty = styleDocument.querySelector(".expandable"); | |
| 43 ok(twisty, "Twisty found"); | |
| 44 | |
| 45 let onExpand = inspector.once("computed-view-property-expanded"); | |
| 46 info("Clicking on the twisty element"); | |
| 47 twisty.click(); | |
| 48 | |
| 49 yield onExpand; | |
| 50 | |
| 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 } | |
| 55 | |
| 56 function* testCollapseOnTwistyClick({styleDocument, styleWindow}, inspector) { | |
| 57 info("Testing that a property collapses on twisty click"); | |
| 58 | |
| 59 info("Getting twisty element"); | |
| 60 let twisty = styleDocument.querySelector(".expandable"); | |
| 61 ok(twisty, "Twisty found"); | |
| 62 | |
| 63 let onCollapse = inspector.once("computed-view-property-collapsed"); | |
| 64 info("Clicking on the twisty element"); | |
| 65 twisty.click(); | |
| 66 | |
| 67 yield onCollapse; | |
| 68 | |
| 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 } | |
| 73 | |
| 74 function* testExpandOnDblClick({styleDocument, styleWindow}, inspector) { | |
| 75 info("Testing that a property expands on container dbl-click"); | |
| 76 | |
| 77 info("Getting computed property container"); | |
| 78 let container = styleDocument.querySelector(".property-view"); | |
| 79 ok(container, "Container found"); | |
| 80 | |
| 81 let onExpand = inspector.once("computed-view-property-expanded"); | |
| 82 info("Dbl-clicking on the container"); | |
| 83 EventUtils.synthesizeMouseAtCenter(container, {clickCount: 2}, styleWindow); | |
| 84 | |
| 85 yield onExpand; | |
| 86 | |
| 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 } | |
| 91 | |
| 92 function* testCollapseOnDblClick({styleDocument, styleWindow}, inspector) { | |
| 93 info("Testing that a property collapses on container dbl-click"); | |
| 94 | |
| 95 info("Getting computed property container"); | |
| 96 let container = styleDocument.querySelector(".property-view"); | |
| 97 ok(container, "Container found"); | |
| 98 | |
| 99 let onCollapse = inspector.once("computed-view-property-collapsed"); | |
| 100 info("Dbl-clicking on the container"); | |
| 101 EventUtils.synthesizeMouseAtCenter(container, {clickCount: 2}, styleWindow); | |
| 102 | |
| 103 yield onCollapse; | |
| 104 | |
| 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 } |
