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