| <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> |
