Blitz - WPT: intrinsic-percent-replaced-033.html

wpt / css / css-sizing / intrinsic-percent-replaced-033.html

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

Subtest	Status	Message
.cb > canvas 1	PASS
.cb > canvas 2	PASS
.cb > canvas 3	PASS
.cb > canvas 4	PASS
.cb > canvas 5	PASS
.cb > canvas 6	PASS
.cb > canvas 7	PASS
.cb > canvas 8	PASS
.cb > canvas 9	PASS

Enable JavaScript in test iframe

/css/css-sizing/intrinsic-percent-replaced-033.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>Intrinsic keyword width on a replaced element transfers a resolvable percentage height through the aspect ratio</title>
<link rel="author" title="Ahmad Saleem">
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
<meta name="assert" content="When a replaced element with an intrinsic aspect ratio has an intrinsic-keyword width (max-content/min-content/fit-content) and a percentage height that resolves against a definite containing block, its inline size is the resolved block size transferred through the aspect ratio, not its natural width.">

<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>

<style>
.cb {
  /* Definite height, so the canvas's height:100% is resolvable while its
     intrinsic-keyword width is being computed. */
  height: 100px;
}
.cb > canvas {
  display: block;
  height: 100%;
  background: green;
}
</style>

<div id="log"></div>

<!-- 1:1 intrinsic ratio (canvas 10x10). height:100% -> 100px, so the
     ratio-derived inline size is 100px, distinct from the 10px natural width. -->
<div class="cb">
  <canvas width="10" height="10" style="width: max-content" data-expected-width="100"></canvas>
</div>
<div class="cb">
  <canvas width="10" height="10" style="width: min-content" data-expected-width="100"></canvas>
</div>
<div class="cb">
  <canvas width="10" height="10" style="width: fit-content" data-expected-width="100"></canvas>
</div>

<!-- 2:1 intrinsic ratio (canvas 20x10). height:100% -> 100px, so the
     ratio-derived inline size is 200px, distinct from the 20px natural width. -->
<div class="cb">
  <canvas width="20" height="10" style="width: max-content" data-expected-width="200"></canvas>
</div>
<div class="cb">
  <canvas width="20" height="10" style="width: min-content" data-expected-width="200"></canvas>
</div>
<div class="cb">
  <canvas width="20" height="10" style="width: fit-content" data-expected-width="200"></canvas>
</div>

<!-- 1:2 intrinsic ratio (canvas 10x20). height:100% -> 100px, so the
     ratio-derived inline size is 50px, distinct from the 10px natural width. -->
<div class="cb">
  <canvas width="10" height="20" style="width: max-content" data-expected-width="50"></canvas>
</div>
<div class="cb">
  <canvas width="10" height="20" style="width: min-content" data-expected-width="50"></canvas>
</div>
<div class="cb">
  <canvas width="10" height="20" style="width: fit-content" data-expected-width="50"></canvas>
</div>

<script>
checkLayout(".cb > canvas");
</script>