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