blob: 8626ce93005db4c130402a1f22329d2c46186a55 [file] [log] [blame]
<!DOCTYPE html>
| Flexbox unit test from csswg.
Any copyright is dedicated to the Public Domain.
CSS Test: Testing "flex-basis: content" in a column-oriented flex container
<meta charset="utf-8">
<link href="" rel="author" title="Daniel Holbert">
<link href="" rel="help">
<link href="reference/flexbox-flex-basis-content-002-ref.htm" rel="match">
body {
margin: 0px;
background-color: white;
font-family: Roboto;
font-size: 16px;
.container {
display: inline-flex;
vertical-align: top;
flex-direction: column;
justify-content: space-between;
border: 2px solid purple;
padding: 2px;
margin-right: 2em;
width: 50px;
height: 200px;
.container > * {
/* All flex items have "flex-basis: content" (and zero flex-shrink and
min-main-size, to avoid any influence from those). */
flex-basis: content;
flex-shrink: 0;
min-height: 0;
border: 2px solid #008080;
.smallText { font: 10px Roboto; }
.bigText { font: 20px Roboto; }
.spacerChild::before {
content: '';
display: block;
background: #A52A2A;
height: 10px;
width: 10px;
.justPadding {
/* Empty div with 5px padding on each side */
padding: 5px;
background: #00FFFF;
#canvas { background: fuchsia }
<!-- Flex items have unspecified size properties: -->
<div class="container">
<div class="smallText">&#x2588;&#x2002;&#x2002;&#x2588;</div>
<div class="bigText">&#x2588;</div>
<div class="spacerChild"></div>
<div class="justPadding"></div>
<div id="canvas" style="height: 20px;"></div>
<!-- Various specified main-size values (should be ignored): -->
<div class="container">
<div style="height: 0px" class="smallText">&#x2588;&#x2002;&#x2002;&#x2588;</div>
<div style="height: 40px" class="bigText">&#x2588;</div>
<div style="height: 20px" class="spacerChild"></div>
<div style="height: 10px" class="justPadding"></div>
<div id="canvas" style="height: 8px"></div>
<!-- Various specified cross-size values (should be honored): -->
<div class="container">
<div style="width: 0px" class="smallText">&#x2588;&#x2002;&#x2002;&#x2588;</div>
<div style="width: 40px" class="bigText">&#x2588;</div>
<div style="width: 20px" class="spacerChild"></div>
<div style="width: 10px" class="justPadding"></div>
<div id="canvas" style="width: 8px"></div>