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