1 files changed, 46 insertions, 0 deletions
diff --git a/devtools/client/inspector/rules/test/browser_rules_guessIndentation.js b/devtools/client/inspector/rules/test/browser_rules_guessIndentation.js
new file mode 100644
index 0000000000..22bec84378
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_guessIndentation.js
@@ -0,0 +1,46 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that we can guess indentation from a style sheet, not just a
+// rule.
+
+// Use a weird indentation depth to avoid accidental success.
+const TEST_URI = `
+  <style type='text/css'>
+div {
+       background-color: blue;
+}
+
+* {
+}
+</style>
+  <div id='testid' class='testclass'>Styled Node</div>
+`;
+
+const expectedText = `
+div {
+       background-color: blue;
+}
+
+* {
+       color: chartreuse;
+}
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { toolbox, inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  info("Add a new property in the rule-view");
+  await addProperty(view, 2, "color", "chartreuse");
+
+  info("Switch to the style-editor");
+  const { UI } = await toolbox.selectTool("styleeditor");
+
+  const styleEditor = await UI.editors[0].getSourceEditor();
+  const text = styleEditor.sourceEditor.getText();
+  is(text, expectedText, "style inspector changes are synced");
+});