text-as-flexitem-size-001.html (5995B)
1 <!DOCTYPE html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 6 This test is a text-based variant of text-as-flexitem-size-001. 7 (Not sure if all these variants are needed without an aspect ratio, 8 but seemed best to keep it in parallel as much as reasonable.) 9 --> 10 <html> 11 <head> 12 <meta charset="utf-8"> 13 <title> 14 CSS Test: Testing how explicit main-size & cross-size constraints 15 influence sizing on non-stretched flex item containing text. 16 </title> 17 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 18 <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> 19 <link rel="author" title="Elika J. Etemad" href="http://inkedblade.net/contact"> 20 <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size"> 21 <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size"> 22 <style> 23 @import "/fonts/ahem.css"; 24 .flexbox { 25 display: flex; 26 flex-direction: row; 27 border: 1px solid black; 28 margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */ 29 width: 80px; 30 height: 50px; 31 32 justify-content: flex-start; 33 align-items: flex-start; 34 35 float: left; /* For testing in "rows" */ 36 } 37 br { clear: both; } 38 39 .flexbox > * { 40 /* Disable "min-width:auto"/"min-height:auto" to focus purely on 41 later channels of influence. */ 42 min-width: 0; 43 min-height: 0; 44 background: orange; 45 } 46 47 .flexbox p { 48 font: 10px/1 Ahem, monospace; 49 margin: 0.5em; 50 color: #0006; 51 } 52 /* Depending on wrapping, flex item content will be 35px or 45px tall, 53 min-content width = 40px and max-content width = 70px */ 54 </style> 55 <script src="/resources/testharness.js"></script> 56 <script src="/resources/testharnessreport.js"></script> 57 <script src="/resources/check-layout-th.js"></script> 58 </head> 59 <body onload="checkLayout('.flexbox > div')"> 60 <!-- Row 1: no special sizing: --> 61 <div class="flexbox"> 62 <div data-expected-width="70" data-expected-height="35"> 63 <p>xx xxx</p> 64 <p>xx</p> 65 </div> 66 </div> 67 <div class="flexbox" style="width: 50px"> 68 <div data-expected-width="50" data-expected-height="45"> 69 <p>xx xxx</p> 70 <p>xx</p> 71 </div> 72 </div> 73 <div class="flexbox" style="width: 20px"> 74 <div data-expected-width="20" data-expected-height="45"> 75 <p>xx xxx</p> 76 <p>xx</p> 77 </div> 78 </div> 79 <br> 80 81 <!-- Row 2: Specified main-size, cross-size, or flex-basis: --> 82 <div class="flexbox"> 83 <div style="width: 30px" 84 data-expected-width="30" data-expected-height="45"> 85 <p>xx xxx</p> 86 <p>xx</p> 87 </div> 88 </div> 89 <div class="flexbox"> 90 <div style="height: 30px" 91 data-expected-width="70" data-expected-height="30"> 92 <p>xx xxx</p> 93 <p>xx</p> 94 </div> 95 </div> 96 <div class="flexbox"> 97 <div style="flex: 0 0 30px" 98 data-expected-width="30" data-expected-height="45"> 99 <p>xx xxx</p> 100 <p>xx</p> 101 </div> 102 </div> 103 <br> 104 105 <!-- Row 3: min main-size OR min cross-size, or both --> 106 <div class="flexbox"> 107 <div style="min-width: 75px" 108 data-expected-width="75" data-expected-height="35"> 109 <p>xx xxx</p> 110 <p>xx</p> 111 </div> 112 </div> 113 <div class="flexbox"> 114 <div style="min-height: 40px" 115 data-expected-width="70" data-expected-height="40"> 116 <p>xx xxx</p> 117 <p>xx</p> 118 </div> 119 </div> 120 <div class="flexbox"> 121 <div style="min-width: 75px; min-height: 40px" 122 data-expected-width="75" data-expected-height="40"> 123 <p>xx xxx</p> 124 <p>xx</p> 125 </div> 126 </div> 127 <br> 128 129 <!-- Row 4: max main-size OR max cross-size, or both --> 130 <div class="flexbox"> 131 <div style="max-width: 20px" 132 data-expected-width="20" data-expected-height="45"> 133 <p>xx xxx</p> 134 <p>xx</p> 135 </div> 136 </div> 137 <div class="flexbox"> 138 <div style="max-height: 20px" 139 data-expected-width="70" data-expected-height="20"> 140 <p>xx xxx</p> 141 <p>xx</p> 142 </div> 143 </div> 144 <div class="flexbox"> 145 <div style="max-width: 20px; max-height: 20px" 146 data-expected-width="20" data-expected-height="20"> 147 <p>xx xxx</p> 148 <p>xx</p> 149 </div> 150 </div> 151 <br> 152 153 <!-- Row 5: min main-size vs. max cross-size, & vice versa --> 154 <div class="flexbox"> 155 <div style="min-width: 70px; max-height: 20px" 156 data-expected-width="70" data-expected-height="20"> 157 <p>xx xxx</p> 158 <p>xx</p> 159 </div> 160 </div> 161 <div class="flexbox"> 162 <div style="max-width: 20px; min-height: 50px" 163 data-expected-width="20" data-expected-height="50"> 164 <p>xx xxx</p> 165 <p>xx</p> 166 </div> 167 </div> 168 <br> 169 170 <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa --> 171 <div class="flexbox"> 172 <div style="min-width: 70px; height: 20px" 173 data-expected-width="70" data-expected-height="20"> 174 <p>xx xxx</p> 175 <p>xx</p> 176 </div> 177 </div> 178 <div class="flexbox"> 179 <div style="width: 40px; max-height: 20px" 180 data-expected-width="40" data-expected-height="20"> 181 <p>xx xxx</p> 182 <p>xx</p> 183 </div> 184 </div> 185 <div class="flexbox"> 186 <div style="max-width: 20px; height: 20px" 187 data-expected-width="20" data-expected-height="20"> 188 <p>xx xxx</p> 189 <p>xx</p> 190 </div> 191 </div> 192 <div class="flexbox"> 193 <div style="width: 20px; min-height: 20px" 194 data-expected-width="20" data-expected-height="45"> 195 <p>xx xxx</p> 196 <p>xx</p> 197 </div> 198 </div> 199 </body> 200 </html>