flexbox-mbp-horiz-004.xhtml (3193B)
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 percent-valued padding and/or margin on flex items. 7 The spec allows these to be resolved against the flex container's 8 inline size (regardless of which axis the percent padding/margin is in). 9 --> 10 <html xmlns="http://www.w3.org/1999/xhtml"> 11 <head> 12 <title>CSS Test: Testing percent-valued padding and margin on flex items</title> 13 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> 14 <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#item-margins"/> 15 <link rel="match" href="flexbox-mbp-horiz-004-ref.xhtml"/> 16 <style> 17 div.flexbox { 18 width: 200px; 19 display: flex; 20 margin-bottom: 2px; 21 border: 1px dotted black; 22 } 23 div.height50 { height: 50px; } 24 25 .marginA { margin: 10% 8% 6% 4%; } 26 .marginB { margin: 8% 10% 12% 14%; } 27 .paddingA { padding: 8% 6% 4% 2%; } 28 .paddingB { padding: 6% 8% 10% 12%; } 29 30 div.child1 { 31 flex: none; 32 width: 10px; 33 height: 10px; 34 background: lightgreen; 35 } 36 div.child2 { 37 flex: none; 38 width: 10px; 39 height: 10px; 40 background: purple; 41 } 42 43 div.filler { 44 /* Filler-div to fill up content-box and make padding easier to see. */ 45 height: 10px; 46 width: 100%; 47 background: lightgrey; 48 } 49 50 </style> 51 </head> 52 <body> 53 <!-- Flex container is auto-height - this shouldn't impact percent 54 margin/padding resolution, since they resolve against container's 55 inline-size, i.e. its width in this case. --> 56 <div class="flexbox" 57 ><div class="child1 paddingA"><div class="filler"/></div 58 ><div class="child2 paddingB"><div class="filler"/></div 59 ><div class="child1 marginA"></div 60 ><div class="child2 marginB"></div 61 ></div> 62 63 <!-- Flex container has height: 50px - again, this shouldn't impact percent 64 margin/padding resolution, since they resolve against container's 65 inline-size, i.e. its width in this case. --> 66 <div class="flexbox height50" 67 ><div class="child1 paddingA"><div class="filler"/></div 68 ><div class="child2 paddingB"><div class="filler"/></div 69 ><div class="child1 marginA"></div 70 ><div class="child2 marginB"></div 71 ></div> 72 73 <!-- ...and now with align-items: flex-end, so we can see the margin-bottom 74 in action --> 75 <div class="flexbox height50" style="align-items: flex-end" 76 ><div class="child1 paddingA"><div class="filler"/></div 77 ><div class="child2 paddingB"><div class="filler"/></div 78 ><div class="child1 marginA"></div 79 ><div class="child2 marginB"></div 80 ></div> 81 82 <!-- ...and finally, with margin and padding applied to the same items --> 83 <div class="flexbox height50" 84 ><div class="child1 paddingA marginA"><div class="filler"/></div 85 ><div class="child2 paddingB marginB"><div class="filler"/></div 86 ></div> 87 </body> 88 </html>