summaryrefslogtreecommitdiffstats
path: root/devtools/server/tests/chrome/test_inspector-inactive-property-helper.html
blob: da6fc713eee1388cfd2ce6b88843459ba52050fb (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
105
<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test for InactivePropertyHelper</title>
    <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
    <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
    <script type="application/javascript">
"use strict";
SimpleTest.waitForExplicitFinish();

(async function() {
  const { require } = ChromeUtils.importESModule("resource://devtools/shared/loader/Loader.sys.mjs");
  const { isPropertyUsed } = require("devtools/server/actors/utils/inactive-property-helper");

  const INACTIVE_CSS_PREF = "devtools.inspector.inactive.css.enabled";
  Services.prefs.setBoolPref(INACTIVE_CSS_PREF, true);
  SimpleTest.registerCleanupFunction(() => {
    Services.prefs.clearUserPref(INACTIVE_CSS_PREF);
  });

  const FOLDER = "./inactive-property-helper";

  // Each file should `export default` an array of objects, representing each test case.
  // A single test case is an object of the following shape:
  // - {String} info: a summary of the test case
  // - {String} property: the CSS property that should be tested
  // - {String|undefined} tagName: the tagName of the element we're going to test.
  //                               Optional only if there's a createTestElement property.
  // - {Function|undefined} createTestElement: A function that takes a node as a parameter
  //                                           where elements used for the test case will
  //                                           be appended. The function should return the
  //                                           element that will be passed to
  //                                           isPropertyUsed.
  //                                           Optional only if there's a tagName property
  // - {Array<String>} rules: An array of the rules that will be applied on the element.
  //                          This can't be empty as isPropertyUsed need a rule.
  // - {Integer|undefined} ruleIndex: If there are multiples rules in `rules`, the index
  //                                  of the one that should be tested in isPropertyUsed.
  // - {Boolean} isActive: should the property be active (isPropertyUsed `used` result).
  const testFiles = [
    "align-content.mjs",
    "border-image.mjs",
    "flex-grid-item-properties.mjs",
    "float.mjs",
    "gap.mjs",
    "grid-container-properties.mjs",
    "grid-with-absolute-properties.mjs",
    "margin-padding.mjs",
    "max-min-width-height.mjs",
    "place-items-content.mjs",
    "positioned.mjs",
    "scroll-padding.mjs",
    "vertical-align.mjs",
    "table.mjs",
    "text-overflow.mjs",
    "width-height-ruby.mjs",
  ].map(file => `${FOLDER}/${file}`);

  // Import all the test cases
  const tests =
  // eslint-disable-next-line no-unsanitized/method
    (await Promise.all(testFiles.map(f => import(f).then(data => data.default)))).flat();

  for (const {
    info: summary,
    property,
    tagName,
    createTestElement,
    rules,
    ruleIndex,
    isActive
  } of tests) {
    // Create an element which will contain the test elements.
    const main = document.createElement("main");
    document.firstElementChild.appendChild(main);

    // Apply the CSS rules to the document.
    const style = document.createElement("style");
    main.append(style);
    for (const dataRule of rules) {
      style.sheet.insertRule(dataRule);
    }
    const rule = style.sheet.cssRules[ruleIndex || 0];

    // Create the test elements
    let el;
    if (createTestElement) {
      el = createTestElement(main);
    } else {
      el = document.createElement(tagName);
      main.append(el);
    }

    const { used } = isPropertyUsed(el, getComputedStyle(el), rule, property);
    ok(used === isActive, summary);

    main.remove();
  }
  SimpleTest.finish();
})();
    </script>
  </head>
  <body></body>
</html>