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