1 files changed, 105 insertions, 0 deletions
diff --git a/devtools/server/tests/chrome/test_inspector-inactive-property-helper.html b/devtools/server/tests/chrome/test_inspector-inactive-property-helper.html
new file mode 100644
index 0000000000..da6fc713ee
--- /dev/null
+++ b/devtools/server/tests/chrome/test_inspector-inactive-property-helper.html
@@ -0,0 +1,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>