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