<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')">

<script>
document.write("<div>compatMode: " + document.compatMode + "</div>");
</script>

<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">
    <div style="width: 150px;" data-expected-height=100 data-expected-width=150>
        <div data-expected-height=100 data-expected-width=150>
            <div class="item" style="width: 100%; height: 100%;" data-expected-height=100 data-expected-width=150></div>
        </div>
    </div>
</div>

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

<div class="container" style="width: auto; height: auto; float: left;">
    <div class="item" style="width: 100%; height: 100%;" data-expected-height=584 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>

</body>