Bug 1304636 Part 4: Update the existing test_flexbox_min_size_auto.html test to match new behavior. draft
authorBrad Werth <bwerth@mozilla.com>
Thu, 17 Nov 2016 16:12:19 -0800
changeset 440680 a59506b5eb9e34332a4aae98abcc6227e8e61657
parent 440679 25eda2940a993cf97ac7c66499301562d465c752
child 440681 16e1f92cf539f5c5da478568ddbfd19d8cdf3dd6
push id36295
push userbwerth@mozilla.com
push dateFri, 18 Nov 2016 00:24:00 +0000
bugs1304636
milestone53.0a1
Bug 1304636 Part 4: Update the existing test_flexbox_min_size_auto.html test to match new behavior. MozReview-Commit-ID: 8jyaDttWF6e
layout/style/test/test_flexbox_min_size_auto.html
--- a/layout/style/test/test_flexbox_min_size_auto.html
+++ b/layout/style/test/test_flexbox_min_size_auto.html
@@ -1,68 +1,61 @@
 <!DOCTYPE HTML>
 <html>
 <!--
 https://bugzilla.mozilla.org/show_bug.cgi?id=763689
 -->
 <head>
   <meta charset="utf-8">
-  <title>Test behavior of 'min-height:auto' and 'min-width:auto' (Bug 763689)</title>
+  <title>Test behavior of 'min-height:auto' and 'min-width:auto' (Bug 763689 and Bug 1304636)</title>
   <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
 </head>
 <body>
 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=763689">Mozilla Bug 763689</a>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1304636">Mozilla Bug 1304636</a>
 <body>
 <div id="display">
-  <div id="non-flex-item">abc</div>
+  <div id="block-item">abc</div>
+
   <div style="display: flex">
     <div id="horizontal-flex-item">abc</div>
+    <div id="horizontal-flex-item-OH" style="overflow: hidden">def</div>
   </div>
+
   <div style="display: flex; flex-direction: column">
     <div id="vertical-flex-item">abc</div>
+    <div id="vertical-flex-item-OH" style="overflow: hidden">def</div>
+  </div>
+
+  <div style="display: grid">
+    <div id="grid-item"></div>
+    <div id="grid-item-OH" style="overflow: hidden"></div>
   </div>
 </div>
 <pre id="test">
 <script type="application/javascript">
 "use strict";
 
 /**
- * Test 'min-height:auto' and 'min-width:auto' (Bug 763689)
+ * Test 'min-height:auto' and 'min-width:auto' (Bug 763689 and Bug 1304636)
  * ========================================================
  * This test checks the computed-style value of the "auto" keyword introduced
- * for the "min-height" and "min-width" properties in CSS3 Flexbox Section 4.5.
- *   http://www.w3.org/TR/css3-flexbox/#min-size-auto
+ * for the "min-height" and "min-width" properties in CSS3 Flexbox Section 4.5
+ * and CSS3 Grid Section 6.2.
+ *   https://www.w3.org/TR/css-flexbox-1/#min-size-auto
+ *   https://www.w3.org/TR/css-grid-1/#grid-item-sizing
  *
  * Quoting that chunk of spec:
  *     # auto
- *     #   When used as the value of a flex item's min main size property,
- *     #   this keyword indicates a minimum of the min-content size, to
- *     #   help ensure that the item is large enough to fit its contents.
- *     #
- *     #   | It is intended that this will compute to the 'min-content'
- *     #   | keyword when the specification defining it (Writing Modes
- *     #   | Appendix D) is sufficiently mature.
- *     #
- *     #   Otherwise, this keyword computes to '0' (unless otherwise
- *     #   defined by a future specification).
+ *     #   On a flex item whose overflow is visible in the main axis,
+ *     #   when specified on the flex item’s main-axis min-size property,
+ *     #   specifies an automatic minimum size. It otherwise computes to 0
+ *     #   (unless otherwise defined by a future specification).
  *
- * So, since we already support the "min-content" keyword, this effectively
- * means:
- *  - On a horizontal flex item, "min-width: auto" computes to "min-content".
- *  - On a vertical flex item, "min-height: auto" computes to "min-content".
- *  - In all other cases, "min-[width|height]: auto" computes to 0.
- * That's what this mochitest aims to check, via getComputedStyle().
- *
- * NOTE: As of this test's writing, we don't yet support enumerated keyword
- * values (including "min-content") for the "min-height" property. So for
- * now, "min-height: auto" always produces "0" in getComputedStyle, even on
- * a vertical flex item. (Though internally, we do know that it's really
- * "auto", and our flex container will correctly use the flex item's
- * min-content height as needed in layout.)
  */
 
 // Given an element ID, this function sets the corresponding
 // element's inline-style min-width and min-height explicitly to "auto".
 function setElemMinSizesToAuto(aElemId) {
   var elem = document.getElementById(aElemId);
 
   is(elem.style.minWidth, "", "min-width should be initially unset");
@@ -71,70 +64,66 @@ function setElemMinSizesToAuto(aElemId) 
 
   is(elem.style.minHeight, "", "min-height should be initially unset");
   elem.style.minHeight = "auto";
   is(elem.style.minHeight, "auto", "min-height should accept 'auto' value");
 }
 
 // Given an element ID, this function compares the corresponding element's
 // computed min-width and min-height against expected values.
-// (There's an optional final argument, to specify a "todo" expected value for
-// the min-height, for cases when we *should* have a particular value, but we
-// don't support it yet. In that case, aExpectedMinHeight is the value we
-// currently expect to have, and aExpectedMinHeightTodo is the value we really
-// *should* have.)
 function checkElemMinSizes(aElemId,
                            aExpectedMinWidth,
-                           aExpectedMinHeight,
-                           aExpectedMinHeightTodo /* optional */)
+                           aExpectedMinHeight)
 {
   var elem = document.getElementById(aElemId);
   is(window.getComputedStyle(elem, "").minWidth,  aExpectedMinWidth,
      "checking min-width of " + aElemId);
 
   is(window.getComputedStyle(elem, "").minHeight, aExpectedMinHeight,
      "checking min-height of " + aElemId);
-
-  // Special bonus check, if the *real* expected value is something we don't
-  // support yet.
-  if (typeof aExpectedMinHeightTodo != 'undefined') {
-    todo_is(window.getComputedStyle(elem, "").minHeight, aExpectedMinHeightTodo,
-           "checking the ultimately-correct min-height of " + aElemId);
-  }
 }
 
 // This function goes through all the elements we're interested in
 // and checks their computed min-sizes against expected values,
 // farming out each per-element job to checkElemMinSizes.
 function checkAllTheMinSizes() {
   // This is the normal part -- generally, the default value of "min-width"
   // and "min-height" (auto) computes to "0px".
-  checkElemMinSizes("non-flex-item", "0px", "0px");
+  checkElemMinSizes("block-item", "0px", "0px");
 
   // ...but for a flex item in a horizontal flex container, "min-width: auto"
-  // computes to "min-content".
-  checkElemMinSizes("horizontal-flex-item", "-moz-min-content", "0px");
+  // computes to "auto".
+  checkElemMinSizes("horizontal-flex-item", "auto", "0px");
+  checkElemMinSizes("horizontal-flex-item-OH", "0px", "0px");
 
   // ...and for a flex item in a vertical flex container, "min-height: auto"
-  // computes to "min-content" (except for now, it computes to "0px", because
-  // we don't support "min-content" on heights yet.  We pass "-moz-min-content"
-  // as the final arg, to get it checked as the "todo" min-height.)
-  checkElemMinSizes("vertical-flex-item", "0px", "0px", "-moz-min-content");
+  // computes to "auto".
+  checkElemMinSizes("vertical-flex-item", "0px", "auto");
+  checkElemMinSizes("vertical-flex-item-OH", "0px", "0px");
+
+  // ...and for a grid item, "min-width: auto" and min-height both
+  // compute to "auto".
+  checkElemMinSizes("grid-item", "auto", "auto");
+  checkElemMinSizes("grid-item-OH", "0px", "0px");
 }
 
 // Main test function
 function main() {
   // First: check that min-sizes are what we expect, with min-size properties
   // at their initial value.
   checkAllTheMinSizes();
 
   // Now, we *explicitly* set min-size properties to "auto"...
-  var elemIds = [ "non-flex-item",
+  var elemIds = [ "block-item",
                   "horizontal-flex-item",
-                  "vertical-flex-item"];
+                  "horizontal-flex-item-OH",
+                  "vertical-flex-item",
+                  "vertical-flex-item-OH",
+                  "grid-item",
+                  "grid-item-OH"];
   elemIds.forEach(setElemMinSizesToAuto);
 
   // ...and try again (should have the same result):
   checkAllTheMinSizes();
 }
 
 main();