flexbox-align-self-baseline-horiz-008-ref.xhtml (1715B)
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 <!-- Reference case for behavior of 'baseline' and 'last baseline' values 7 for align-items and align-self for sideways writing modes. 8 --> 9 <html xmlns="http://www.w3.org/1999/xhtml"> 10 <head> 11 <title>CSS Reftest Reference</title> 12 <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/> 13 <style> 14 .container { 15 float: left; 16 display: flex; 17 writing-mode: sideways-rl; 18 border: 1px dashed blue; 19 font: 14px sans-serif; 20 width: 80px; 21 } 22 23 .reverse { flex-flow: row wrap-reverse; } 24 25 .start { align-self: start; } 26 .end { align-self: end; } 27 28 .offset { margin-right: 10px; 29 margin-left: 3px; } 30 31 .lime { background: lime; } 32 .yellow { background: yellow; } 33 .orange { background: orange; } 34 .pink { background: pink; } 35 36 .ib { display: inline-block; } 37 </style> 38 </head> 39 <body> 40 <div class="container"> 41 <div class="lime offset start">one line (first)</div 42 ><div class="yellow offset end">one line (last)</div 43 ><div class="orange offset end">two<br/>lines and offset (last)</div 44 ><div class="pink offset start">offset (first)</div> 45 </div> 46 <div class="container reverse"> 47 <div class="lime offset end">one line (first)</div 48 ><div class="offset start"><div class="yellow ib">one line (last)</div 49 ><div class="orange ib">two<br/>lines and offset (last)</div></div 50 ><div class="pink offset end">offset (first)</div> 51 </div> 52 </body> 53 </html>