diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 17:32:43 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 17:32:43 +0000 |
commit | 6bf0a5cb5034a7e684dcc3500e841785237ce2dd (patch) | |
tree | a68f146d7fa01f0134297619fbe7e33db084e0aa /devtools/client/inspector/rules/test/browser_rules_edit-property-computed.js | |
parent | Initial commit. (diff) | |
download | thunderbird-upstream.tar.xz thunderbird-upstream.zip |
Adding upstream version 1:115.7.0.upstream/1%115.7.0upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to '')
-rw-r--r-- | devtools/client/inspector/rules/test/browser_rules_edit-property-computed.js | 108 |
1 files changed, 108 insertions, 0 deletions
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-property-computed.js b/devtools/client/inspector/rules/test/browser_rules_edit-property-computed.js new file mode 100644 index 0000000000..cbcbc506fe --- /dev/null +++ b/devtools/client/inspector/rules/test/browser_rules_edit-property-computed.js @@ -0,0 +1,108 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test that the computed values of a style (the shorthand expansion) are +// properly updated after the style is changed. + +const TEST_URI = ` + <style type="text/css"> + #testid { + padding: 10px; + } + </style> + <div id="testid">Styled Node</div> +`; + +add_task(async function () { + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + const { inspector, view } = await openRuleView(); + await selectNode("#testid", inspector); + await editAndCheck(view); +}); + +async function editAndCheck(view) { + const prop = getTextProperty(view, 1, { padding: "10px" }); + const propEditor = prop.editor; + const newPaddingValue = "20px"; + + info("Focusing the inplace editor field"); + const editor = await focusEditableField(view, propEditor.valueSpan); + is( + inplaceEditor(propEditor.valueSpan), + editor, + "Focused editor should be the value span." + ); + + const onPropertyChange = waitForComputedStyleProperty( + "#testid", + null, + "padding-top", + newPaddingValue + ); + const onRefreshAfterPreview = once(view, "ruleview-changed"); + + info("Entering a new value"); + EventUtils.sendString(newPaddingValue, view.styleWindow); + + info( + "Waiting for the debounced previewValue to apply the " + + "changes to document" + ); + + view.debounce.flush(); + await onPropertyChange; + + info("Waiting for ruleview-refreshed after previewValue was applied."); + await onRefreshAfterPreview; + + const onBlur = once(editor.input, "blur"); + + info("Entering the commit key and finishing edit"); + EventUtils.synthesizeKey("KEY_Enter"); + + info("Waiting for blur on the field"); + await onBlur; + + info("Waiting for the style changes to be applied"); + await once(view, "ruleview-changed"); + + const computed = prop.computed; + const propNames = [ + "padding-top", + "padding-right", + "padding-bottom", + "padding-left", + ]; + + is(computed.length, propNames.length, "There should be 4 computed values"); + propNames.forEach((propName, i) => { + is( + computed[i].name, + propName, + "Computed property #" + i + " has name " + propName + ); + is( + computed[i].value, + newPaddingValue, + "Computed value of " + propName + " is as expected" + ); + }); + + propEditor.expander.click(); + const computedDom = propEditor.computed; + is( + computedDom.children.length, + propNames.length, + "There should be 4 nodes in the DOM" + ); + propNames.forEach((propName, i) => { + is( + computedDom.getElementsByClassName("ruleview-propertyvalue")[i] + .textContent, + newPaddingValue, + "Computed value of " + propName + " in DOM is as expected" + ); + }); +} |