percentage-height-orthogonal-writing-modes.html

<!DOCTYPE html>
<script src="../../resources/check-layout.js"></script>
<style>
html {
    height: 600px;
}
.container {
    width: 200px;
    height: 100px;
    outline: 10px solid salmon;
}
.item {
    background-color: orange;
}
.vertical-rl {
    -webkit-writing-mode: vertical-rl;
}
</style>

<body onload="checkLayout('.container')">

<div class="container">
    <div class="item" style="width: 100%; height: 100%;" data-expected-height=100 data-expected-width=200></div>
</div>

<div class="container">
    <div class="item vertical-rl" style="width: 100%; height: 100%;" data-expected-height=100 data-expected-width=200></div>
</div>

<div class="container" style="border-style: dashed; border-width: 1px 2px; padding: 3px 4px;">
    <div class="item" style="width: 100%; height: 100%; border-style: solid; border-width: 1px 2px; padding: 3px 4px;" data-expected-height=108 data-expected-width=212></div>
</div>

<div class="container" style="border-style: dashed; border-width: 1px 2px; padding: 3px 4px;">
    <div class="item vertical-rl" style="width: 100%; height: 100%; border-style: solid; border-width: 1px 2px; padding: 3px 4px;" data-expected-height=108 data-expected-width=212></div>
</div>

<div class="container">
    <div style="width: 100%; height: 100%;" data-expected-height=100 data-expected-width=200>
        <div class="item" style="width: 100%; height: 100%;" data-expected-height=100 data-expected-width=200></div>
    </div>
</div>

<div class="container">
    <div style="width: 100%; height: 100%;" data-expected-height=100 data-expected-width=200>
        <div class="item vertical-rl" style="width: 100%; height: 100%;" data-expected-height=100 data-expected-width=200></div>
    </div>
</div>

<div class="container" style="width: auto; height: auto; float: left;">
    <div class="item" style="width: 100%; height: 100%;" data-expected-height=0 data-expected-width=0></div>
</div>

<div class="container" style="width: auto; height: auto; float: left;">
    <div class="item vertical-rl" style="width: 100%; height: 100%;" data-expected-height=584 data-expected-width=0></div>
</div>

<div class="container vertical-rl" style="position: absolute; left: 0px; right: 0px; width: auto">
    <div class="item vertical-rl" style="width: 100%" data-expected-height=100></div>
</div>

</body>
chromium/third_party/blink/web_tests/fast/writing-mode/percentage-height-orthogonal-writing-modes.html
