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