51 lines
1.6 KiB
HTML
51 lines
1.6 KiB
HTML
<!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>
|