diff options
Diffstat (limited to 'devtools/client/inspector/rules/test/browser_rules_search-filter_09.js')
-rw-r--r-- | devtools/client/inspector/rules/test/browser_rules_search-filter_09.js | 79 |
1 files changed, 79 insertions, 0 deletions
diff --git a/devtools/client/inspector/rules/test/browser_rules_search-filter_09.js b/devtools/client/inspector/rules/test/browser_rules_search-filter_09.js new file mode 100644 index 0000000000..0d1c8c8a45 --- /dev/null +++ b/devtools/client/inspector/rules/test/browser_rules_search-filter_09.js @@ -0,0 +1,79 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Tests that the rule view search filter works properly for newly added +// property. + +const SEARCH = "100%"; + +const TEST_URI = ` + <style type='text/css'> + #testid { + width: 100%; + height: 50%; + } + </style> + <h1 id='testid'>Styled Node</h1> +`; + +add_task(async function () { + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + const { inspector, view } = await openRuleView(); + await selectNode("#testid", inspector); + + info("Enter the test value in the search filter"); + await setSearchFilter(view, SEARCH); + + info("Start entering a new property in the rule"); + const ruleEditor = getRuleViewRuleEditor(view, 1); + const rule = ruleEditor.rule; + const prop = getTextProperty(view, 1, { width: "100%" }); + let editor = await focusNewRuleViewProperty(ruleEditor); + + info("Check that the correct rules are visible"); + is(view.element.children.length, 2, "Should have 2 rules."); + is(rule.selectorText, "#testid", "Second rule is #testid."); + ok( + prop.editor.container.classList.contains("ruleview-highlight"), + "width text property is correctly highlighted." + ); + ok( + !getTextProperty(view, 1, { + height: "50%", + }).editor.container.classList.contains("ruleview-highlight"), + "height text property is not highlighted." + ); + + info("Test creating a new property"); + + info("Entering margin-left in the property name editor"); + // Changing the value doesn't cause a rule-view refresh, no need to wait for + // ruleview-changed here. + editor.input.value = "margin-left"; + + info("Pressing return to commit and focus the new value field"); + let onRuleViewChanged = view.once("ruleview-changed"); + EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow); + await onRuleViewChanged; + + // Getting the new value editor after focus + editor = inplaceEditor(view.styleDocument.activeElement); + const propEditor = ruleEditor.rule.textProps[2].editor; + + info("Entering a value and bluring the field to expect a rule change"); + onRuleViewChanged = view.once("ruleview-changed"); + editor.input.value = "100%"; + view.debounce.flush(); + await onRuleViewChanged; + + onRuleViewChanged = view.once("ruleview-changed"); + editor.input.blur(); + await onRuleViewChanged; + + ok( + propEditor.container.classList.contains("ruleview-highlight"), + "margin-left text property is correctly highlighted." + ); +}); |