Blitz - WPT: checkbox-percentage-width-in-flex.html

wpt / css / css-flexbox / checkbox-percentage-width-in-flex.html

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

Subtest	Status	Message
Checkbox with percentage width in flex container should shrink to allow siblings to render	PASS
Checkbox with percentage width should participate in flex shrink	PASS
Radio with percentage width in flex container should shrink to allow siblings to render	PASS
Radio with percentage width should participate in flex shrink	PASS

Enable JavaScript in test iframe

/css/css-flexbox/checkbox-percentage-width-in-flex.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Flexbox Test: checkbox and radio with percentage width should allow flex shrink</title>
<link rel="author" title="WebKit" href="https://webkit.org">
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#min-size-auto">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
.flex {
  display: flex;
  width: 200px;
}
</style>
</head>
<body>
<div class="flex" id="checkbox-flex">
  <input type="checkbox" id="checkbox" style="width: 100%;">
  <div id="checkbox-sibling" style="width: 40px; height: 20px; flex-shrink: 1;"></div>
</div>
<div class="flex" id="radio-flex">
  <input type="radio" id="radio" style="width: 100%;">
  <div id="radio-sibling" style="width: 40px; height: 20px; flex-shrink: 1;"></div>
</div>
<script>
test(function() {
  assert_greater_than(document.getElementById("checkbox-sibling").offsetWidth, 0,
    "Sibling of checkbox with width:100% should have non-zero width");
}, "Checkbox with percentage width in flex container should shrink to allow siblings to render");

test(function() {
  assert_less_than(document.getElementById("checkbox").offsetWidth, 200,
    "Checkbox with width:100% should shrink below container width when there are siblings");
}, "Checkbox with percentage width should participate in flex shrink");

test(function() {
  assert_greater_than(document.getElementById("radio-sibling").offsetWidth, 0,
    "Sibling of radio with width:100% should have non-zero width");
}, "Radio with percentage width in flex container should shrink to allow siblings to render");

test(function() {
  assert_less_than(document.getElementById("radio").offsetWidth, 200,
    "Radio with width:100% should shrink below container width when there are siblings");
}, "Radio with percentage width should participate in flex shrink");
</script>
</body>
</html>