flexbox-sizing-horiz-001-ref.xhtml (2162B)
1 <?xml version="1.0" encoding="UTF-8"?> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html xmlns="http://www.w3.org/1999/xhtml"> 7 <head> 8 <title>CSS Reftest Reference</title> 9 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> 10 <style> 11 div { height: 10px; } 12 div.flexbox { 13 border: 1px dashed blue; 14 font-size: 10px; 15 margin-bottom: 2px; 16 } 17 div.a, div.b, div.c { float: left } 18 div.a { 19 width: 20px; 20 background: lightgreen; 21 } 22 div.b { 23 width: 40px; 24 background: purple; 25 } 26 div.c { 27 width: 40px; 28 background: orange; 29 } 30 </style> 31 </head> 32 <body> 33 <div class="flexbox"> 34 <div class="a" style="width: 60px"/> 35 <div class="b" style="width: 60px"/> 36 <div class="c" style="width: 60px"/> 37 </div> 38 39 <div class="flexbox"> 40 <div class="a" style="width: 60px"/> 41 <div class="b" style="width: 60px"/> 42 <div class="c" style="width: 60px"/> 43 </div> 44 45 <div class="flexbox" style="width: 300px"> 46 <div class="a" style="width: 60px"/> 47 <div class="b" style="width: 60px"/> 48 <div class="c" style="width: 60px"/> 49 </div> 50 51 <div class="flexbox" style="width: 70px"> 52 <div class="a" style="width: 10px"/> 53 <div class="b"/> 54 <div class="c" style="width: 20px"/> 55 </div> 56 57 <div class="flexbox" style="width: 20px"> 58 <!-- We add an extra layer of <div> wrapping in this chunk, with a 59 fixed width, to keep the overflowing children from wrapping. --> 60 <div style="width: 50px"> 61 <div class="b"/> 62 <div class="c" style="width: 10px"/> 63 </div> 64 </div> 65 66 <div class="flexbox" style="width: 58px"> 67 <div class="a" style="width: 6px"/> 68 <div class="b"/> 69 <div class="c" style="width: 12px"/> 70 </div> 71 72 <div class="flexbox" style="width: 140px"> 73 <div class="a" style="width: 40px"/> 74 <div class="b" style="width: 40px"/> 75 <div class="c" style="width: 60px"/> 76 </div> 77 78 </body> 79 </html>