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

--HG--
rename : devtools/server/tests/mochitest/test_inspector-inactive-property-helper.html => devtools/server/tests/mochitest/inactive-property-helper/gap.js
rename : devtools/server/tests/mochitest/test_inspector-inactive-property-helper.html => devtools/server/tests/mochitest/inactive-property-helper/max-min-width-height.js
rename : devtools/server/tests/mochitest/test_inspector-inactive-property-helper.html => devtools/server/tests/mochitest/inactive-property-helper/vertical-align.js
extra : moz-landing-system : lando

.eslintignore

@@ -125,6 +125,7 @@ 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/server/tests/mochitest/chrome.ini

@@ -34,6 +34,7 @@ support-files =
   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'))

devtools/server/tests/mochitest/inactive-property-helper/.eslintrc.js

@@ -0,0 +1,7 @@
+"use strict";
+
+module.exports = {
+  parserOptions: {
+    sourceType: "module",
+  },
+};

devtools/server/tests/mochitest/inactive-property-helper/gap.js

@@ -0,0 +1,84 @@
+/* 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/. */
+
+// 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",
+  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,
+}];

devtools/server/tests/mochitest/inactive-property-helper/max-min-width-height.js

@@ -0,0 +1,205 @@
+/* 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/. */
+
+// 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",
+  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,
+}];

devtools/server/tests/mochitest/inactive-property-helper/vertical-align.js

@@ -0,0 +1,48 @@
+/* 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/. */
+
+// 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",
+  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,
+}];

devtools/server/tests/mochitest/test_inspector-inactive-property-helper.html

@@ -7,363 +7,60 @@
     <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);
 
-// 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,
-}];
+  const FOLDER = "./inactive-property-helper";
 
-for (const { info: summary, property, tagName, rules, ruleIndex, isActive } of tests) {
-  info(summary);
+  // 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}`);
 
-  // Create an element which will contain the test elements.
-  const main = document.createElement("main");
-  document.firstElementChild.appendChild(main);
+  // Import all the test cases
+  const tests =
+    (await Promise.all(testFiles.map(f => import(f).then(data => data.default)))).flat();
 
-  // Create the element and insert the rules
-  const el = document.createElement(tagName);
-  const style = document.createElement("style");
-  main.append(style, el);
+  for (const { info: summary, property, tagName, rules, ruleIndex, isActive } of tests) {
+    info(summary);
 
-  for (const dataRule of rules) {
-    style.sheet.insertRule(dataRule);
+    // 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();
   }
-  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>