diff options
Diffstat (limited to 'devtools/client/inspector/compatibility/test/browser/browser_compatibility_event_rule-change.js')
-rw-r--r-- | devtools/client/inspector/compatibility/test/browser/browser_compatibility_event_rule-change.js | 179 |
1 files changed, 179 insertions, 0 deletions
diff --git a/devtools/client/inspector/compatibility/test/browser/browser_compatibility_event_rule-change.js b/devtools/client/inspector/compatibility/test/browser/browser_compatibility_event_rule-change.js new file mode 100644 index 0000000000..91b29b488b --- /dev/null +++ b/devtools/client/inspector/compatibility/test/browser/browser_compatibility_event_rule-change.js @@ -0,0 +1,179 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test whether the content of the issue list will be changed when the rules are changed +// on the rule view. + +const TEST_URI = ` + <style> + .test-class { + ruby-align: center; + } + div { + scrollbar-width: thin; + } + </style> + <div class="test-class">test class</div> + <div>test</div> +`; + +const TEST_DATA_SELECTED = { + fullRule: { + expectedProperties: [ + { + property: "ruby-align", + url: "https://developer.mozilla.org/docs/Web/CSS/ruby-align", + }, + { + property: "scrollbar-width", + url: "https://developer.mozilla.org/docs/Web/CSS/scrollbar-width", + }, + ], + expectedNodes: [ + { + property: "ruby-align", + nodes: [], + }, + { + property: "scrollbar-width", + nodes: [], + }, + ], + }, + classRule: { + expectedProperties: [ + { + property: "ruby-align", + url: "https://developer.mozilla.org/docs/Web/CSS/ruby-align", + }, + ], + expectedNodes: [ + { + property: "ruby-align", + nodes: [], + }, + ], + }, + elementRule: { + expectedProperties: [ + { + property: "scrollbar-width", + url: "https://developer.mozilla.org/docs/Web/CSS/scrollbar-width", + }, + ], + expectedNodes: [ + { + property: "scrollbar-width", + nodes: [], + }, + ], + }, +}; + +const TEST_DATA_ALL = { + fullRule: { + expectedProperties: [ + { + property: "ruby-align", + url: "https://developer.mozilla.org/docs/Web/CSS/ruby-align", + }, + { + property: "scrollbar-width", + url: "https://developer.mozilla.org/docs/Web/CSS/scrollbar-width", + }, + ], + expectedNodes: [ + { + property: "ruby-align", + nodes: ["div.test-class"], + }, + { + property: "scrollbar-width", + nodes: ["div.test-class", "div"], + }, + ], + }, + classRule: { + expectedProperties: [ + { + property: "ruby-align", + url: "https://developer.mozilla.org/docs/Web/CSS/ruby-align", + }, + ], + expectedNodes: [ + { + property: "ruby-align", + nodes: ["div.test-class"], + }, + ], + }, + elementRule: { + expectedProperties: [ + { + property: "scrollbar-width", + url: "https://developer.mozilla.org/docs/Web/CSS/scrollbar-width", + }, + ], + expectedNodes: [ + { + property: "scrollbar-width", + nodes: ["div.test-class", "div"], + }, + ], + }, +}; + +const { + COMPATIBILITY_UPDATE_NODES_COMPLETE, +} = require("resource://devtools/client/inspector/compatibility/actions/index.js"); + +add_task(async function () { + info("Enable 3 pane mode"); + await pushPref("devtools.inspector.three-pane-enabled", true); + + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + + const { allElementsPane, inspector, selectedElementPane } = + await openCompatibilityView(); + await selectNode(".test-class", inspector); + + info("Check the initial issue"); + await assertAll(selectedElementPane, TEST_DATA_SELECTED.fullRule); + await assertAll(allElementsPane, TEST_DATA_ALL.fullRule); + + info("Check the issue after unchecking class rule"); + await _togglePropStatus(inspector, 1, 0); + await assertAll(selectedElementPane, TEST_DATA_SELECTED.elementRule); + await assertAll(allElementsPane, TEST_DATA_ALL.elementRule); + + info("Check the issue after unchecking div rule"); + await _togglePropStatus(inspector, 2, 0); + await assertIssueList(selectedElementPane, []); + await assertIssueList(allElementsPane, []); + + info("Check the issue after reverting class rule"); + await _togglePropStatus(inspector, 1, 0); + await assertAll(selectedElementPane, TEST_DATA_SELECTED.classRule); + await assertAll(allElementsPane, TEST_DATA_ALL.classRule); + + info("Check the issue after reverting div rule"); + await _togglePropStatus(inspector, 2, 0); + await assertAll(selectedElementPane, TEST_DATA_SELECTED.fullRule); + await assertAll(allElementsPane, TEST_DATA_ALL.fullRule); +}); + +async function assertAll(pane, { expectedProperties, expectedNodes }) { + await assertIssueList(pane, expectedProperties); + await assertNodeList(pane, expectedNodes); +} + +async function _togglePropStatus(inspector, ruleIndex, propIndex) { + const onNodesUpdated = waitForDispatch( + inspector.store, + COMPATIBILITY_UPDATE_NODES_COMPLETE + ); + await togglePropStatusOnRuleView(inspector, ruleIndex, propIndex); + await onNodesUpdated; +} |