flexbox-flex-basis-content-003b.html (3455B)
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 used "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 a used "flex-basis" of "content" 27 (from "flex-basis:auto" and default "width:auto"). 28 We also give them zero flex-grow, flex-shrink, and min-main-size, so 29 that the flex base size entirely determines the flex item's size. */ 30 flex: 0 0 auto; 31 min-width: 0; 32 border: 2px solid teal; 33 } 34 ib { 35 display: inline-block; 36 background: blue; 37 border: 1px solid gray; 38 width: 15px; 39 height: 10px; 40 } 41 float { 42 float: left; 43 background: fuchsia; 44 border: 1px solid gray; 45 width: 15px; 46 height: 10px; 47 } 48 canvas { 49 background: brown; 50 border: 1px solid gray; 51 } 52 .innerFlex { 53 display: flex; 54 } 55 innerItem { 56 background: salmon; 57 border: 1px solid gray; 58 height: 10px; 59 width: 15px; 60 flex: none; 61 } 62 </style> 63 </head> 64 <body> 65 <!-- The idea of this test is to be sure the UA is using the "max-content" size 66 (and not e.g. the "fit-content size") when resolving the flex base size 67 inside each flex container. To differentiate between max-content and 68 other intrinsic size possibilities (min-content/fit-content), we: 69 - use flex items with a large difference between its min-content size & 70 its max-content size (e.g. wrappable content). 71 - use a very small container (to compress the size, if the UA incorrectly 72 allows the size to be influenced by the container size). 73 --> 74 75 <!-- Flex item has several inline-blocks 76 (no spaces, to avoid any text-layout dependency): --> 77 <div class="container"> 78 <div class="item"><ib></ib><ib></ib><ib></ib></div> 79 </div> 80 81 <!-- Flex item has several floats: --> 82 <div class="container"> 83 <div class="item"> 84 <float></float> 85 <float></float> 86 <float></float> 87 </div> 88 </div> 89 90 <!-- Flex item has several inline replaced elements: 91 (no spaces, to avoid any text-layout dependency): --> 92 <div class="container"> 93 <div class="item"> 94 <canvas width="15" height="10"></canvas 95 ><canvas width="15" height="10"></canvas 96 ><canvas width="15" height="10"></canvas> 97 </div> 98 </div> 99 100 <!-- Flex item *is* a replaced element: --> 101 <div class="container"> 102 <canvas class="item" width="25" height="10"></canvas> 103 </div> 104 105 <!-- Flex item is itself a flex container: --> 106 <div class="container"> 107 <div class="item innerFlex"> 108 <innerItem></innerItem> 109 <innerItem></innerItem> 110 <innerItem></innerItem> 111 </div> 112 </div> 113 114 <!-- Flex item is itself a multi-line flex container: --> 115 <div class="container"> 116 <div class="item innerFlex" style="flex-wrap: wrap"> 117 <innerItem></innerItem> 118 <innerItem></innerItem> 119 <innerItem></innerItem> 120 </div> 121 </div> 122 123 </body> 124 </html>