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