mozilla-central: testing/web-platform/tests/css/cssom/getComputedStyle-resolved-min-size-auto.html@23763b72c35abeead04f63e4503c28abc73d065d

<!doctype html>
<meta charset="utf-8">
<title>CSSOM: resolved value of min-width and min-height:auto should be 0 except in certain defined cases</title>
<link rel="help" href="https://drafts.csswg.org/cssom/#resolved-value">
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11716">
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<link rel="author" title="Mozilla" href="https://mozilla.org">
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<!-- OVERVIEW:
     * Elements to be tested here must include an 'id'.
     * We use a "preservesAuto" attribute to tag the elements
       are expected to preserve "auto" in the resolved value of
       min-width and min-height.
  -->

<!-- The test content is in a scrollable div for cosmetic reasons, so that it
     can be inspected but also doesn't push the testharness output off the
     bottom of the screen: -->
<div style="overflow: scroll; width: 300px; height: 200px">
  <div id="block-box"></div>
  <div id="inline-box"></div>

  <!-- Elements with a nondefault aspect-ratio preserve 'auto': -->
  <div id="block-with-valid-aspect-ratio" style="aspect-ratio: 1/1"
       preservesAuto></div>
  <div id="block-with-degenerate-aspect-ratio" style="aspect-ratio: 0/1"
     preservesAuto></div>
  <div id="block-with-two-part-valid-aspect-ratio"
       style="aspect-ratio: auto 1/1" preservesAuto></div>
  <div id="block-with-two-part-degenerate-aspect-ratio"
       style="aspect-ratio: auto 0/1" preservesAuto></div>

  <!-- Note: aspect-ratio doesn't apply to inline boxes, but we treat it as
       toggling getComputedStyle to return the true 'min-width:auto' value
       regardless. -->
  <span id="inline-with-valid-aspect-ratio" style="aspect-ratio: 1/1"
        preservesAuto></span>
  <span id="inline-with-degenerate-aspect-ratio" style="aspect-ratio: 0/1"
        preservesAuto></span>

  <!-- flex and grid items should preserve 'auto': -->
  <div style="display: flex">
    <div id="flex-item-row" preservesAuto></div>
  </div>
  <div style="display: flex; flex-direction: column;">
  <div id="flex-item-column" preservesAuto></div>
  </div>
  <div style="display: grid">
    <div id="grid-item" preservesAuto></div>
  </div>

  <!-- Per https://drafts.csswg.org/css-sizing/#valdef-width-auto
       the min-width/min-height:auto value "resolves to zero when no box is
       generated" (regardless of aspect-ratio & flex/grid-item special cases)
       -->
  <div id="display-none" style="display: none"></div>
  <div id="display-none-valid-aspect-ratio"
       style="display: none; aspect-ratio:2/1"></div>
  <div style="display:none">
    <div id="display-none-subtree-valid-aspect-ratio"
         style="aspect-ratio:2/1"></div>
  </div>
  <div style="display: none">
    <div style="display: flex">
      <div id="display-none-subtree-flex-item"></div>
    </div>
  </div>
  <div style="display: none">
    <div style="display: grid">
      <div id="display-none-subtree-grid-item"></div>
    </div>
  </div>
</div>

<script>
for (const e of document.querySelectorAll("[id]")) {
  test(function() {
    const cs = getComputedStyle(e);
    const doesPreserveAuto = e.hasAttribute("preservesAuto");
    const expectedVal = doesPreserveAuto ?  "auto" : "0px";
    const expectationMessage = doesPreserveAuto ?
          "should round-trip through getComputedStyle" :
          `should be converted to ${expectedVal} in getComputedStyle`;

    for (const prop of ["min-width", "min-height"]) {
      assert_equals(cs[prop], expectedVal, `${e.id}: '${prop}:auto' ${expectationMessage} (as initial value)`);
      e.style.setProperty(prop, "auto");
      assert_equals(cs[prop], expectedVal, `${e.id}: '${prop}:auto' ${expectationMessage} (as specified value)`);
      e.style.removeProperty(prop);
    }
  }, `Resolved value of min-width & min-height 'auto' keyword behaves as expected on element with id="${e.id}"`);
}
</script>
author	Sotaro Ikeda <sotaro.ikeda.g@gmail.com>
	Thu, 10 Jul 2025 00:10:09 +0000 (7 hours ago)
changeset 795941	23763b72c35abeead04f63e4503c28abc73d065d
parent 780989	6b9e820b1f3df0b5447c14e0a5a9af2b160cd09b
permissions	-rw-r--r--