Google Git
Sign in
cobalt / cobalt / 308ed6b84664d59944cd65f4b4359c28a2443be6 / . / src / cobalt / layout_tests / testdata / css3-flexbox / combined-shrinking-and-justify-content.html
blob: 128a8f078cbad01f866743d8fa29c2679a898d0f [file] [log] [blame]
<!DOCTYPE html>
<!--
| Combined tests for basic functionality of CSS Flexible Box Layout Module.
| https://www.w3.org/TR/css-flexbox-1
| This test focuses on shrinking flex items and justify-content values.
-->
<html>
<head>
<style>
body {
margin: 0px;
font-family: Roboto;
background-color: #808080;
font-size: 12px;
}
.inlineflex {
display: inline-flex;
color: #99b9f3;
background-color: #ffee08;
opacity: 0.75;
}
.flex {
display: flex;
color: #99b9f3;
background-color: #ffee08;
opacity: 0.75;
}
.widesized {
width: 100px;
height: 10px;
-no-margin-left: auto;
}
.sized {
width: 50px;
height: 10px;
}
.container {
flex-flow: row nowrap;
padding: 1px;
border: 1px solid #000060;
outline: 1px solid #00f000;
margin: 3px;
}
.flex-end {
justify-content: flex-end;
align-items: center;
align-content: center;
}
.center {
justify-content: center;
align-items: center;
align-content: center;
}
.space-between {
justify-content: space-between;
align-items: center;
align-content: center;
}
.center {
justify-content: center;
align-items: center;
align-content: center;
}
.space-around {
justify-content: space-around;
align-items: center;
align-content: center;
}
.blue {
background-color: #0047ab;
}
.red {
background-color: red;
}
.hidden {
overflow: hidden;
}
.visible {
overflow: visible;
}
.shrink-1 {
flex-shrink: 1;
}
.shrink-0-5 {
flex-shrink: 0.5;
}
.shrink-0-25 {
flex-shrink: 0.25;
}
.basis-0 {
flex-basis: 0;
}
.basis-big {
flex-basis: 100px;
}
</style>
</head>
<body>
<div style="display:inline-block; margin: 0 5px 0 40px; width: 50px;">
<div class="sized flex flex-end container">
<div class="blue widesized shrink-1"></div>
</div>
<div class="sized flex flex-end container">
<div class="red widesized shrink-1"></div>
<div class="blue widesized shrink-0-5"></div>
</div>
<div class="sized flex flex-end container">
<div class="red widesized shrink-1"></div>
<div class="blue widesized shrink-1"></div>
</div>
<div class="sized flex flex-end container">
<div class="blue widesized shrink-0-5"></div>
</div>
<div class="sized flex flex-end container">
<div class="red widesized shrink-0-5"></div>
<div class="blue widesized shrink-0-25"></div>
</div>
<div class="sized flex flex-end container">
<div class="red widesized shrink-0-5 basis-big"></div>
<div class="blue widesized shrink-0-25 basis-big"></div>
</div>
flex-end
</div>
<div style="display:inline-block; margin: 0 55px 0 0; width: 50px;">
<div class="sized flex container">
<div class="blue widesized shrink-1"></div>
</div>
<div class="sized flex container">
<div class="red widesized shrink-1"></div>
<div class="blue widesized shrink-0-5"></div>
</div>
<div class="sized flex container">
<div class="red widesized shrink-1"></div>
<div class="blue widesized shrink-1"></div>
</div>
<div class="sized flex container">
<div class="blue widesized shrink-0-5"></div>
</div>
<div class="sized flex container">
<div class="red widesized shrink-0-5"></div>
<div class="blue widesized shrink-0-25"></div>
</div>
<div class="sized flex container">
<div class="red widesized shrink-0-5 basis-big"></div>
<div class="blue widesized shrink-0-25 basis-big"></div>
</div>
flex-start
</div>
<div style="display:inline-block; margin: 0 0 0 5px; width: 75px;">
<div class="sized flex space-around container">
<div class="blue widesized shrink-1"></div>
</div>
<div class="sized flex space-around container">
<div class="red widesized shrink-1"></div>
<div class="blue widesized shrink-0-5"></div>
</div>
<div class="sized flex space-around container">
<div class="red widesized shrink-1"></div>
<div class="blue widesized shrink-1"></div>
</div>
<div class="sized flex space-around container">
<div class="blue widesized shrink-0-5"></div>
</div>
<div class="sized flex space-around container">
<div class="red widesized shrink-0-5"></div>
<div class="blue widesized shrink-0-25"></div>
</div>
<div class="sized flex space-around container">
<div class="red widesized shrink-0-5 basis-big"></div>
<div class="blue widesized shrink-0-25 basis-big"></div>
</div>
space-around
</div>
<div style="display:inline-block; margin: 0 0 0 15px; width: 75px;">
<div class="sized flex center container">
<div class="blue widesized shrink-1"></div>
</div>
<div class="sized flex center container">
<div class="red widesized shrink-1"></div>
<div class="blue widesized shrink-0-5"></div>
</div>
<div class="sized flex center container">
<div class="red widesized shrink-1"></div>
<div class="blue widesized shrink-1"></div>
</div>
<div class="sized flex center container">
<div class="blue widesized shrink-0-5"></div>
</div>
<div class="sized flex center container">
<div class="red widesized shrink-0-5"></div>
<div class="blue widesized shrink-0-25"></div>
</div>
<div class="sized flex center container">
<div class="red widesized shrink-0-5 basis-big"></div>
<div class="blue widesized shrink-0-25 basis-big"></div>
</div>
center
</div>
<div style="display:inline-block; margin: 0 0 0 5px; width: 90px;">
<div class="sized flex space-between container">
<div class="blue widesized shrink-1"></div>
</div>
<div class="sized flex space-between container">
<div class="red widesized shrink-1"></div>
<div class="blue widesized shrink-0-5"></div>
</div>
<div class="sized flex space-between container">
<div class="red widesized shrink-1"></div>
<div class="blue widesized shrink-1"></div>
</div>
<div class="sized flex space-between container">
<div class="blue widesized shrink-0-5"></div>
</div>
<div class="sized flex space-between container">
<div class="red widesized shrink-0-5"></div>
<div class="blue widesized shrink-0-25"></div>
</div>
<div class="sized flex space-between container">
<div class="red widesized shrink-0-5 basis-big"></div>
<div class="blue widesized shrink-0-25 basis-big"></div>
</div>
space-between
</div>
</body>
</html>