63 lines
2.3 KiB
HTML
63 lines
2.3 KiB
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>
|