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