1 files changed, 32 insertions, 0 deletions
diff --git a/devtools/client/inspector/rules/test/browser_rules_variables_03-case-sensitive.js b/devtools/client/inspector/rules/test/browser_rules_variables_03-case-sensitive.js
new file mode 100644
index 0000000000..21fd00ec42
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_variables_03-case-sensitive.js
@@ -0,0 +1,32 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that inherited CSS variables are case senstive.
+
+const TEST_URI = URL_ROOT + "doc_variables_3.html";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, view } = await openRuleView();
+  await selectNode("#target", inspector);
+
+  const upperCaseVarEl = getRuleViewProperty(
+    view,
+    "div",
+    "color"
+  ).valueSpan.querySelector(".ruleview-variable");
+  const lowerCaseVarEl = getRuleViewProperty(
+    view,
+    "div",
+    "background"
+  ).valueSpan.querySelector(".ruleview-variable");
+
+  is(upperCaseVarEl.textContent, "--COLOR", "upper case variable is matched");
+  is(
+    lowerCaseVarEl.textContent,
+    "--background",
+    "lower case variable is matched"
+  );
+});