blob: d2d5caaa664a194781b4720c66c8967746951ad1 [file] [log] [blame]
<!DOCTYPE html>
<!--
| Flexbox unit test from csswg.
| http://test.csswg.org/suites/css-flexbox-1_dev/nightly-unstable/html/chapter-7.htm
-->
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><html><head>
<title>
CSS Test: Testing "flex-basis: content" (set via the "flex" shorthand)
in a column-oriented flex container.
</title>
<meta charset="utf-8">
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
<link href="https://www.w3.org/TR/css-flexbox-1/#propdef-flex-basis" rel="help">
<link href="reference/flexbox-flex-basis-content-002-ref.htm" rel="match">
<style>
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: 0 0 content;
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 }
</style>
</head>
<body>
<!-- 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>
</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>
</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>
</div>
</body></html>