summaryrefslogtreecommitdiffstats
path: root/devtools/client/styleeditor/test/browser_styleeditor_bug_1247083_inline_stylesheet_numbering.js
blob: 1f40d44cc10635eb005bc295e00d7d749d2fd8b6 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
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"
  );
});