79 lines
2.8 KiB
HTML
79 lines
2.8 KiB
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')">
|
|
|
|
<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>
|