perpendicular-writing-modes-inside-flex-item.html

<!DOCTYPE html>
<style>
.flexbox {
    display: flex;
    flex-direction: column;
    height: 300px;
    width: 200px;
    padding: 3px;
    border: 4px solid black;
}
.flexitem {
    flex: 1;
    padding: 3px;
    border: 4px solid cyan;
    min-height: 0;
}
.vertical {
    position: relative;
    writing-mode: vertical-lr;
    padding: 3px;
    border: 4px solid blue;
}
.inlineContent {
    display: inline-block;
    height: 200px;
    width: 20px;
    background-color: salmon;
}
</style>

<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/check-layout-th.js"></script>

<body onload="checkLayout('.flexbox')">
<div id=log></div>
    <div class="flexbox">
        <div class="flexitem" data-expected-width=200 data-expected-height=300>
            <div class="vertical" data-expected-height=286>
                <div class="inlineContent" data-expected-y=3 data-expected-x=3></div>
                <div class="inlineContent" data-expected-y=3></div>
            </div>
        </div>
    </div>
</body>

chromium/third_party/blink/web_tests/css3/flexbox/perpendicular-writing-modes-inside-flex-item.html