wpt / css / css-sizing / keyword-sizes-on-replaced-element.html

Status: FAIL | Duration: 4ms | Subtests: 50/84 | Open test on wpt.live | wpt.fyi

TestTest SourceSubtests (50/84)

Data from commit:
708eb61 WPT runner: support mismatch reftests and multiple rel=match links (#665) (2026-08-09)

SubtestStatusMessage
.test 1PASS
.test 2PASS
.test 3PASS
.test 4PASS
.test 5PASS
.test 6PASS
.test 7PASS
.test 8PASS
.test 9PASS
.test 10PASS
.test 11PASS
.test 12PASS
.test 13PASS
.test 14PASS
.test 15PASS
.test 16PASS
.test 17PASS
.test 18PASS
.test 19PASS
.test 20PASS
.test 21FAILassert_equals: data-expected-width expected 60 got 10
.test 22FAILassert_equals: data-expected-width expected 110 got 10 assert_equals: data-expected-height expected 110 got 10
.test 23FAILassert_equals: data-expected-width expected 110 got 10 assert_equals: data-expected-height expected 110 got 10
.test 24FAILassert_equals: data-expected-width expected 110 got 10 assert_equals: data-expected-height expected 110 got 10
.test 25FAILassert_equals: data-expected-width expected 60 got 10
.test 26FAILassert_equals: data-expected-width expected 110 got 10 assert_equals: data-expected-height expected 110 got 10
.test 27FAILassert_equals: data-expected-width expected 110 got 10 assert_equals: data-expected-height expected 110 got 10
.test 28FAILassert_equals: data-expected-width expected 110 got 10 assert_equals: data-expected-height expected 110 got 10
.test 29FAILassert_equals: data-expected-width expected 60 got 10
.test 30FAILassert_equals: data-expected-width expected 110 got 10 assert_equals: data-expected-height expected 110 got 10
.test 31FAILassert_equals: data-expected-width expected 110 got 10 assert_equals: data-expected-height expected 110 got 10
.test 32FAILassert_equals: data-expected-width expected 110 got 10 assert_equals: data-expected-height expected 110 got 10
.test 33PASS
.test 34PASS
.test 35PASS
.test 36PASS
.test 37FAILassert_equals: data-expected-width expected 60 got 210 assert_equals: data-expected-height expected 60 got 210
.test 38PASS
.test 39PASS
.test 40PASS
.test 41FAILassert_equals: data-expected-width expected 60 got 210 assert_equals: data-expected-height expected 60 got 210
.test 42PASS
.test 43PASS
.test 44PASS
.test 45FAILassert_equals: data-expected-width expected 60 got 210 assert_equals: data-expected-height expected 60 got 210
.test 46PASS
.test 47PASS
.test 48PASS
.test 49FAILassert_equals: data-expected-width expected 190 got 110 assert_equals: data-expected-height expected 190 got 110
.test 50FAILassert_equals: data-expected-width expected 190 got 10 assert_equals: data-expected-height expected 190 got 10
.test 51FAILassert_equals: data-expected-width expected 190 got 110 assert_equals: data-expected-height expected 190 got 110
.test 52FAILassert_equals: data-expected-width expected 90 got 110 assert_equals: data-expected-height expected 90 got 110
.test 53FAILassert_equals: data-expected-width expected 90 got 10 assert_equals: data-expected-height expected 90 got 10
.test 54FAILassert_equals: data-expected-width expected 90 got 110 assert_equals: data-expected-height expected 90 got 110
.test 55PASS
.test 56PASS
.test 57PASS
.test 58PASS
.test 59PASS
.test 60FAILassert_equals: data-expected-width expected 510 got 210 assert_equals: data-expected-height expected 510 got 210
.test 61PASS
.test 62FAILassert_equals: data-expected-height expected 10 got 60
.test 63FAILassert_equals: data-expected-height expected 510 got 60
.test 64PASS
.test 65FAILassert_equals: data-expected-height expected 10 got 160
.test 66FAILassert_equals: data-expected-height expected 510 got 160
.test 67PASS
.test 68FAILassert_equals: data-expected-width expected 110 got 10 assert_equals: data-expected-height expected 110 got 10
.test 69FAILassert_equals: data-expected-width expected 110 got 210 assert_equals: data-expected-height expected 110 got 210
.test 70PASS
.test 71FAILassert_equals: data-expected-width expected 110 got 60 assert_equals: data-expected-height expected 110 got 60
.test 72PASS
.test 73PASS
.test 74PASS
.test 75FAILassert_equals: data-expected-width expected 110 got 160 assert_equals: data-expected-height expected 110 got 160
.test 76PASS
.test 77FAILassert_equals: data-expected-width expected 110 got 10 assert_equals: data-expected-height expected 110 got 10
.test 78FAILassert_equals: data-expected-width expected 110 got 210 assert_equals: data-expected-height expected 110 got 210
.test 79PASS
.test 80FAILassert_equals: data-expected-width expected 110 got 60 assert_equals: data-expected-height expected 110 got 60
.test 81PASS
.test 82PASS
.test 83PASS
.test 84FAILassert_equals: data-expected-width expected 110 got 160 assert_equals: data-expected-height expected 110 got 160

/css/css-sizing/keyword-sizes-on-replaced-element.html

<!DOCTYPE html>
<title>Keyword sizes on replaced element</title>
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#sizing-values">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#sizing-values">
<link rel="help" href="https://drafts.csswg.org/css2/#replaced-element">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11006">
<meta assert="The various keyword sizes work as expected on replaced elements.">

<style>
.wrapper {
  display: inline-block;
  vertical-align: top;
  margin-right: 150px;
}

.test {
  margin: 5px;
  border: 3px solid;
  padding: 2px;
  width: auto;
  height: auto;
}

/* Set the preferred size to small amount, to test that the min size works */
.test.min-width  { width:  0px }
.test.min-height { height: 0px }

/* Set the preferred size to big amount, to test that the max size works */
.test.max-width  { width:  500px }
.test.max-height { height: 500px }

/* stretch isn't widely supported, fall back to vendor-prefixed alternatives */
.width.stretch      {      width: -moz-available;      width: -webkit-fill-available;      width: stretch }
.min-width.stretch  {  min-width: -moz-available;  min-width: -webkit-fill-available;  min-width: stretch }
.max-width.stretch  {  max-width: -moz-available;  max-width: -webkit-fill-available;  max-width: stretch }
.height.stretch     {     height: -moz-available;     height: -webkit-fill-available;     height: stretch }
.min-height.stretch { min-height: -moz-available; min-height: -webkit-fill-available; min-height: stretch }
.max-height.stretch { max-height: -moz-available; max-height: -webkit-fill-available; max-height: stretch }
</style>
<div id="log"></div>

<!-- Intrinsic keywords -->
<div class="wrapper" style="width: 200px; height: 100px">
  <canvas width="100" height="100" class="test width height" style="width: 50px; height: 50px"
          data-expected-width="60" data-expected-height="60"></canvas>
  <canvas width="100" height="100" class="test width height" style="width: 50px; height: min-content"
          data-expected-width="60" data-expected-height="60"></canvas>
  <canvas width="100" height="100" class="test width height" style="width: 50px; height: fit-content"
          data-expected-width="60" data-expected-height="60"></canvas>
  <canvas width="100" height="100" class="test width height" style="width: 50px; height: max-content"
          data-expected-width="60" data-expected-height="60"></canvas>
  <canvas width="100" height="100" class="test width height" style="width: min-content; height: 50px"
          data-expected-width="60" data-expected-height="60"></canvas>
  <canvas width="100" height="100" class="test width height" style="width: min-content; height: min-content"
          data-expected-width="110" data-expected-height="110"></canvas>
  <canvas width="100" height="100" class="test width height" style="width: min-content; height: fit-content"
          data-expected-width="110" data-expected-height="110"></canvas>
  <canvas width="100" height="100" class="test width height" style="width: min-content; height: max-content"
          data-expected-width="110" data-expected-height="110"></canvas>
  <canvas width="100" height="100" class="test width height" style="width: fit-content; height: 50px"
          data-expected-width="60" data-expected-height="60"></canvas>
  <canvas width="100" height="100" class="test width height" style="width: fit-content; height: min-content"
          data-expected-width="110" data-expected-height="110"></canvas>
  <canvas width="100" height="100" class="test width height" style="width: fit-content; height: fit-content"
          data-expected-width="110" data-expected-height="110"></canvas>
  <canvas width="100" height="100" class="test width height" style="width: fit-content; height: max-content"
          data-expected-width="110" data-expected-height="110"></canvas>
  <canvas width="100" height="100" class="test width height" style="width: max-content; height: 50px"
          data-expected-width="60" data-expected-height="60"></canvas>
  <canvas width="100" height="100" class="test width height" style="width: max-content; height: min-content"
          data-expected-width="110" data-expected-height="110"></canvas>
  <canvas width="100" height="100" class="test width height" style="width: max-content; height: fit-content"
          data-expected-width="110" data-expected-height="110"></canvas>
  <canvas width="100" height="100" class="test width height" style="width: max-content; height: max-content"
          data-expected-width="110" data-expected-height="110"></canvas>

  <br>

  <canvas width="100" height="100" class="test min-width height" style="min-width: 50px; height: 50px"
          data-expected-width="60" data-expected-height="60"></canvas>
  <canvas width="100" height="100" class="test min-width height" style="min-width: 50px; height: min-content"
          data-expected-width="60" data-expected-height="60"></canvas>
  <canvas width="100" height="100" class="test min-width height" style="min-width: 50px; height: fit-content"
          data-expected-width="60" data-expected-height="60"></canvas>
  <canvas width="100" height="100" class="test min-width height" style="min-width: 50px; height: max-content"
          data-expected-width="60" data-expected-height="60"></canvas>
  <canvas width="100" height="100" class="test min-width height" style="min-width: min-content; height: 50px"
          data-expected-width="60" data-expected-height="60"></canvas>
  <canvas width="100" height="100" class="test min-width height" style="min-width: min-content; height: min-content"
          data-expected-width="110" data-expected-height="110"></canvas>
  <canvas width="100" height="100" class="test min-width height" style="min-width: min-content; height: fit-content"
          data-expected-width="110" data-expected-height="110"></canvas>
  <canvas width="100" height="100" class="test min-width height" style="min-width: min-content; height: max-content"
          data-expected-width="110" data-expected-height="110"></canvas>
  <canvas width="100" height="100" class="test min-width height" style="min-width: fit-content; height: 50px"
          data-expected-width="60" data-expected-height="60"></canvas>
  <canvas width="100" height="100" class="test min-width height" style="min-width: fit-content; height: min-content"
          data-expected-width="110" data-expected-height="110"></canvas>
  <canvas width="100" height="100" class="test min-width height" style="min-width: fit-content; height: fit-content"
          data-expected-width="110" data-expected-height="110"></canvas>
  <canvas width="100" height="100" class="test min-width height" style="min-width: fit-content; height: max-content"
          data-expected-width="110" data-expected-height="110"></canvas>
  <canvas width="100" height="100" class="test min-width height" style="min-width: max-content; height: 50px"
          data-expected-width="60" data-expected-height="60"></canvas>
  <canvas width="100" height="100" class="test min-width height" style="min-width: max-content; height: min-content"
          data-expected-width="110" data-expected-height="110"></canvas>
  <canvas width="100" height="100" class="test min-width height" style="min-width: max-content; height: fit-content"
          data-expected-width="110" data-expected-height="110"></canvas>
  <canvas width="100" height="100" class="test min-width height" style="min-width: max-content; height: max-content"
          data-expected-width="110" data-expected-height="110"></canvas>

  <br>

  <canvas width="100" height="100" class="test max-width height" style="max-width: 50px; height: 50px"
          data-expected-width="60" data-expected-height="60"></canvas>
  <canvas width="100" height="100" class="test max-width height" style="max-width: 50px; height: min-content"
          data-expected-width="60" data-expected-height="60"></canvas>
  <canvas width="100" height="100" class="test max-width height" style="max-width: 50px; height: fit-content"
          data-expected-width="60" data-expected-height="60"></canvas>
  <canvas width="100" height="100" class="test max-width height" style="max-width: 50px; height: max-content"
          data-expected-width="60" data-expected-height="60"></canvas>
  <canvas width="100" height="100" class="test max-width height" style="max-width: min-content; height: 50px"
          data-expected-width="60" data-expected-height="60"></canvas>
  <canvas width="100" height="100" class="test max-width height" style="max-width: min-content; height: min-content"
          data-expected-width="110" data-expected-height="110"></canvas>
  <canvas width="100" height="100" class="test max-width height" style="max-width: min-content; height: fit-content"
          data-expected-width="110" data-expected-height="110"></canvas>
  <canvas width="100" height="100" class="test max-width height" style="max-width: min-content; height: max-content"
          data-expected-width="110" data-expected-height="110"></canvas>
  <canvas width="100" height="100" class="test max-width height" style="max-width: fit-content; height: 50px"
          data-expected-width="60" data-expected-height="60"></canvas>
  <canvas width="100" height="100" class="test max-width height" style="max-width: fit-content; height: min-content"
          data-expected-width="110" data-expected-height="110"></canvas>
  <canvas width="100" height="100" class="test max-width height" style="max-width: fit-content; height: fit-content"
          data-expected-width="110" data-expected-height="110"></canvas>
  <canvas width="100" height="100" class="test max-width height" style="max-width: fit-content; height: max-content"
          data-expected-width="110" data-expected-height="110"></canvas>
  <canvas width="100" height="100" class="test max-width height" style="max-width: max-content; height: 50px"
          data-expected-width="60" data-expected-height="60"></canvas>
  <canvas width="100" height="100" class="test max-width height" style="max-width: max-content; height: min-content"
          data-expected-width="110" data-expected-height="110"></canvas>
  <canvas width="100" height="100" class="test max-width height" style="max-width: max-content; height: fit-content"
          data-expected-width="110" data-expected-height="110"></canvas>
  <canvas width="100" height="100" class="test max-width height" style="max-width: max-content; height: max-content"
          data-expected-width="110" data-expected-height="110"></canvas>
</div>

<!-- Definite stretch -->
<div class="wrapper" style="width: 200px; height: 100px">
  <canvas width="100" height="100" class="test width stretch"
          data-expected-width="190" data-expected-height="190"></canvas>
  <canvas width="100" height="100" class="test min-width stretch"
          data-expected-width="190" data-expected-height="190"></canvas>
  <canvas width="100" height="100" class="test max-width stretch"
          data-expected-width="190" data-expected-height="190"></canvas>
  <canvas width="100" height="100" class="test height stretch"
          data-expected-width="90" data-expected-height="90"></canvas>
  <canvas width="100" height="100" class="test min-height stretch"
          data-expected-width="90" data-expected-height="90"></canvas>
  <canvas width="100" height="100" class="test max-height stretch"
          data-expected-width="90" data-expected-height="90"></canvas>
</div>

<!-- Stretch sizes can't result in a negative content size -->
<div class="wrapper" style="width: 0px; height: 0px">
  <canvas width="100" height="100" class="test width min-width max-width stretch"
          data-expected-width="10" data-expected-height="10"></canvas>
  <canvas width="100" height="100" class="test height min-height max-height stretch"
          data-expected-width="10" data-expected-height="10"></canvas>
  <canvas width="100" height="100" class="test width min-width max-width height min-height max-height stretch"
          data-expected-width="10" data-expected-height="10"></canvas>
</div>

<!-- Indefinite stretch -->
<div class="wrapper" style="width: 200px; max-height: 100px">
  <canvas width="100" height="100" class="test height stretch"
          data-expected-width="110" data-expected-height="110"></canvas>
  <canvas width="100" height="100" class="test min-height stretch"
          data-expected-width="10" data-expected-height="10"></canvas>
  <canvas width="100" height="100" class="test max-height stretch"
          data-expected-width="510" data-expected-height="510"></canvas>

  <canvas width="100" height="100" class="test height stretch" style="max-width: 50px"
          data-expected-width="60" data-expected-height="60"></canvas>
  <canvas width="100" height="100" class="test min-height stretch" style="min-width: 50px"
          data-expected-width="60" data-expected-height="10"></canvas>
  <canvas width="100" height="100" class="test max-height stretch" style="max-width: 50px"
          data-expected-width="60" data-expected-height="510"></canvas>

  <canvas width="100" height="100" class="test height stretch" style="min-width: 150px"
          data-expected-width="160" data-expected-height="160"></canvas>
  <canvas width="100" height="100" class="test min-height stretch" style="min-width: 150px"
          data-expected-width="160" data-expected-height="10"></canvas>
  <canvas width="100" height="100" class="test max-height stretch" style="max-width: 150px"
          data-expected-width="160" data-expected-height="510"></canvas>
</div>

<!-- Fit-content with indefinite stretch -->
<div class="wrapper" style="width: 200px; max-height: 100px">
  <canvas width="100" height="100" class="test height" style="height: fit-content"
          data-expected-width="110" data-expected-height="110"></canvas>
  <canvas width="100" height="100" class="test min-height" style="min-height: fit-content"
          data-expected-width="110" data-expected-height="110"></canvas>
  <canvas width="100" height="100" class="test max-height" style="max-height: fit-content"
          data-expected-width="110" data-expected-height="110"></canvas>

  <canvas width="100" height="100" class="test height" style="max-width: 50px; height: fit-content"
          data-expected-width="60" data-expected-height="60"></canvas>
  <canvas width="100" height="100" class="test min-height" style="min-width: 50px; min-height: fit-content"
          data-expected-width="110" data-expected-height="110"></canvas>
  <canvas width="100" height="100" class="test max-height" style="max-width: 50px; max-height: fit-content"
          data-expected-width="60" data-expected-height="60"></canvas>

  <canvas width="100" height="100" class="test height" style="min-width: 150px; height: fit-content"
          data-expected-width="160" data-expected-height="160"></canvas>
  <canvas width="100" height="100" class="test min-height" style="min-width: 150px; min-height: fit-content"
          data-expected-width="160" data-expected-height="160"></canvas>
  <canvas width="100" height="100" class="test max-height" style="max-width: 150px; max-height: fit-content"
          data-expected-width="110" data-expected-height="110"></canvas>
</div>

<!-- min-content -->
<div class="wrapper" style="width: 200px; max-height: 100px">
  <canvas width="100" height="100" class="test height" style="height: min-content"
          data-expected-width="110" data-expected-height="110"></canvas>
  <canvas width="100" height="100" class="test min-height" style="min-height: min-content"
          data-expected-width="110" data-expected-height="110"></canvas>
  <canvas width="100" height="100" class="test max-height" style="max-height: min-content"
          data-expected-width="110" data-expected-height="110"></canvas>

  <canvas width="100" height="100" class="test height" style="max-width: 50px; height: min-content"
          data-expected-width="60" data-expected-height="60"></canvas>
  <canvas width="100" height="100" class="test min-height" style="min-width: 50px; min-height: min-content"
          data-expected-width="110" data-expected-height="110"></canvas>
  <canvas width="100" height="100" class="test max-height" style="max-width: 50px; max-height: min-content"
          data-expected-width="60" data-expected-height="60"></canvas>

  <canvas width="100" height="100" class="test height" style="min-width: 150px; height: min-content"
          data-expected-width="160" data-expected-height="160"></canvas>
  <canvas width="100" height="100" class="test min-height" style="min-width: 150px; min-height: min-content"
          data-expected-width="160" data-expected-height="160"></canvas>
  <canvas width="100" height="100" class="test max-height" style="max-width: 150px; max-height: min-content"
          data-expected-width="110" data-expected-height="110"></canvas>
</div>

<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<script>
checkLayout(".test");
</script>