keyword-sizes-on-replaced-element.html (17184B)
1 <!DOCTYPE html> 2 <title>Keyword sizes on replaced element</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/css2/#replaced-element"> 7 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11006"> 8 <meta assert="The various keyword sizes work as expected on replaced elements."> 9 10 <style> 11 .wrapper { 12 display: inline-block; 13 vertical-align: top; 14 margin-right: 150px; 15 } 16 17 .test { 18 margin: 5px; 19 border: 3px solid; 20 padding: 2px; 21 width: auto; 22 height: auto; 23 } 24 25 /* Set the preferred size to small amount, to test that the min size works */ 26 .test.min-width { width: 0px } 27 .test.min-height { height: 0px } 28 29 /* Set the preferred size to big amount, to test that the max size works */ 30 .test.max-width { width: 500px } 31 .test.max-height { height: 500px } 32 33 /* stretch isn't widely supported, fall back to vendor-prefixed alternatives */ 34 .width.stretch { width: -moz-available; width: -webkit-fill-available; width: stretch } 35 .min-width.stretch { min-width: -moz-available; min-width: -webkit-fill-available; min-width: stretch } 36 .max-width.stretch { max-width: -moz-available; max-width: -webkit-fill-available; max-width: stretch } 37 .height.stretch { height: -moz-available; height: -webkit-fill-available; height: stretch } 38 .min-height.stretch { min-height: -moz-available; min-height: -webkit-fill-available; min-height: stretch } 39 .max-height.stretch { max-height: -moz-available; max-height: -webkit-fill-available; max-height: stretch } 40 </style> 41 <div id="log"></div> 42 43 <!-- Intrinsic keywords --> 44 <div class="wrapper" style="width: 200px; height: 100px"> 45 <canvas width="100" height="100" class="test width height" style="width: 50px; height: 50px" 46 data-expected-width="60" data-expected-height="60"></canvas> 47 <canvas width="100" height="100" class="test width height" style="width: 50px; height: min-content" 48 data-expected-width="60" data-expected-height="60"></canvas> 49 <canvas width="100" height="100" class="test width height" style="width: 50px; height: fit-content" 50 data-expected-width="60" data-expected-height="60"></canvas> 51 <canvas width="100" height="100" class="test width height" style="width: 50px; height: max-content" 52 data-expected-width="60" data-expected-height="60"></canvas> 53 <canvas width="100" height="100" class="test width height" style="width: min-content; height: 50px" 54 data-expected-width="60" data-expected-height="60"></canvas> 55 <canvas width="100" height="100" class="test width height" style="width: min-content; height: min-content" 56 data-expected-width="110" data-expected-height="110"></canvas> 57 <canvas width="100" height="100" class="test width height" style="width: min-content; height: fit-content" 58 data-expected-width="110" data-expected-height="110"></canvas> 59 <canvas width="100" height="100" class="test width height" style="width: min-content; height: max-content" 60 data-expected-width="110" data-expected-height="110"></canvas> 61 <canvas width="100" height="100" class="test width height" style="width: fit-content; height: 50px" 62 data-expected-width="60" data-expected-height="60"></canvas> 63 <canvas width="100" height="100" class="test width height" style="width: fit-content; height: min-content" 64 data-expected-width="110" data-expected-height="110"></canvas> 65 <canvas width="100" height="100" class="test width height" style="width: fit-content; height: fit-content" 66 data-expected-width="110" data-expected-height="110"></canvas> 67 <canvas width="100" height="100" class="test width height" style="width: fit-content; height: max-content" 68 data-expected-width="110" data-expected-height="110"></canvas> 69 <canvas width="100" height="100" class="test width height" style="width: max-content; height: 50px" 70 data-expected-width="60" data-expected-height="60"></canvas> 71 <canvas width="100" height="100" class="test width height" style="width: max-content; height: min-content" 72 data-expected-width="110" data-expected-height="110"></canvas> 73 <canvas width="100" height="100" class="test width height" style="width: max-content; height: fit-content" 74 data-expected-width="110" data-expected-height="110"></canvas> 75 <canvas width="100" height="100" class="test width height" style="width: max-content; height: max-content" 76 data-expected-width="110" data-expected-height="110"></canvas> 77 78 <br> 79 80 <canvas width="100" height="100" class="test min-width height" style="min-width: 50px; height: 50px" 81 data-expected-width="60" data-expected-height="60"></canvas> 82 <canvas width="100" height="100" class="test min-width height" style="min-width: 50px; height: min-content" 83 data-expected-width="60" data-expected-height="60"></canvas> 84 <canvas width="100" height="100" class="test min-width height" style="min-width: 50px; height: fit-content" 85 data-expected-width="60" data-expected-height="60"></canvas> 86 <canvas width="100" height="100" class="test min-width height" style="min-width: 50px; height: max-content" 87 data-expected-width="60" data-expected-height="60"></canvas> 88 <canvas width="100" height="100" class="test min-width height" style="min-width: min-content; height: 50px" 89 data-expected-width="60" data-expected-height="60"></canvas> 90 <canvas width="100" height="100" class="test min-width height" style="min-width: min-content; height: min-content" 91 data-expected-width="110" data-expected-height="110"></canvas> 92 <canvas width="100" height="100" class="test min-width height" style="min-width: min-content; height: fit-content" 93 data-expected-width="110" data-expected-height="110"></canvas> 94 <canvas width="100" height="100" class="test min-width height" style="min-width: min-content; height: max-content" 95 data-expected-width="110" data-expected-height="110"></canvas> 96 <canvas width="100" height="100" class="test min-width height" style="min-width: fit-content; height: 50px" 97 data-expected-width="60" data-expected-height="60"></canvas> 98 <canvas width="100" height="100" class="test min-width height" style="min-width: fit-content; height: min-content" 99 data-expected-width="110" data-expected-height="110"></canvas> 100 <canvas width="100" height="100" class="test min-width height" style="min-width: fit-content; height: fit-content" 101 data-expected-width="110" data-expected-height="110"></canvas> 102 <canvas width="100" height="100" class="test min-width height" style="min-width: fit-content; height: max-content" 103 data-expected-width="110" data-expected-height="110"></canvas> 104 <canvas width="100" height="100" class="test min-width height" style="min-width: max-content; height: 50px" 105 data-expected-width="60" data-expected-height="60"></canvas> 106 <canvas width="100" height="100" class="test min-width height" style="min-width: max-content; height: min-content" 107 data-expected-width="110" data-expected-height="110"></canvas> 108 <canvas width="100" height="100" class="test min-width height" style="min-width: max-content; height: fit-content" 109 data-expected-width="110" data-expected-height="110"></canvas> 110 <canvas width="100" height="100" class="test min-width height" style="min-width: max-content; height: max-content" 111 data-expected-width="110" data-expected-height="110"></canvas> 112 113 <br> 114 115 <canvas width="100" height="100" class="test max-width height" style="max-width: 50px; height: 50px" 116 data-expected-width="60" data-expected-height="60"></canvas> 117 <canvas width="100" height="100" class="test max-width height" style="max-width: 50px; height: min-content" 118 data-expected-width="60" data-expected-height="60"></canvas> 119 <canvas width="100" height="100" class="test max-width height" style="max-width: 50px; height: fit-content" 120 data-expected-width="60" data-expected-height="60"></canvas> 121 <canvas width="100" height="100" class="test max-width height" style="max-width: 50px; height: max-content" 122 data-expected-width="60" data-expected-height="60"></canvas> 123 <canvas width="100" height="100" class="test max-width height" style="max-width: min-content; height: 50px" 124 data-expected-width="60" data-expected-height="60"></canvas> 125 <canvas width="100" height="100" class="test max-width height" style="max-width: min-content; height: min-content" 126 data-expected-width="110" data-expected-height="110"></canvas> 127 <canvas width="100" height="100" class="test max-width height" style="max-width: min-content; height: fit-content" 128 data-expected-width="110" data-expected-height="110"></canvas> 129 <canvas width="100" height="100" class="test max-width height" style="max-width: min-content; height: max-content" 130 data-expected-width="110" data-expected-height="110"></canvas> 131 <canvas width="100" height="100" class="test max-width height" style="max-width: fit-content; height: 50px" 132 data-expected-width="60" data-expected-height="60"></canvas> 133 <canvas width="100" height="100" class="test max-width height" style="max-width: fit-content; height: min-content" 134 data-expected-width="110" data-expected-height="110"></canvas> 135 <canvas width="100" height="100" class="test max-width height" style="max-width: fit-content; height: fit-content" 136 data-expected-width="110" data-expected-height="110"></canvas> 137 <canvas width="100" height="100" class="test max-width height" style="max-width: fit-content; height: max-content" 138 data-expected-width="110" data-expected-height="110"></canvas> 139 <canvas width="100" height="100" class="test max-width height" style="max-width: max-content; height: 50px" 140 data-expected-width="60" data-expected-height="60"></canvas> 141 <canvas width="100" height="100" class="test max-width height" style="max-width: max-content; height: min-content" 142 data-expected-width="110" data-expected-height="110"></canvas> 143 <canvas width="100" height="100" class="test max-width height" style="max-width: max-content; height: fit-content" 144 data-expected-width="110" data-expected-height="110"></canvas> 145 <canvas width="100" height="100" class="test max-width height" style="max-width: max-content; height: max-content" 146 data-expected-width="110" data-expected-height="110"></canvas> 147 </div> 148 149 <!-- Definite stretch --> 150 <div class="wrapper" style="width: 200px; height: 100px"> 151 <canvas width="100" height="100" class="test width stretch" 152 data-expected-width="190" data-expected-height="190"></canvas> 153 <canvas width="100" height="100" class="test min-width stretch" 154 data-expected-width="190" data-expected-height="190"></canvas> 155 <canvas width="100" height="100" class="test max-width stretch" 156 data-expected-width="190" data-expected-height="190"></canvas> 157 <canvas width="100" height="100" class="test height stretch" 158 data-expected-width="90" data-expected-height="90"></canvas> 159 <canvas width="100" height="100" class="test min-height stretch" 160 data-expected-width="90" data-expected-height="90"></canvas> 161 <canvas width="100" height="100" class="test max-height stretch" 162 data-expected-width="90" data-expected-height="90"></canvas> 163 </div> 164 165 <!-- Stretch sizes can't result in a negative content size --> 166 <div class="wrapper" style="width: 0px; height: 0px"> 167 <canvas width="100" height="100" class="test width min-width max-width stretch" 168 data-expected-width="10" data-expected-height="10"></canvas> 169 <canvas width="100" height="100" class="test height min-height max-height stretch" 170 data-expected-width="10" data-expected-height="10"></canvas> 171 <canvas width="100" height="100" class="test width min-width max-width height min-height max-height stretch" 172 data-expected-width="10" data-expected-height="10"></canvas> 173 </div> 174 175 <!-- Indefinite stretch --> 176 <div class="wrapper" style="width: 200px; max-height: 100px"> 177 <canvas width="100" height="100" class="test height stretch" 178 data-expected-width="110" data-expected-height="110"></canvas> 179 <canvas width="100" height="100" class="test min-height stretch" 180 data-expected-width="10" data-expected-height="10"></canvas> 181 <canvas width="100" height="100" class="test max-height stretch" 182 data-expected-width="510" data-expected-height="510"></canvas> 183 184 <canvas width="100" height="100" class="test height stretch" style="max-width: 50px" 185 data-expected-width="60" data-expected-height="60"></canvas> 186 <canvas width="100" height="100" class="test min-height stretch" style="min-width: 50px" 187 data-expected-width="60" data-expected-height="10"></canvas> 188 <canvas width="100" height="100" class="test max-height stretch" style="max-width: 50px" 189 data-expected-width="60" data-expected-height="510"></canvas> 190 191 <canvas width="100" height="100" class="test height stretch" style="min-width: 150px" 192 data-expected-width="160" data-expected-height="160"></canvas> 193 <canvas width="100" height="100" class="test min-height stretch" style="min-width: 150px" 194 data-expected-width="160" data-expected-height="10"></canvas> 195 <canvas width="100" height="100" class="test max-height stretch" style="max-width: 150px" 196 data-expected-width="160" data-expected-height="510"></canvas> 197 </div> 198 199 <!-- Fit-content with indefinite stretch --> 200 <div class="wrapper" style="width: 200px; max-height: 100px"> 201 <canvas width="100" height="100" class="test height" style="height: fit-content" 202 data-expected-width="110" data-expected-height="110"></canvas> 203 <canvas width="100" height="100" class="test min-height" style="min-height: fit-content" 204 data-expected-width="110" data-expected-height="110"></canvas> 205 <canvas width="100" height="100" class="test max-height" style="max-height: fit-content" 206 data-expected-width="110" data-expected-height="110"></canvas> 207 208 <canvas width="100" height="100" class="test height" style="max-width: 50px; height: fit-content" 209 data-expected-width="60" data-expected-height="60"></canvas> 210 <canvas width="100" height="100" class="test min-height" style="min-width: 50px; min-height: fit-content" 211 data-expected-width="110" data-expected-height="110"></canvas> 212 <canvas width="100" height="100" class="test max-height" style="max-width: 50px; max-height: fit-content" 213 data-expected-width="60" data-expected-height="60"></canvas> 214 215 <canvas width="100" height="100" class="test height" style="min-width: 150px; height: fit-content" 216 data-expected-width="160" data-expected-height="160"></canvas> 217 <canvas width="100" height="100" class="test min-height" style="min-width: 150px; min-height: fit-content" 218 data-expected-width="160" data-expected-height="160"></canvas> 219 <canvas width="100" height="100" class="test max-height" style="max-width: 150px; max-height: fit-content" 220 data-expected-width="110" data-expected-height="110"></canvas> 221 </div> 222 223 <!-- min-content --> 224 <div class="wrapper" style="width: 200px; max-height: 100px"> 225 <canvas width="100" height="100" class="test height" style="height: min-content" 226 data-expected-width="110" data-expected-height="110"></canvas> 227 <canvas width="100" height="100" class="test min-height" style="min-height: min-content" 228 data-expected-width="110" data-expected-height="110"></canvas> 229 <canvas width="100" height="100" class="test max-height" style="max-height: min-content" 230 data-expected-width="110" data-expected-height="110"></canvas> 231 232 <canvas width="100" height="100" class="test height" style="max-width: 50px; height: min-content" 233 data-expected-width="60" data-expected-height="60"></canvas> 234 <canvas width="100" height="100" class="test min-height" style="min-width: 50px; min-height: min-content" 235 data-expected-width="110" data-expected-height="110"></canvas> 236 <canvas width="100" height="100" class="test max-height" style="max-width: 50px; max-height: min-content" 237 data-expected-width="60" data-expected-height="60"></canvas> 238 239 <canvas width="100" height="100" class="test height" style="min-width: 150px; height: min-content" 240 data-expected-width="160" data-expected-height="160"></canvas> 241 <canvas width="100" height="100" class="test min-height" style="min-width: 150px; min-height: min-content" 242 data-expected-width="160" data-expected-height="160"></canvas> 243 <canvas width="100" height="100" class="test max-height" style="max-width: 150px; max-height: min-content" 244 data-expected-width="110" data-expected-height="110"></canvas> 245 </div> 246 247 <script src="/resources/testharness.js"></script> 248 <script src="/resources/testharnessreport.js"></script> 249 <script src="/resources/check-layout-th.js"></script> 250 <script> 251 checkLayout(".test"); 252 </script>