Bug 1579582 - 'grid-column' etc have an effect for abs.pos. boxes with a grid container as 'containing block' r=pbro
authorMichael Ratcliffe <mratcliffe@mozilla.com>
Wed, 25 Sep 2019 11:20:40 +0000
changeset 494903 3bfc227fb884affcb46d9261a5a0460b125c1494
parent 494902 1681a265983558b5d3a91e70b9e5dc28e08deb7b
child 494904 7ddb6f049e14f45deedb5750d2fc3b2f6ee2d210
push id114131
push userdluca@mozilla.com
push dateThu, 26 Sep 2019 09:47:34 +0000
treeherdermozilla-inbound@1dc1a755079a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1579582
milestone71.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 1579582 - 'grid-column' etc have an effect for abs.pos. boxes with a grid container as 'containing block' r=pbro Differential Revision: https://phabricator.services.mozilla.com/D45830
devtools/server/actors/utils/inactive-property-helper.js
devtools/server/tests/mochitest/inactive-property-helper/grid-with-absolute-properties.js
devtools/server/tests/mochitest/test_inspector-inactive-property-helper.html
--- a/devtools/server/actors/utils/inactive-property-helper.js
+++ b/devtools/server/actors/utils/inactive-property-helper.js
@@ -637,21 +637,17 @@ class InactivePropertyHelper {
       const display = this.style ? this.style.display : null;
 
       if (!display || display === "none" || display === "contents") {
         // Doesn't generate a box, not a grid item.
         return null;
       }
       const position = this.style ? this.style.position : null;
       const cssFloat = this.style ? this.style.cssFloat : null;
-      if (
-        position === "absolute" ||
-        position === "fixed" ||
-        cssFloat !== "none"
-      ) {
+      if (position === "fixed" || cssFloat !== "none") {
         // Out of flow, not a grid item.
         return null;
       }
     } else if (node.nodeType !== node.TEXT_NODE) {
       return null;
     }
 
     for (
new file mode 100644
--- /dev/null
+++ b/devtools/server/tests/mochitest/inactive-property-helper/grid-with-absolute-properties.js
@@ -0,0 +1,71 @@
+/* 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 test cases:
+// `grid-area`, `grid-column`, `grid-column-end`, `grid-column-start`,
+// `grid-row`, `grid-row-end`, `grid-row-start`, `justify-self`, `align-self`
+// and `place-self`.
+let tests = [];
+
+for (const { propertyName, propertyValue } of [
+  { propertyName: "grid-area", propertyValue: "2 / 1 / span 2 / span 3" },
+  { propertyName: "grid-column", propertyValue: 2 },
+  { propertyName: "grid-column-end", propertyValue: "span 3" },
+  { propertyName: "grid-column-start", propertyValue: 2 },
+  { propertyName: "grid-row", propertyValue: "1 / span 2" },
+  { propertyName: "grid-row-end", propertyValue: "span 3" },
+  { propertyName: "grid-row-start", propertyValue: 2 },
+  { propertyName: "justify-self", propertyValue: "start" },
+  { propertyName: "align-self", propertyValue: "auto" },
+  { propertyName: "place-self", propertyValue: "auto center" },
+]) {
+  tests = tests.concat(createTestsForProp(propertyName, propertyValue));
+}
+
+function createTestsForProp(propertyName, propertyValue) {
+  return [
+    {
+      info: `${propertyName} is active on a grid item`,
+      property: `${propertyName}`,
+      createTestElement,
+      rules: [
+        `#grid-container { display:grid; grid:auto/100px 100px; }`,
+        `#grid-item { ${propertyName}: ${propertyValue}; }`,
+      ],
+      ruleIndex: 1,
+      isActive: true,
+    },
+    {
+      info: `${propertyName} is active on an absolutely positioned grid item`,
+      property: `${propertyName}`,
+      createTestElement,
+      rules: [
+        `#grid-container { display:grid; grid:auto/100px 100px; }`,
+        `#grid-item { ${propertyName}: ${propertyValue}; position: absolute; }`,
+      ],
+      ruleIndex: 1,
+      isActive: true,
+    },
+    {
+      info: `${propertyName} is inactive on a non-grid item`,
+      property: `${propertyName}`,
+      tagName: `div`,
+      rules: [`div { ${propertyName}: ${propertyValue}; }`],
+      isActive: false,
+    },
+  ];
+}
+
+function createTestElement(rootNode) {
+  const container = document.createElement("div");
+  container.id = "grid-container";
+  const element = document.createElement("div");
+  element.id = "grid-item";
+  container.append(element);
+  rootNode.append(container);
+
+  return element;
+}
+
+export default tests;
--- a/devtools/server/tests/mochitest/test_inspector-inactive-property-helper.html
+++ b/devtools/server/tests/mochitest/test_inspector-inactive-property-helper.html
@@ -42,17 +42,18 @@ SimpleTest.waitForExplicitFinish();
   //                                  of the one that should be tested in isPropertyUsed.
   // - {Boolean} isActive: should the property be active (isPropertyUsed `used` result).
   const testFiles = [
     "align-place-self.js",
     "gap.js",
     "max-min-width-height.js",
     "place-items-content.js",
     "vertical-align.js",
-    "float.js"
+    "float.js",
+    "grid-with-absolute-properties.js",
   ].map(file => `${FOLDER}/${file}`);
 
   // Import all the test cases
   const tests =
     (await Promise.all(testFiles.map(f => import(f).then(data => data.default)))).flat();
 
   for (const {
     info: summary,