flexbox-align-self-vert-rtl-004.xhtml (2923B)
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 the 8 flex container being skinnier than its items, and with "direction: rtl" to 9 swap the horizontal (cross) axis. --> 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 that's skinnier than its items, 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-004-ref.xhtml"/> 16 <style> 17 .flexbox { 18 border: 1px dashed blue; 19 width: 4px; 20 display: flex; 21 flex-direction: column; 22 direction: rtl; 23 float: left; 24 font-family: sans-serif; 25 font-size: 10px; 26 margin-left: 80px; 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: 18px; 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 <!-- (NOTE: this test has the "stretch" divs and the "flex-end" divs 67 swapped in the ordering, with respect to the other 68 flexbox-align-self-* testcases. That's because "stretch" and 69 "flex-end" overflow in opposite directions, and in RTL mode (with 2 70 flex containers side by side), they overflow *at* each other and 71 overlap. If we swap them, they float away from each other and we can 72 still see them.) --> 73 <div class="flexbox"> 74 <div class="flex-start">start</div> 75 <div class="flex-start big">a b</div> 76 <div class="stretch">stretch</div> 77 <div class="stretch big">a b</div> 78 <div class="center">center</div> 79 <div class="center big">a b</div> 80 </div> 81 <div class="flexbox"> 82 <div class="baseline">base</div> 83 <div class="baseline big">abc</div> 84 <div class="flex-end">end</div> 85 <div class="flex-end big">a b</div> 86 </div> 87 </body> 88 </html>