flexbox-flex-basis-content-003a.html (3394B)
1 <!DOCTYPE html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html> 7 <head> 8 <title> 9 CSS Test: Testing that explicit "flex-basis: content" is treated as 10 "max-content" when calculating flex base size 11 </title> 12 <meta charset="utf-8"> 13 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 14 <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-base-size"> 15 <link rel="match" href="flexbox-flex-basis-content-003-ref.html"> 16 <style> 17 .container { 18 display: flex; 19 /* flex container has an extremely-constrained width (and items will 20 overflow horizontally). This is intentional, as part of stress-testing 21 item sizing. */ 22 width: 1px; 23 } 24 25 .item { 26 /* We give all flex items "flex-basis: content". 27 We also give them zero flex-grow, flex-shrink, and min-main-size, so 28 that the flex base size entirely determines the flex item's size. */ 29 flex: 0 0 content; 30 min-width: 0; 31 border: 2px solid teal; 32 } 33 ib { 34 display: inline-block; 35 background: blue; 36 border: 1px solid gray; 37 width: 15px; 38 height: 10px; 39 } 40 float { 41 float: left; 42 background: fuchsia; 43 border: 1px solid gray; 44 width: 15px; 45 height: 10px; 46 } 47 canvas { 48 background: brown; 49 border: 1px solid gray; 50 } 51 .innerFlex { 52 display: flex; 53 } 54 innerItem { 55 background: salmon; 56 border: 1px solid gray; 57 height: 10px; 58 width: 15px; 59 flex: none; 60 } 61 </style> 62 </head> 63 <body> 64 <!-- The idea of this test is to be sure the UA is using the "max-content" size 65 (and not e.g. the "fit-content size") when resolving the flex base size 66 inside each flex container. To differentiate between max-content and 67 other intrinsic size possibilities (min-content/fit-content), we: 68 - use flex items with a large difference between its min-content size & 69 its max-content size (e.g. wrappable content). 70 - use a very small container (to compress the size, if the UA incorrectly 71 allows the size to be influenced by the container size). 72 --> 73 74 <!-- Flex item has several inline-blocks 75 (no spaces, to avoid any text-layout dependency): --> 76 <div class="container"> 77 <div class="item"><ib></ib><ib></ib><ib></ib></div> 78 </div> 79 80 <!-- Flex item has several floats: --> 81 <div class="container"> 82 <div class="item"> 83 <float></float> 84 <float></float> 85 <float></float> 86 </div> 87 </div> 88 89 <!-- Flex item has several inline replaced elements: 90 (no spaces, to avoid any text-layout dependency): --> 91 <div class="container"> 92 <div class="item"> 93 <canvas width="15" height="10"></canvas 94 ><canvas width="15" height="10"></canvas 95 ><canvas width="15" height="10"></canvas> 96 </div> 97 </div> 98 99 <!-- Flex item *is* a replaced element: --> 100 <div class="container"> 101 <canvas class="item" width="25" height="10"></canvas> 102 </div> 103 104 <!-- Flex item is itself a flex container: --> 105 <div class="container"> 106 <div class="item innerFlex"> 107 <innerItem></innerItem> 108 <innerItem></innerItem> 109 <innerItem></innerItem> 110 </div> 111 </div> 112 113 <!-- Flex item is itself a multi-line flex container: --> 114 <div class="container"> 115 <div class="item innerFlex" style="flex-wrap: wrap"> 116 <innerItem></innerItem> 117 <innerItem></innerItem> 118 <innerItem></innerItem> 119 </div> 120 </div> 121 122 </body> 123 </html>