baseline-vertical.html | Explore in Territory

<!DOCTYPE html>
<style>
body { margin: 0px; }
.float {
    float: left;
    margin-left: 5px;
}
.container {
   background: grey;
   text-orientation: sideways;
}
.container :nth-child(1) { font-size:12px; }
.container :nth-child(2) { font-size:20px; }
.container :nth-child(3) { font-size:30px; }
.container :nth-child(4) { font-size:40px; }
.item {
   display: inline-block;
   border-width: 2px 5px 3px 4px;
   border-style: solid;
   padding: 6px 3px 7px 8px;
   margin: 10px 6px 4px 12px;
}
.width175 { width: 175px; }
.width125 { width: 125px; }
.extraLeftPadding { padding-left: 30px; }
.extraRightPadding { padding-right: 30px; }
.verticalLR { writing-mode: vertical-lr; }
.verticalRL { writing-mode: vertical-rl; }
.directionRTL { direction: rtl; }
</style>

<div class="float">
    <p>VerticalLR and LTR</p>
    <div class="container width125 verticalLR">
        <div class="item">A</div><div class="item">A</div><div class="item">A</div><div class="item">A</div>
    </div>
</div>
<div class="float">
    <p>VerticalLR and RTL<br></p>
    <div class="container width125 verticalLR directionRTL">
        <div class="item">A</div><div class="item">A</div><div class="item">A</div><div class="item">A</div>
    </div>
</div>
<div class="float">
    <p>VerticalLR and LTR</p>
      <div class="container width175 verticalLR">
        <div class="item extraLeftPadding">A</div><div class="item">A</div><div class="item extraRightPadding">A</div><div class="item">A</div>
    </div>
</div>
<div class="float">
    <p>VerticalLR and RTL</p>
    <div class="container width175 verticalLR directionRTL">
        <div class="item extraLeftPadding">A</div><div class="item">A</div><div class="item extraRightPadding">A</div><div class="item">A</div>
    </div>
</div>

<br clear="all">

<div class="float">
    <p>VerticalRL and LTR</p>
    <div class="container width125 verticalRL">
        <div class="item">A</div><div class="item">A</div><div class="item">A</div><div class="item">A</div>
    </div>
</div>
<div class="float">
    <p>VerticalRL and RTL</p>
    <div class="container width125 verticalRL directionRTL">
        <div class="item">A</div><div class="item">A</div><div class="item">A</div><div class="item">A</div>
    </div>
</div>
<div class="float">
    <p>VerticalRL and LTR</p>
    <div class="container width175 verticalRL">
        <div class="item extraLeftPadding">A</div><div class="item">A</div><div class="item extraRightPadding">A</div><div class="item">A</div>
    </div>
</div>
<div class="float">
    <p>VerticalRL and RTL</p>
    <div class="container width175 verticalRL directionRTL">
        <div class="item extraLeftPadding">A</div><div class="item">A</div><div class="item extraRightPadding">A</div><div class="item">A</div>
    </div>
</div>
chromium/third_party/blink/web_tests/fast/inline-block/baseline-vertical.html
