flexbox-sizing-vert-001-ref.xhtml (1990B)
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 { width: 10px; } 12 div.flexbox { 13 float: left; 14 border: 1px dashed blue; 15 font-size: 10px; 16 margin-right: 2px; 17 } 18 div.a { 19 height: 20px; 20 background: lightgreen; 21 } 22 div.b { 23 height: 40px; 24 background: purple; 25 } 26 div.c { 27 height: 40px; 28 background: orange; 29 } 30 </style> 31 </head> 32 <body> 33 <div class="flexbox"> 34 <div class="a"/><div class="b"/><div class="c"/> 35 </div> 36 37 <div class="flexbox"> 38 <div class="a"/><div class="b"/><div class="c"/> 39 </div> 40 41 <div class="flexbox"> 42 <div class="a"/><div class="b"/><div class="c"/> 43 </div> 44 45 <div class="flexbox"> 46 <div class="a" style="height: 30px"/> 47 <div class="b"/> 48 <div class="c" style="height: 50px"/> 49 </div> 50 51 <div class="flexbox" style="height: 200px"> 52 <div class="a" style="height: 60px"/> 53 <div class="b" style="height: 60px"/> 54 <div class="c" style="height: 60px"/> 55 </div> 56 57 <div class="flexbox"> 58 <div class="a" style="height: 10px"/> 59 <div class="b"/> 60 <div class="c" style="height: 20px"/> 61 </div> 62 63 <div class="flexbox" style="height: 20px"> 64 <div class="b"/> 65 <div class="c" style="height: 10px"/> 66 </div> 67 68 <div class="flexbox"> 69 <div class="a" style="height: 6px"/> 70 <div class="b"/> 71 <div class="c" style="height: 12px"/> 72 </div> 73 74 <div class="flexbox"> 75 <div class="a" style="height: 40px"/> 76 <div class="b" style="height: 40px"/> 77 <div class="c" style="height: 60px"/> 78 </div> 79 80 </body> 81 </html>