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"
+  );
+}