michael@0: /* vim: set ft=javascript ts=2 et sw=2 tw=80: */
michael@0: /* Any copyright is dedicated to the Public Domain.
michael@0: http://creativecommons.org/publicdomain/zero/1.0/ */
michael@0:
michael@0: "use strict";
michael@0:
michael@0: // Test that the computed view properties can be expanded and collapsed with
michael@0: // either the twisty or by dbl-clicking on the container
michael@0:
michael@0: const TEST_URL = "data:text/html," + encodeURIComponent([
michael@0: '' +
michael@0: '' +
michael@0: ' Computed view toggling test',
michael@0: ' ',
michael@0: '',
michael@0: '',
michael@0: ' Some header text
',
michael@0: '',
michael@0: ''
michael@0: ].join("\n"));
michael@0:
michael@0: let test = asyncTest(function*() {
michael@0: yield addTab(TEST_URL);
michael@0: let {toolbox, inspector, view} = yield openComputedView();
michael@0:
michael@0: info("Selecting the test node");
michael@0: yield selectNode("h1", inspector);
michael@0:
michael@0: yield testExpandOnTwistyClick(view, inspector);
michael@0: yield testCollapseOnTwistyClick(view, inspector);
michael@0: yield testExpandOnDblClick(view, inspector);
michael@0: yield testCollapseOnDblClick(view, inspector);
michael@0: });
michael@0:
michael@0: function* testExpandOnTwistyClick({styleDocument, styleWindow}, inspector) {
michael@0: info("Testing that a property expands on twisty click");
michael@0:
michael@0: info("Getting twisty element");
michael@0: let twisty = styleDocument.querySelector(".expandable");
michael@0: ok(twisty, "Twisty found");
michael@0:
michael@0: let onExpand = inspector.once("computed-view-property-expanded");
michael@0: info("Clicking on the twisty element");
michael@0: twisty.click();
michael@0:
michael@0: yield onExpand;
michael@0:
michael@0: // Expanded means the matchedselectors div is not empty
michael@0: let div = styleDocument.querySelector(".property-content .matchedselectors");
michael@0: ok(div.childNodes.length > 0, "Matched selectors are expanded on twisty click");
michael@0: }
michael@0:
michael@0: function* testCollapseOnTwistyClick({styleDocument, styleWindow}, inspector) {
michael@0: info("Testing that a property collapses on twisty click");
michael@0:
michael@0: info("Getting twisty element");
michael@0: let twisty = styleDocument.querySelector(".expandable");
michael@0: ok(twisty, "Twisty found");
michael@0:
michael@0: let onCollapse = inspector.once("computed-view-property-collapsed");
michael@0: info("Clicking on the twisty element");
michael@0: twisty.click();
michael@0:
michael@0: yield onCollapse;
michael@0:
michael@0: // Collapsed means the matchedselectors div is empty
michael@0: let div = styleDocument.querySelector(".property-content .matchedselectors");
michael@0: ok(div.childNodes.length === 0, "Matched selectors are collapsed on twisty click");
michael@0: }
michael@0:
michael@0: function* testExpandOnDblClick({styleDocument, styleWindow}, inspector) {
michael@0: info("Testing that a property expands on container dbl-click");
michael@0:
michael@0: info("Getting computed property container");
michael@0: let container = styleDocument.querySelector(".property-view");
michael@0: ok(container, "Container found");
michael@0:
michael@0: let onExpand = inspector.once("computed-view-property-expanded");
michael@0: info("Dbl-clicking on the container");
michael@0: EventUtils.synthesizeMouseAtCenter(container, {clickCount: 2}, styleWindow);
michael@0:
michael@0: yield onExpand;
michael@0:
michael@0: // Expanded means the matchedselectors div is not empty
michael@0: let div = styleDocument.querySelector(".property-content .matchedselectors");
michael@0: ok(div.childNodes.length > 0, "Matched selectors are expanded on dblclick");
michael@0: }
michael@0:
michael@0: function* testCollapseOnDblClick({styleDocument, styleWindow}, inspector) {
michael@0: info("Testing that a property collapses on container dbl-click");
michael@0:
michael@0: info("Getting computed property container");
michael@0: let container = styleDocument.querySelector(".property-view");
michael@0: ok(container, "Container found");
michael@0:
michael@0: let onCollapse = inspector.once("computed-view-property-collapsed");
michael@0: info("Dbl-clicking on the container");
michael@0: EventUtils.synthesizeMouseAtCenter(container, {clickCount: 2}, styleWindow);
michael@0:
michael@0: yield onCollapse;
michael@0:
michael@0: // Collapsed means the matchedselectors div is empty
michael@0: let div = styleDocument.querySelector(".property-content .matchedselectors");
michael@0: ok(div.childNodes.length === 0, "Matched selectors are collapsed on dblclick");
michael@0: }