wpt / css / css-sizing / stretch / stretch-alias-min-block-size-001.tentative.html

Status: FAIL | Duration: 95ms | Subtests: 8/46 | Open test on wpt.live | wpt.fyi

TestTest SourceSubtests (8/46)

Data from commit:
a50cb89 wpt: run reference-named files which are themselves tests (#836) (2026-09-03)

SubtestStatusMessage
[data-expected-height] 1FAILassert_equals: <div class="test" data-expected-height="45" /> height expected 45 but got 10
[data-expected-height] 2FAILassert_equals: <canvas class="test" data-expected-height="45" /> height expected 45 but got 10
[data-expected-height] 3FAILassert_equals: <input class="test" data-expected-height="45" /> height expected 45 but got 10
[data-expected-height] 4FAILassert_equals: <textarea class="test" data-expected-height="45" /> height expected 45 but got 10
[data-expected-height] 5FAILassert_equals: <button class="test" data-expected-height="45" /> height expected 45 but got 10
[data-expected-height] 6FAILassert_equals: <div class="test" style="float: left" data-expected-height="45" /> height expected 45 but got 10
[data-expected-height] 7FAILassert_equals: <div class="test" style="position: absolute; inset-block: 0;" data-expected-height="55" /> height expected 55 but got 10
[data-expected-height] 8FAILassert_equals: <div class="test" style="position: absolute" data-expected-height="50" /> height expected 50 but got 10
[data-expected-height] 9FAILassert_equals: <div class="test" style="position: absolute; inset-block-start: 10px" data-expected-height="45" /> height expected 45 but got 10
[data-expected-height] 10FAILassert_equals: <div class="test" style="position: absolute; inset-block-end: 10px" data-expected-height="45" /> height expected 45 but got 10
[data-expected-height] 11PASS
[data-expected-height] 12PASS
[data-expected-height] 13FAILassert_equals: <div class="test" style="position: absolute; inset-block: 0;" data-expected-height="55" /> height expected 55 but got 10
[data-expected-height] 14FAILassert_equals: <div class="test" style="position: absolute" data-expected-height="55" /> height expected 55 but got 10
[data-expected-height] 15FAILassert_equals: <div class="test" style="position: absolute; inset-block-start: 10px" data-expected-height="45" /> height expected 45 but got 10
[data-expected-height] 16FAILassert_equals: <div class="test" style="position: absolute; inset-block-end: 10px" data-expected-height="45" /> height expected 45 but got 10
[data-expected-height] 17PASS
[data-expected-height] 18PASS
[data-expected-height] 19FAILassert_equals: <div class="test" data-expected-height="45" /> height expected 45 but got 10
[data-expected-height] 20FAILassert_equals: <div class="test" data-expected-height="45" /> height expected 45 but got 10
[data-expected-height] 21FAILassert_equals: <div class="test" data-expected-height="55" /> height expected 55 but got 10
[data-expected-height] 22FAILassert_equals: <div class="test" data-expected-height="30" /> height expected 30 but got 10
[data-expected-height] 23FAILassert_equals: <div class="test" data-expected-height="45" /> height expected 45 but got 10
[data-expected-height] 24FAILassert_equals: <div class="test" data-expected-height="45" style="box-sizing: border-box;" /> height expected 45 but got 10
[data-expected-height] 25FAILassert_equals: <canvas class="test" data-expected-height="45" style="box-sizing: border-box;" /> height expected 45 but got 10
[data-expected-height] 26FAILassert_equals: <input class="test" data-expected-height="45" style="box-sizing: border-box;" /> height expected 45 but got 10
[data-expected-height] 27FAILassert_equals: <textarea class="test" data-expected-height="45" style="box-sizing: border-box;" /> height expected 45 but got 10
[data-expected-height] 28FAILassert_equals: <button class="test" data-expected-height="45" style="box-sizing: border-box;" /> height expected 45 but got 10
[data-expected-height] 29FAILassert_equals: <div class="test" style="float: left; box-sizing: border-box;" data-expected-height="45" /> height expected 45 but got 10
[data-expected-height] 30FAILassert_equals: <div class="test" style="position: absolute; inset-block: 0px; box-sizing: border-box;" data-expected-height="55" /> height expected 55 but got 10
[data-expected-height] 31FAILassert_equals: <div class="test" style="position: absolute; box-sizing: border-box;" data-expected-height="50" /> height expected 50 but got 10
[data-expected-height] 32FAILassert_equals: <div class="test" style="position: absolute; inset-block-start: 10px; box-sizing: border-box;" data-expected-height="45" /> height expected 45 but got 10
[data-expected-height] 33FAILassert_equals: <div class="test" style="position: absolute; inset-block-end: 10px; box-sizing: border-box;" data-expected-height="45" /> height expected 45 but got 10
[data-expected-height] 34PASS
[data-expected-height] 35PASS
[data-expected-height] 36FAILassert_equals: <div class="test" style="position: absolute; inset-block: 0px; box-sizing: border-box;" data-expected-height="55" /> height expected 55 but got 10
[data-expected-height] 37FAILassert_equals: <div class="test" style="position: absolute; box-sizing: border-box;" data-expected-height="55" /> height expected 55 but got 10
[data-expected-height] 38FAILassert_equals: <div class="test" style="position: absolute; inset-block-start: 10px; box-sizing: border-box;" data-expected-height="45" /> height expected 45 but got 10
[data-expected-height] 39FAILassert_equals: <div class="test" style="position: absolute; inset-block-end: 10px; box-sizing: border-box;" data-expected-height="45" /> height expected 45 but got 10
[data-expected-height] 40PASS
[data-expected-height] 41PASS
[data-expected-height] 42FAILassert_equals: <div class="test" data-expected-height="45" style="box-sizing: border-box;" /> height expected 45 but got 10
[data-expected-height] 43FAILassert_equals: <div class="test" data-expected-height="45" style="box-sizing: border-box;" /> height expected 45 but got 10
[data-expected-height] 44FAILassert_equals: <div class="test" data-expected-height="55" style="box-sizing: border-box;" /> height expected 55 but got 10
[data-expected-height] 45FAILassert_equals: <div class="test" data-expected-height="30" style="box-sizing: border-box;" /> height expected 30 but got 10
[data-expected-height] 46FAILassert_equals: <div class="test" data-expected-height="45" style="box-sizing: border-box;" /> height expected 45 but got 10

/css/css-sizing/stretch/stretch-alias-min-block-size-001.tentative.html

<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#sizing-values">
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<!-- NOTE: This test is meant to be an near-exact copy of the neighboring test
     file of nearly-the-same-name, with this version just adding "-alias" and
     ".tentative" to the filename. The markup should be identical to the
     original, aside from s/stretch/-webkit-fill-available/ in the CSS rule
     ".test {...}".  The expectation is that those keywords can be considered
     to be aliases that give the exact same sizing behavior. -->
<meta name="assert"
  content="min-block-size:stretch (setting 'min-height' in this case) resolves and clamps as expected (producing similar results as if we had specified the keyword for the block-size property)">
<style>
  .cb {
    block-size: 50px;
    inline-size: 40px;

    /* This margin & border are purely cosmetic and don't impact the sizing
     * calculations in this test: */
    margin: 5px;
    border: 2px solid black;

    /* This padding only comes into play for the subtests with absolutely
     * positioned children (where our padding-box forms the containing block
     * for the abspos child). */
    padding-block: 5px;
    padding-inline: 3px;

    /* We make each containing block an inline-level box, so we can display
     * subtests in multiple rows, for easier visualization: */
    display: inline-block;
    vertical-align: top;
  }

  .test {
    /* We have 2+3 = 5px of margin in the block axis. This means the stretched
     * children should all have a border-box size that's 5px less than the
     * containing block's content-box size, i.e. 50 - 5 = 45px. */
    margin-block-start: 2px;
    margin-block-end: 3px;

    /* We also have some border/padding that UAs will need to account for
     * when computing the stretched children's content-box sizes; but these
     * don't reduce our `data-expected-height` expectations, since those
     * correspond to the border-box size. */
    border: 3px solid blue;
    padding: 2px;

    /* We expect "min-block-size:stretch" to cause the used value of
     * "block-size" to be clamped to the "stretch" size. */
    min-block-size: -webkit-fill-available;
    block-size: 0;
    inline-size: 20px;
    background: fuchsia;
  }
</style>
<script>
  function runTests() {
    checkLayout('[data-expected-height]');

    // Add box-sizing:border-box (which shouldn't impact the actual resolved
    // box sizes that 'stretch' produces), and retest:
    for (let elem of document.querySelectorAll(".test")) {
      elem.style.boxSizing = "border-box";
    }
    checkLayout('[data-expected-height]');
  }
</script>
<body onload="runTests()">
  <!-- 'stretch' on a block box, replaced element, various form controls: -->
  <div class="cb">
    <div class="test" data-expected-height="45"></div>
  </div>
  <div class="cb">
    <canvas class="test" data-expected-height="45"></canvas>
  </div>
  <div class="cb">
    <input class="test" data-expected-height="45">
  </div>
  <div class="cb">
    <textarea class="test" data-expected-height="45"></textarea>
  </div>
  <div class="cb">
    <button class="test" data-expected-height="45"></button>
  </div>
  <div class="cb">
    <div class="test" style="float: left" data-expected-height="45"></div>
  </div>

  <br>

  <!-- 'stretch' on various abspos configurations, which use the container's
        padding-box as the area-to-fill (which in this case is 10px larger than
        the container's content-box, hence the larger 'data-expected-*'
        values vs. the previous subtests). -->
  <!-- With 0 insets, the child's margin-box fills the CB's padding-box, so
       the child's border-box should end being
       cb-padding-box-size - child-margin-size = 60px - 5px = 55px -->
  <div class="cb" style="position: relative">
    <div class="test" style="position: absolute; inset-block: 0;"
         data-expected-height="55"></div>
  </div>

  <!-- With auto insets, the child is placed at its static position which is
       the origin of the CB's content-box, and then 'stretch' makes it extend
       to reach the far end of the CB's padding-box. So it should be as large
       as the zero-insets case above, minus the CB's block-start-padding
       which is 5px. -->
  <div class="cb" style="position: relative">
    <div class="test" style="position: absolute" data-expected-height="50"></div>
  </div>

  <!-- When we specify an inset, the child should be as large as the
       zero-insets case above, minus whatever nonzero inset we choose. -->
  <div class="cb" style="position: relative">
    <div class="test" style="position: absolute; inset-block-start: 10px"
         data-expected-height="45"></div>
  </div>
  <div class="cb" style="position: relative">
    <div class="test" style="position: absolute; inset-block-end: 10px"
         data-expected-height="45"></div>
  </div>

  <!-- If an inset pushes the child past the edge of the CB, 'stretch' shrinks
       to just the 10px needed for the child's border/padding: -->
  <div class="cb" style="position: relative">
    <div class="test" style="position: absolute; inset-block-end: 55px"
         data-expected-height="10"></div>
  </div>
  <div class="cb" style="position: relative">
    <div class="test" style="position: absolute; inset-block-start: 55px"
         data-expected-height="10"></div>
  </div>

  <br>

  <!-- 'stretch' on various abspos configurations in a grid: similar to
       above, but the grid area forms the containing block. -->
  <!-- Similar to zero insets case above, but just now in a grid: -->
  <div class="cb"
       style="display: inline-grid; position: relative">
    <div class="test"
         style="position: absolute; inset-block: 0;"
         data-expected-height="55"></div>
  </div>

  <!-- With no insets, we're placed at our static position which is the grid's
       padding-box origin, and then we stretch to reach the far end of its
       padding-box. So we should be as large as the zero-insets case above. -->
  <div class="cb"
       style="display: inline-grid; position: relative">
    <div class="test"
         style="position: absolute"
         data-expected-height="55"></div>
  </div>

  <!-- When we specify an inset, the child should be as large as the
       zero-insets case above, minus whatever nonzero inset we choose. -->
  <div class="cb"
       style="display: inline-grid; position: relative">
    <div class="test"
         style="position: absolute; inset-block-start: 10px"
         data-expected-height="45"></div>
  </div>
  <div class="cb"
       style="display: inline-grid; position: relative">
    <div class="test"
         style="position: absolute; inset-block-end: 10px"
         data-expected-height="45"></div>
  </div>

  <!-- If an inset pushes the child past the edge of the CB, 'stretch' shrinks
       to just the 10px needed for the child's border/padding: -->
  <div class="cb"
       style="display: inline-grid; position: relative">
    <div class="test"
         style="position: absolute; inset-block-end: 55px"
         data-expected-height="10"></div>
  </div>
  <div class="cb"
       style="display: inline-grid; position: relative">
    <div class="test"
         style="position: absolute; inset-block-start: 55px"
         data-expected-height="10"></div>
  </div>

  <br>

  <!-- 'stretch' on a flex item: -->
  <div class="cb" style="display: inline-flex; flex-direction: row">
    <div class="test" data-expected-height="45"></div>
  </div>
  <div class="cb" style="display: inline-flex; flex-direction: column">
    <div class="test" data-expected-height="45"></div>
  </div>
  <!--...now with an extra-large sibling sharing the child's flex line, to be
      sure our 'stretch' sizing value resolves against the flex line's size: -->
  <div class="cb" style="display: inline-flex; flex-flow: row wrap">
    <div class="test" data-expected-height="55"></div>
    <div style="block-size: 60px"></div>
  </div>

  <!-- 'stretch' on a grid item in a definite-size grid track: -->
  <div class="cb" style="display: inline-grid; grid-template-rows: 35px">
    <div class="test" data-expected-height="30"></div>
  </div>

  <!-- 'stretch' on a grid item in an automatically-sized grid track: -->
  <div class="cb" style="display: inline-grid">
    <div class="test" data-expected-height="45"></div>
  </div>
</body>