wpt / css / css-flexbox / flex-aspect-ratio-img-row-005.html

Status: PASS | Duration: 2ms | Subtests: 4/4 | Open test on wpt.live | wpt.fyi

TestTest SourceSubtests (4/4)

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

SubtestStatusMessage
img 1PASS
img 2PASS
img 3PASS
img 4PASS

/css/css-flexbox/flex-aspect-ratio-img-row-005.html

<!doctype html>
<title>Aspect-ratio items with borders</title>
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item" title="Section B">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#transferred-size-suggestion">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#content-size-suggestion">
<meta name="assert" content="Multiplying cross size by aspect ratio should operate on content box only.">

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

<style>
img {
  border-top: 50px solid blue;
  border-left: 10px solid orange;
}

.flexbox {
  display: flex;
  margin-bottom: 20px;
}
</style>

<!-- script after body was flakily triggering before images were loaded, so wait for onload -->
<body onload="checkLayout('img')">

<p>
The green boxes should all be 100x100.
</p>

Section B of flex base size + transferred size suggestion:
<div class=flexbox>
  <img style="height: 100px;" src="support/200x200-green.png" data-expected-client-width=100 data-expected-client-height=100 />
</div>

Section B of flex base size + transferred size suggestion, with box-sizing: border-box:
<!-- Chrome 83 fails the border-box version. -->
<div class=flexbox>
  <img style="height: 150px; box-sizing: border-box;" src="support/200x200-green.png" data-expected-client-width=100 data-expected-client-height=100 />
</div>

content size suggestion
<div class=flexbox>
  <img style="max-height: 100px;" src="support/200x200-green.png" data-expected-client-width=100 data-expected-client-height=100 />
</div>

content size suggestion
<div class=flexbox>
  <img style="min-height: 100px;" src="support/60x60-green.png" data-expected-client-width=100 data-expected-client-height=100 />
</div>

</body>