summaryrefslogtreecommitdiffstats
path: root/devtools/client/inspector/changes/test/xpcshell/test_changes_stylesheet.js
blob: 33a64cfbcba2e879426b21c592f072c89e809030 (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
/* Any copyright is dedicated to the Public Domain.
   http://creativecommons.org/publicdomain/zero/1.0/ */

"use strict";

// Check that getChangesStylesheet() serializes tracked changes from nested CSS rules
// into the expected stylesheet format.

const {
  getChangesStylesheet,
} = require("resource://devtools/client/inspector/changes/selectors/changes.js");

const { CHANGES_STATE } = require("resource://test/mocks");

// Wrap multi-line string in backticks to ensure exact check in test, including new lines.
const STYLESHEET_FOR_ANCESTOR = `
/* Inline #0 | http://localhost:5000/at-rules-nested.html */

@media (min-width: 50em) {
  @supports (display: grid) {
    body {
      /* background-color: royalblue; */
      background-color: red;
    }
  }
}
`;

// Wrap multi-line string in backticks to ensure exact check in test, including new lines.
const STYLESHEET_FOR_DESCENDANT = `
/* Inline #0 | http://localhost:5000/at-rules-nested.html */

body {
  /* background-color: royalblue; */
  background-color: red;
}
`;

add_test(() => {
  info(
    "Check stylesheet generated for the first ancestor in the CSS rule tree."
  );
  equal(
    getChangesStylesheet(CHANGES_STATE),
    STYLESHEET_FOR_ANCESTOR,
    "Stylesheet includes all ancestors."
  );

  info(
    "Check stylesheet generated for the last descendant in the CSS rule tree."
  );
  const filter = { sourceIds: ["source1"], ruleIds: ["rule3"] };
  equal(
    getChangesStylesheet(CHANGES_STATE, filter),
    STYLESHEET_FOR_DESCENDANT,
    "Stylesheet includes just descendant."
  );

  run_next_test();
});