webkit-box-with-modern-css-2.html (1874B)
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 <title> 9 CSS Test: "flex-basis" and "flex" shouldn't impact child sizing inside of 10 vertical "display: -webkit-box" container 11 </title> 12 <style> 13 .box { 14 display: -webkit-box; 15 -webkit-box-orient: vertical; 16 border: 1px solid black; 17 margin: 5px 20px; 18 height: 100px; 19 float: left; /* For testing in "rows" */ 20 font: 10px serif; 21 } 22 23 .box > *:nth-child(1) { background: turquoise; } 24 .box > *:nth-child(2) { background: salmon; } 25 26 .mh0 { 27 /* Used in some children here, to disable modern-flexbox's 28 "implied-minimum-size" feature, so that it can't inadvertantly 29 be the thing that makes our rendering match the reference . */ 30 min-height: 0; 31 } 32 33 br { clear: both; } 34 35 /* The point of this testcase is to verify that none of the modern-flexbox 36 styles below have any effect on the rendering. (This is worth checking 37 because we coopt our modern-flexbox implementation in our emulation of 38 legacy -webkit-box behavior.) */ 39 .fb0 { flex-basis: 0; } 40 .f1 { flex: 1; /* This shorthand sets flex-grow:1; flex-basis: 0 */ } 41 42 .fb30px { flex-basis: 30px; } 43 .f1_30px { flex: 1 30px; } 44 </style> 45 </head> 46 <body> 47 <!-- FIRST ROW: flex-basis is 0 --> 48 <div class="box"> 49 <div class="fb0">a</div> 50 <div class="fb0 mh0">b</div> 51 </div> 52 53 <div class="box"> 54 <div class="f1">a</div> 55 <div class="f1 mh0">b</div> 56 </div> 57 58 <br> 59 60 <!-- SECOND ROW: flex-basis is 30px --> 61 <div class="box"> 62 <div class="fb30px">a</div> 63 <div class="fb30px mh0">b</div> 64 </div> 65 66 <div class="box"> 67 <div class="f1_30px">a</div> 68 <div class="f1_30px mh0">b</div> 69 </div> 70 71 </body> 72 </html>