Bug 1547922 part 2 - Add some grid layout tests. r=dholbert
authorMats Palmgren <mats@mozilla.com>
Tue, 30 Apr 2019 10:21:30 +0200
changeset 530909 a5c14dc63aa6449d97c1a73918b7b6fbf33735c0
parent 530908 3de2f935e2d2658dda91deba799149ee29ce3837
child 530910 8068f2c5ad489441277268b53e337a5b1de790d0
push id11265
push userffxbld-merge
push dateMon, 13 May 2019 10:53:39 +0000
treeherdermozilla-beta@77e0fe8dbdd3 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdholbert
bugs1547922
milestone68.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 1547922 part 2 - Add some grid layout tests. r=dholbert Differential Revision: https://phabricator.services.mozilla.com/D29325
layout/generic/test/test_dynamic_reflow_root_disallowal.html
--- a/layout/generic/test/test_dynamic_reflow_root_disallowal.html
+++ b/layout/generic/test/test_dynamic_reflow_root_disallowal.html
@@ -305,16 +305,117 @@ https://bugzilla.mozilla.org/show_bug.cg
     let tweakFunc = function() {
       inner.style.width = inner.style.height = "40px";
     };
     tweakAndCompareSnapshots(tweakFunc, subtest.desc);
 
     flexContainer.remove(); // clean up
   }
 
+  let gridItemSubtests = [
+    { desc: "grid-pct-inline-isize",
+      candStyle: "inline-size:80%",
+      isContainerIntrinsicallySized: true,
+    },
+    { desc: "grid-calc-pct-inline-isize",
+      candStyle: "inline-size:calc(10px + 80%);",
+      isContainerIntrinsicallySized: true,
+    },
+    { desc: "grid-min-inline-size-min-content",
+      candStyle: "min-inline-size:min-content",
+    },
+  ];
+
+  // 'auto' and intrinsic size keywords on some properties should prevent
+  // a grid item from becoming a reflow root.
+  function runGridItemSubtest(subtest) {
+    // We create a 4x4 grid container with two grid items:
+    //  - a simple grid item that just absorbs all extra space
+    //  - the reflow root candidate
+    let containerSizeVal = subtest.isContainerIntrinsicallySized ?
+      "max-content" : "100px";
+    let containerSizeDecl =
+      "inline-size: " + containerSizeVal + "; " +
+      "block-size: " + containerSizeVal + ";";
+    let containerGridDirectionDecl = "grid-auto-flow: " +
+      (subtest.isContainerColumnOriented ? "column" : "row") + ";"
+    let gridContainer = createStyledDiv("display: grid; \
+                                         grid: 1fr auto / 1fr auto; \
+                                         border: 2px solid teal; " +
+                                         containerSizeDecl +
+                                         containerGridDirectionDecl);
+
+    let simpleItem = createStyledDiv("border: 1px solid gray; \
+                                      background: yellow;");
+
+    // The reflow root candidate
+    let cand = createStyledDiv(gReflowRootCandidateStyles +
+                               "background: blue; " +
+                               "grid-area:2/2; " +
+                               "min-width: 10px; min-height: 10px; " +
+                               subtest.candStyle);
+    // Something whose size we can adjust, inside the reflow root candidate:
+    let inner = createStyledDiv("height:20px; width:20px;");
+
+    cand.appendChild(inner);
+    gridContainer.appendChild(simpleItem);
+    gridContainer.appendChild(cand);
+    gFBody.appendChild(gridContainer);
+
+    let tweakFunc = function() {
+      inner.style.width = inner.style.height = "40px";
+    };
+    tweakAndCompareSnapshots(tweakFunc, subtest.desc);
+
+    gridContainer.remove(); // clean up
+  }
+
+  let gridContainerSubtests = [
+    { desc: "grid-column-start",
+      candStyle: "grid-column-start:2",
+    },
+    { desc: "grid-column-end",
+      candStyle: "grid-column-end:3",
+    },
+    { desc: "grid-row-start",
+      candStyle: "grid-row-start:2",
+    },
+    { desc: "grid-row-end",
+      candStyle: "grid-row-end:3",
+    },
+  ];
+
+  // Test that changes to grid item properties that affect grid container
+  // layout causes a grid container reflow when the item is a reflow root.
+  function runGridContainerSubtest(subtest) {
+    // We create a 4x4 grid container with one grid item:
+    //  - a reflow root grid item that we'll tweak from
+    //    the list above. By default it's placed at 1,1
+    //    but after the tweak it should be placed elsewhere
+    let gridContainer = createStyledDiv("display: grid; \
+                                         width: 100px; \
+                                         height: 100px; \
+                                         grid: 1fr 10px / 1fr 10px; \
+                                         border: 2px solid teal");
+    // The reflow root candidate
+    let cand = createStyledDiv(gReflowRootCandidateStyles +
+                               "background: blue; " +
+                               " min-width: 10px; min-height: 10px; ");
+
+    gridContainer.appendChild(cand);
+    gFBody.appendChild(gridContainer);
+
+    let tweakFunc = function() {
+      cand.style.cssText += "; " + subtest.candStyle;
+    };
+    tweakAndCompareSnapshots(tweakFunc, subtest.desc);
+
+    gridContainer.remove(); // clean up
+  }
+
   let tableSubtests = [
     { desc: "table",
       /* Testing the default "display:table" styling that runTableTest uses: */
       candStyle: "",
     },
     { desc: "inline-table",
       candStyle: "display:inline-table;",
     },
@@ -602,16 +703,22 @@ https://bugzilla.mozilla.org/show_bug.cg
     gFBody = frames[0].document.body;
 
     for (let subtest of intrinsicSizeSubtests) {
       runIntrinsicSizeSubtest(subtest);
     }
     for (let subtest of flexItemSubtests) {
       runFlexItemSubtest(subtest);
     }
+    for (let subtest of gridContainerSubtests) {
+      runGridContainerSubtest(subtest);
+    }
+    for (let subtest of gridItemSubtests) {
+      runGridItemSubtest(subtest);
+    }
     for (let subtest of tableSubtests) {
       runTableSubtest(subtest);
     }
     for (let subtest of inlineSubtests) {
       runInlineSubtest(subtest);
     }
     for (let subtest of rubySubtests) {
       runRubySubtest(subtest);