flexbox-align-self-vert-rtl-002.xhtml (2501B)
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 for align-items / align-self behavior, with all the possible 7 values included on different items within a flex container, and with 8 margin/border/padding values on each, and with "direction: rtl" to swap 9 the horizontal (cross) axis item. --> 10 <html xmlns="http://www.w3.org/1999/xhtml"> 11 <head> 12 <title>CSS Test: Testing the behavior of 'align-self' with a vertical flex container, with margin/padding/border on the items and with 'direction: rtl'</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/#align-items-property"/> 15 <link rel="match" href="flexbox-align-self-vert-rtl-002-ref.xhtml"/> 16 <meta name="fuzzy" content="maxDifference=0-120;totalPixels=0-101"/> 17 <style> 18 .flexbox { 19 border: 1px dashed blue; 20 width: 200px; 21 display: flex; 22 flex-direction: column; 23 direction: rtl; 24 float: left; 25 font-family: sans-serif; 26 font-size: 10px; 27 } 28 29 .flexbox > div { 30 margin: 1px 2px 3px 4px; 31 border-width: 2px 3px 4px 5px; 32 padding: 3px 4px 5px 6px; 33 34 border-style: dotted; 35 } 36 37 div.big { 38 font-size: 20px; 39 width: 50px; 40 } 41 42 /* Classes for each of the various align-self values */ 43 .flex-start { 44 background: lime; 45 align-self: flex-start; 46 } 47 .flex-end { 48 background: orange; 49 align-self: flex-end; 50 } 51 .center { 52 background: lightblue; 53 align-self: center; 54 } 55 .baseline { 56 background: teal; 57 align-self: baseline; 58 } 59 .stretch { 60 background: pink; 61 align-self: stretch; 62 } 63 </style> 64 </head> 65 <body> 66 <div class="flexbox"> 67 <div class="flex-start">start</div> 68 <div class="flex-start big">a b c d e f</div> 69 <div class="flex-end">end</div> 70 <div class="flex-end big">a b c d e f</div> 71 <div class="center">center</div> 72 <div class="center big">a b c d e f</div> 73 </div> 74 <div class="flexbox"> 75 <div class="baseline">base</div> 76 <div class="baseline big">abc</div> 77 <div class="stretch">stretch</div> 78 <div class="stretch big">a b c d e f</div> 79 </div> 80 </body> 81 </html>