align-content-vert-001b.html (12370B)
1 <!doctype html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <!-- Testcase with a series of vertical flex containers, with 1-3 flex lines, 7 testing each possible value of the 'align-content' property. Additionally, 8 the flex container derives its height from the "max-height" property.--> 9 <html xmlns="http://www.w3.org/1999/xhtml"> 10 <head> 11 <title>CSS Test: Testing 'align-content' in a vertical flex container</title> 12 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> 13 <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"/> 14 <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property"/> 15 <style> 16 div.flexbox { 17 width: 200px; 18 max-height: 10px; /* Short, to force us to wrap */ 19 display: flex; 20 flex-direction: column; 21 flex-wrap: wrap; 22 margin-bottom: 2px; 23 background: lightgray; 24 } 25 div.a { 26 width: 10px; 27 height: 10px; 28 flex: none; 29 background: lightgreen; 30 } 31 div.b { 32 width: auto; /* width comes from contents */ 33 height: 10px; 34 flex: none; 35 background: pink; 36 } 37 div.c { 38 width: 40px; 39 height: 10px; 40 flex: none; 41 background: orange; 42 } 43 44 /* Inside of 'b': */ 45 div.fixedSizeChild { 46 width: 30px; 47 height: 5px; 48 background: purple; 49 } 50 </style> 51 <script src="/resources/testharness.js"></script> 52 <script src="/resources/testharnessreport.js"></script> 53 <script src="/resources/check-layout-th.js"></script> 54 </head> 55 <body onload="checkLayout('.flexbox div')"> 56 57 <!-- default (stretch) --> 58 <div class="flexbox"> 59 <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="8"></div> 60 </div> 61 <div class="flexbox"> 62 <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="20"></div> 63 <div class="b" data-expected-width="110" data-expected-height="10" data-offset-x="98" data-offset-y="20"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="98" data-offset-y="20"></div></div> 64 </div> 65 <div class="flexbox"> 66 <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="32"></div> 67 <div class="b" data-expected-width="70" data-expected-height="10" data-offset-x="58" data-offset-y="32"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="58" data-offset-y="32"></div></div> 68 <div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="128" data-offset-y="32"></div> 69 </div> 70 71 <!-- flex-start --> 72 <div class="flexbox" style="align-content: flex-start"> 73 <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="44"></div> 74 </div> 75 <div class="flexbox" style="align-content: flex-start"> 76 <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="56"></div> 77 <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="18" data-offset-y="56"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="18" data-offset-y="56"></div></div> 78 </div> 79 <div class="flexbox" style="align-content: flex-start"> 80 <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="68"></div> 81 <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="18" data-offset-y="68"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="18" data-offset-y="68"></div></div> 82 <div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="48" data-offset-y="68"></div> 83 </div> 84 85 <!-- flex-end --> 86 <div class="flexbox" style="align-content: flex-end"> 87 <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="198" data-offset-y="80"></div> 88 </div> 89 <div class="flexbox" style="align-content: flex-end"> 90 <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="168" data-offset-y="92"></div> 91 <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="178" data-offset-y="92"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="178" data-offset-y="92"></div></div> 92 </div> 93 <div class="flexbox" style="align-content: flex-end"> 94 <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="128" data-offset-y="104"></div> 95 <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="138" data-offset-y="104"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="138" data-offset-y="104"></div></div> 96 <div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="168" data-offset-y="104"></div> 97 </div> 98 99 <!-- center --> 100 <div class="flexbox" style="align-content: center"> 101 <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="103" data-offset-y="116"></div> 102 </div> 103 <div class="flexbox" style="align-content: center"> 104 <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="88" data-offset-y="128"></div> 105 <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="98" data-offset-y="128"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="98" data-offset-y="128"></div></div> 106 </div> 107 <div class="flexbox" style="align-content: center"> 108 <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="68" data-offset-y="140"></div> 109 <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="78" data-offset-y="140"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="78" data-offset-y="140"></div></div> 110 <div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="108" data-offset-y="140"></div> 111 </div> 112 113 <!-- space-between --> 114 <div class="flexbox" style="align-content: space-between"> 115 <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="152"></div> 116 </div> 117 <div class="flexbox" style="align-content: space-between"> 118 <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="164"></div> 119 <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="178" data-offset-y="164"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="178" data-offset-y="164"></div></div> 120 </div> 121 <div class="flexbox" style="align-content: space-between"> 122 <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="176"></div> 123 <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="78" data-offset-y="176"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="78" data-offset-y="176"></div></div> 124 <div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="168" data-offset-y="176"></div> 125 </div> 126 127 <!-- space-around --> 128 <div class="flexbox" style="align-content: space-around"> 129 <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="103" data-offset-y="188"></div> 130 </div> 131 <div class="flexbox" style="align-content: space-around"> 132 <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="48" data-offset-y="200"></div> 133 <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="138" data-offset-y="200"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="138" data-offset-y="200"></div></div> 134 </div> 135 <div class="flexbox" style="align-content: space-around"> 136 <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="28" data-offset-y="212"></div> 137 <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="78" data-offset-y="212"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="78" data-offset-y="212"></div></div> 138 <div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="148" data-offset-y="212"></div> 139 </div> 140 141 <!-- space-evenly --> 142 <div class="flexbox" style="align-content: space-evenly"> 143 <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="103" data-offset-y="224"></div> 144 </div> 145 <div class="flexbox" style="align-content: space-evenly"> 146 <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="61" data-offset-y="236"></div> 147 <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="125" data-offset-y="236"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="125" data-offset-y="236"></div></div> 148 </div> 149 <div class="flexbox" style="align-content: space-evenly"> 150 <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="38" data-offset-y="248"></div> 151 <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="78" data-offset-y="248"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="78" data-offset-y="248"></div></div> 152 <div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="138" data-offset-y="248"></div> 153 </div> 154 155 <!-- start --> 156 <div class="flexbox" style="align-content: start"> 157 <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="260"></div> 158 </div> 159 <div class="flexbox" style="align-content: start"> 160 <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="272"></div> 161 <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="18" data-offset-y="272"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="18" data-offset-y="272"></div></div> 162 </div> 163 <div class="flexbox" style="align-content: start"> 164 <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="284"></div> 165 <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="18" data-offset-y="284"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="18" data-offset-y="284"></div></div> 166 <div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="48" data-offset-y="284"></div> 167 </div> 168 169 <!-- end --> 170 <div class="flexbox" style="align-content: end"> 171 <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="198" data-offset-y="296"></div> 172 </div> 173 <div class="flexbox" style="align-content: end"> 174 <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="168" data-offset-y="308"></div> 175 <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="178" data-offset-y="308"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="178" data-offset-y="308"></div></div> 176 </div> 177 <div class="flexbox" style="align-content: end"> 178 <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="128" data-offset-y="320"></div> 179 <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="138" data-offset-y="320"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="138" data-offset-y="320"></div></div> 180 <div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="168" data-offset-y="320"></div> 181 </div> 182 </body> 183 </html>