Bug 1397768 part 1: Make 'display: flex/grid' in a button take up all the available space. r=dholbert
authorMihir Iyer <miyer@mozilla.com>
Fri, 17 Aug 2018 07:36:50 -0700
changeset 487347 5477aa895b6c983f52325a3841571f4c4ba8f7f6
parent 487340 777ba79e0e0a8cfbea6c3a9d2fe4ff9fdb58bb3c
child 487348 f0b7d002a6d545b4aa3390ffa80a00d23faff0e8
push id9719
push userffxbld-merge
push dateFri, 24 Aug 2018 17:49:46 +0000
treeherdermozilla-beta@719ec98fba77 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdholbert
bugs1397768
milestone63.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 1397768 part 1: Make 'display: flex/grid' in a button take up all the available space. r=dholbert
layout/forms/nsHTMLButtonControlFrame.cpp
layout/reftests/forms/button/button-display-flex-fullsize-1-ref.html
layout/reftests/forms/button/button-display-flex-fullsize-1.html
layout/reftests/forms/button/button-display-grid-fullsize-1-ref.html
layout/reftests/forms/button/button-display-grid-fullsize-1.html
layout/reftests/forms/button/reftest.list
--- a/layout/forms/nsHTMLButtonControlFrame.cpp
+++ b/layout/forms/nsHTMLButtonControlFrame.cpp
@@ -245,16 +245,26 @@ nsHTMLButtonControlFrame::ReflowButtonCo
   ReflowInput contentsReflowInput(aPresContext, aButtonReflowInput,
                                   aFirstKid, availSize);
 
   nsReflowStatus contentsReflowStatus;
   ReflowOutput contentsDesiredSize(aButtonReflowInput);
   childPos.B(wm) = 0; // This will be set properly later, after reflowing the
                       // child to determine its size.
 
+  const LayoutFrameType frameType = aFirstKid->Type();
+  if (frameType == LayoutFrameType::FlexContainer ||
+      frameType == LayoutFrameType::GridContainer) {
+    contentsReflowInput.ComputedBSize() = aButtonReflowInput.ComputedBSize();
+    contentsReflowInput.ComputedMinBSize() =
+      aButtonReflowInput.ComputedMinBSize();
+    contentsReflowInput.ComputedMaxBSize() =
+      aButtonReflowInput.ComputedMaxBSize();
+  }
+
   // We just pass a dummy containerSize here, as the child will be
   // repositioned later by FinishReflowChild.
   nsSize dummyContainerSize;
   ReflowChild(aFirstKid, aPresContext,
               contentsDesiredSize, contentsReflowInput,
               wm, childPos, dummyContainerSize, 0, contentsReflowStatus);
   MOZ_ASSERT(contentsReflowStatus.IsComplete(),
              "We gave button-contents frame unconstrained available height, "
new file mode 100644
--- /dev/null
+++ b/layout/reftests/forms/button/button-display-flex-fullsize-1-ref.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0
+-->
+<html>
+<head>
+  <title>Reference: Testing for full height flex container in a button.</title>
+  <meta charset="utf-8">
+  <style>
+    button {
+      vertical-align: top;
+      margin: 10px 20px 10px 0;
+      padding: 0;
+      border: solid 1px black;
+      width: 200px;
+      height: 200px;
+    }
+
+    .button {
+      display: inline-flex;
+      justify-content: space-between;
+      align-items: stretch;
+      width: 100%;
+      height: 100%;
+    }
+
+    .button>* {
+      border: solid 1px rgba(0, 0, 0, .5);
+      background-color: rgba(0, 0, 0, .1);
+      min-height: 10px;
+      min-width:10px;
+    }
+
+    .vertical {
+      flex-direction: column;
+    }
+
+    .button {
+      background-color: lightblue;
+    }
+  </style>
+</head>
+<body>
+  <button>
+    <div class="button pseudo">
+     <div></div>
+     <div></div>
+     <div></div>
+    </div>
+  </button>
+  <button>
+    <div class="button pseudo vertical">
+     <div></div>
+     <div></div>
+     <div></div>
+    </div>
+  </button>
+</body>
+</html>
+
new file mode 100644
--- /dev/null
+++ b/layout/reftests/forms/button/button-display-flex-fullsize-1.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0
+-->
+<html>
+<head>
+  <title>CSS Test: Testing for full height flex container in a button.</title>
+  <meta charset="utf-8">
+  <style>
+    .button {
+      display: inline-flex;
+      justify-content: space-between;
+      align-items: stretch;
+      width: 200px;
+      height: 200px;
+      vertical-align: top;
+      margin: 10px 20px 10px 0;
+      padding: 0;
+      border: solid 1px black;
+    }
+
+    .button>* {
+      border: solid 1px rgba(0, 0, 0, .5);
+      background-color: rgba(0, 0, 0, .1);
+      min-height: 10px;
+      min-width: 10px;
+    }
+
+    .vertical {
+      flex-direction: column;
+    }
+
+    button.button {
+      background-color: lightblue;
+    }
+  </style>
+</head>
+<body>
+  <button class="button">
+    <div></div>
+    <div></div>
+    <div></div>
+  </button>
+  <button class="button vertical">
+    <div></div>
+    <div></div>
+    <div></div>
+  </button>
+</body>
+</html>
+
new file mode 100644
--- /dev/null
+++ b/layout/reftests/forms/button/button-display-grid-fullsize-1-ref.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0
+-->
+<html>
+<head>
+  <title>Reference: Testing for full height flex container in a button.</title>
+  <meta charset="utf-8">
+  <style>
+    button {
+      vertical-align: top;
+      margin: 10px 20px 10px 0;
+      padding: 0;
+      border: solid 1px black;
+      width: 200px;
+      height: 200px;
+    }
+
+    .button {
+      display: inline-grid;
+      justify-content: space-between;
+      align-items: stretch;
+      grid-template-columns: auto auto auto;
+      grid-template-rows: auto;
+      width: 100%;
+      height: 100%;
+    }
+
+    .button>* {
+      border: solid 1px rgba(0, 0, 0, .5);
+      background-color: rgba(0, 0, 0, .1);
+      min-height: 10px;
+      min-width: 10px;
+    }
+
+    .vertical {
+      grid-template-columns: auto;
+      grid-template-rows: auto auto auto;
+    }
+
+    .button {
+      background-color: lightblue;
+    }
+  </style>
+</head>
+<body>
+  <button>
+    <div class="button">
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+  </button>
+  <button>
+    <div class="button vertical">
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+  </button>
+</body>
+</html>
+
new file mode 100644
--- /dev/null
+++ b/layout/reftests/forms/button/button-display-grid-fullsize-1.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0
+-->
+<html>
+<head>
+  <title>CSS Test: Testing for full height flex container in a button.</title>
+  <meta charset="utf-8">
+  <style>
+    .button {
+      display: inline-grid;
+      grid-template-columns: auto auto auto;
+      grid-template-rows: auto;
+      justify-content: space-between;
+      align-items: stretch;
+      width: 200px;
+      height: 200px;
+      vertical-align: top;
+      margin: 10px 20px 10px 0;
+      padding: 0;
+      border: solid 1px black;
+    }
+
+    .button>* {
+      border: solid 1px rgba(0, 0, 0, .5);
+      background-color: rgba(0, 0, 0, .1);
+      min-height: 10px;
+      min-width: 10px;
+    }
+
+    .vertical {
+      grid-template-columns: auto;
+      grid-template-rows: auto auto auto;
+    }
+
+    button.button {
+      background-color: lightblue;
+    }
+  </style>
+</head>
+<body>
+  <!-- 3 columns/1 row -->
+  <button class="button pseudo">
+    <div></div>
+    <div></div>
+    <div></div>
+  </button>
+  <!-- 1 column/3 rows -->
+  <button class="button pseudo vertical">
+    <div></div>
+    <div></div>
+    <div></div>
+  </button>
+</body>
+</html>
+
--- a/layout/reftests/forms/button/reftest.list
+++ b/layout/reftests/forms/button/reftest.list
@@ -1,8 +1,12 @@
+# Tests for grid and flex sizing in buttons
+== button-display-flex-fullsize-1.html button-display-flex-fullsize-1-ref.html
+== button-display-grid-fullsize-1.html button-display-grid-fullsize-1-ref.html
+
 == first-letter-1.html first-letter-1-ref.html
 != first-letter-1.html first-letter-1-noref.html
 
 == max-height.html max-height-ref.html
 == min-height.html min-height-ref.html
 
 # Android is off ever-so-slightly on the points where the text
 # runs into the border on this text, so a little fuzz is needed.