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