| <!DOCTYPE html> |
| |
| <style> |
| .columns { |
| display: flex; |
| width: 800px; |
| } |
| |
| .columns > div { |
| background: #aaa; |
| } |
| |
| .column1 { |
| width: 800px; |
| overflow: auto; |
| max-width: 150px; |
| } |
| |
| .column2 { |
| flex: 0.8 0 0; |
| } |
| |
| .red { |
| position: absolute; |
| width: 510px; |
| background: red !important; |
| height: 10px; |
| z-index: -1; |
| } |
| |
| .abspos { |
| position: absolute; |
| } |
| </style> |
| |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script src="../../resources/check-layout-th.js"></script> |
| |
| <body onload="checkLayout('.columns')"> |
| <div id=log></div> |
| |
| |
| <p>You should see no red</p> |
| |
| <div class="columns"> |
| <div class="red"></div> |
| <div class="column1" data-expected-width="150"> |
| Column 1 |
| </div> |
| <div class="column2" data-expected-width="520"> |
| Column 2 |
| </div> |
| </div> |
| |
| <p>This second part is just to ensure we don't assert</p> |
| |
| <div class="columns"> |
| <div class="column1 abspos" data-expected-width="150"> |
| Column 1 |
| </div> |
| <div class="column2" data-expected-width="640"> |
| Column 2 |
| </div> |
| </div> |
| |
