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