| <!DOCTYPE html> |
| |
| <style> |
| html { line-height: 1; font-size: 18px; } |
| #relpos { position: relative; top: 1px; } |
| .flex { flex: 1; } |
| .flex { min-height: 0; } |
| .layout, .layout-column, .layout-row { display: flex; } |
| .layout-column { flex-direction: column; } |
| </style> |
| |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script src="../../resources/check-layout-th.js"></script> |
| |
| <script> |
| function update() { |
| document.body.offsetHeight; |
| document.getElementById("relpos").innerText = " "; |
| checkLayout("#container"); |
| } |
| </script> |
| |
| <body onload="update();"> |
| <p>XXX and YYY should be on separate lines and not overlap, i.e. the height of |
| .flex should not be 0.</p> |
| <div class="layout-column" id="container"> |
| <div class="layout-row"> |
| <div class="layout-column"> |
| <div class="flex" data-expected-height="18">XXX<span id="relpos"></span></div> |
| <div>YYY</div> |
| </div> |
| </div> |
| </div> |
