image-as-flexitem-size-003.html (5337B)
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 stretched 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: row; 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: stretch; 28 29 float: left; /* For testing in "rows" */ 30 } 31 br { clear: both; } 32 33 .flexbox > * { 34 /* Disable "min-width:auto"/"min-height:auto" to focus purely on 35 later channels of influence. */ 36 min-width: 0; 37 min-height: 0; 38 } 39 </style> 40 <script src="/resources/testharness.js"></script> 41 <script src="/resources/testharnessreport.js"></script> 42 <script src="/resources/check-layout-th.js"></script> 43 </head> 44 <body onload="checkLayout('.flexbox > img')"> 45 <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. --> 46 47 <!-- Row 1: no special sizing: --> 48 <div class="flexbox"> 49 <img src="support/solidblue.png" data-expected-width="40" data-expected-height="40"> 50 </div> 51 <br> 52 53 <!-- Row 2: Specified main-size, cross-size, or flex-basis: --> 54 <div class="flexbox"> 55 <img src="support/solidblue.png" style="width: 30px" data-expected-width="30" data-expected-height="40"> 56 </div> 57 <div class="flexbox"> 58 <img src="support/solidblue.png" style="height: 30px" data-expected-width="30" data-expected-height="30"> 59 </div> 60 <div class="flexbox"> 61 <img src="support/solidblue.png" style="flex: 0 0 30px" data-expected-width="30" data-expected-height="40"> 62 </div> 63 <br> 64 65 <!-- Row 3: min main-size OR min cross-size, or both --> 66 <div class="flexbox"> 67 <img src="support/solidblue.png" style="min-width: 34px" data-expected-width="40" data-expected-height="40"> 68 </div> 69 <div class="flexbox"> 70 <img src="support/solidblue.png" style="min-height: 34px" data-expected-width="40" data-expected-height="40"> 71 </div> 72 <div class="flexbox"> 73 <img src="support/solidblue.png" style="min-width: 30px; 74 min-height: 34px" data-expected-width="40" data-expected-height="40"> 75 </div> 76 <div class="flexbox"> 77 <img src="support/solidblue.png" style="min-width: 34px; 78 min-height: 30px" data-expected-width="40" data-expected-height="40"> 79 </div> 80 <br> 81 82 <!-- Row 4: max main-size OR max cross-size, or both --> 83 <div class="flexbox"> 84 <img src="support/solidblue.png" style="max-width: 10px" data-expected-width="10" data-expected-height="40"> 85 </div> 86 <div class="flexbox"> 87 <img src="support/solidblue.png" style="max-height: 10px" data-expected-width="10" data-expected-height="10"> 88 </div> 89 <div class="flexbox"> 90 <img src="support/solidblue.png" style="max-width: 10px; 91 max-height: 6px" data-expected-width="6" data-expected-height="6"> 92 </div> 93 <div class="flexbox"> 94 <img src="support/solidblue.png" style="max-width: 6px; 95 max-height: 10px" data-expected-width="6" data-expected-height="10"> 96 </div> 97 <br> 98 99 <!-- Row 5: min main-size vs. max cross-size, & vice versa --> 100 <div class="flexbox"> 101 <img src="support/solidblue.png" style="min-width: 30px; 102 max-height: 10px" data-expected-width="30" data-expected-height="10"> 103 </div> 104 <div class="flexbox"> 105 <img src="support/solidblue.png" style="max-width: 10px; 106 min-height: 30px" data-expected-width="10" data-expected-height="40"> 107 </div> 108 <br> 109 110 <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa --> 111 <div class="flexbox"> 112 <img src="support/solidblue.png" style="min-width: 30px; 113 height: 10px" data-expected-width="30" data-expected-height="10"> 114 </div> 115 <div class="flexbox"> 116 <img src="support/solidblue.png" style="width: 30px; 117 max-height: 10px" data-expected-width="30" data-expected-height="10"> 118 </div> 119 <div class="flexbox"> 120 <img src="support/solidblue.png" style="max-width: 10px; 121 height: 30px" data-expected-width="10" data-expected-height="30"> 122 </div> 123 <div class="flexbox"> 124 <img src="support/solidblue.png" style="width: 10px; 125 min-height: 30px" data-expected-width="10" data-expected-height="40"> 126 </div> 127 </body> 128 </html>