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_css-compatibility-toggle-rules.js | |
parent | Initial commit. (diff) | |
download | thunderbird-6bf0a5cb5034a7e684dcc3500e841785237ce2dd.tar.xz thunderbird-6bf0a5cb5034a7e684dcc3500e841785237ce2dd.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_css-compatibility-toggle-rules.js | 150 |
1 files changed, 150 insertions, 0 deletions
diff --git a/devtools/client/inspector/rules/test/browser_rules_css-compatibility-toggle-rules.js b/devtools/client/inspector/rules/test/browser_rules_css-compatibility-toggle-rules.js new file mode 100644 index 0000000000..7209adbc2e --- /dev/null +++ b/devtools/client/inspector/rules/test/browser_rules_css-compatibility-toggle-rules.js @@ -0,0 +1,150 @@ +/* vim: set ft=javascript ts=2 et sw=2 tw=80: */ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test - Toggling rules linked to the element and the class +// Checking whether the compatibility warning icon is displayed +// correctly. +// If a rule is disabled, it is marked compatible to keep +// consistency with compatibility panel. +// We test both the compatible and incompatible rules here + +const TEST_URI = ` +<style> + div { + color: green; + background-color: black; + -moz-float-edge: content-box; + } +</style> +<div class="test-inline" style="color:pink; user-select:none;"></div> +<div class="test-class-linked"></div>`; + +const TEST_DATA_INITIAL = [ + { + selector: ".test-class-linked", + rules: [ + {}, + { + color: { value: "green" }, + "background-color": { value: "black" }, + "-moz-float-edge": { + value: "content-box", + expected: COMPATIBILITY_TOOLTIP_MESSAGE.deprecated, + }, + }, + ], + }, + { + selector: ".test-inline", + rules: [ + { + color: { value: "pink" }, + "user-select": { + value: "none", + expected: COMPATIBILITY_TOOLTIP_MESSAGE.default, + }, + }, + { + color: { value: "green" }, + "background-color": { value: "black" }, + "-moz-float-edge": { + value: "content-box", + expected: COMPATIBILITY_TOOLTIP_MESSAGE.deprecated, + }, + }, + ], + }, +]; + +const TEST_DATA_TOGGLE_CLASS_DECLARATION = [ + { + selector: ".test-class-linked", + rules: [ + {}, + { + color: { value: "green" }, + "background-color": { value: "black" }, + "-moz-float-edge": { value: "content-box" }, + }, + ], + }, + { + selector: ".test-inline", + rules: [ + { + color: { value: "pink" }, + "user-select": { + value: "none", + expected: COMPATIBILITY_TOOLTIP_MESSAGE.default, + }, + }, + { + color: { value: "green" }, + "background-color": { value: "black" }, + "-moz-float-edge": { value: "content-box" }, + }, + ], + }, +]; + +const TEST_DATA_TOGGLE_INLINE = [ + { + selector: ".test-class-linked", + rules: [ + {}, + { + color: { value: "green" }, + "background-color": { value: "black" }, + "-moz-float-edge": { value: "content-box" }, + }, + ], + }, + { + selector: ".test-inline", + rules: [ + { + color: { value: "pink" }, + "user-select": { value: "none" }, + }, + { + color: { value: "green" }, + "background-color": { value: "black" }, + "-moz-float-edge": { value: "content-box" }, + }, + ], + }, +]; + +add_task(async function () { + await pushPref( + "devtools.inspector.ruleview.inline-compatibility-warning.enabled", + true + ); + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + const { inspector, view } = await openRuleView(); + + const mozFloatEdge = { "-moz-float-edge": "content-box" }; + const userSelect = { "user-select": "none" }; + + await runCSSCompatibilityTests(view, inspector, TEST_DATA_INITIAL); + + info( + 'Disable -moz-float-edge: "content-box" which is not cross browser compatible declaration' + ); + await toggleDeclaration(view, 1, mozFloatEdge); + await runCSSCompatibilityTests( + view, + inspector, + TEST_DATA_TOGGLE_CLASS_DECLARATION + ); + + info( + 'Toggle inline declaration "user-select": "none" and check the compatibility status' + ); + await selectNode(".test-inline", inspector); + await toggleDeclaration(view, 0, userSelect); + await runCSSCompatibilityTests(view, inspector, TEST_DATA_TOGGLE_INLINE); +}); |