diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
tree | f435a8308119effd964b339f76abb83a57c29483 /devtools/client/inspector/rules/test/browser_rules_selector-highlighter_order.js | |
parent | Initial commit. (diff) | |
download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to '')
-rw-r--r-- | devtools/client/inspector/rules/test/browser_rules_selector-highlighter_order.js | 56 |
1 files changed, 56 insertions, 0 deletions
diff --git a/devtools/client/inspector/rules/test/browser_rules_selector-highlighter_order.js b/devtools/client/inspector/rules/test/browser_rules_selector-highlighter_order.js new file mode 100644 index 0000000000..b7b259982f --- /dev/null +++ b/devtools/client/inspector/rules/test/browser_rules_selector-highlighter_order.js @@ -0,0 +1,56 @@ +/* Any copyright is dedicated to the Public Domain. +http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +const TEST_URI = ` +<style type="text/css"> + #rule-from-stylesheet { + color: red; + } +</style> +<div id=inline style="cursor:pointer"> + A + <div id=inherited>B</div> +</div> +<div id=rule-from-stylesheet>C</a> +`; + +// This test will assert that specific elements of a ruleview rule have been +// rendered in the expected order. This is specifically done to check the fix +// for Bug 1664511, where some elements were rendered out of order due to +// unexpected async processing. +add_task(async function () { + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + const { inspector, view } = await openRuleView(); + + await selectNode("#inline", inspector); + checkRuleViewRuleMarkupOrder(view, "element"); + await selectNode("#inherited", inspector); + checkRuleViewRuleMarkupOrder(view, "element", 1); + await selectNode("#rule-from-stylesheet", inspector); + checkRuleViewRuleMarkupOrder(view, "#rule-from-stylesheet"); +}); + +function checkRuleViewRuleMarkupOrder(view, selectorText, index = 0) { + const rule = getRuleViewRule(view, selectorText, index); + + // Retrieve the individual elements to assert. + const selectorContainer = rule.querySelector(".ruleview-selectors-container"); + const highlighterIcon = rule.querySelector(".js-toggle-selector-highlighter"); + const ruleOpenBrace = rule.querySelector(".ruleview-ruleopen"); + + const parentNode = selectorContainer.parentNode; + const childNodes = [...parentNode.childNodes]; + + Assert.less( + childNodes.indexOf(selectorContainer), + childNodes.indexOf(highlighterIcon), + "Selector text is rendered before the highlighter icon" + ); + Assert.less( + childNodes.indexOf(highlighterIcon), + childNodes.indexOf(ruleOpenBrace), + "Highlighter icon is rendered before the opening brace" + ); +} |