keyword-sizes-on-flex-item-001.html (9253B)
1 <!DOCTYPE html> 2 <title>Keyword sizes on flex item: row container</title> 3 <link rel="author" title="Oriol Brufau" href="obrufau@igalia.com"> 4 <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#sizing-values"> 5 <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#sizing-values"> 6 <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/"> 7 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11006"> 8 <meta assert="The various keyword sizes work as expected on flex items."> 9 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 10 11 <style> 12 .wrapper { 13 display: flex; 14 flex-direction: row; 15 } 16 .test { 17 flex: none; 18 margin: 5px; 19 border: 3px solid; 20 padding: 2px; 21 font: 20px/1 Ahem; 22 } 23 24 /* Set the preferred size to small amount, to test that the min size works */ 25 .test.min-width { width: 0px } 26 .test.min-height { height: 0px } 27 28 /* Set the preferred size to big amount, to test that the max size works */ 29 .test.max-width { width: 500px } 30 .test.max-height { height: 500px } 31 32 /* stretch isn't widely supported, fall back to vendor-prefixed alternatives */ 33 .width.stretch { width: -moz-available; width: -webkit-fill-available; width: stretch } 34 .min-width.stretch { min-width: -moz-available; min-width: -webkit-fill-available; min-width: stretch } 35 .max-width.stretch { max-width: -moz-available; max-width: -webkit-fill-available; max-width: stretch } 36 .height.stretch { height: -moz-available; height: -webkit-fill-available; height: stretch } 37 .min-height.stretch { min-height: -moz-available; min-height: -webkit-fill-available; min-height: stretch } 38 .max-height.stretch { max-height: -moz-available; max-height: -webkit-fill-available; max-height: stretch } 39 </style> 40 <div id="log"></div> 41 42 <!-- Intrinsic keywords --> 43 <div class="wrapper" style="width: 100px; height: 100px"> 44 <div class="test width" style="width: min-content" data-expected-width="30">X X</div> 45 <div class="test width" style="width: fit-content" data-expected-width="70">X X</div> 46 <div class="test width" style="width: max-content" data-expected-width="70">X X</div> 47 48 <div class="test width" style="width: min-content" data-expected-width="70">XXX XXX</div> 49 <div class="test width" style="width: fit-content" data-expected-width="90">XXX XXX</div> 50 <div class="test width" style="width: max-content" data-expected-width="150">XXX XXX</div> 51 52 <div class="test width" style="width: min-content" data-expected-width="110">XXXXX XXXXX</div> 53 <div class="test width" style="width: fit-content" data-expected-width="110">XXXXX XXXXX</div> 54 <div class="test width" style="width: max-content" data-expected-width="230">XXXXX XXXXX</div> 55 56 <br> 57 58 <div class="test min-width" style="min-width: min-content" data-expected-width="30">X X</div> 59 <div class="test min-width" style="min-width: fit-content" data-expected-width="70">X X</div> 60 <div class="test min-width" style="min-width: max-content" data-expected-width="70">X X</div> 61 62 <div class="test min-width" style="min-width: min-content" data-expected-width="70">XXX XXX</div> 63 <div class="test min-width" style="min-width: fit-content" data-expected-width="90">XXX XXX</div> 64 <div class="test min-width" style="min-width: max-content" data-expected-width="150">XXX XXX</div> 65 66 <div class="test min-width" style="min-width: min-content" data-expected-width="110">XXXXX XXXXX</div> 67 <div class="test min-width" style="min-width: fit-content" data-expected-width="110">XXXXX XXXXX</div> 68 <div class="test min-width" style="min-width: max-content" data-expected-width="230">XXXXX XXXXX</div> 69 70 <br> 71 72 <div class="test max-width" style="max-width: min-content" data-expected-width="30">X X</div> 73 <div class="test max-width" style="max-width: fit-content" data-expected-width="70">X X</div> 74 <div class="test max-width" style="max-width: max-content" data-expected-width="70">X X</div> 75 76 <div class="test max-width" style="max-width: min-content" data-expected-width="70">XXX XXX</div> 77 <div class="test max-width" style="max-width: fit-content" data-expected-width="90">XXX XXX</div> 78 <div class="test max-width" style="max-width: max-content" data-expected-width="150">XXX XXX</div> 79 80 <div class="test max-width" style="max-width: min-content" data-expected-width="110">XXXXX XXXXX</div> 81 <div class="test max-width" style="max-width: fit-content" data-expected-width="110">XXXXX XXXXX</div> 82 <div class="test max-width" style="max-width: max-content" data-expected-width="230">XXXXX XXXXX</div> 83 84 <br> 85 86 <div class="test height" style="height: min-content" data-expected-height="30">X X</div> 87 <div class="test height" style="height: fit-content" data-expected-height="30">X X</div> 88 <div class="test height" style="height: max-content" data-expected-height="30">X X</div> 89 90 <div class="test min-height" style="min-height: min-content" data-expected-height="30">X X</div> 91 <div class="test min-height" style="min-height: fit-content" data-expected-height="30">X X</div> 92 <div class="test min-height" style="min-height: max-content" data-expected-height="30">X X</div> 93 94 <div class="test max-height" style="max-height: min-content" data-expected-height="30">X X</div> 95 <div class="test max-height" style="max-height: fit-content" data-expected-height="30">X X</div> 96 <div class="test max-height" style="max-height: max-content" data-expected-height="30">X X</div> 97 </div> 98 99 <!-- Definite stretch --> 100 <div class="wrapper" style="width: 100px; height: 100px"> 101 <div class="test width stretch" data-expected-width="90">X X</div> 102 <div class="test width stretch" data-expected-width="90">XXX XXX</div> 103 <div class="test width stretch" data-expected-width="90">XXXXX XXXXX</div> 104 105 <div class="test min-width stretch" data-expected-width="90">X X</div> 106 <div class="test min-width stretch" data-expected-width="90">XXX XXX</div> 107 <div class="test min-width stretch" data-expected-width="90">XXXXX XXXXX</div> 108 109 <div class="test max-width stretch" data-expected-width="90">X X</div> 110 <div class="test max-width stretch" data-expected-width="90">XXX XXX</div> 111 <div class="test max-width stretch" data-expected-width="90">XXXXX XXXXX</div> 112 113 <div class="test height stretch" data-expected-height="90">X X</div> 114 <div class="test height stretch" data-expected-height="90">XXX XXX<</div> 115 <div class="test height stretch" data-expected-height="90">XXXXX XXXXX</div> 116 117 <div class="test min-height stretch" data-expected-height="90">X X</div> 118 <div class="test min-height stretch" data-expected-height="90">XXX XXX</div> 119 <div class="test min-height stretch" data-expected-height="90">XXXXX XXXXX</div> 120 121 <div class="test max-height stretch" data-expected-height="90">X X</div> 122 <div class="test max-height stretch" data-expected-height="90">XXX XXX</div> 123 <div class="test max-height stretch" data-expected-height="90">XXXXX XXXXX</div> 124 </div> 125 126 <!-- Stretch sizes can't result in a negative content size --> 127 <div class="wrapper" style="width: 0px; height: 0px"> 128 <div class="test width min-width max-width stretch" data-expected-width="10"></div> 129 <div class="test height min-height max-height stretch" data-expected-height="10"></div> 130 </div> 131 132 <!-- Indefinite stretch --> 133 <div class="wrapper" style="width: 100px; max-height: 100px"> 134 <div class="test height stretch" data-expected-height="90">X X</div> 135 <div class="test height stretch" data-expected-height="90">XXX XXX</div> 136 <div class="test height stretch" data-expected-height="90">XXXXX XXXXX</div> 137 138 <div class="test min-height stretch" data-expected-height="90">X X</div> 139 <div class="test min-height stretch" data-expected-height="90">XXX XXX</div> 140 <div class="test min-height stretch" data-expected-height="90">XXXXX XXXXX</div> 141 142 <div class="test max-height stretch" data-expected-height="90">X X</div> 143 <div class="test max-height stretch" data-expected-height="90">XXX XXX</div> 144 <div class="test max-height stretch" data-expected-height="90">XXXXX XXXXX</div> 145 </div> 146 147 <!-- Fit-content with indefinite stretch --> 148 <div class="wrapper" style="width: 100px; max-height: 100px"> 149 <div class="test height" style="height: fit-content" data-expected-height="30">X X</div> 150 <div class="test height" style="height: fit-content" data-expected-height="30">XXX XXX</div> 151 <div class="test height" style="height: fit-content" data-expected-height="30">XXXXX XXXXX</div> 152 153 <div class="test min-height" style="min-height: fit-content" data-expected-height="30">X X</div> 154 <div class="test min-height" style="min-height: fit-content" data-expected-height="30">XXX XXX</div> 155 <div class="test min-height" style="min-height: fit-content" data-expected-height="30">XXXXX XXXXX</div> 156 157 <div class="test max-height" style="max-height: fit-content" data-expected-height="30">X X</div> 158 <div class="test max-height" style="max-height: fit-content" data-expected-height="30">XXX XXX</div> 159 <div class="test max-height" style="max-height: fit-content" data-expected-height="30">XXXXX XXXXX</div> 160 </div> 161 162 <script src="/resources/testharness.js"></script> 163 <script src="/resources/testharnessreport.js"></script> 164 <script src="/resources/check-layout-th.js"></script> 165 <script> 166 document.fonts.ready.then(() => checkLayout(".test")); 167 </script>