devtools/client/inspector/rules/test/browser_rules_shorthand-overridden-lists_01.js


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

/* Any copyright is dedicated to the Public Domain.
 http://creativecommons.org/publicdomain/zero/1.0/ */

"use strict";

// Tests that overridden longhand properties aren't shown when the shorthand's value
// contains a CSS variable. When this happens, the longhand values can't be computed
// properly and are hidden. So the overridden longhand that are normally auto-expanded
// should be hidden too.

var TEST_URI = `
  <style type="text/css">
    div {
      --color: red;
      background: var(--color);
      background-repeat: no-repeat;
    }
  </style>
  <div>Inspect me</div>
`;

add_task(async function () {
  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
  const { inspector, view } = await openRuleView();
  await selectNode("div", inspector);

  const rule = getRuleViewRuleEditor(view, 1).rule;
  const shorthandOverridden = rule.textProps[1].editor.shorthandOverridden;

  is(
    shorthandOverridden.children.length,
    0,
    "The shorthandOverridden list is empty"
  );
});