author Butkovits Atila <>
Thu, 23 Sep 2021 13:06:40 +0300
changeset 593004 c38d34be7c3f757510f037fef5a78ea08af32980
parent 469640 c9c0c6f2eed54a187e124942e53c3660b4cf17d8
permissions -rw-r--r--
Backed out changeset 53b1fa0faa6d (bug 1696251) for breaking the static-analysis integration. a=backout

  <meta charset="utf-8">
  <title>Test behavior of 'min-height:auto' and 'min-width:auto' (Bug 763689 and Bug 1304636)</title>
  <script src="/tests/SimpleTest/SimpleTest.js"></script>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
<a target="_blank" href="">Mozilla Bug 763689</a>
<a target="_blank" href="">Mozilla Bug 1304636</a>
<div id="display">
  <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 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 style="display: grid">
    <div id="grid-item"></div>
    <div id="grid-item-OH" style="overflow: hidden"></div>
<pre id="test">
<script type="application/javascript">
"use strict";

 * 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
 * and CSS3 Grid Section 6.2.
 * Quoting that chunk of spec:
 *     # auto
 *     #   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).

// 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(, "", "min-width should be initially unset"); = "auto";
  is(, "auto", "min-width should accept 'auto' value");

  is(, "", "min-height should be initially unset"); = "auto";
  is(, "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.
function checkElemMinSizes(aElemId,
  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);

// 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("block-item", "0px", "0px");

  // ...but for a flex item or grid item, "min-width: auto" and
  // "min-height: auto" both compute to "auto" (even in cases where
  // we know it'll actually resolve to 0 in layout, like for example
  // when the item has "overflow:hidden").
  checkElemMinSizes("horizontal-flex-item",    "auto", "auto");
  checkElemMinSizes("horizontal-flex-item-OH", "auto", "auto");
  checkElemMinSizes("vertical-flex-item",      "auto", "auto");
  checkElemMinSizes("vertical-flex-item-OH",   "auto", "auto");
  checkElemMinSizes("grid-item",               "auto", "auto");
  checkElemMinSizes("grid-item-OH",            "auto", "auto");

// Main test function
function main() {
  // First: check that min-sizes are what we expect, with min-size properties
  // at their initial value.

  // Now, we *explicitly* set min-size properties to "auto"...
  var elemIds = [ "block-item",

  // ...and try again (should have the same result):