1 files changed, 104 insertions, 0 deletions
diff --git a/devtools/client/styleeditor/test/browser_styleeditor_bug_1247083_inline_stylesheet_numbering.js b/devtools/client/styleeditor/test/browser_styleeditor_bug_1247083_inline_stylesheet_numbering.js
new file mode 100644
index 0000000000..1f40d44cc1
--- /dev/null
+++ b/devtools/client/styleeditor/test/browser_styleeditor_bug_1247083_inline_stylesheet_numbering.js
@@ -0,0 +1,104 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test that the displayed numbering of inline and user-created stylesheets are independent of their absolute index
+// See bug 1247083.
+
+const SIMPLE = TEST_BASE_HTTP + "simple.css";
+const LONG = TEST_BASE_HTTP + "doc_long.css";
+const DOCUMENT_WITH_LONG_SHEET =
+  "data:text/html;charset=UTF-8," +
+  encodeURIComponent(
+    [
+      "<!DOCTYPE html>",
+      "<html>",
+      " <head>",
+      "  <title>Style editor numbering test page</title>",
+
+      // first inline stylesheet
+      "  <style>",
+      "   #p-blue {",
+      "    color: blue;",
+      "   }",
+      "  </style>",
+      // first external stylesheet
+      '  <link rel="stylesheet" type="text/css" href="' + SIMPLE + '">',
+      // second external stylesheet
+      '  <link rel="stylesheet" type="text/css" href="' + LONG + '">',
+      // second inline stylesheet
+      "  <style>",
+      "   #p-green {",
+      "    color: green;",
+      "   }",
+      "   #p-red {",
+      "    color: red;",
+      "   }",
+      "  </style>",
+
+      " </head>",
+      " <body>",
+      " </body>",
+      "</html>",
+    ].join("\n")
+  );
+
+add_task(async function () {
+  info("Test that inline stylesheets are numbered correctly");
+  const { ui } = await openStyleEditorForURL(DOCUMENT_WITH_LONG_SHEET);
+
+  is(ui.editors.length, 4, "4 editors present.");
+
+  const firstEditor = ui.editors[0];
+  is(
+    firstEditor.styleSheetFriendlyIndex,
+    0,
+    "1st inline stylesheet's index is 0"
+  );
+
+  is(
+    firstEditor.styleSheet.styleSheetIndex,
+    0,
+    "1st inline stylesheet is also the first stylesheet declared"
+  );
+
+  is(firstEditor.styleSheet.ruleCount, 1, "1st inline stylesheet has 1 rule");
+
+  const secondEditor = ui.editors[3];
+  is(
+    secondEditor.styleSheetFriendlyIndex,
+    1,
+    "2nd inline stylesheet's index is 1"
+  );
+
+  is(
+    secondEditor.styleSheet.styleSheetIndex,
+    3,
+    "2nd inline stylesheet is the last stylesheet"
+  );
+
+  is(secondEditor.styleSheet.ruleCount, 2, "2nd inline stylesheet has 2 rules");
+});
+
+add_task(async function () {
+  info("Test that user-created stylesheets are numbered correctly");
+  const { panel, ui } = await openStyleEditorForURL(DOCUMENT_WITH_LONG_SHEET);
+  await createNewStyleSheet(ui, panel.panelWindow);
+  await createNewStyleSheet(ui, panel.panelWindow);
+
+  is(ui.editors.length, 6, "6 editors present.");
+
+  ok(ui.editors[4].isNew, "2nd to last editor is user-created");
+  is(
+    ui.editors[4].styleSheetFriendlyIndex,
+    0,
+    "2nd to last user created stylesheet's index is 0"
+  );
+
+  ok(ui.editors[5].isNew, "Last editor is user-created");
+  is(
+    ui.editors[5].styleSheetFriendlyIndex,
+    1,
+    "Last user created stylesheet's index is 1"
+  );
+});