inline-flexbox-wrap-vertically-width-calculation.html (9325B)
1 <!DOCTYPE html> 2 <html> 3 <title>CSS Flexbox: Inline flexbox width calculation with flex-direction: column and flex-wrap</title> 4 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-direction-property"> 5 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-wrap-property"> 6 <link rel="help" href="https://drafts.csswg.org/css2/visudet.html#Computing_widths_and_margins"> 7 <link href="support/flexbox.css" rel="stylesheet"> 8 <meta name="assert" content="This test checks that width is correctly computed for flexbox with flex-direction: column and flex-wrap."> 9 <style> 10 .inline-flexbox { 11 background-color: #aaa; 12 position: relative; 13 } 14 15 .writing-mode-vertical { 16 writing-mode: vertical-rl; 17 } 18 .inline-flexbox > * { 19 flex: none; 20 } 21 .inline-flexbox :nth-child(1) { 22 background-color: lightblue; 23 } 24 .inline-flexbox :nth-child(2) { 25 background-color: lightgreen; 26 } 27 .inline-flexbox :nth-child(3) { 28 background-color: pink; 29 } 30 .inline-flexbox :nth-child(4) { 31 background-color: yellow; 32 } 33 </style> 34 <script src="/resources/testharness.js"></script> 35 <script src="/resources/testharnessreport.js"></script> 36 <script src="/resources/check-layout-th.js"></script> 37 <body onload="checkLayout('.inline-flexbox');"> 38 <div id=log></div> 39 <div class="inline-flexbox column align-content-flex-start wrap" data-expected-width="110" data-expected-height="60"> 40 <div style="width: 100px; height: 20px" data-offset-x="0" data-offset-y="0"></div> 41 <div style="width: 50px; height: 10px" data-offset-x="0" data-offset-y="20"></div> 42 <div style="width: 70px; height: 10px" data-offset-x="0" data-offset-y="30"></div> 43 <div style="width: 110px; height: 20px" data-offset-x="0" data-offset-y="40"></div> 44 </div> 45 46 <div class="inline-flexbox column align-content-flex-start wrap" 47 style="height: 35px" data-expected-width="130" data-expected-height="35"> 48 <div style="width: 10px; height: 20px" data-offset-x="0" data-offset-y="0"></div> 49 <div style="width: 50px; height: 10px" data-offset-x="0" data-offset-y="20"></div> 50 <div style="width: 80px; height: 10px" data-offset-x="50" data-offset-y="0"></div> 51 <div style="width: 40px; height: 20px" data-offset-x="50" data-offset-y="10"></div> 52 </div> 53 54 <div class="inline-flexbox column align-content-flex-start wrap writing-mode-vertical" data-expected-width="280" data-expected-height="70"> 55 <div style="width: 50px; height: 20px" data-offset-x="230" data-offset-y="0"></div> 56 <div style="width: 100px; height: 70px" data-offset-x="130" data-offset-y="0"></div> 57 <div style="width: 30px; height: 50px" data-offset-x="100" data-offset-y="0"></div> 58 <div style="width: 100px; height: 30px" data-offset-x="0" data-offset-y="0"></div> 59 </div> 60 61 <div 62 class="inline-flexbox column align-content-flex-start wrap writing-mode-vertical" 63 style="width: 200px" data-expected-width="200" data-expected-height="100"> 64 <div style="width: 50px; height: 20px" data-offset-x="150" data-offset-y="0"></div> 65 <div style="width: 100px; height: 70px" data-offset-x="50" data-offset-y="0"></div> 66 <div style="width: 30px; height: 50px" data-offset-x="20" data-offset-y="0"></div> 67 <div style="width: 100px; height: 30px" data-offset-x="100" data-offset-y="70"></div> 68 </div> 69 70 <div class="inline-flexbox column align-content-flex-start wrap-reverse" data-expected-width="110" data-expected-height="60"> 71 <div style="width: 100px; height: 20px" data-offset-x="10" data-offset-y="0"></div> 72 <div style="width: 50px; height: 10px" data-offset-x="60" data-offset-y="20"></div> 73 <div style="width: 70px; height: 10px" data-offset-x="40" data-offset-y="30"></div> 74 <div style="width: 110px; height: 20px" data-offset-x="0" data-offset-y="40"></div> 75 </div> 76 77 <div class="inline-flexbox column align-content-flex-start wrap-reverse" 78 style="height: 35px" data-expected-width="130" data-expected-height="35"> 79 <div style="width: 10px; height: 20px" data-offset-x="120" data-offset-y="0"> 80 </div> 81 <div style="width: 50px; height: 10px" data-offset-x="80" data-offset-y="20"> 82 </div> 83 <div style="width: 80px; height: 10px" data-offset-x="0" data-offset-y="0"> 84 </div> 85 <div style="width: 40px; height: 20px" data-offset-x="40" data-offset-y="10"> 86 </div> 87 </div> 88 89 <div class="inline-flexbox column align-content-flex-start wrap-reverse writing-mode-vertical" data-expected-width="280" data-expected-height="70"> 90 <div style="width: 50px; height: 20px" data-offset-x="230" data-offset-y="50"></div> 91 <div style="width: 100px; height: 50px" data-offset-x="130" data-offset-y="20"></div> 92 <div style="width: 30px; height: 30px" data-offset-x="100" data-offset-y="40"></div> 93 <div style="width: 100px; height: 70px" data-offset-x="0" data-offset-y="0"></div> 94 </div> 95 96 <div 97 class="inline-flexbox column align-content-flex-start wrap-reverse writing-mode-vertical" 98 style="width: 200px" data-expected-width="200" data-expected-height="100"> 99 <div style="width: 50px; height: 20px" data-offset-x="150" data-offset-y="80"> 100 </div> 101 <div style="width: 100px; height: 50px" data-offset-x="50" data-offset-y="50"> 102 </div> 103 <div style="width: 30px; height: 70px" data-offset-x="20" data-offset-y="30"> 104 </div> 105 <div style="width: 100px; height: 30px" data-offset-x="100" data-offset-y="0"> 106 </div> 107 </div> 108 109 <div class="inline-flexbox column-reverse align-content-flex-start wrap" data-expected-width="110" data-expected-height="60"> 110 <div style="width: 100px; height: 20px" data-offset-x="0" data-offset-y="40"></div> 111 <div style="width: 50px; height: 10px" data-offset-x="0" data-offset-y="30"></div> 112 <div style="width: 70px; height: 10px" data-offset-x="0" data-offset-y="20"></div> 113 <div style="width: 110px; height: 20px" data-offset-x="0" data-offset-y="0"></div> 114 </div> 115 116 <div class="inline-flexbox column-reverse align-content-flex-start wrap" 117 style="height: 35px" data-expected-width="130" data-expected-height="35"> 118 <div style="width: 10px; height: 20px" data-offset-x="0" data-offset-y="15"></div> 119 <div style="width: 50px; height: 10px" data-offset-x="0" data-offset-y="5"></div> 120 <div style="width: 80px; height: 10px" data-offset-x="50" data-offset-y="25"></div> 121 <div style="width: 40px; height: 20px" data-offset-x="50" data-offset-y="5"></div> 122 </div> 123 124 <div class="inline-flexbox column-reverse align-content-flex-start wrap writing-mode-vertical" data-expected-width="280" data-expected-height="70"> 125 <div style="width: 50px; height: 20px" data-offset-x="0" data-offset-y="0"></div> 126 <div style="width: 100px; height: 50px" data-offset-x="50" data-offset-y="0"></div> 127 <div style="width: 30px; height: 70px" data-offset-x="150" data-offset-y="0"></div> 128 <div style="width: 100px; height: 30px" data-offset-x="180" data-offset-y="0"></div> 129 </div> 130 131 <div 132 class="inline-flexbox column-reverse align-content-flex-start wrap writing-mode-vertical" 133 style="width: 200px" data-expected-width="200" data-expected-height="100"> 134 <div style="width: 50px; height: 20px" data-offset-x="0" data-offset-y="0"></div> 135 <div style="width: 100px; height: 70px" data-offset-x="50" data-offset-y="0"></div> 136 <div style="width: 30px; height: 50px" data-offset-x="150" data-offset-y="0"></div> 137 <div style="width: 100px; height: 30px" data-offset-x="0" data-offset-y="70"></div> 138 </div> 139 140 <div class="inline-flexbox column-reverse align-content-flex-start wrap-reverse" data-expected-width="110" data-expected-height="60"> 141 <div style="width: 100px; height: 20px" data-offset-x="10" data-offset-y="40"></div> 142 <div style="width: 50px; height: 10px" data-offset-x="60" data-offset-y="30"></div> 143 <div style="width: 70px; height: 10px" data-offset-x="40" data-offset-y="20"></div> 144 <div style="width: 110px; height: 20px" data-offset-x="0" data-offset-y="0"></div> 145 </div> 146 147 <div class="inline-flexbox column-reverse align-content-flex-start wrap-reverse" 148 style="height: 35px" data-expected-width="130" data-expected-height="35"> 149 <div style="width: 10px; height: 20px" data-offset-x="120" data-offset-y="15"> 150 </div> 151 <div style="width: 50px; height: 10px" data-offset-x="80" data-offset-y="5"> 152 </div> 153 <div style="width: 80px; height: 10px" data-offset-x="0" data-offset-y="25"> 154 </div> 155 <div style="width: 40px; height: 20px" data-offset-x="40" data-offset-y="5"> 156 </div> 157 </div> 158 159 <div class="inline-flexbox column-reverse align-content-flex-start wrap-reverse writing-mode-vertical" data-expected-width="280" data-expected-height="70"> 160 <div style="width: 50px; height: 70px" data-offset-x="0" data-offset-y="0"></div> 161 <div style="width: 100px; height: 20px" data-offset-x="50" data-offset-y="50"></div> 162 <div style="width: 30px; height: 50px" data-offset-x="150" data-offset-y="20"></div> 163 <div style="width: 100px; height: 30px" data-offset-x="180" data-offset-y="40"></div> 164 </div> 165 166 <div 167 class="inline-flexbox column-reverse align-content-flex-start wrap-reverse writing-mode-vertical" 168 style="width: 200px" data-expected-width="200" data-expected-height="120"> 169 <div style="width: 50px; height: 20px" data-offset-x="0" data-offset-y="100"> 170 </div> 171 <div style="width: 100px; height: 50px" data-offset-x="50" data-offset-y="70"> 172 </div> 173 <div style="width: 30px; height: 30px" data-offset-x="150" data-offset-y="90"> 174 </div> 175 <div style="width: 100px; height: 70px" data-offset-x="0" data-offset-y="0"> 176 </div> 177 </div> 178 </body> 179 </html>