Bug 1558468 - Split InactivePropertyHelper test cases in multiple fil…

…es. 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
dothq · Jun 12, 2019 · 9129865 · 9129865
1 parent 5adb6b1
commit 9129865
Show file tree

Hide file tree

Showing 7 changed files with 392 additions and 349 deletions.
diff --git a/.eslintignore b/.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

diff --git a/devtools/server/tests/mochitest/chrome.ini b/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'))

diff --git a/devtools/server/tests/mochitest/inactive-property-helper/.eslintrc.js b/devtools/server/tests/mochitest/inactive-property-helper/.eslintrc.js
@@ -0,0 +1,7 @@
+"use strict";
+
+module.exports = {
+  parserOptions: {
+    sourceType: "module",
+  },
+};
diff --git a/devtools/server/tests/mochitest/inactive-property-helper/gap.js b/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,
+}];
diff --git a/devtools/server/tests/mochitest/inactive-property-helper/max-min-width-height.js b/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,
+}];
diff --git a/devtools/server/tests/mochitest/inactive-property-helper/vertical-align.js b/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,
+}];