diff options
Diffstat (limited to 'devtools/client/inspector/rules/test/browser_rules_livepreview.js')
-rw-r--r-- | devtools/client/inspector/rules/test/browser_rules_livepreview.js | 76 |
1 files changed, 76 insertions, 0 deletions
diff --git a/devtools/client/inspector/rules/test/browser_rules_livepreview.js b/devtools/client/inspector/rules/test/browser_rules_livepreview.js new file mode 100644 index 0000000000..38ad5ee1d0 --- /dev/null +++ b/devtools/client/inspector/rules/test/browser_rules_livepreview.js @@ -0,0 +1,76 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test that changes are previewed when editing a property value. + +const TEST_URI = ` + <style type="text/css"> + #testid { + display:block; + } + </style> + <div id="testid">Styled Node</div><span>inline element</span> +`; + +// Format +// { +// value : what to type in the field +// expected : expected computed style on the targeted element +// } +const TEST_DATA = [ + { value: "inline", expected: "inline" }, + { value: "inline-block", expected: "inline-block" }, + + // Invalid property values should not apply, and should fall back to default + { value: "red", expected: "block" }, + { value: "something", expected: "block" }, + + { escape: true, value: "inline", expected: "block" }, +]; + +add_task(async function () { + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + const { inspector, view } = await openRuleView(); + await selectNode("#testid", inspector); + + for (const data of TEST_DATA) { + await testLivePreviewData(data, view, "#testid"); + } +}); + +async function testLivePreviewData(data, ruleView, selector) { + const rule = getRuleViewRuleEditor(ruleView, 1).rule; + const propEditor = rule.textProps[0].editor; + + info("Focusing the property value inplace-editor"); + const editor = await focusEditableField(ruleView, propEditor.valueSpan); + is( + inplaceEditor(propEditor.valueSpan), + editor, + "The focused editor is the value" + ); + + info("Entering value in the editor: " + data.value); + const onPreviewDone = ruleView.once("ruleview-changed"); + EventUtils.sendString(data.value, ruleView.styleWindow); + ruleView.debounce.flush(); + await onPreviewDone; + + const onValueDone = ruleView.once("ruleview-changed"); + if (data.escape) { + EventUtils.synthesizeKey("KEY_Escape"); + } else { + EventUtils.synthesizeKey("KEY_Enter"); + } + await onValueDone; + + // While the editor is still focused in, the display should have + // changed already + is( + await getComputedStyleProperty(selector, null, "display"), + data.expected, + "Element should be previewed as " + data.expected + ); +} |