<!DOCTYPE html>
<html>
<head>
<style>
.red {
    background-color: red;
}
.green {
    background-color: green;
}
</style>
</head>
<body>
<p>This test passes if there is no red showing.</p>

<div class="container" style="width: 100px">
    <div id="test1" class="red" style="padding-left: 50px" data-expected-width="100">
        <div class="green" style="height: 20px" data-expected-width="100"></div>
    </div>
</div>

<div class="container" style="-webkit-writing-mode: vertical-rl; height: 100px">
    <div id="test2" class="red" style="padding-top: 50px" data-expected-height="100">
        <div class="green" style="width: 20px" data-expected-height="100"></div>
    </div>
</div>

<div class="container" style="width: 100px; -webkit-writing-mode: horizontal-bt;">
    <div id="test3" class="red" style="border-left: 50px solid red" data-expected-width="100">
        <div class="green" style="height: 20px" data-expected-width="100"></div>
    </div>
</div>

<div class="container" style="-webkit-writing-mode: vertical-lr; height: 100px">
    <div id="test4" class="red" style="border-top: 50px solid red" data-expected-height="100">
        <div class="green" style="width: 20px" data-expected-height="100"></div>
    </div>
</div>

<script src="../../resources/check-layout.js"></script>
<script>
document.body.offsetLeft;
document.getElementById("test1").style.paddingLeft = "0";
document.getElementById("test2").style.paddingTop = "0";
document.getElementById("test3").style.borderWidth = "0";
document.getElementById("test4").style.borderWidth = "0";
checkLayout(".container");
</script>
</body>
</html>
