flexbox-align-self-baseline-horiz-006-ref.xhtml (2343B)
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 the 'baseline' value for align-items and 7 align-self when tested against content with an orthogonal writing-mode. 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 .containerEndAlign { 16 border: 1px dashed blue; 17 font: 14px sans-serif; 18 height: 50px; 19 } 20 21 .container > div, 22 .wrapper > div{ 23 display: inline-block; 24 } 25 26 .containerEndAlign { 27 display: flex; 28 align-items: end; 29 } 30 .wrapper { 31 /* This accounts for the 'margin-bottom: 3px' on the 'offset' element 32 in the last-baseline-aligned part of the testcase: */ 33 margin-bottom: 3px; 34 } 35 36 .ortho { 37 writing-mode: vertical-rl; 38 width: 17px; 39 height: 40px; 40 } 41 42 .lime { background: lime; } 43 .yellow { background: yellow; } 44 .orange { background: orange; } 45 .pink { background: pink; } 46 </style> 47 </head> 48 <body> 49 <div class="container"> 50 <div class="lime ortho">ortho</div 51 ><div class="yellow">one line</div 52 ><div class="orange" style="display: inline-flex;">two<br/>lines</div 53 ><div class="pink">offset</div> 54 </div> 55 56 <!-- Note: in the testcase, there's a flex container here, whose flex items 57 are 'last baseline'-aligned and collectively snapped to the end 58 (bottom) edge. To mock that up, we use a simple flex container with a 59 single end-aligned 'display:block' flex item; and that item has 60 inline-block children, which are mockups of the testcase's flex items. 61 (These inline-blocks get automatically 'last-baseline' aligned to each 62 other, as part of regular inline-block layout behavior.) --> 63 <div class="containerEndAlign"> 64 <div class="wrapper"> 65 <div class="lime ortho">ortho</div 66 ><div class="yellow">one line</div 67 ><div class="orange">two<br/>lines</div 68 ><div class="pink">offset</div> 69 </div> 70 </div> 71 </body> 72 </html>