Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-flexbox/flexbox-align-self-baseline-horiz-008.xhtml - WPT Dashboard Interop Dashboard
<?xml version="1.0" encoding="UTF-8"?>
<!--
Any copyright is dedicated to the Public Domain.
-->
<!-- Testcase for behavior of 'baseline' and 'last baseline' values
for align-items (and align-self, implicitly) for sideways
writing modes. This test confirms non-interference between the
'baseline' and 'last baseline' items.
-->
<head>
<title>CSS Test: Baseline alignment of block flex items with 'baseline' and 'last-baseline' values for 'align-self' against each other.</title>
<link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/>
<link rel="match" href="flexbox-align-self-baseline-horiz-008-ref.xhtml"/>
<style>
.container {
float: left;
display: flex;
writing-mode: sideways-rl;
border: 1px dashed blue;
font: 14px sans-serif;
width: 80px;
}
.reverse { flex-flow: row wrap-reverse; }
.base { align-self: baseline; }
.lastbase { align-self: last baseline; }
.offset { margin-right: 10px;
margin-left: 3px; }
.lime { background: lime; }
.yellow { background: yellow; }
.orange { background: orange; }
.pink { background: pink; }
</style>
</head>
<body>
<div class="container">
<div class="lime base">one line (first)</div>
<div class="yellow lastbase">one line (last)</div>
<div class="orange offset lastbase">two<br/>lines and offset (last)</div>
<div class="pink offset base">offset (first)</div>
</div>
<div class="container reverse">
<div class="lime base">one line (first)</div>
<div class="yellow lastbase">one line (last)</div>
<div class="orange offset lastbase">two<br/>lines and offset (last)</div>
<div class="pink offset base">offset (first)</div>
</div>
</body>
</html>