white-space-intrinsic-size-021.html (24259B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Text level 4 Test: intrinsic sizes of block containers with various 'white-space' values</title> 4 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-text-4/#white-space-property"> 6 <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes"> 7 8 <link rel="stylesheet" href="/fonts/ahem.css"> 9 <style> 10 .container { 11 font: 10px / 1 Ahem; 12 color: gray; 13 } 14 .container.narrow { 15 float: left; 16 width: 0; 17 margin-right: 50px; 18 } 19 .container.wide { 20 width: 800px; 21 } 22 .container > div { 23 display: inline-block; 24 border: solid black; 25 } 26 hr { 27 clear: both; 28 } 29 x-br::before { 30 content: "\a"; 31 white-space: preserve-breaks; 32 } 33 .collapse.wrap { 34 white-space: normal; 35 } 36 .collapse.nowrap { 37 white-space: nowrap; 38 } 39 .preserve.wrap { 40 white-space: pre-wrap; 41 } 42 .preserve.nowrap { 43 white-space: pre; 44 } 45 .preserve-breaks.wrap { 46 white-space: preserve-breaks; 47 } 48 .preserve-breaks.nowrap { 49 white-space: preserve-breaks nowrap; 50 } 51 .break-spaces.wrap { 52 white-space: break-spaces; 53 } 54 .break-spaces.nowrap { 55 white-space: break-spaces nowrap; 56 } 57 </style> 58 59 <div class="container narrow"> 60 <div class="collapse wrap" data-expected-client-width= "0" data-expected-client-height= "0"></div> 61 <div class="collapse nowrap" data-expected-client-width= "0" data-expected-client-height= "0"></div> 62 <div class="preserve wrap" data-expected-client-width= "0" data-expected-client-height= "0"></div> 63 <div class="preserve nowrap" data-expected-client-width= "0" data-expected-client-height= "0"></div> 64 <div class="preserve-breaks wrap" data-expected-client-width= "0" data-expected-client-height= "0"></div> 65 <div class="preserve-breaks nowrap" data-expected-client-width= "0" data-expected-client-height= "0"></div> 66 <div class="break-spaces wrap" data-expected-client-width= "0" data-expected-client-height= "0"></div> 67 <div class="break-spaces nowrap" data-expected-client-width= "0" data-expected-client-height= "0"></div> 68 </div> 69 <div class="container narrow"> 70 <div class="collapse wrap" data-expected-client-width= "0" data-expected-client-height= "0"> </div> 71 <div class="collapse nowrap" data-expected-client-width= "0" data-expected-client-height= "0"> </div> 72 <div class="preserve wrap" data-expected-client-width= "0" data-expected-client-height="10"> </div> 73 <div class="preserve nowrap" data-expected-client-width="10" data-expected-client-height="10"> </div> 74 <div class="preserve-breaks wrap" data-expected-client-width= "0" data-expected-client-height= "0"> </div> 75 <div class="preserve-breaks nowrap" data-expected-client-width= "0" data-expected-client-height= "0"> </div> 76 <div class="break-spaces wrap" data-expected-client-width="10" data-expected-client-height="10"> </div> 77 <div class="break-spaces nowrap" data-expected-client-width="10" data-expected-client-height="10"> </div> 78 </div> 79 <div class="container narrow"> 80 <div class="collapse wrap" data-expected-client-width= "0" data-expected-client-height= "0"> </div> 81 <div class="collapse nowrap" data-expected-client-width= "0" data-expected-client-height= "0"> </div> 82 <div class="preserve wrap" data-expected-client-width= "0" data-expected-client-height="10"> </div> 83 <div class="preserve nowrap" data-expected-client-width="20" data-expected-client-height="10"> </div> 84 <div class="preserve-breaks wrap" data-expected-client-width= "0" data-expected-client-height= "0"> </div> 85 <div class="preserve-breaks nowrap" data-expected-client-width= "0" data-expected-client-height= "0"> </div> 86 <div class="break-spaces wrap" data-expected-client-width="10" data-expected-client-height="20"> </div> 87 <div class="break-spaces nowrap" data-expected-client-width="20" data-expected-client-height="10"> </div> 88 </div> 89 <div class="container narrow"> 90 <div class="collapse wrap" data-expected-client-width="10" data-expected-client-height="10">X</div> 91 <div class="collapse nowrap" data-expected-client-width="10" data-expected-client-height="10">X</div> 92 <div class="preserve wrap" data-expected-client-width="10" data-expected-client-height="10">X</div> 93 <div class="preserve nowrap" data-expected-client-width="10" data-expected-client-height="10">X</div> 94 <div class="preserve-breaks wrap" data-expected-client-width="10" data-expected-client-height="10">X</div> 95 <div class="preserve-breaks nowrap" data-expected-client-width="10" data-expected-client-height="10">X</div> 96 <div class="break-spaces wrap" data-expected-client-width="10" data-expected-client-height="10">X</div> 97 <div class="break-spaces nowrap" data-expected-client-width="10" data-expected-client-height="10">X</div> 98 </div> 99 <div class="container narrow"> 100 <div class="collapse wrap" data-expected-client-width="10" data-expected-client-height="10"> X</div> 101 <div class="collapse nowrap" data-expected-client-width="10" data-expected-client-height="10"> X</div> 102 <div class="preserve wrap" data-expected-client-width="10" data-expected-client-height="20"> X</div> 103 <div class="preserve nowrap" data-expected-client-width="20" data-expected-client-height="10"> X</div> 104 <div class="preserve-breaks wrap" data-expected-client-width="10" data-expected-client-height="10"> X</div> 105 <div class="preserve-breaks nowrap" data-expected-client-width="10" data-expected-client-height="10"> X</div> 106 <div class="break-spaces wrap" data-expected-client-width="10" data-expected-client-height="20"> X</div> 107 <div class="break-spaces nowrap" data-expected-client-width="20" data-expected-client-height="10"> X</div> 108 </div> 109 <div class="container narrow"> 110 <div class="collapse wrap" data-expected-client-width="10" data-expected-client-height="10"> X</div> 111 <div class="collapse nowrap" data-expected-client-width="10" data-expected-client-height="10"> X</div> 112 <div class="preserve wrap" data-expected-client-width="10" data-expected-client-height="20"> X</div> 113 <div class="preserve nowrap" data-expected-client-width="30" data-expected-client-height="10"> X</div> 114 <div class="preserve-breaks wrap" data-expected-client-width="10" data-expected-client-height="10"> X</div> 115 <div class="preserve-breaks nowrap" data-expected-client-width="10" data-expected-client-height="10"> X</div> 116 <div class="break-spaces wrap" data-expected-client-width="10" data-expected-client-height="30"> X</div> 117 <div class="break-spaces nowrap" data-expected-client-width="30" data-expected-client-height="10"> X</div> 118 </div> 119 <div class="container narrow"> 120 <div class="collapse wrap" data-expected-client-width="10" data-expected-client-height="10">X </div> 121 <div class="collapse nowrap" data-expected-client-width="10" data-expected-client-height="10">X </div> 122 <div class="preserve wrap" data-expected-client-width="10" data-expected-client-height="10">X </div> 123 <div class="preserve nowrap" data-expected-client-width="20" data-expected-client-height="10">X </div> 124 <div class="preserve-breaks wrap" data-expected-client-width="10" data-expected-client-height="10">X </div> 125 <div class="preserve-breaks nowrap" data-expected-client-width="10" data-expected-client-height="10">X </div> 126 <div class="break-spaces wrap" data-expected-client-width="20" data-expected-client-height="10">X </div> 127 <div class="break-spaces nowrap" data-expected-client-width="20" data-expected-client-height="10">X </div> 128 </div> 129 <div class="container narrow"> 130 <div class="collapse wrap" data-expected-client-width="10" data-expected-client-height="10">X </div> 131 <div class="collapse nowrap" data-expected-client-width="10" data-expected-client-height="10">X </div> 132 <div class="preserve wrap" data-expected-client-width="10" data-expected-client-height="10">X </div> 133 <div class="preserve nowrap" data-expected-client-width="30" data-expected-client-height="10">X </div> 134 <div class="preserve-breaks wrap" data-expected-client-width="10" data-expected-client-height="10">X </div> 135 <div class="preserve-breaks nowrap" data-expected-client-width="10" data-expected-client-height="10">X </div> 136 <div class="break-spaces wrap" data-expected-client-width="20" data-expected-client-height="20">X </div> 137 <div class="break-spaces nowrap" data-expected-client-width="30" data-expected-client-height="10">X </div> 138 </div> 139 <div class="container narrow"> 140 <div class="collapse wrap" data-expected-client-width="10" data-expected-client-height="20">X É</div> 141 <div class="collapse nowrap" data-expected-client-width="30" data-expected-client-height="10">X É</div> 142 <div class="preserve wrap" data-expected-client-width="10" data-expected-client-height="20">X É</div> 143 <div class="preserve nowrap" data-expected-client-width="30" data-expected-client-height="10">X É</div> 144 <div class="preserve-breaks wrap" data-expected-client-width="10" data-expected-client-height="20">X É</div> 145 <div class="preserve-breaks nowrap" data-expected-client-width="30" data-expected-client-height="10">X É</div> 146 <div class="break-spaces wrap" data-expected-client-width="20" data-expected-client-height="20">X É</div> 147 <div class="break-spaces nowrap" data-expected-client-width="30" data-expected-client-height="10">X É</div> 148 </div> 149 <div class="container narrow"> 150 <div class="collapse wrap" data-expected-client-width="10" data-expected-client-height="20">X É</div> 151 <div class="collapse nowrap" data-expected-client-width="30" data-expected-client-height="10">X É</div> 152 <div class="preserve wrap" data-expected-client-width="10" data-expected-client-height="20">X É</div> 153 <div class="preserve nowrap" data-expected-client-width="40" data-expected-client-height="10">X É</div> 154 <div class="preserve-breaks wrap" data-expected-client-width="10" data-expected-client-height="20">X É</div> 155 <div class="preserve-breaks nowrap" data-expected-client-width="30" data-expected-client-height="10">X É</div> 156 <div class="break-spaces wrap" data-expected-client-width="20" data-expected-client-height="20">X É</div> 157 <div class="break-spaces nowrap" data-expected-client-width="40" data-expected-client-height="10">X É</div> 158 </div> 159 <div class="container narrow"> 160 <div class="collapse wrap" data-expected-client-width="10" data-expected-client-height="20">X <x-br></x-br>É</div> 161 <div class="collapse nowrap" data-expected-client-width="10" data-expected-client-height="20">X <x-br></x-br>É</div> 162 <div class="preserve wrap" data-expected-client-width="10" data-expected-client-height="20">X <x-br></x-br>É</div> 163 <div class="preserve nowrap" data-expected-client-width="20" data-expected-client-height="20">X <x-br></x-br>É</div> 164 <div class="preserve-breaks wrap" data-expected-client-width="10" data-expected-client-height="20">X <x-br></x-br>É</div> 165 <div class="preserve-breaks nowrap" data-expected-client-width="10" data-expected-client-height="20">X <x-br></x-br>É</div> 166 <div class="break-spaces wrap" data-expected-client-width="20" data-expected-client-height="20">X <x-br></x-br>É</div> 167 <div class="break-spaces nowrap" data-expected-client-width="20" data-expected-client-height="20">X <x-br></x-br>É</div> 168 </div> 169 <div class="container narrow"> 170 <div class="collapse wrap" data-expected-client-width="10" data-expected-client-height="20">X <a>É</a></div> 171 <div class="collapse nowrap" data-expected-client-width="30" data-expected-client-height="10">X <a>É</a></div> 172 <div class="preserve wrap" data-expected-client-width="10" data-expected-client-height="20">X <a>É</a></div> 173 <div class="preserve nowrap" data-expected-client-width="30" data-expected-client-height="10">X <a>É</a></div> 174 <div class="preserve-breaks wrap" data-expected-client-width="10" data-expected-client-height="20">X <a>É</a></div> 175 <div class="preserve-breaks nowrap" data-expected-client-width="30" data-expected-client-height="10">X <a>É</a></div> 176 <div class="break-spaces wrap" data-expected-client-width="20" data-expected-client-height="20">X <a>É</a></div> 177 <div class="break-spaces nowrap" data-expected-client-width="30" data-expected-client-height="10">X <a>É</a></div> 178 </div> 179 180 <hr> 181 182 <div class="container wide"> 183 <div class="collapse wrap" data-expected-client-width= "0" data-expected-client-height= "0"></div> 184 <div class="collapse nowrap" data-expected-client-width= "0" data-expected-client-height= "0"></div> 185 <div class="preserve wrap" data-expected-client-width= "0" data-expected-client-height= "0"></div> 186 <div class="preserve nowrap" data-expected-client-width= "0" data-expected-client-height= "0"></div> 187 <div class="preserve-breaks wrap" data-expected-client-width= "0" data-expected-client-height= "0"></div> 188 <div class="preserve-breaks nowrap" data-expected-client-width= "0" data-expected-client-height= "0"></div> 189 <div class="break-spaces wrap" data-expected-client-width= "0" data-expected-client-height= "0"></div> 190 <div class="break-spaces nowrap" data-expected-client-width= "0" data-expected-client-height= "0"></div> 191 </div> 192 <div class="container wide"> 193 <div class="collapse wrap" data-expected-client-width= "0" data-expected-client-height= "0"> </div> 194 <div class="collapse nowrap" data-expected-client-width= "0" data-expected-client-height= "0"> </div> 195 <div class="preserve wrap" data-expected-client-width="10" data-expected-client-height="10"> </div> 196 <div class="preserve nowrap" data-expected-client-width="10" data-expected-client-height="10"> </div> 197 <div class="preserve-breaks wrap" data-expected-client-width= "0" data-expected-client-height= "0"> </div> 198 <div class="preserve-breaks nowrap" data-expected-client-width= "0" data-expected-client-height= "0"> </div> 199 <div class="break-spaces wrap" data-expected-client-width="10" data-expected-client-height="10"> </div> 200 <div class="break-spaces nowrap" data-expected-client-width="10" data-expected-client-height="10"> </div> 201 </div> 202 <div class="container wide"> 203 <div class="collapse wrap" data-expected-client-width= "0" data-expected-client-height= "0"> </div> 204 <div class="collapse nowrap" data-expected-client-width= "0" data-expected-client-height= "0"> </div> 205 <div class="preserve wrap" data-expected-client-width="20" data-expected-client-height="10"> </div> 206 <div class="preserve nowrap" data-expected-client-width="20" data-expected-client-height="10"> </div> 207 <div class="preserve-breaks wrap" data-expected-client-width= "0" data-expected-client-height= "0"> </div> 208 <div class="preserve-breaks nowrap" data-expected-client-width= "0" data-expected-client-height= "0"> </div> 209 <div class="break-spaces wrap" data-expected-client-width="20" data-expected-client-height="10"> </div> 210 <div class="break-spaces nowrap" data-expected-client-width="20" data-expected-client-height="10"> </div> 211 </div> 212 <div class="container wide"> 213 <div class="collapse wrap" data-expected-client-width="10" data-expected-client-height="10">X</div> 214 <div class="collapse nowrap" data-expected-client-width="10" data-expected-client-height="10">X</div> 215 <div class="preserve wrap" data-expected-client-width="10" data-expected-client-height="10">X</div> 216 <div class="preserve nowrap" data-expected-client-width="10" data-expected-client-height="10">X</div> 217 <div class="preserve-breaks wrap" data-expected-client-width="10" data-expected-client-height="10">X</div> 218 <div class="preserve-breaks nowrap" data-expected-client-width="10" data-expected-client-height="10">X</div> 219 <div class="break-spaces wrap" data-expected-client-width="10" data-expected-client-height="10">X</div> 220 <div class="break-spaces nowrap" data-expected-client-width="10" data-expected-client-height="10">X</div> 221 </div> 222 <div class="container wide"> 223 <div class="collapse wrap" data-expected-client-width="10" data-expected-client-height="10"> X</div> 224 <div class="collapse nowrap" data-expected-client-width="10" data-expected-client-height="10"> X</div> 225 <div class="preserve wrap" data-expected-client-width="20" data-expected-client-height="10"> X</div> 226 <div class="preserve nowrap" data-expected-client-width="20" data-expected-client-height="10"> X</div> 227 <div class="preserve-breaks wrap" data-expected-client-width="10" data-expected-client-height="10"> X</div> 228 <div class="preserve-breaks nowrap" data-expected-client-width="10" data-expected-client-height="10"> X</div> 229 <div class="break-spaces wrap" data-expected-client-width="20" data-expected-client-height="10"> X</div> 230 <div class="break-spaces nowrap" data-expected-client-width="20" data-expected-client-height="10"> X</div> 231 </div> 232 <div class="container wide"> 233 <div class="collapse wrap" data-expected-client-width="10" data-expected-client-height="10"> X</div> 234 <div class="collapse nowrap" data-expected-client-width="10" data-expected-client-height="10"> X</div> 235 <div class="preserve wrap" data-expected-client-width="30" data-expected-client-height="10"> X</div> 236 <div class="preserve nowrap" data-expected-client-width="30" data-expected-client-height="10"> X</div> 237 <div class="preserve-breaks wrap" data-expected-client-width="10" data-expected-client-height="10"> X</div> 238 <div class="preserve-breaks nowrap" data-expected-client-width="10" data-expected-client-height="10"> X</div> 239 <div class="break-spaces wrap" data-expected-client-width="30" data-expected-client-height="10"> X</div> 240 <div class="break-spaces nowrap" data-expected-client-width="30" data-expected-client-height="10"> X</div> 241 </div> 242 <div class="container wide"> 243 <div class="collapse wrap" data-expected-client-width="10" data-expected-client-height="10">X </div> 244 <div class="collapse nowrap" data-expected-client-width="10" data-expected-client-height="10">X </div> 245 <div class="preserve wrap" data-expected-client-width="20" data-expected-client-height="10">X </div> 246 <div class="preserve nowrap" data-expected-client-width="20" data-expected-client-height="10">X </div> 247 <div class="preserve-breaks wrap" data-expected-client-width="10" data-expected-client-height="10">X </div> 248 <div class="preserve-breaks nowrap" data-expected-client-width="10" data-expected-client-height="10">X </div> 249 <div class="break-spaces wrap" data-expected-client-width="20" data-expected-client-height="10">X </div> 250 <div class="break-spaces nowrap" data-expected-client-width="20" data-expected-client-height="10">X </div> 251 </div> 252 <div class="container wide"> 253 <div class="collapse wrap" data-expected-client-width="10" data-expected-client-height="10">X </div> 254 <div class="collapse nowrap" data-expected-client-width="10" data-expected-client-height="10">X </div> 255 <div class="preserve wrap" data-expected-client-width="30" data-expected-client-height="10">X </div> 256 <div class="preserve nowrap" data-expected-client-width="30" data-expected-client-height="10">X </div> 257 <div class="preserve-breaks wrap" data-expected-client-width="10" data-expected-client-height="10">X </div> 258 <div class="preserve-breaks nowrap" data-expected-client-width="10" data-expected-client-height="10">X </div> 259 <div class="break-spaces wrap" data-expected-client-width="30" data-expected-client-height="10">X </div> 260 <div class="break-spaces nowrap" data-expected-client-width="30" data-expected-client-height="10">X </div> 261 </div> 262 <div class="container wide"> 263 <div class="collapse wrap" data-expected-client-width="30" data-expected-client-height="10">X É</div> 264 <div class="collapse nowrap" data-expected-client-width="30" data-expected-client-height="10">X É</div> 265 <div class="preserve wrap" data-expected-client-width="30" data-expected-client-height="10">X É</div> 266 <div class="preserve nowrap" data-expected-client-width="30" data-expected-client-height="10">X É</div> 267 <div class="preserve-breaks wrap" data-expected-client-width="30" data-expected-client-height="10">X É</div> 268 <div class="preserve-breaks nowrap" data-expected-client-width="30" data-expected-client-height="10">X É</div> 269 <div class="break-spaces wrap" data-expected-client-width="30" data-expected-client-height="10">X É</div> 270 <div class="break-spaces nowrap" data-expected-client-width="30" data-expected-client-height="10">X É</div> 271 </div> 272 <div class="container wide"> 273 <div class="collapse wrap" data-expected-client-width="30" data-expected-client-height="10">X É</div> 274 <div class="collapse nowrap" data-expected-client-width="30" data-expected-client-height="10">X É</div> 275 <div class="preserve wrap" data-expected-client-width="40" data-expected-client-height="10">X É</div> 276 <div class="preserve nowrap" data-expected-client-width="40" data-expected-client-height="10">X É</div> 277 <div class="preserve-breaks wrap" data-expected-client-width="30" data-expected-client-height="10">X É</div> 278 <div class="preserve-breaks nowrap" data-expected-client-width="30" data-expected-client-height="10">X É</div> 279 <div class="break-spaces wrap" data-expected-client-width="40" data-expected-client-height="10">X É</div> 280 <div class="break-spaces nowrap" data-expected-client-width="40" data-expected-client-height="10">X É</div> 281 </div> 282 <div class="container wide"> 283 <div class="collapse wrap" data-expected-client-width="10" data-expected-client-height="20">X <x-br></x-br>É</div> 284 <div class="collapse nowrap" data-expected-client-width="10" data-expected-client-height="20">X <x-br></x-br>É</div> 285 <div class="preserve wrap" data-expected-client-width="20" data-expected-client-height="20">X <x-br></x-br>É</div> 286 <div class="preserve nowrap" data-expected-client-width="20" data-expected-client-height="20">X <x-br></x-br>É</div> 287 <div class="preserve-breaks wrap" data-expected-client-width="10" data-expected-client-height="20">X <x-br></x-br>É</div> 288 <div class="preserve-breaks nowrap" data-expected-client-width="10" data-expected-client-height="20">X <x-br></x-br>É</div> 289 <div class="break-spaces wrap" data-expected-client-width="20" data-expected-client-height="20">X <x-br></x-br>É</div> 290 <div class="break-spaces nowrap" data-expected-client-width="20" data-expected-client-height="20">X <x-br></x-br>É</div> 291 </div> 292 <div class="container wide"> 293 <div class="collapse wrap" data-expected-client-width="30" data-expected-client-height="10">X <a>É</a></div> 294 <div class="collapse nowrap" data-expected-client-width="30" data-expected-client-height="10">X <a>É</a></div> 295 <div class="preserve wrap" data-expected-client-width="30" data-expected-client-height="10">X <a>É</a></div> 296 <div class="preserve nowrap" data-expected-client-width="30" data-expected-client-height="10">X <a>É</a></div> 297 <div class="preserve-breaks wrap" data-expected-client-width="30" data-expected-client-height="10">X <a>É</a></div> 298 <div class="preserve-breaks nowrap" data-expected-client-width="30" data-expected-client-height="10">X <a>É</a></div> 299 <div class="break-spaces wrap" data-expected-client-width="30" data-expected-client-height="10">X <a>É</a></div> 300 <div class="break-spaces nowrap" data-expected-client-width="30" data-expected-client-height="10">X <a>É</a></div> 301 </div> 302 303 <hr> 304 305 <script src="/resources/testharness.js"></script> 306 <script src="/resources/testharnessreport.js"></script> 307 <script src="/resources/check-layout-th.js"></script> 308 <script> 309 document.fonts.ready.then(() => checkLayout(".container > div")); 310 </script>