flexbox-mbp-horiz-003v.xhtml (2713B)
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 border/padding on a flex container and on its children --> 7 <html xmlns="http://www.w3.org/1999/xhtml"> 8 <head> 9 <title> 10 CSS Test: Testing borders and padding on a horizontal flex container and its flex items 11 (with a vertical writing-mode on the flex items). 12 </title> 13 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> 14 <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> 15 <link rel="match" href="flexbox-mbp-horiz-003-ref.xhtml"/> 16 <style> 17 div { height: 20px; border: 0; } 18 div.flexbox { 19 width: 200px; 20 display: flex; 21 margin-bottom: 2px; 22 } 23 24 <!-- customizations for flex container border/padding --> 25 .borderA { 26 border-style: dashed; 27 border-color: purple; 28 border-top-width: 6px; 29 border-right-width: 4px; 30 border-bottom-width: 2px; 31 border-left-width: 8px; 32 } 33 34 .borderB { 35 border-style: dashed; 36 border-color: purple; 37 border-top-width: 4px; 38 border-right-width: 5px; 39 border-bottom-width: 6px; 40 border-left-width: 7px; 41 } 42 43 .paddingA { 44 padding: 4px 3px 2px 1px; 45 } 46 47 .paddingB { 48 padding: 8px 11px 14px 17px; 49 } 50 51 div.child1 { 52 flex: 1 0 24px; 53 background: lightgreen; 54 border-style: dotted; 55 border-left-width: 2px; 56 border-right-width: 4px; 57 writing-mode: vertical-rl; 58 } 59 div.child2 { 60 flex: 2 0 10px; 61 background: yellow; 62 border-style: dashed; 63 border-left-width: 7px; 64 border-right-width: 3px; 65 writing-mode: vertical-lr; 66 } 67 </style> 68 </head> 69 <body> 70 <div class="flexbox borderA" 71 ><div class="child1"/><div class="child2"/></div> 72 <div class="flexbox borderA paddingA" 73 ><div class="child1"/><div class="child2"/></div> 74 <div class="flexbox borderA paddingB" 75 ><div class="child1"/><div class="child2"/></div> 76 <div class="flexbox borderB" 77 ><div class="child1"/><div class="child2"/></div> 78 <div class="flexbox borderB paddingA" 79 ><div class="child1"/><div class="child2"/></div> 80 <div class="flexbox borderB paddingB" 81 ><div class="child1"/><div class="child2"/></div> 82 <div class="flexbox paddingA" 83 ><div class="child1"/><div class="child2"/></div> 84 <div class="flexbox paddingB" 85 ><div class="child1"/><div class="child2"/></div> 86 </body> 87 </html>