diff options
Diffstat (limited to '')
-rw-r--r-- | devtools/client/inspector/changes/test/browser_changes_declaration_edit_value.js | 170 |
1 files changed, 170 insertions, 0 deletions
diff --git a/devtools/client/inspector/changes/test/browser_changes_declaration_edit_value.js b/devtools/client/inspector/changes/test/browser_changes_declaration_edit_value.js new file mode 100644 index 0000000000..588513a274 --- /dev/null +++ b/devtools/client/inspector/changes/test/browser_changes_declaration_edit_value.js @@ -0,0 +1,170 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test that editing the value of a CSS declaration in the Rule view is tracked. + +const TEST_URI = ` + <style type='text/css'> + div { + color: red; + font-family: "courier"; + } + </style> + <div>test</div> +`; + +/* + This object contains iteration steps to modify various CSS properties of the + test element, keyed by property name,. + Each value is an array which will be iterated over in order and the `value` + property will be used to update the value of the property. + The `add` and `remove` objects hold the expected values of the tracked declarations + shown in the Changes panel. If `add` or `remove` are null, it means we don't expect + any corresponding tracked declaration to show up in the Changes panel. + */ +const ITERATIONS = { + color: [ + // No changes should be tracked if the value did not actually change. + { + value: "red", + add: null, + remove: null, + }, + // Changing the priority flag "!important" should be tracked. + { + value: "red !important", + add: { value: "red !important" }, + remove: { value: "red" }, + }, + // Repeated changes should still show the original value as the one removed. + { + value: "blue", + add: { value: "blue" }, + remove: { value: "red" }, + }, + // Restoring the original value should clear tracked changes. + { + value: "red", + add: null, + remove: null, + }, + ], + "font-family": [ + // Set a value with an opening quote, missing the closing one. + // The closing quote should still appear in the "add" value. + { + value: '"ar', + add: { value: '"ar"' }, + remove: { value: '"courier"' }, + // For some reason we need an additional flush the first time we set a + // value with a quote. Since the ruleview is manually flushed when opened + // openRuleView, we need to pass this information all the way down to the + // setProperty helper. + needsExtraFlush: true, + }, + // Add an escaped character + { + value: '"ar\\i', + add: { value: '"ar\\i"' }, + remove: { value: '"courier"' }, + }, + // Add some more text + { + value: '"ar\\ia', + add: { value: '"ar\\ia"' }, + remove: { value: '"courier"' }, + }, + // Remove the backslash + { + value: '"aria', + add: { value: '"aria"' }, + remove: { value: '"courier"' }, + }, + // Add the rest of the text, still no closing quote + { + value: '"arial', + add: { value: '"arial"' }, + remove: { value: '"courier"' }, + }, + // Restoring the original value should clear tracked changes. + { + value: '"courier"', + add: null, + remove: null, + }, + ], +}; + +add_task(async function () { + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + const { inspector, view: ruleView } = await openRuleView(); + const { document: doc, store } = selectChangesView(inspector); + + await selectNode("div", inspector); + + const colorProp = getTextProperty(ruleView, 1, { color: "red" }); + await assertEditValue(ruleView, doc, store, colorProp, ITERATIONS.color); + + const fontFamilyProp = getTextProperty(ruleView, 1, { + "font-family": '"courier"', + }); + await assertEditValue( + ruleView, + doc, + store, + fontFamilyProp, + ITERATIONS["font-family"] + ); +}); + +async function assertEditValue(ruleView, doc, store, prop, iterations) { + let onTrackChange; + for (const { value, add, needsExtraFlush, remove } of iterations) { + onTrackChange = waitForDispatch(store, "TRACK_CHANGE"); + + info(`Change the CSS declaration value to ${value}`); + await setProperty(ruleView, prop, value, { + flushCount: needsExtraFlush ? 2 : 1, + }); + info("Wait for the change to be tracked"); + await onTrackChange; + + if (add) { + await waitFor(() => { + const decl = getAddedDeclarations(doc); + return decl.length == 1 && decl[0].value == add.value; + }, "Only one declaration was tracked as added."); + const addDecl = getAddedDeclarations(doc); + is( + addDecl[0].value, + add.value, + `Added declaration has expected value: ${add.value}` + ); + } else { + await waitFor( + () => !getAddedDeclarations(doc).length, + "Added declaration was cleared" + ); + } + + if (remove) { + await waitFor( + () => getRemovedDeclarations(doc).length == 1, + "Only one declaration was tracked as removed." + ); + const removeDecl = getRemovedDeclarations(doc); + is( + removeDecl[0].value, + remove.value, + `Removed declaration has expected value: ${remove.value}` + ); + } else { + await waitFor( + () => !getRemovedDeclarations(doc).length, + "Removed declaration was cleared" + ); + } + } +} |