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 changes are previewed when editing a property value
michael@0: 
michael@0: // Format
michael@0: // {
michael@0: //   value : what to type in the field
michael@0: //   expected : expected computed style on the targeted element
michael@0: // }
michael@0: const TEST_DATA = [
michael@0:   {value: "inline", expected: "inline"},
michael@0:   {value: "inline-block", expected: "inline-block"},
michael@0: 
michael@0:   // Invalid property values should not apply, and should fall back to default
michael@0:   {value: "red", expected: "block"},
michael@0:   {value: "something", expected: "block"},
michael@0: 
michael@0:   {escape: true, value: "inline", expected: "block"}
michael@0: ];
michael@0: 
michael@0: let test = asyncTest(function*() {
michael@0:   yield addTab("data:text/html,test rule view live preview on user changes");
michael@0: 
michael@0:   let style = '#testid {display:block;}';
michael@0:   let styleNode = addStyle(content.document, style);
michael@0:   content.document.body.innerHTML = '<div id="testid">Styled Node</div><span>inline element</span>';
michael@0:   let testElement = getNode("#testid");
michael@0: 
michael@0:   let {toolbox, inspector, view} = yield openRuleView();
michael@0:   yield selectNode(testElement, inspector);
michael@0: 
michael@0:   for (let data of TEST_DATA) {
michael@0:     yield testLivePreviewData(data, view, testElement);
michael@0:   }
michael@0: });
michael@0: 
michael@0: 
michael@0: function* testLivePreviewData(data, ruleView, testElement) {
michael@0:   let idRuleEditor = ruleView.element.children[1]._ruleEditor;
michael@0:   let propEditor = idRuleEditor.rule.textProps[0].editor;
michael@0: 
michael@0:   info("Focusing the property value inplace-editor");
michael@0:   let editor = yield focusEditableField(propEditor.valueSpan);
michael@0:   is(inplaceEditor(propEditor.valueSpan), editor, "The focused editor is the value");
michael@0: 
michael@0:   info("Enter a value in the editor")
michael@0:   for (let ch of data.value) {
michael@0:     EventUtils.sendChar(ch, ruleView.doc.defaultView);
michael@0:   }
michael@0:   if (data.escape) {
michael@0:     EventUtils.synthesizeKey("VK_ESCAPE", {});
michael@0:   } else {
michael@0:     EventUtils.synthesizeKey("VK_RETURN", {});
michael@0:   }
michael@0: 
michael@0:   yield wait(1);
michael@0: 
michael@0:   // While the editor is still focused in, the display should have changed already
michael@0:   is(content.getComputedStyle(testElement).display,
michael@0:     data.expected,
michael@0:     "Element should be previewed as " + data.expected);
michael@0: }