Google Git
Sign in
chromium / external / w3c / web-platform-tests.git / HEAD / . / css / css-flexbox / flex-container-min-content-002.tentative.html
blob: f7e5016b59ee72f3616029a60163f8520970f512 [file] [log] [blame]
<!DOCTYPE html>
<meta charset="utf-8">
<title>Flex Container Min-Content Sizes</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#intrinsic-main-sizes"
title="9.9.1. Flex Container Intrinsic Main Sizes">
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#intrinsic-cross-sizes"
title="9.9.2. Flex Container Intrinsic Cross Sizes">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/12123">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<style>
.flex {
display: inline-flex;
vertical-align: top;
border: 5px solid magenta;
width: min-content;
height: min-content;
}
.flex.min {
width: 0;
height: 0;
min-width: min-content;
min-height: min-content;
}
.flex.max {
width: 200px;
height: 200px;
max-width: min-content;
max-height: min-content;
}
.flex > div {
font: 25px/1 Ahem;
border: 5px solid cyan;
}
</style>
<!-- Single-line row flex container -->
<div class="flex" style="flex-flow: row nowrap"
data-expected-width="45" data-expected-height="45">
<div style="width: 25px; height: 25px">X</div>
</div>
<div class="flex min" style="flex-flow: row nowrap"
data-expected-width="45" data-expected-height="45">
<div style="width: 25px; height: 25px">X</div>
</div>
<div class="flex max" style="flex-flow: row nowrap"
data-expected-width="45" data-expected-height="45">
<div style="width: 25px; height: 25px">X</div>
</div>
<div class="flex" style="flex-flow: row nowrap"
data-expected-width="80" data-expected-height="70">
<div data-expected-width="35" data-expected-height="60">X X</div>
<div data-expected-width="35" data-expected-height="60">X X</div>
</div>
<div class="flex min" style="flex-flow: row nowrap"
data-expected-width="80" data-expected-height="70">
<div data-expected-width="35" data-expected-height="60">X X</div>
<div data-expected-width="35" data-expected-height="60">X X</div>
</div>
<div class="flex max" style="flex-flow: row nowrap"
data-expected-width="80" data-expected-height="70">
<div data-expected-width="35" data-expected-height="60">X X</div>
<div data-expected-width="35" data-expected-height="60">X X</div>
</div>
<hr>
<!-- Single-line column flex container -->
<div class="flex" style="flex-flow: column nowrap"
data-expected-width="45" data-expected-height="45">
<div style="width: 25px; height: 25px">X</div>
</div>
<div class="flex min" style="flex-flow: column nowrap"
data-expected-width="45" data-expected-height="45">
<div style="width: 25px; height: 25px">X</div>
</div>
<div class="flex max" style="flex-flow: column nowrap"
data-expected-width="45" data-expected-height="45">
<div style="width: 25px; height: 25px">X</div>
</div>
<div class="flex" style="flex-flow: column nowrap"
data-expected-width="45" data-expected-height="130">
<div data-expected-width="35" data-expected-height="60">X X</div>
<div data-expected-width="35" data-expected-height="60">X X</div>
</div>
<div class="flex min" style="flex-flow: column nowrap"
data-expected-width="45" data-expected-height="130">
<div data-expected-width="35" data-expected-height="60">X X</div>
<div data-expected-width="35" data-expected-height="60">X X</div>
</div>
<div class="flex max" style="flex-flow: column nowrap"
data-expected-width="45" data-expected-height="130">
<div data-expected-width="35" data-expected-height="60">X X</div>
<div data-expected-width="35" data-expected-height="60">X X</div>
</div>
<hr>
<!-- Multi-line row flex container -->
<div class="flex" style="flex-flow: row wrap"
data-expected-width="45" data-expected-height="45">
<div style="width: 25px; height: 25px">X</div>
</div>
<div class="flex min" style="flex-flow: row wrap"
data-expected-width="45" data-expected-height="45">
<div style="width: 25px; height: 25px">X</div>
</div>
<div class="flex max" style="flex-flow: row wrap"
data-expected-width="45" data-expected-height="45">
<div style="width: 25px; height: 25px">X</div>
</div>
<div class="flex" style="flex-flow: row wrap"
data-expected-width="45" data-expected-height="130">
<div data-expected-width="35" data-expected-height="60">X X</div>
<div data-expected-width="35" data-expected-height="60">X X</div>
</div>
<div class="flex min" style="flex-flow: row wrap"
data-expected-width="45" data-expected-height="130">
<div data-expected-width="35" data-expected-height="60">X X</div>
<div data-expected-width="35" data-expected-height="60">X X</div>
</div>
<div class="flex max" style="flex-flow: row wrap"
data-expected-width="45" data-expected-height="130">
<div data-expected-width="35" data-expected-height="60">X X</div>
<div data-expected-width="35" data-expected-height="60">X X</div>
</div>
<hr>
<!-- Multi-line column flex container -->
<div class="flex" style="flex-flow: column wrap"
data-expected-width="45" data-expected-height="45">
<div style="width: 25px; height: 25px">X</div>
</div>
<div class="flex min" style="flex-flow: column wrap"
data-expected-width="45" data-expected-height="45">
<div style="width: 25px; height: 25px">X</div>
</div>
<div class="flex max" style="flex-flow: column wrap"
data-expected-width="45" data-expected-height="45">
<div style="width: 25px; height: 25px">X</div>
</div>
<div class="flex" style="flex-flow: column wrap"
data-expected-width="45" data-expected-height="130">
<div data-expected-width="35" data-expected-height="60">X X</div>
<div data-expected-width="35" data-expected-height="60">X X</div>
</div>
<div class="flex min" style="flex-flow: column wrap"
data-expected-width="45" data-expected-height="130">
<div data-expected-width="35" data-expected-height="60">X X</div>
<div data-expected-width="35" data-expected-height="60">X X</div>
</div>
<div class="flex max" style="flex-flow: column wrap"
data-expected-width="45" data-expected-height="130">
<div data-expected-width="35" data-expected-height="60">X X</div>
<div data-expected-width="35" data-expected-height="60">X X</div>
</div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<script>
document.fonts.ready.then(() => { checkLayout(".flex") });
</script>