diff options
Diffstat (limited to '')
5 files changed, 148 insertions, 0 deletions
diff --git a/devtools/client/inspector/changes/test/xpcshell/.eslintrc.js b/devtools/client/inspector/changes/test/xpcshell/.eslintrc.js new file mode 100644 index 0000000000..86bd54c245 --- /dev/null +++ b/devtools/client/inspector/changes/test/xpcshell/.eslintrc.js @@ -0,0 +1,6 @@ +"use strict"; + +module.exports = { + // Extend from the common devtools xpcshell eslintrc config. + extends: "../../../../../.eslintrc.xpcshell.js", +}; diff --git a/devtools/client/inspector/changes/test/xpcshell/head.js b/devtools/client/inspector/changes/test/xpcshell/head.js new file mode 100644 index 0000000000..f08a79dd71 --- /dev/null +++ b/devtools/client/inspector/changes/test/xpcshell/head.js @@ -0,0 +1,8 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +const { require } = ChromeUtils.importESModule( + "resource://devtools/shared/loader/Loader.sys.mjs" +); diff --git a/devtools/client/inspector/changes/test/xpcshell/mocks.js b/devtools/client/inspector/changes/test/xpcshell/mocks.js new file mode 100644 index 0000000000..52f175beb8 --- /dev/null +++ b/devtools/client/inspector/changes/test/xpcshell/mocks.js @@ -0,0 +1,67 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ +/* eslint-disable comma-dangle */ + +"use strict"; + +/** + * Snapshot of the Redux state for the Changes panel. + * + * It corresponds to the tracking of a single property value change (background-color) + * within a deeply nested CSS at-rule structure from an inline stylesheet: + * + * @media (min-width: 50em) { + * @supports (display: grid) { + * body { + * - background-color: royalblue; + * + background-color: red; + * } + * } + * } + */ +module.exports.CHANGES_STATE = { + source1: { + type: "inline", + href: "http://localhost:5000/at-rules-nested.html", + id: "source1", + index: 0, + isFramed: false, + rules: { + rule1: { + selectors: ["@media (min-width: 50em)"], + ruleId: "rule1", + add: [], + remove: [], + children: ["rule2"], + }, + rule2: { + selectors: ["@supports (display: grid)"], + ruleId: "rule2", + add: [], + remove: [], + children: ["rule3"], + parent: "rule1", + }, + rule3: { + selectors: ["body"], + ruleId: "rule3", + add: [ + { + property: "background-color", + value: "red", + index: 0, + }, + ], + remove: [ + { + property: "background-color", + value: "royalblue", + index: 0, + }, + ], + children: [], + parent: "rule2", + }, + }, + }, +}; diff --git a/devtools/client/inspector/changes/test/xpcshell/test_changes_stylesheet.js b/devtools/client/inspector/changes/test/xpcshell/test_changes_stylesheet.js new file mode 100644 index 0000000000..33a64cfbcb --- /dev/null +++ b/devtools/client/inspector/changes/test/xpcshell/test_changes_stylesheet.js @@ -0,0 +1,60 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Check that getChangesStylesheet() serializes tracked changes from nested CSS rules +// into the expected stylesheet format. + +const { + getChangesStylesheet, +} = require("resource://devtools/client/inspector/changes/selectors/changes.js"); + +const { CHANGES_STATE } = require("resource://test/mocks"); + +// Wrap multi-line string in backticks to ensure exact check in test, including new lines. +const STYLESHEET_FOR_ANCESTOR = ` +/* Inline #0 | http://localhost:5000/at-rules-nested.html */ + +@media (min-width: 50em) { + @supports (display: grid) { + body { + /* background-color: royalblue; */ + background-color: red; + } + } +} +`; + +// Wrap multi-line string in backticks to ensure exact check in test, including new lines. +const STYLESHEET_FOR_DESCENDANT = ` +/* Inline #0 | http://localhost:5000/at-rules-nested.html */ + +body { + /* background-color: royalblue; */ + background-color: red; +} +`; + +add_test(() => { + info( + "Check stylesheet generated for the first ancestor in the CSS rule tree." + ); + equal( + getChangesStylesheet(CHANGES_STATE), + STYLESHEET_FOR_ANCESTOR, + "Stylesheet includes all ancestors." + ); + + info( + "Check stylesheet generated for the last descendant in the CSS rule tree." + ); + const filter = { sourceIds: ["source1"], ruleIds: ["rule3"] }; + equal( + getChangesStylesheet(CHANGES_STATE, filter), + STYLESHEET_FOR_DESCENDANT, + "Stylesheet includes just descendant." + ); + + run_next_test(); +}); diff --git a/devtools/client/inspector/changes/test/xpcshell/xpcshell.toml b/devtools/client/inspector/changes/test/xpcshell/xpcshell.toml new file mode 100644 index 0000000000..2edc192d20 --- /dev/null +++ b/devtools/client/inspector/changes/test/xpcshell/xpcshell.toml @@ -0,0 +1,7 @@ +[DEFAULT] +tags = "devtools" +firefox-appdir = "browser" +head = "head.js" +support-files = ["./mocks.js"] + +["test_changes_stylesheet.js"] |