box-sizing-minmax-width.html (1629B)
1 <!DOCTYPE HTML> 2 <html><head> 3 <title>min-/max-width testcase for bug 308801</title> 4 <style type="text/css"> 5 6 html,body { 7 color:black; background-color:white; font-size:16px; 8 } 9 10 div { 11 margin:0; 12 padding:0; 13 } 14 15 .min { min-width:100px; } 16 .max { max-width:100px; } 17 .hidden { overflow:hidden; } 18 19 .box { 20 box-sizing: border-box; 21 } 22 23 .test1 { 24 border:10px solid black; 25 } 26 27 .test2 { 28 padding:10px; 29 background:black; 30 } 31 32 .test3 { 33 border:10px solid black; 34 padding:25px; 35 } 36 br { margin-top:13px; } 37 </style> 38 </head> 39 <body> 40 41 <div style="float:left"><div class="box min test1"></div></div> 42 43 <br clear="all"> 44 <div style="float:left"><div class="box min test2"></div></div> 45 46 <br clear="all"> 47 <div style="float:left"><div class="box min test3"></div></div> 48 49 <br clear="all"> 50 <br clear="all"> 51 <div class="box max test1"></div> 52 53 <br clear="all"> 54 <div class="box max test2"></div> 55 56 <br clear="all"> 57 <div class="box max test3"></div> 58 59 <br clear="all"> 60 <!-- overflow:hidden --> 61 62 <div style="float:left"><div class="hidden box min test1"></div></div> 63 64 <br clear="all"> 65 <div style="float:left"><div class="hidden box min test2"></div></div> 66 67 <br clear="all"> 68 <div style="float:left"><div class="hidden box min test3"></div></div> 69 70 <br clear="all"> 71 <br clear="all"> 72 <div class="hidden box max test1"></div> 73 74 <br clear="all"> 75 <div class="hidden box max test2"></div> 76 77 <br clear="all"> 78 <div class="hidden box max test3"></div> 79 80 81 82 </body> 83 </html>