| <?xml version="1.0" encoding="UTF-8"?> |
| <!-- |
| Any copyright is dedicated to the Public Domain. |
| http://creativecommons.org/publicdomain/zero/1.0/ |
| --> |
| <!-- Reference case for behavior of the 'baseline' value for align-items and |
| align-self when tested against content with an orthogonal writing-mode. |
| --> |
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head> |
| <title>CSS Reftest Reference</title> |
| <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/> |
| <style> |
| .container, |
| .containerEndAlign { |
| border: 1px dashed blue; |
| font: 14px sans-serif; |
| height: 50px; |
| } |
| |
| .container > div, |
| .wrapper > div{ |
| display: inline-block; |
| } |
| |
| .containerEndAlign { |
| display: flex; |
| align-items: end; |
| } |
| .wrapper { |
| /* This accounts for the 'margin-bottom: 3px' on the 'offset' element |
| in the last-baseline-aligned part of the testcase: */ |
| margin-bottom: 3px; |
| } |
| |
| .ortho { |
| writing-mode: vertical-rl; |
| width: 17px; |
| height: 40px; |
| } |
| |
| .lime { background: lime; } |
| .yellow { background: yellow; } |
| .orange { background: orange; } |
| .pink { background: pink; } |
| </style> |
| </head> |
| <body> |
| <div class="container"> |
| <div class="lime ortho">ortho</div |
| ><div class="yellow">one line</div |
| ><div class="orange" style="display: inline-flex;">two<br/>lines</div |
| ><div class="pink">offset</div> |
| </div> |
| |
| <!-- Note: in the testcase, there's a flex container here, whose flex items |
| are 'last baseline'-aligned and collectively snapped to the end |
| (bottom) edge. To mock that up, we use a simple flex container with a |
| single end-aligned 'display:block' flex item; and that item has |
| inline-block children, which are mockups of the testcase's flex items. |
| (These inline-blocks get automatically 'last-baseline' aligned to each |
| other, as part of regular inline-block layout behavior.) --> |
| <div class="containerEndAlign"> |
| <div class="wrapper"> |
| <div class="lime ortho">ortho</div |
| ><div class="yellow">one line</div |
| ><div class="orange">two<br/>lines</div |
| ><div class="pink">offset</div> |
| </div> |
| </div> |
| </body> |
| </html> |
