mozilla-inbound: changeset 478406:a97fcedd311f198a1d934fb7a8e56e59469f0a8e

--- 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

author	Nicolas Chevobbe <nchevobbe@mozilla.com>
	Wed, 12 Jun 2019 09:49:16 +0000
changeset 478406	a97fcedd311f198a1d934fb7a8e56e59469f0a8e
parent 478405	64ba1e5a243b9e08305c26cb15c58ad5f949119d
child 478407	e2af929535f6b486eab6875f361cc7776f27d194
push id	113419
push user	dluca@mozilla.com
push date	Wed, 12 Jun 2019 12:45:34 +0000
treeherder	mozilla-inbound@65d08b294155 [default view] [failures only]
perfherder	[talos] [build metrics] [platform microbench] (compared to previous push)
reviewers	rcaliman
bugs	1558468
milestone	69.0a1
first release with	nightly linux32 e7e81a32c2ab / 69.0a1 / 20190612120655 / files nightly linux64 e7e81a32c2ab / 69.0a1 / 20190612120655 / files nightly mac e7e81a32c2ab / 69.0a1 / 20190612120655 / files nightly win32 e7e81a32c2ab / 69.0a1 / 20190612120655 / files nightly win64 e7e81a32c2ab / 69.0a1 / 20190612120655 / files
last release without	nightly linux32 43b2d57b25cc / 69.0a1 / 20190611213517 / files nightly linux64 43b2d57b25cc / 69.0a1 / 20190611213517 / files nightly mac 43b2d57b25cc / 69.0a1 / 20190611213517 / files nightly win32 43b2d57b25cc / 69.0a1 / 20190611213517 / files nightly win64 43b2d57b25cc / 69.0a1 / 20190611213517 / files

.eslintignore		file \| annotate \| diff \| comparison \| revisions
devtools/server/tests/mochitest/chrome.ini		file \| annotate \| diff \| comparison \| revisions
devtools/server/tests/mochitest/inactive-property-helper/.eslintrc.js		file \| annotate \| diff \| comparison \| revisions
devtools/server/tests/mochitest/inactive-property-helper/gap.js		file \| annotate \| diff \| comparison \| revisions
devtools/server/tests/mochitest/inactive-property-helper/max-min-width-height.js		file \| annotate \| diff \| comparison \| revisions
devtools/server/tests/mochitest/inactive-property-helper/vertical-align.js		file \| annotate \| diff \| comparison \| revisions
devtools/server/tests/mochitest/test_inspector-inactive-property-helper.html		file \| annotate \| diff \| comparison \| revisions