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