flexbox-align-self-baseline-horiz-006.xhtml (1919B)
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 the 'baseline' value for align-items (and 7 align-self, implicitly). This test baseline-aligns various types of 8 content against content that is exempt from alignment due to an 9 orthognal writing-mode. 10 --> 11 <html xmlns="http://www.w3.org/1999/xhtml"> 12 <head> 13 <title>CSS Test: Baseline alignment of block flex items with 'baseline' value for 'align-items' / 'align-self' against non-parallel writing-modes.</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-006-ref.xhtml"/> 17 <style> 18 .container { 19 display: flex; 20 border: 1px dashed blue; 21 font: 14px sans-serif; 22 height: 50px; 23 } 24 25 .base { align-items: baseline; } 26 .lastbase { align-items: last baseline; } 27 28 .ortho { writing-mode: vertical-rl; 29 width: 17px; 30 height: 40px; } 31 .offset { margin-top: 10px; 32 margin-bottom: 3px; } 33 34 .lime { background: lime; } 35 .yellow { background: yellow; } 36 .orange { background: orange; } 37 .pink { background: pink; } 38 </style> 39 </head> 40 <body> 41 <div class="container base"> 42 <div class="lime ortho">ortho</div> 43 <div class="yellow">one line</div> 44 <div class="orange">two<br/>lines</div> 45 <div class="pink offset">offset</div> 46 </div> 47 <div class="container lastbase"> 48 <div class="lime ortho">ortho</div> 49 <div class="yellow">one line</div> 50 <div class="orange">two<br/>lines</div> 51 <div class="pink offset">offset</div> 52 </div> 53 </body> 54 </html>