aspect-ratio-2.html (5355B)
1 <!DOCTYPE html> 2 <link rel="help" 3 href="https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing"> 4 <script src='/resources/testharness.js'></script> 5 <script src='/resources/testharnessreport.js'></script> 6 <script src="/resources/check-layout-th.js"></script> 7 <meta name="assert" 8 content="stretch keyword works as a block-size for replaced elements with intrinsic-size keyword for inline-size (which in turn depends on the stretched block-size)"> 9 <style> 10 .container { 11 width: 20px; 12 height: 20px; 13 margin: 5px; 14 border: 1px solid black; 15 } 16 canvas { 17 height: -webkit-fill-available; 18 height: stretch; 19 background: purple; 20 } 21 22 .withBorder { 23 border: 2px solid cyan; 24 border-width: 2px 3px 4px 5px; 25 } 26 .withPadding { 27 padding: 2px 3px 4px 5px; 28 } 29 .withPxMargin { 30 margin: 1px 2px 3px 4px; 31 } 32 .withPctMargin { 33 /* This works out to 1px 2px 3px 4px */ 34 margin: 5% 10% 15% 20%; 35 } 36 </style> 37 <body onload="checkLayout('canvas')"> 38 <!-- Simplest cases - replaced element with stretched block-size and 39 intrinsic inline-size: --> 40 <div class="container"> 41 <canvas width="30" height="60" 42 data-expected-width="10" 43 data-expected-height="20"></canvas> 44 </div> 45 <div class="container"> 46 <canvas width="30" height="60" 47 style="width: 1px; min-width: fit-content" 48 data-expected-width="10" 49 data-expected-height="20"></canvas> 50 </div> 51 <div class="container"> 52 <canvas width="30" height="60" 53 style="width: 100px; max-width: fit-content" 54 data-expected-width="10" 55 data-expected-height="20"></canvas> 56 </div> 57 58 <!-- Now without any block-size on the containing block (this makes 59 the canvas's bsize be treated as "auto", so it just takes on its 60 regular intrinsic size in both axes): --> 61 <div class="container" style="height: auto"> 62 <canvas width="30" height="60" 63 data-expected-width="30" 64 data-expected-height="60"></canvas> 65 </div> 66 <div class="container" style="height: auto"> 67 <canvas width="30" height="60" 68 style="width: 1px; min-width: fit-content" 69 data-expected-width="30" 70 data-expected-height="60"></canvas> 71 </div> 72 <div class="container" style="height: auto"> 73 <canvas width="30" height="60" 74 style="width: 100px; max-width: fit-content" 75 data-expected-width="30" 76 data-expected-height="60"></canvas> 77 </div> 78 79 <!-- Now with pixel-valued border: --> 80 <div class="container"> 81 <canvas width="30" height="60" 82 class="withBorder" 83 data-expected-width="15" 84 data-expected-height="20"></canvas> 85 </div> 86 <div class="container"> 87 <canvas width="30" height="60" 88 class="withBorder" 89 style="width: 1px; min-width: fit-content" 90 data-expected-width="15" 91 data-expected-height="20"></canvas> 92 </div> 93 <div class="container"> 94 <canvas width="30" height="60" 95 class="withBorder" 96 style="width: 100px; max-width: fit-content" 97 data-expected-width="15" 98 data-expected-height="20"></canvas> 99 </div> 100 101 <!-- Now with pixel-valued padding: --> 102 <div class="container"> 103 <canvas width="30" height="60" 104 class="withPadding" 105 data-expected-width="15" 106 data-expected-height="20"></canvas> 107 </div> 108 <div class="container"> 109 <canvas width="30" height="60" 110 class="withPadding" 111 style="width: 1px; min-width: fit-content" 112 data-expected-width="15" 113 data-expected-height="20"></canvas> 114 </div> 115 <div class="container"> 116 <canvas width="30" height="60" 117 class="withPadding" 118 style="width: 100px; max-width: fit-content" 119 data-expected-width="15" 120 data-expected-height="20"></canvas> 121 </div> 122 123 <!-- Now with a pixel-valued margin: --> 124 <div class="container"> 125 <canvas width="30" height="60" 126 class="withPxMargin" 127 data-expected-width="8" 128 data-expected-height="16"></canvas> 129 </div> 130 <div class="container"> 131 <canvas width="30" height="60" 132 class="withPxMargin" 133 style="width: 1px; min-width: fit-content" 134 data-expected-width="8" 135 data-expected-height="16"></canvas> 136 </div> 137 <div class="container"> 138 <canvas width="30" height="60" 139 class="withPxMargin" 140 style="width: 100px; max-width: fit-content" 141 data-expected-width="8" 142 data-expected-height="16"></canvas> 143 </div> 144 145 <!-- Now with a percent-valued margin: --> 146 <div class="container"> 147 <canvas width="30" height="60" 148 class="withPctMargin" 149 data-expected-width="8" 150 data-expected-height="16"></canvas> 151 </div> 152 <div class="container"> 153 <canvas width="30" height="60" 154 class="withPctMargin" 155 style="width: 1px; min-width: fit-content" 156 data-expected-width="8" 157 data-expected-height="16"></canvas> 158 </div> 159 <div class="container"> 160 <canvas width="30" height="60" 161 class="withPctMargin" 162 style="width: 100px; max-width: fit-content" 163 data-expected-width="8" 164 data-expected-height="16"></canvas> 165 </div> 166 </body>