align-content-horiz-001b.html (12390B)
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 horizontal flex containers, with 1-3 flex lines, 7 testing each possible value of the 'align-content' property. Additionally, 8 the flex container derives its width from the "max-width" property. --> 9 <html xmlns="http://www.w3.org/1999/xhtml"> 10 <head> 11 <title>CSS Test: Testing 'align-content' in a horizontal 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 max-width: 20px; /* Skinny, to force us to wrap */ 18 height: 200px; 19 display: flex; 20 flex-wrap: wrap; 21 margin-right: 2px; 22 float: left; 23 background: lightgray; 24 } 25 div.a { 26 height: 10px; 27 width: 20px; 28 flex: none; 29 background: lightgreen; 30 } 31 div.b { 32 height: auto; /* height comes from contents */ 33 width: 20px; 34 flex: none; 35 background: pink; 36 } 37 div.c { 38 height: 40px; 39 width: 20px; 40 flex: none; 41 background: orange; 42 } 43 44 /* Inside of 'b': */ 45 div.fixedSizeChild { 46 width: 10px; 47 height: 30px; 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="20" 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="20" data-expected-height="10" data-offset-x="30" data-offset-y="8"></div> 63 <div class="b" data-expected-width="20" data-expected-height="110" data-offset-x="30" data-offset-y="98"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="30" data-offset-y="98"></div></div> 64 </div> 65 <div class="flexbox"> 66 <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="52" data-offset-y="8"></div> 67 <div class="b" data-expected-width="20" data-expected-height="70" data-offset-x="52" data-offset-y="58"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="52" data-offset-y="58"></div></div> 68 <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="52" data-offset-y="128"></div> 69 </div> 70 71 <!-- flex-start --> 72 <div class="flexbox" style="align-content: flex-start"> 73 <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="74" data-offset-y="8"></div> 74 </div> 75 <div class="flexbox" style="align-content: flex-start"> 76 <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="96" data-offset-y="8"></div> 77 <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="96" data-offset-y="18"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="96" data-offset-y="18"></div></div> 78 </div> 79 <div class="flexbox" style="align-content: flex-start"> 80 <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="118" data-offset-y="8"></div> 81 <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="118" data-offset-y="18"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="118" data-offset-y="18"></div></div> 82 <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="118" data-offset-y="48"></div> 83 </div> 84 85 <!-- flex-end --> 86 <div class="flexbox" style="align-content: flex-end"> 87 <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="140" data-offset-y="198"></div> 88 </div> 89 <div class="flexbox" style="align-content: flex-end"> 90 <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="162" data-offset-y="168"></div> 91 <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="162" data-offset-y="178"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="162" data-offset-y="178"></div></div> 92 </div> 93 <div class="flexbox" style="align-content: flex-end"> 94 <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="184" data-offset-y="128"></div> 95 <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="184" data-offset-y="138"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="184" data-offset-y="138"></div></div> 96 <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="184" data-offset-y="168"></div> 97 </div> 98 99 <!-- center --> 100 <div class="flexbox" style="align-content: center"> 101 <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="206" data-offset-y="103"></div> 102 </div> 103 <div class="flexbox" style="align-content: center"> 104 <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="228" data-offset-y="88"></div> 105 <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="228" data-offset-y="98"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="228" data-offset-y="98"></div></div> 106 </div> 107 <div class="flexbox" style="align-content: center"> 108 <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="250" data-offset-y="68"></div> 109 <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="250" data-offset-y="78"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="250" data-offset-y="78"></div></div> 110 <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="250" data-offset-y="108"></div> 111 </div> 112 113 <!-- space-between --> 114 <div class="flexbox" style="align-content: space-between"> 115 <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="272" data-offset-y="8"></div> 116 </div> 117 <div class="flexbox" style="align-content: space-between"> 118 <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="294" data-offset-y="8"></div> 119 <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="294" data-offset-y="178"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="294" data-offset-y="178"></div></div> 120 </div> 121 <div class="flexbox" style="align-content: space-between"> 122 <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="316" data-offset-y="8"></div> 123 <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="316" data-offset-y="78"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="316" data-offset-y="78"></div></div> 124 <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="316" data-offset-y="168"></div> 125 </div> 126 127 <!-- space-around --> 128 <div class="flexbox" style="align-content: space-around"> 129 <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="338" data-offset-y="103"></div> 130 </div> 131 <div class="flexbox" style="align-content: space-around"> 132 <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="360" data-offset-y="48"></div> 133 <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="360" data-offset-y="138"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="360" data-offset-y="138"></div></div> 134 </div> 135 <div class="flexbox" style="align-content: space-around"> 136 <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="382" data-offset-y="28"></div> 137 <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="382" data-offset-y="78"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="382" data-offset-y="78"></div></div> 138 <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="382" data-offset-y="148"></div> 139 </div> 140 141 <!-- space-evenly --> 142 <div class="flexbox" style="align-content: space-evenly"> 143 <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="404" data-offset-y="103"></div> 144 </div> 145 <div class="flexbox" style="align-content: space-evenly"> 146 <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="426" data-offset-y="61"></div> 147 <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="426" data-offset-y="125"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="426" data-offset-y="125"></div></div> 148 </div> 149 <div class="flexbox" style="align-content: space-evenly"> 150 <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="448" data-offset-y="38"></div> 151 <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="448" data-offset-y="78"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="448" data-offset-y="78"></div></div> 152 <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="448" data-offset-y="138"></div> 153 </div> 154 155 <!-- start --> 156 <div class="flexbox" style="align-content: start"> 157 <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="470" data-offset-y="8"></div> 158 </div> 159 <div class="flexbox" style="align-content: start"> 160 <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="492" data-offset-y="8"></div> 161 <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="492" data-offset-y="18"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="492" data-offset-y="18"></div></div> 162 </div> 163 <div class="flexbox" style="align-content: start"> 164 <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="514" data-offset-y="8"></div> 165 <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="514" data-offset-y="18"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="514" data-offset-y="18"></div></div> 166 <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="514" data-offset-y="48"></div> 167 </div> 168 169 <!-- end --> 170 <div class="flexbox" style="align-content: end"> 171 <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="536" data-offset-y="198"></div> 172 </div> 173 <div class="flexbox" style="align-content: end"> 174 <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="558" data-offset-y="168"></div> 175 <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="558" data-offset-y="178"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="558" data-offset-y="178"></div></div> 176 </div> 177 <div class="flexbox" style="align-content: end"> 178 <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="580" data-offset-y="128"></div> 179 <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="580" data-offset-y="138"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="580" data-offset-y="138"></div></div> 180 <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="580" data-offset-y="168"></div> 181 </div> 182 </body> 183 </html>