image-as-flexitem-size-007.html (5509B)
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 <meta charset="utf-8"> 9 <title> 10 CSS Test: Testing how explicit main-size & cross-size constraints 11 influence sizing on non-stretched flex item w/ intrinsic ratio, 12 some padding, and box-sizing:border-box. 13 </title> 14 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 15 <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> 16 <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size"> 17 <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size"> 18 <style> 19 .flexbox { 20 display: flex; 21 flex-direction: row; 22 border: 1px solid black; 23 margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */ 24 width: 40px; 25 height: 40px; 26 27 justify-content: flex-start; 28 align-items: flex-start; 29 30 float: left; /* For testing in "rows" */ 31 } 32 img { 33 padding: 1px 2px 3px 4px; 34 box-sizing: border-box; 35 background: pink; 36 } 37 38 br { clear: both; } 39 40 .flexbox > * { 41 /* Disable "min-width:auto"/"min-height:auto" to focus purely on 42 later channels of influence. */ 43 min-width: 0; 44 min-height: 0; 45 } 46 </style> 47 <script src="/resources/testharness.js"></script> 48 <script src="/resources/testharnessreport.js"></script> 49 <script src="/resources/check-layout-th.js"></script> 50 </head> 51 <body onload="checkLayout('.flexbox > img')"> 52 <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. --> 53 54 <!-- Row 1: no special sizing: --> 55 <div class="flexbox"> 56 <img src="support/solidblue.png" data-expected-width="22" data-expected-height="20"> 57 </div> 58 <br> 59 60 <!-- Row 2: Specified main-size, cross-size, or flex-basis: --> 61 <div class="flexbox"> 62 <img src="support/solidblue.png" style="width: 30px" data-expected-width="30" data-expected-height="28"> 63 </div> 64 <div class="flexbox"> 65 <img src="support/solidblue.png" style="height: 30px" data-expected-width="32" data-expected-height="30"> 66 </div> 67 <div class="flexbox"> 68 <img src="support/solidblue.png" style="flex: 0 0 30px" data-expected-width="30" data-expected-height="28"> 69 </div> 70 <br> 71 72 <!-- Row 3: min main-size OR min cross-size, or both --> 73 <div class="flexbox"> 74 <img src="support/solidblue.png" style="min-width: 34px" data-expected-width="34" data-expected-height="32"> 75 </div> 76 <div class="flexbox"> 77 <img src="support/solidblue.png" style="min-height: 34px" data-expected-width="36" data-expected-height="34"> 78 </div> 79 <div class="flexbox"> 80 <img src="support/solidblue.png" style="min-width: 30px; 81 min-height: 34px" data-expected-width="36" data-expected-height="34"> 82 </div> 83 <div class="flexbox"> 84 <img src="support/solidblue.png" style="min-width: 34px; 85 min-height: 30px" data-expected-width="34" data-expected-height="32"> 86 </div> 87 <br> 88 89 <!-- Row 4: max main-size OR max cross-size, or both --> 90 <div class="flexbox"> 91 <img src="support/solidblue.png" style="max-width: 16px" data-expected-width="16" data-expected-height="14"> 92 </div> 93 <div class="flexbox"> 94 <img src="support/solidblue.png" style="max-height: 16px" data-expected-width="18" data-expected-height="16"> 95 </div> 96 <div class="flexbox"> 97 <img src="support/solidblue.png" style="max-width: 20px; 98 max-height: 14px" data-expected-width="16" data-expected-height="14"> 99 </div> 100 <div class="flexbox"> 101 <img src="support/solidblue.png" style="max-width: 14px; 102 max-height: 20px" data-expected-width="14" data-expected-height="12"> 103 </div> 104 <br> 105 106 <!-- Row 5: min main-size vs. max cross-size, & vice versa --> 107 <div class="flexbox"> 108 <img src="support/solidblue.png" style="min-width: 30px; 109 max-height: 10px" data-expected-width="30" data-expected-height="10"> 110 </div> 111 <div class="flexbox"> 112 <img src="support/solidblue.png" style="max-width: 10px; 113 min-height: 30px" data-expected-width="10" data-expected-height="30"> 114 </div> 115 <br> 116 117 <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa --> 118 <div class="flexbox"> 119 <img src="support/solidblue.png" style="min-width: 30px; 120 height: 10px" data-expected-width="30" data-expected-height="10"> 121 </div> 122 <div class="flexbox"> 123 <img src="support/solidblue.png" style="width: 30px; 124 max-height: 10px" data-expected-width="30" data-expected-height="10"> 125 </div> 126 <div class="flexbox"> 127 <img src="support/solidblue.png" style="max-width: 10px; 128 height: 30px" data-expected-width="10" data-expected-height="30"> 129 </div> 130 <div class="flexbox"> 131 <img src="support/solidblue.png" style="width: 10px; 132 min-height: 30px" data-expected-width="10" data-expected-height="30"> 133 </div> 134 </body> 135 </html>