flexbox-margin-auto-horiz-002-ref.xhtml (2301B)
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 <!-- Testcase with a variety of 'display: flex' examples 7 with margin-top and/or margin-bottom set to 'auto' on flex items. --> 8 <html xmlns="http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>CSS Reftest Reference</title> 11 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> 12 <style> 13 div.flexbox { 14 border: 2px dotted black; 15 display: flex; 16 margin-bottom: 2px; 17 width: 100px; 18 } 19 div.fixedSize { 20 width: 20px; 21 height: 20px; 22 } 23 div.gray { background: gray; } 24 div.green { background: green; } 25 div.pink { background: pink; } 26 div.blue { background: blue; } 27 </style> 28 </head> 29 <body> 30 31 <!-- fixed-height flexbox, with items that have auto margins --> 32 <div class="flexbox" style="height: 100px"> 33 <div class="fixedSize green" style="margin-top: 80px"/> 34 <div class="fixedSize pink"/> 35 <div class="fixedSize blue" style="margin-top: 40px"/> 36 </div> 37 <!-- fixed-height flexbox, with items that have auto & fixed margins --> 38 <div class="flexbox" style="height: 100px"> 39 <div class="fixedSize green" style="margin-top: 70px"/> 40 <div class="fixedSize pink" style="margin-top: 10px"/> 41 </div> 42 43 <!-- height-shrinkwrapping flexbox, sized by item w/ fixed height & margins, 44 with other items that have auto margins --> 45 <div class="flexbox" style="height: 50px"> 46 <div class="fixedSize green" style="margin-top: 30px"/> 47 <div class="fixedSize pink"/> 48 <div class="fixedSize blue" style="margin-top: 15px"/> 49 <div class="gray" style="width: 10px; height: 30px; margin-top: 10px"/> 50 </div> 51 52 <!-- height-shrinkwrapping flexbox, sized by item w/ fixed height & margins, 53 with other items that have auto & fixed margins --> 54 <div class="flexbox" style="height: 50px"> 55 <div class="fixedSize green" style="margin-top: 20px"/> 56 <div class="fixedSize pink" style="margin-top: 10px"/> 57 <div class="gray" style="width: 10px; height: 30px; margin-top: 10px"/> 58 </div> 59 60 </body> 61 </html>