Bug 1558468 - Split InactivePropertyHelper test cases in multiple files. r=rcaliman.
authorNicolas Chevobbe <nchevobbe@mozilla.com>
Wed, 12 Jun 2019 09:49:16 +0000
changeset 478406 a97fcedd311f198a1d934fb7a8e56e59469f0a8e
parent 478405 64ba1e5a243b9e08305c26cb15c58ad5f949119d
child 478407 e2af929535f6b486eab6875f361cc7776f27d194
push id113419
push userdluca@mozilla.com
push dateWed, 12 Jun 2019 12:45:34 +0000
treeherdermozilla-inbound@65d08b294155 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersrcaliman
bugs1558468
milestone69.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1558468 - Split InactivePropertyHelper test cases in multiple files. r=rcaliman. This should make the test more managable as we add properties validators in InactivePropertyHelper. eslint doesn't support dynamic import yet, so we have to ignore the test file. Differential Revision: https://phabricator.services.mozilla.com/D34677
.eslintignore
devtools/server/tests/mochitest/chrome.ini
devtools/server/tests/mochitest/inactive-property-helper/.eslintrc.js
devtools/server/tests/mochitest/inactive-property-helper/gap.js
devtools/server/tests/mochitest/inactive-property-helper/max-min-width-height.js
devtools/server/tests/mochitest/inactive-property-helper/vertical-align.js
devtools/server/tests/mochitest/test_inspector-inactive-property-helper.html
--- a/.eslintignore
+++ b/.eslintignore
@@ -120,16 +120,17 @@ devtools/client/storage/test/*.html
 devtools/server/tests/browser/storage-*.html
 !devtools/server/tests/browser/storage-unsecured-iframe.html
 devtools/server/tests/browser/stylesheets-nested-iframes.html
 devtools/client/shared/webpack/shims/test/test_clipboard.html
 devtools/shared/qrcode/tests/mochitest/test_decode.html
 devtools/shared/tests/mochitest/*.html
 devtools/shared/webconsole/test/test_*.html
 devtools/client/webreplay/mochitest/examples/*.html
+devtools/server/tests/mochitest/test_inspector-inactive-property-helper.html
 
 # Ignore devtools debugger files
 # Keep in sync with devtools/client/debugger/.eslintignore
 devtools/client/debugger/assets/*
 devtools/client/debugger/src/test/examples/**
 devtools/client/debugger/src/test/integration/**
 devtools/client/debugger/src/test/unit-sources/**
 devtools/client/debugger/src/**/fixtures/**
--- a/devtools/server/tests/mochitest/chrome.ini
+++ b/devtools/server/tests/mochitest/chrome.ini
@@ -29,16 +29,17 @@ support-files =
   suspendTimeouts_content.js
   suspendTimeouts_worker.js
   small-image.gif
   setup-in-child.js
   setup-in-parent.js
   test_suspendTimeouts.js
   webconsole-helpers.js
   webextension-helpers.js
+  inactive-property-helper/*.js
 [test_animation-type-longhand.html]
 [test_connection-manager.html]
 skip-if = (verify && debug && (os == 'win'))
 [test_connectToFrame.html]
 [test_css-logic.html]
 [test_css-logic-media-queries.html]
 [test_css-logic-specificity.html]
 [test_css-properties.html]
new file mode 100644
--- /dev/null
+++ b/devtools/server/tests/mochitest/inactive-property-helper/.eslintrc.js
@@ -0,0 +1,7 @@
+"use strict";
+
+module.exports = {
+  parserOptions: {
+    sourceType: "module",
+  },
+};
copy from devtools/server/tests/mochitest/test_inspector-inactive-property-helper.html
copy to devtools/server/tests/mochitest/inactive-property-helper/gap.js
--- a/devtools/server/tests/mochitest/test_inspector-inactive-property-helper.html
+++ b/devtools/server/tests/mochitest/inactive-property-helper/gap.js
@@ -1,273 +1,14 @@
-<!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";
-
-const { require } = ChromeUtils.import("resource://devtools/shared/Loader.jsm");
-const { inactivePropertyHelper } = require("devtools/server/actors/utils/inactive-property-helper");
-let { isPropertyUsed } = inactivePropertyHelper;
-isPropertyUsed = isPropertyUsed.bind(inactivePropertyHelper);
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-// 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} tagName: the tagName of the element we're going to test
-// - {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} ruleIndex (optional): 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 tests = [{
-  info: "vertical-align is inactive on a block element",
-  property: "vertical-align",
-  tagName: "div",
-  rules: ["div { vertical-align: top; }"],
-  isActive: false,
-}, {
-  info: "vertical-align is inactive on a span with display block",
-  property: "vertical-align",
-  tagName: "span",
-  rules: ["span { vertical-align: top; display: block;}"],
-  isActive: false,
-}, {
-  info: "vertical-align is active on a div with display inline-block",
-  property: "vertical-align",
-  tagName: "div",
-  rules: ["div { vertical-align: top; display: inline-block;}"],
-  isActive: true,
-}, {
-  info: "vertical-align is active on a table-cell",
-  property: "vertical-align",
-  tagName: "div",
-  rules: ["div { vertical-align: top; display: table-cell;}"],
-  isActive: true,
-}, {
-  info: "vertical-align is active on a block element ::first-letter",
-  property: "vertical-align",
-  tagName: "div",
-  rules: ["div::first-letter { vertical-align: top; }"],
-  isActive: true,
-}, {
-  info: "vertical-align is active on a block element ::first-line",
-  property: "vertical-align",
-  tagName: "div",
-  rules: ["div::first-line { vertical-align: top; }"],
-  isActive: true,
-}, {
-  info: "vertical-align is active on an inline element",
-  property: "vertical-align",
-  tagName: "span",
-  rules: ["span { vertical-align: top; }"],
-  isActive: true,
-}, {
-  info: "width is inactive on a non-replaced inline element",
-  property: "width",
-  tagName: "span",
-  rules: ["span { width: 500px; }"],
-  isActive: false,
-}, {
-  info: "min-width is inactive on a non-replaced inline element",
-  property: "min-width",
-  tagName: "span",
-  rules: ["span { min-width: 500px; }"],
-  isActive: false,
-}, {
-  info: "max-width is inactive on a non-replaced inline element",
-  property: "max-width",
-  tagName: "span",
-  rules: ["span { max-width: 500px; }"],
-  isActive: false,
-}, {
-  info: "width is inactive on an tr element",
-  property: "width",
-  tagName: "tr",
-  rules: ["tr { width: 500px; }"],
-  isActive: false,
-}, {
-  info: "min-width is inactive on an tr element",
-  property: "min-width",
-  tagName: "tr",
-  rules: ["tr { min-width: 500px; }"],
-  isActive: false,
-}, {
-  info: "max-width is inactive on an tr element",
-  property: "max-width",
-  tagName: "tr",
-  rules: ["tr { max-width: 500px; }"],
-  isActive: false,
-}, {
-  info: "width is inactive on an thead element",
-  property: "width",
-  tagName: "thead",
-  rules: ["thead { width: 500px; }"],
-  isActive: false,
-}, {
-  info: "min-width is inactive on an thead element",
-  property: "min-width",
-  tagName: "thead",
-  rules: ["thead { min-width: 500px; }"],
-  isActive: false,
-}, {
-  info: "max-width is inactive on an thead element",
-  property: "max-width",
-  tagName: "thead",
-  rules: ["thead { max-width: 500px; }"],
-  isActive: false,
-}, {
-  info: "width is inactive on an tfoot element",
-  property: "width",
-  tagName: "tfoot",
-  rules: ["tfoot { width: 500px; }"],
-  isActive: false,
-}, {
-  info: "min-width is inactive on an tfoot element",
-  property: "min-width",
-  tagName: "tfoot",
-  rules: ["tfoot { min-width: 500px; }"],
-  isActive: false,
-}, {
-  info: "max-width is inactive on an tfoot element",
-  property: "max-width",
-  tagName: "tfoot",
-  rules: ["tfoot { max-width: 500px; }"],
-  isActive: false,
-}, {
-  info: "width is active on a replaced inline element",
-  property: "width",
-  tagName: "img",
-  rules: ["img { width: 500px; }"],
-  isActive: true,
-}, {
-  info: "min-width is active on a replaced inline element",
-  property: "min-width",
-  tagName: "img",
-  rules: ["img { min-width: 500px; }"],
-  isActive: true,
-}, {
-  info: "max-width is active on a replaced inline element",
-  property: "max-width",
-  tagName: "img",
-  rules: ["img { max-width: 500px; }"],
-  isActive: true,
-}, {
-  info: "width is active on a block element",
-  property: "width",
-  tagName: "div",
-  rules: ["div { width: 500px; }"],
-  isActive: true,
-}, {
-  info: "min-width is active on a block element",
-  property: "min-width",
-  tagName: "div",
-  rules: ["div { min-width: 500px; }"],
-  isActive: true,
-}, {
-  info: "max-width is active on a block element",
-  property: "max-width",
-  tagName: "div",
-  rules: ["div { max-width: 500px; }"],
-  isActive: true,
-}, {
-  info: "height is inactive on a non-replaced inline element",
-  property: "height",
-  tagName: "span",
-  rules: ["span { height: 500px; }"],
-  isActive: false,
-}, {
-  info: "min-height is inactive on a non-replaced inline element",
-  property: "min-height",
-  tagName: "span",
-  rules: ["span { min-height: 500px; }"],
-  isActive: false,
-}, {
-  info: "max-height is inactive on a non-replaced inline element",
-  property: "max-height",
-  tagName: "span",
-  rules: ["span { max-height: 500px; }"],
-  isActive: false,
-}, {
-  info: "height is inactive on colgroup element",
-  property: "height",
-  tagName: "colgroup",
-  rules: ["colgroup { height: 500px; }"],
-  isActive: false,
-}, {
-  info: "min-height is inactive on colgroup element",
-  property: "min-height",
-  tagName: "colgroup",
-  rules: ["colgroup { min-height: 500px; }"],
-  isActive: false,
-}, {
-  info: "max-height is inactive on colgroup element",
-  property: "max-height",
-  tagName: "colgroup",
-  rules: ["colgroup { max-height: 500px; }"],
-  isActive: false,
-}, {
-  info: "height is inactive on col element",
-  property: "height",
-  tagName: "col",
-  rules: ["col { height: 500px; }"],
-  isActive: false,
-}, {
-  info: "min-height is inactive on col element",
-  property: "min-height",
-  tagName: "col",
-  rules: ["col { min-height: 500px; }"],
-  isActive: false,
-}, {
-  info: "max-height is inactive on col element",
-  property: "max-height",
-  tagName: "col",
-  rules: ["col { max-height: 500px; }"],
-  isActive: false,
-}, {
-  info: "height is active on a replaced inline element",
-  property: "height",
-  tagName: "img",
-  rules: ["img { height: 500px; }"],
-  isActive: true,
-}, {
-  info: "min-height is active on a replaced inline element",
-  property: "min-height",
-  tagName: "img",
-  rules: ["img { min-height: 500px; }"],
-  isActive: true,
-}, {
-  info: "max-height is active on a replaced inline element",
-  property: "max-height",
-  tagName: "img",
-  rules: ["img { max-height: 500px; }"],
-  isActive: true,
-}, {
-  info: "height is active on a block element",
-  property: "height",
-  tagName: "div",
-  rules: ["div { height: 500px; }"],
-  isActive: true,
-}, {
-  info: "min-height is active on a block element",
-  property: "min-height",
-  tagName: "div",
-  rules: ["div { min-height: 500px; }"],
-  isActive: true,
-}, {
-  info: "max-height is active on a block element",
-  property: "max-height",
-  tagName: "div",
-  rules: ["div { max-height: 500px; }"],
-  isActive: true,
-}, {
+// InactivePropertyHelper `gap` test cases.
+export default [{
   info: "column-gap is inactive on non-grid and non-flex container",
   property: "column-gap",
   tagName: "div",
   rules: ["div { column-gap: 10px; display: block; }"],
   isActive: false,
 }, {
   info: "column-gap is active on grid container",
   property: "column-gap",
@@ -336,35 +77,8 @@ const tests = [{
   isActive: false,
 }, {
   info: "gap is active on multi-col container",
   property: "gap",
   tagName: "div",
   rules: ["div { gap: 10px; column-count: 2; }"],
   isActive: true,
 }];
-
-for (const { info: summary, property, tagName, rules, ruleIndex, isActive } of tests) {
-  info(summary);
-
-  // Create an element which will contain the test elements.
-  const main = document.createElement("main");
-  document.firstElementChild.appendChild(main);
-
-  // Create the element and insert the rules
-  const el = document.createElement(tagName);
-  const style = document.createElement("style");
-  main.append(style, el);
-
-  for (const dataRule of rules) {
-    style.sheet.insertRule(dataRule);
-  }
-  const rule = style.sheet.cssRules[ruleIndex || 0];
-
-  const { used } = isPropertyUsed(el, getComputedStyle(el), rule, property);
-  ok(used === isActive, `"${property}" is ${isActive ? "active" : "inactive"}`);
-
-  main.remove();
-}
-    </script>
-  </head>
-  <body></body>
-</html>
\ No newline at end of file
copy from devtools/server/tests/mochitest/test_inspector-inactive-property-helper.html
copy to devtools/server/tests/mochitest/inactive-property-helper/max-min-width-height.js
--- a/devtools/server/tests/mochitest/test_inspector-inactive-property-helper.html
+++ b/devtools/server/tests/mochitest/inactive-property-helper/max-min-width-height.js
@@ -1,75 +1,15 @@
-<!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";
-
-const { require } = ChromeUtils.import("resource://devtools/shared/Loader.jsm");
-const { inactivePropertyHelper } = require("devtools/server/actors/utils/inactive-property-helper");
-let { isPropertyUsed } = inactivePropertyHelper;
-isPropertyUsed = isPropertyUsed.bind(inactivePropertyHelper);
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-// 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} tagName: the tagName of the element we're going to test
-// - {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} ruleIndex (optional): 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 tests = [{
-  info: "vertical-align is inactive on a block element",
-  property: "vertical-align",
-  tagName: "div",
-  rules: ["div { vertical-align: top; }"],
-  isActive: false,
-}, {
-  info: "vertical-align is inactive on a span with display block",
-  property: "vertical-align",
-  tagName: "span",
-  rules: ["span { vertical-align: top; display: block;}"],
-  isActive: false,
-}, {
-  info: "vertical-align is active on a div with display inline-block",
-  property: "vertical-align",
-  tagName: "div",
-  rules: ["div { vertical-align: top; display: inline-block;}"],
-  isActive: true,
-}, {
-  info: "vertical-align is active on a table-cell",
-  property: "vertical-align",
-  tagName: "div",
-  rules: ["div { vertical-align: top; display: table-cell;}"],
-  isActive: true,
-}, {
-  info: "vertical-align is active on a block element ::first-letter",
-  property: "vertical-align",
-  tagName: "div",
-  rules: ["div::first-letter { vertical-align: top; }"],
-  isActive: true,
-}, {
-  info: "vertical-align is active on a block element ::first-line",
-  property: "vertical-align",
-  tagName: "div",
-  rules: ["div::first-line { vertical-align: top; }"],
-  isActive: true,
-}, {
-  info: "vertical-align is active on an inline element",
-  property: "vertical-align",
-  tagName: "span",
-  rules: ["span { vertical-align: top; }"],
-  isActive: true,
-}, {
+// InactivePropertyHelper `width`, `min-width`, `max-width`, `height`, `min-height`,
+// `max-height` test cases.
+export default [{
   info: "width is inactive on a non-replaced inline element",
   property: "width",
   tagName: "span",
   rules: ["span { width: 500px; }"],
   isActive: false,
 }, {
   info: "min-width is inactive on a non-replaced inline element",
   property: "min-width",
@@ -257,114 +197,9 @@ const tests = [{
   rules: ["div { min-height: 500px; }"],
   isActive: true,
 }, {
   info: "max-height is active on a block element",
   property: "max-height",
   tagName: "div",
   rules: ["div { max-height: 500px; }"],
   isActive: true,
-}, {
-  info: "column-gap is inactive on non-grid and non-flex container",
-  property: "column-gap",
-  tagName: "div",
-  rules: ["div { column-gap: 10px; display: block; }"],
-  isActive: false,
-}, {
-  info: "column-gap is active on grid container",
-  property: "column-gap",
-  tagName: "div",
-  rules: ["div { column-gap: 10px; display: grid; }"],
-  isActive: true,
-}, {
-  info: "column-gap is active on flex container",
-  property: "column-gap",
-  tagName: "div",
-  rules: ["div { column-gap: 10px; display: flex; }"],
-  isActive: true,
-}, {
-  info: "column-gap is inactive on non-multi-col container",
-  property: "column-gap",
-  tagName: "div",
-  rules: ["div { column-gap: 10px; column-count: auto; }"],
-  isActive: false,
-}, {
-  info: "column-gap is active on multi-column container",
-  property: "column-gap",
-  tagName: "div",
-  rules: ["div { column-gap: 10px; column-count: 2; }"],
-  isActive: true,
-}, {
-  info: "row-gap is inactive on non-grid and non-flex container",
-  property: "row-gap",
-  tagName: "div",
-  rules: ["div { row-gap: 10px; display: block; }"],
-  isActive: false,
-}, {
-  info: "row-gap is active on grid container",
-  property: "row-gap",
-  tagName: "div",
-  rules: ["div { row-gap: 10px; display: grid; }"],
-  isActive: true,
-}, {
-  info: "row-gap is active on flex container",
-  property: "row-gap",
-  tagName: "div",
-  rules: ["div { row-gap: 10px; display: flex; }"],
-  isActive: true,
-}, {
-  info: "gap is inactive on non-grid and non-flex container",
-  property: "gap",
-  tagName: "div",
-  rules: ["div { gap: 10px; display: block; }"],
-  isActive: false,
-}, {
-  info: "gap is active on flex container",
-  property: "gap",
-  tagName: "div",
-  rules: ["div { gap: 10px; display: flex; }"],
-  isActive: true,
-}, {
-  info: "gap is active on grid container",
-  property: "gap",
-  tagName: "div",
-  rules: ["div { gap: 10px; display: grid; }"],
-  isActive: true,
-}, {
-  info: "gap is inactive on non-multi-col container",
-  property: "gap",
-  tagName: "div",
-  rules: ["div { gap: 10px; column-count: auto; }"],
-  isActive: false,
-}, {
-  info: "gap is active on multi-col container",
-  property: "gap",
-  tagName: "div",
-  rules: ["div { gap: 10px; column-count: 2; }"],
-  isActive: true,
 }];
-
-for (const { info: summary, property, tagName, rules, ruleIndex, isActive } of tests) {
-  info(summary);
-
-  // Create an element which will contain the test elements.
-  const main = document.createElement("main");
-  document.firstElementChild.appendChild(main);
-
-  // Create the element and insert the rules
-  const el = document.createElement(tagName);
-  const style = document.createElement("style");
-  main.append(style, el);
-
-  for (const dataRule of rules) {
-    style.sheet.insertRule(dataRule);
-  }
-  const rule = style.sheet.cssRules[ruleIndex || 0];
-
-  const { used } = isPropertyUsed(el, getComputedStyle(el), rule, property);
-  ok(used === isActive, `"${property}" is ${isActive ? "active" : "inactive"}`);
-
-  main.remove();
-}
-    </script>
-  </head>
-  <body></body>
-</html>
\ No newline at end of file
copy from devtools/server/tests/mochitest/test_inspector-inactive-property-helper.html
copy to devtools/server/tests/mochitest/inactive-property-helper/vertical-align.js
--- a/devtools/server/tests/mochitest/test_inspector-inactive-property-helper.html
+++ b/devtools/server/tests/mochitest/inactive-property-helper/vertical-align.js
@@ -1,33 +1,14 @@
-<!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";
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-const { require } = ChromeUtils.import("resource://devtools/shared/Loader.jsm");
-const { inactivePropertyHelper } = require("devtools/server/actors/utils/inactive-property-helper");
-let { isPropertyUsed } = inactivePropertyHelper;
-isPropertyUsed = isPropertyUsed.bind(inactivePropertyHelper);
-
-// 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} tagName: the tagName of the element we're going to test
-// - {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} ruleIndex (optional): 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 tests = [{
+// InactivePropertyHelper `vertical-align` test cases.
+export default [{
   info: "vertical-align is inactive on a block element",
   property: "vertical-align",
   tagName: "div",
   rules: ["div { vertical-align: top; }"],
   isActive: false,
 }, {
   info: "vertical-align is inactive on a span with display block",
   property: "vertical-align",
@@ -59,312 +40,9 @@ const tests = [{
   rules: ["div::first-line { vertical-align: top; }"],
   isActive: true,
 }, {
   info: "vertical-align is active on an inline element",
   property: "vertical-align",
   tagName: "span",
   rules: ["span { vertical-align: top; }"],
   isActive: true,
-}, {
-  info: "width is inactive on a non-replaced inline element",
-  property: "width",
-  tagName: "span",
-  rules: ["span { width: 500px; }"],
-  isActive: false,
-}, {
-  info: "min-width is inactive on a non-replaced inline element",
-  property: "min-width",
-  tagName: "span",
-  rules: ["span { min-width: 500px; }"],
-  isActive: false,
-}, {
-  info: "max-width is inactive on a non-replaced inline element",
-  property: "max-width",
-  tagName: "span",
-  rules: ["span { max-width: 500px; }"],
-  isActive: false,
-}, {
-  info: "width is inactive on an tr element",
-  property: "width",
-  tagName: "tr",
-  rules: ["tr { width: 500px; }"],
-  isActive: false,
-}, {
-  info: "min-width is inactive on an tr element",
-  property: "min-width",
-  tagName: "tr",
-  rules: ["tr { min-width: 500px; }"],
-  isActive: false,
-}, {
-  info: "max-width is inactive on an tr element",
-  property: "max-width",
-  tagName: "tr",
-  rules: ["tr { max-width: 500px; }"],
-  isActive: false,
-}, {
-  info: "width is inactive on an thead element",
-  property: "width",
-  tagName: "thead",
-  rules: ["thead { width: 500px; }"],
-  isActive: false,
-}, {
-  info: "min-width is inactive on an thead element",
-  property: "min-width",
-  tagName: "thead",
-  rules: ["thead { min-width: 500px; }"],
-  isActive: false,
-}, {
-  info: "max-width is inactive on an thead element",
-  property: "max-width",
-  tagName: "thead",
-  rules: ["thead { max-width: 500px; }"],
-  isActive: false,
-}, {
-  info: "width is inactive on an tfoot element",
-  property: "width",
-  tagName: "tfoot",
-  rules: ["tfoot { width: 500px; }"],
-  isActive: false,
-}, {
-  info: "min-width is inactive on an tfoot element",
-  property: "min-width",
-  tagName: "tfoot",
-  rules: ["tfoot { min-width: 500px; }"],
-  isActive: false,
-}, {
-  info: "max-width is inactive on an tfoot element",
-  property: "max-width",
-  tagName: "tfoot",
-  rules: ["tfoot { max-width: 500px; }"],
-  isActive: false,
-}, {
-  info: "width is active on a replaced inline element",
-  property: "width",
-  tagName: "img",
-  rules: ["img { width: 500px; }"],
-  isActive: true,
-}, {
-  info: "min-width is active on a replaced inline element",
-  property: "min-width",
-  tagName: "img",
-  rules: ["img { min-width: 500px; }"],
-  isActive: true,
-}, {
-  info: "max-width is active on a replaced inline element",
-  property: "max-width",
-  tagName: "img",
-  rules: ["img { max-width: 500px; }"],
-  isActive: true,
-}, {
-  info: "width is active on a block element",
-  property: "width",
-  tagName: "div",
-  rules: ["div { width: 500px; }"],
-  isActive: true,
-}, {
-  info: "min-width is active on a block element",
-  property: "min-width",
-  tagName: "div",
-  rules: ["div { min-width: 500px; }"],
-  isActive: true,
-}, {
-  info: "max-width is active on a block element",
-  property: "max-width",
-  tagName: "div",
-  rules: ["div { max-width: 500px; }"],
-  isActive: true,
-}, {
-  info: "height is inactive on a non-replaced inline element",
-  property: "height",
-  tagName: "span",
-  rules: ["span { height: 500px; }"],
-  isActive: false,
-}, {
-  info: "min-height is inactive on a non-replaced inline element",
-  property: "min-height",
-  tagName: "span",
-  rules: ["span { min-height: 500px; }"],
-  isActive: false,
-}, {
-  info: "max-height is inactive on a non-replaced inline element",
-  property: "max-height",
-  tagName: "span",
-  rules: ["span { max-height: 500px; }"],
-  isActive: false,
-}, {
-  info: "height is inactive on colgroup element",
-  property: "height",
-  tagName: "colgroup",
-  rules: ["colgroup { height: 500px; }"],
-  isActive: false,
-}, {
-  info: "min-height is inactive on colgroup element",
-  property: "min-height",
-  tagName: "colgroup",
-  rules: ["colgroup { min-height: 500px; }"],
-  isActive: false,
-}, {
-  info: "max-height is inactive on colgroup element",
-  property: "max-height",
-  tagName: "colgroup",
-  rules: ["colgroup { max-height: 500px; }"],
-  isActive: false,
-}, {
-  info: "height is inactive on col element",
-  property: "height",
-  tagName: "col",
-  rules: ["col { height: 500px; }"],
-  isActive: false,
-}, {
-  info: "min-height is inactive on col element",
-  property: "min-height",
-  tagName: "col",
-  rules: ["col { min-height: 500px; }"],
-  isActive: false,
-}, {
-  info: "max-height is inactive on col element",
-  property: "max-height",
-  tagName: "col",
-  rules: ["col { max-height: 500px; }"],
-  isActive: false,
-}, {
-  info: "height is active on a replaced inline element",
-  property: "height",
-  tagName: "img",
-  rules: ["img { height: 500px; }"],
-  isActive: true,
-}, {
-  info: "min-height is active on a replaced inline element",
-  property: "min-height",
-  tagName: "img",
-  rules: ["img { min-height: 500px; }"],
-  isActive: true,
-}, {
-  info: "max-height is active on a replaced inline element",
-  property: "max-height",
-  tagName: "img",
-  rules: ["img { max-height: 500px; }"],
-  isActive: true,
-}, {
-  info: "height is active on a block element",
-  property: "height",
-  tagName: "div",
-  rules: ["div { height: 500px; }"],
-  isActive: true,
-}, {
-  info: "min-height is active on a block element",
-  property: "min-height",
-  tagName: "div",
-  rules: ["div { min-height: 500px; }"],
-  isActive: true,
-}, {
-  info: "max-height is active on a block element",
-  property: "max-height",
-  tagName: "div",
-  rules: ["div { max-height: 500px; }"],
-  isActive: true,
-}, {
-  info: "column-gap is inactive on non-grid and non-flex container",
-  property: "column-gap",
-  tagName: "div",
-  rules: ["div { column-gap: 10px; display: block; }"],
-  isActive: false,
-}, {
-  info: "column-gap is active on grid container",
-  property: "column-gap",
-  tagName: "div",
-  rules: ["div { column-gap: 10px; display: grid; }"],
-  isActive: true,
-}, {
-  info: "column-gap is active on flex container",
-  property: "column-gap",
-  tagName: "div",
-  rules: ["div { column-gap: 10px; display: flex; }"],
-  isActive: true,
-}, {
-  info: "column-gap is inactive on non-multi-col container",
-  property: "column-gap",
-  tagName: "div",
-  rules: ["div { column-gap: 10px; column-count: auto; }"],
-  isActive: false,
-}, {
-  info: "column-gap is active on multi-column container",
-  property: "column-gap",
-  tagName: "div",
-  rules: ["div { column-gap: 10px; column-count: 2; }"],
-  isActive: true,
-}, {
-  info: "row-gap is inactive on non-grid and non-flex container",
-  property: "row-gap",
-  tagName: "div",
-  rules: ["div { row-gap: 10px; display: block; }"],
-  isActive: false,
-}, {
-  info: "row-gap is active on grid container",
-  property: "row-gap",
-  tagName: "div",
-  rules: ["div { row-gap: 10px; display: grid; }"],
-  isActive: true,
-}, {
-  info: "row-gap is active on flex container",
-  property: "row-gap",
-  tagName: "div",
-  rules: ["div { row-gap: 10px; display: flex; }"],
-  isActive: true,
-}, {
-  info: "gap is inactive on non-grid and non-flex container",
-  property: "gap",
-  tagName: "div",
-  rules: ["div { gap: 10px; display: block; }"],
-  isActive: false,
-}, {
-  info: "gap is active on flex container",
-  property: "gap",
-  tagName: "div",
-  rules: ["div { gap: 10px; display: flex; }"],
-  isActive: true,
-}, {
-  info: "gap is active on grid container",
-  property: "gap",
-  tagName: "div",
-  rules: ["div { gap: 10px; display: grid; }"],
-  isActive: true,
-}, {
-  info: "gap is inactive on non-multi-col container",
-  property: "gap",
-  tagName: "div",
-  rules: ["div { gap: 10px; column-count: auto; }"],
-  isActive: false,
-}, {
-  info: "gap is active on multi-col container",
-  property: "gap",
-  tagName: "div",
-  rules: ["div { gap: 10px; column-count: 2; }"],
-  isActive: true,
 }];
-
-for (const { info: summary, property, tagName, rules, ruleIndex, isActive } of tests) {
-  info(summary);
-
-  // Create an element which will contain the test elements.
-  const main = document.createElement("main");
-  document.firstElementChild.appendChild(main);
-
-  // Create the element and insert the rules
-  const el = document.createElement(tagName);
-  const style = document.createElement("style");
-  main.append(style, el);
-
-  for (const dataRule of rules) {
-    style.sheet.insertRule(dataRule);
-  }
-  const rule = style.sheet.cssRules[ruleIndex || 0];
-
-  const { used } = isPropertyUsed(el, getComputedStyle(el), rule, property);
-  ok(used === isActive, `"${property}" is ${isActive ? "active" : "inactive"}`);
-
-  main.remove();
-}
-    </script>
-  </head>
-  <body></body>
-</html>
\ No newline at end of file
--- a/devtools/server/tests/mochitest/test_inspector-inactive-property-helper.html
+++ b/devtools/server/tests/mochitest/test_inspector-inactive-property-helper.html
@@ -2,369 +2,66 @@
 <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();
 
-const { require } = ChromeUtils.import("resource://devtools/shared/Loader.jsm");
-const { inactivePropertyHelper } = require("devtools/server/actors/utils/inactive-property-helper");
-let { isPropertyUsed } = inactivePropertyHelper;
-isPropertyUsed = isPropertyUsed.bind(inactivePropertyHelper);
+(async function() {
+  const { require } = ChromeUtils.import("resource://devtools/shared/Loader.jsm");
+  const { inactivePropertyHelper } = require("devtools/server/actors/utils/inactive-property-helper");
+  let { isPropertyUsed } = inactivePropertyHelper;
+  isPropertyUsed = isPropertyUsed.bind(inactivePropertyHelper);
+
+  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} tagName: the tagName of the element we're going to test
+  // - {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} ruleIndex (optional): 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 = [
+    "gap.js",
+    "max-min-width-height.js",
+    "vertical-align.js",
+  ].map(file => `${FOLDER}/${file}`);
 
-// 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} tagName: the tagName of the element we're going to test
-// - {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} ruleIndex (optional): 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 tests = [{
-  info: "vertical-align is inactive on a block element",
-  property: "vertical-align",
-  tagName: "div",
-  rules: ["div { vertical-align: top; }"],
-  isActive: false,
-}, {
-  info: "vertical-align is inactive on a span with display block",
-  property: "vertical-align",
-  tagName: "span",
-  rules: ["span { vertical-align: top; display: block;}"],
-  isActive: false,
-}, {
-  info: "vertical-align is active on a div with display inline-block",
-  property: "vertical-align",
-  tagName: "div",
-  rules: ["div { vertical-align: top; display: inline-block;}"],
-  isActive: true,
-}, {
-  info: "vertical-align is active on a table-cell",
-  property: "vertical-align",
-  tagName: "div",
-  rules: ["div { vertical-align: top; display: table-cell;}"],
-  isActive: true,
-}, {
-  info: "vertical-align is active on a block element ::first-letter",
-  property: "vertical-align",
-  tagName: "div",
-  rules: ["div::first-letter { vertical-align: top; }"],
-  isActive: true,
-}, {
-  info: "vertical-align is active on a block element ::first-line",
-  property: "vertical-align",
-  tagName: "div",
-  rules: ["div::first-line { vertical-align: top; }"],
-  isActive: true,
-}, {
-  info: "vertical-align is active on an inline element",
-  property: "vertical-align",
-  tagName: "span",
-  rules: ["span { vertical-align: top; }"],
-  isActive: true,
-}, {
-  info: "width is inactive on a non-replaced inline element",
-  property: "width",
-  tagName: "span",
-  rules: ["span { width: 500px; }"],
-  isActive: false,
-}, {
-  info: "min-width is inactive on a non-replaced inline element",
-  property: "min-width",
-  tagName: "span",
-  rules: ["span { min-width: 500px; }"],
-  isActive: false,
-}, {
-  info: "max-width is inactive on a non-replaced inline element",
-  property: "max-width",
-  tagName: "span",
-  rules: ["span { max-width: 500px; }"],
-  isActive: false,
-}, {
-  info: "width is inactive on an tr element",
-  property: "width",
-  tagName: "tr",
-  rules: ["tr { width: 500px; }"],
-  isActive: false,
-}, {
-  info: "min-width is inactive on an tr element",
-  property: "min-width",
-  tagName: "tr",
-  rules: ["tr { min-width: 500px; }"],
-  isActive: false,
-}, {
-  info: "max-width is inactive on an tr element",
-  property: "max-width",
-  tagName: "tr",
-  rules: ["tr { max-width: 500px; }"],
-  isActive: false,
-}, {
-  info: "width is inactive on an thead element",
-  property: "width",
-  tagName: "thead",
-  rules: ["thead { width: 500px; }"],
-  isActive: false,
-}, {
-  info: "min-width is inactive on an thead element",
-  property: "min-width",
-  tagName: "thead",
-  rules: ["thead { min-width: 500px; }"],
-  isActive: false,
-}, {
-  info: "max-width is inactive on an thead element",
-  property: "max-width",
-  tagName: "thead",
-  rules: ["thead { max-width: 500px; }"],
-  isActive: false,
-}, {
-  info: "width is inactive on an tfoot element",
-  property: "width",
-  tagName: "tfoot",
-  rules: ["tfoot { width: 500px; }"],
-  isActive: false,
-}, {
-  info: "min-width is inactive on an tfoot element",
-  property: "min-width",
-  tagName: "tfoot",
-  rules: ["tfoot { min-width: 500px; }"],
-  isActive: false,
-}, {
-  info: "max-width is inactive on an tfoot element",
-  property: "max-width",
-  tagName: "tfoot",
-  rules: ["tfoot { max-width: 500px; }"],
-  isActive: false,
-}, {
-  info: "width is active on a replaced inline element",
-  property: "width",
-  tagName: "img",
-  rules: ["img { width: 500px; }"],
-  isActive: true,
-}, {
-  info: "min-width is active on a replaced inline element",
-  property: "min-width",
-  tagName: "img",
-  rules: ["img { min-width: 500px; }"],
-  isActive: true,
-}, {
-  info: "max-width is active on a replaced inline element",
-  property: "max-width",
-  tagName: "img",
-  rules: ["img { max-width: 500px; }"],
-  isActive: true,
-}, {
-  info: "width is active on a block element",
-  property: "width",
-  tagName: "div",
-  rules: ["div { width: 500px; }"],
-  isActive: true,
-}, {
-  info: "min-width is active on a block element",
-  property: "min-width",
-  tagName: "div",
-  rules: ["div { min-width: 500px; }"],
-  isActive: true,
-}, {
-  info: "max-width is active on a block element",
-  property: "max-width",
-  tagName: "div",
-  rules: ["div { max-width: 500px; }"],
-  isActive: true,
-}, {
-  info: "height is inactive on a non-replaced inline element",
-  property: "height",
-  tagName: "span",
-  rules: ["span { height: 500px; }"],
-  isActive: false,
-}, {
-  info: "min-height is inactive on a non-replaced inline element",
-  property: "min-height",
-  tagName: "span",
-  rules: ["span { min-height: 500px; }"],
-  isActive: false,
-}, {
-  info: "max-height is inactive on a non-replaced inline element",
-  property: "max-height",
-  tagName: "span",
-  rules: ["span { max-height: 500px; }"],
-  isActive: false,
-}, {
-  info: "height is inactive on colgroup element",
-  property: "height",
-  tagName: "colgroup",
-  rules: ["colgroup { height: 500px; }"],
-  isActive: false,
-}, {
-  info: "min-height is inactive on colgroup element",
-  property: "min-height",
-  tagName: "colgroup",
-  rules: ["colgroup { min-height: 500px; }"],
-  isActive: false,
-}, {
-  info: "max-height is inactive on colgroup element",
-  property: "max-height",
-  tagName: "colgroup",
-  rules: ["colgroup { max-height: 500px; }"],
-  isActive: false,
-}, {
-  info: "height is inactive on col element",
-  property: "height",
-  tagName: "col",
-  rules: ["col { height: 500px; }"],
-  isActive: false,
-}, {
-  info: "min-height is inactive on col element",
-  property: "min-height",
-  tagName: "col",
-  rules: ["col { min-height: 500px; }"],
-  isActive: false,
-}, {
-  info: "max-height is inactive on col element",
-  property: "max-height",
-  tagName: "col",
-  rules: ["col { max-height: 500px; }"],
-  isActive: false,
-}, {
-  info: "height is active on a replaced inline element",
-  property: "height",
-  tagName: "img",
-  rules: ["img { height: 500px; }"],
-  isActive: true,
-}, {
-  info: "min-height is active on a replaced inline element",
-  property: "min-height",
-  tagName: "img",
-  rules: ["img { min-height: 500px; }"],
-  isActive: true,
-}, {
-  info: "max-height is active on a replaced inline element",
-  property: "max-height",
-  tagName: "img",
-  rules: ["img { max-height: 500px; }"],
-  isActive: true,
-}, {
-  info: "height is active on a block element",
-  property: "height",
-  tagName: "div",
-  rules: ["div { height: 500px; }"],
-  isActive: true,
-}, {
-  info: "min-height is active on a block element",
-  property: "min-height",
-  tagName: "div",
-  rules: ["div { min-height: 500px; }"],
-  isActive: true,
-}, {
-  info: "max-height is active on a block element",
-  property: "max-height",
-  tagName: "div",
-  rules: ["div { max-height: 500px; }"],
-  isActive: true,
-}, {
-  info: "column-gap is inactive on non-grid and non-flex container",
-  property: "column-gap",
-  tagName: "div",
-  rules: ["div { column-gap: 10px; display: block; }"],
-  isActive: false,
-}, {
-  info: "column-gap is active on grid container",
-  property: "column-gap",
-  tagName: "div",
-  rules: ["div { column-gap: 10px; display: grid; }"],
-  isActive: true,
-}, {
-  info: "column-gap is active on flex container",
-  property: "column-gap",
-  tagName: "div",
-  rules: ["div { column-gap: 10px; display: flex; }"],
-  isActive: true,
-}, {
-  info: "column-gap is inactive on non-multi-col container",
-  property: "column-gap",
-  tagName: "div",
-  rules: ["div { column-gap: 10px; column-count: auto; }"],
-  isActive: false,
-}, {
-  info: "column-gap is active on multi-column container",
-  property: "column-gap",
-  tagName: "div",
-  rules: ["div { column-gap: 10px; column-count: 2; }"],
-  isActive: true,
-}, {
-  info: "row-gap is inactive on non-grid and non-flex container",
-  property: "row-gap",
-  tagName: "div",
-  rules: ["div { row-gap: 10px; display: block; }"],
-  isActive: false,
-}, {
-  info: "row-gap is active on grid container",
-  property: "row-gap",
-  tagName: "div",
-  rules: ["div { row-gap: 10px; display: grid; }"],
-  isActive: true,
-}, {
-  info: "row-gap is active on flex container",
-  property: "row-gap",
-  tagName: "div",
-  rules: ["div { row-gap: 10px; display: flex; }"],
-  isActive: true,
-}, {
-  info: "gap is inactive on non-grid and non-flex container",
-  property: "gap",
-  tagName: "div",
-  rules: ["div { gap: 10px; display: block; }"],
-  isActive: false,
-}, {
-  info: "gap is active on flex container",
-  property: "gap",
-  tagName: "div",
-  rules: ["div { gap: 10px; display: flex; }"],
-  isActive: true,
-}, {
-  info: "gap is active on grid container",
-  property: "gap",
-  tagName: "div",
-  rules: ["div { gap: 10px; display: grid; }"],
-  isActive: true,
-}, {
-  info: "gap is inactive on non-multi-col container",
-  property: "gap",
-  tagName: "div",
-  rules: ["div { gap: 10px; column-count: auto; }"],
-  isActive: false,
-}, {
-  info: "gap is active on multi-col container",
-  property: "gap",
-  tagName: "div",
-  rules: ["div { gap: 10px; column-count: 2; }"],
-  isActive: true,
-}];
+  // Import all the test cases
+  const tests =
+    (await Promise.all(testFiles.map(f => import(f).then(data => data.default)))).flat();
+
+  for (const { info: summary, property, tagName, rules, ruleIndex, isActive } of tests) {
+    info(summary);
+
+    // Create an element which will contain the test elements.
+    const main = document.createElement("main");
+    document.firstElementChild.appendChild(main);
 
-for (const { info: summary, property, tagName, rules, ruleIndex, isActive } of tests) {
-  info(summary);
-
-  // Create an element which will contain the test elements.
-  const main = document.createElement("main");
-  document.firstElementChild.appendChild(main);
+    // Create the element and insert the rules
+    const el = document.createElement(tagName);
+    const style = document.createElement("style");
+    main.append(style, el);
 
-  // Create the element and insert the rules
-  const el = document.createElement(tagName);
-  const style = document.createElement("style");
-  main.append(style, el);
+    for (const dataRule of rules) {
+      style.sheet.insertRule(dataRule);
+    }
+    const rule = style.sheet.cssRules[ruleIndex || 0];
 
-  for (const dataRule of rules) {
-    style.sheet.insertRule(dataRule);
+    const { used } = isPropertyUsed(el, getComputedStyle(el), rule, property);
+    ok(used === isActive, `"${property}" is ${isActive ? "active" : "inactive"}`);
+
+    main.remove();
   }
-  const rule = style.sheet.cssRules[ruleIndex || 0];
-
-  const { used } = isPropertyUsed(el, getComputedStyle(el), rule, property);
-  ok(used === isActive, `"${property}" is ${isActive ? "active" : "inactive"}`);
-
-  main.remove();
-}
+  SimpleTest.finish();
+})();
     </script>
   </head>
   <body></body>
 </html>
\ No newline at end of file