| <!DOCTYPE html> |
| |
| <style> |
| @import "resources/width-keyword-classes.css"; |
| @import "resources/intrinsic-size-contribution.css"; |
| |
| .fixed { |
| width: 50px; |
| } |
| |
| .percent { |
| width: 50%; |
| } |
| </style> |
| |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script src="../../resources/check-layout-th.js"></script> |
| |
| <body onload="checkLayout('.container')"> |
| <div id=log></div> |
| |
| <!-- min-content contribution of fixed sizes --> |
| <div class="container min-content" data-expected-width="60" data-expected-height="40" data-expected-client-width="50" data-expected-client-height="30"> |
| <div class="item fixed" data-expected-width="50" data-expected-height="30"></div> |
| </div> |
| |
| <div class="container min-content" data-expected-width="70" data-expected-height="50" data-expected-client-width="60" data-expected-client-height="40"> |
| <div class="item fixed border" data-expected-width="60" data-expected-height="40" data-expected-client-width="50" data-expected-client-height="30"></div> |
| </div> |
| |
| <div class="container min-content" data-expected-width="80" data-expected-height="60" data-expected-client-width="70" data-expected-client-height="50"> |
| <div class="item fixed padding" data-expected-width="70" data-expected-height="50" data-expected-client-width="70" data-expected-client-height="50"></div> |
| </div> |
| |
| <div class="container min-content" data-expected-width="100" data-expected-height="80" data-expected-client-width="90" data-expected-client-height="70"> |
| <div class="item fixed margin" data-expected-width="50" data-expected-height="30" data-expected-client-width="50" data-expected-client-height="30"></div> |
| </div> |
| |
| <div class="container min-content" data-expected-width="90" data-expected-height="70" data-expected-client-width="80" data-expected-client-height="60"> |
| <div class="item fixed border padding" data-expected-width="80" data-expected-height="60" data-expected-client-width="70" data-expected-client-height="50"></div> |
| </div> |
| |
| <div class="container min-content" data-expected-width="110" data-expected-height="90" data-expected-client-width="100" data-expected-client-height="80"> |
| <div class="item fixed border margin" data-expected-width="60" data-expected-height="40" data-expected-client-width="50" data-expected-client-height="30"></div> |
| </div> |
| |
| <div class="container min-content" data-expected-width="130" data-expected-height="110" data-expected-client-width="120" data-expected-client-height="100"> |
| <div class="item fixed border padding margin" data-expected-width="80" data-expected-height="60" data-expected-client-width="70" data-expected-client-height="50"></div> |
| </div> |
| |
| <!-- min-content contribution of definite percentages --> |
| <div class="container min-content" data-expected-width="60" data-expected-height="40" data-expected-client-width="50" data-expected-client-height="30"> |
| <div style="width: 50px;"> |
| <div class="item percent" data-expected-width="25" data-expected-height="30"></div> |
| </div> |
| </div> |
| |
| <div class="container min-content" data-expected-width="70" data-expected-height="50" data-expected-client-width="60" data-expected-client-height="40"> |
| <div style="width: 60px;"> |
| <div class="item percent border" data-expected-width="40" data-expected-height="40" data-expected-client-width="30" data-expected-client-height="30"></div> |
| </div> |
| </div> |
| |
| <div class="container min-content" data-expected-width="80" data-expected-height="60" data-expected-client-width="70" data-expected-client-height="50"> |
| <div style="width: 70px;"> |
| <div class="item percent padding" data-expected-width="55" data-expected-height="50" data-expected-client-width="55" data-expected-client-height="50"></div> |
| </div> |
| </div> |
| |
| <div class="container min-content" data-expected-width="100" data-expected-height="80" data-expected-client-width="90" data-expected-client-height="70"> |
| <div style="width: 90px;"> |
| <div class="item percent margin" data-expected-width="45" data-expected-height="30" data-expected-client-width="45" data-expected-client-height="30"></div> |
| </div> |
| </div> |
| |
| <div class="container min-content" data-expected-width="90" data-expected-height="70" data-expected-client-width="80" data-expected-client-height="60"> |
| <div style="width: 80px;"> |
| <div class="item percent border padding" data-expected-width="70" data-expected-height="60" data-expected-client-width="60" data-expected-client-height="50"></div> |
| </div> |
| </div> |
| |
| <div class="container min-content" data-expected-width="110" data-expected-height="90" data-expected-client-width="100" data-expected-client-height="80"> |
| <div style="width: 100px;"> |
| <div class="item percent border margin" data-expected-width="60" data-expected-height="40" data-expected-client-width="50" data-expected-client-height="30"></div> |
| </div> |
| </div> |
| |
| <div class="container min-content" data-expected-width="130" data-expected-height="110" data-expected-client-width="120" data-expected-client-height="100"> |
| <div style="width: 120px;"> |
| <div class="item percent border padding margin" data-expected-width="90" data-expected-height="60" data-expected-client-width="80" data-expected-client-height="50"></div> |
| </div> |
| </div> |
| |
| <!-- max-content contribution of fixed sizes --> |
| <div class="container max-content" data-expected-width="60" data-expected-height="40" data-expected-client-width="50" data-expected-client-height="30"> |
| <div class="item fixed" data-expected-width="50" data-expected-height="30"></div> |
| </div> |
| |
| <div class="container max-content" data-expected-width="70" data-expected-height="50" data-expected-client-width="60" data-expected-client-height="40"> |
| <div class="item fixed border" data-expected-width="60" data-expected-height="40" data-expected-client-width="50" data-expected-client-height="30"></div> |
| </div> |
| |
| <div class="container max-content" data-expected-width="80" data-expected-height="60" data-expected-client-width="70" data-expected-client-height="50"> |
| <div class="item fixed padding" data-expected-width="70" data-expected-height="50" data-expected-client-width="70" data-expected-client-height="50"></div> |
| </div> |
| |
| <div class="container max-content" data-expected-width="100" data-expected-height="80" data-expected-client-width="90" data-expected-client-height="70"> |
| <div class="item fixed margin" data-expected-width="50" data-expected-height="30" data-expected-client-width="50" data-expected-client-height="30"></div> |
| </div> |
| |
| <div class="container max-content" data-expected-width="90" data-expected-height="70" data-expected-client-width="80" data-expected-client-height="60"> |
| <div class="item fixed border padding" data-expected-width="80" data-expected-height="60" data-expected-client-width="70" data-expected-client-height="50"></div> |
| </div> |
| |
| <div class="container max-content" data-expected-width="110" data-expected-height="90" data-expected-client-width="100" data-expected-client-height="80"> |
| <div class="item fixed border margin" data-expected-width="60" data-expected-height="40" data-expected-client-width="50" data-expected-client-height="30"></div> |
| </div> |
| |
| <div class="container max-content" data-expected-width="130" data-expected-height="110" data-expected-client-width="120" data-expected-client-height="100"> |
| <div class="item fixed border padding margin" data-expected-width="80" data-expected-height="60" data-expected-client-width="70" data-expected-client-height="50"></div> |
| </div> |
| |
| <!-- max-content contribution of definite percentages --> |
| <div class="container max-content" data-expected-width="60" data-expected-height="40" data-expected-client-width="50" data-expected-client-height="30"> |
| <div style="width: 50px;"> |
| <div class="item percent" data-expected-width="25" data-expected-height="30"></div> |
| </div> |
| </div> |
| |
| <div class="container max-content" data-expected-width="70" data-expected-height="50" data-expected-client-width="60" data-expected-client-height="40"> |
| <div style="width: 60px;"> |
| <div class="item percent border" data-expected-width="40" data-expected-height="40" data-expected-client-width="30" data-expected-client-height="30"></div> |
| </div> |
| </div> |
| |
| <div class="container max-content" data-expected-width="80" data-expected-height="60" data-expected-client-width="70" data-expected-client-height="50"> |
| <div style="width: 70px;"> |
| <div class="item percent padding" data-expected-width="55" data-expected-height="50" data-expected-client-width="55" data-expected-client-height="50"></div> |
| </div> |
| </div> |
| |
| <div class="container max-content" data-expected-width="100" data-expected-height="80" data-expected-client-width="90" data-expected-client-height="70"> |
| <div style="width: 90px;"> |
| <div class="item percent margin" data-expected-width="45" data-expected-height="30" data-expected-client-width="45" data-expected-client-height="30"></div> |
| </div> |
| </div> |
| |
| <div class="container max-content" data-expected-width="90" data-expected-height="70" data-expected-client-width="80" data-expected-client-height="60"> |
| <div style="width: 80px;"> |
| <div class="item percent border padding" data-expected-width="70" data-expected-height="60" data-expected-client-width="60" data-expected-client-height="50"></div> |
| </div> |
| </div> |
| |
| <div class="container max-content" data-expected-width="110" data-expected-height="90" data-expected-client-width="100" data-expected-client-height="80"> |
| <div style="width: 100px;"> |
| <div class="item percent border margin" data-expected-width="60" data-expected-height="40" data-expected-client-width="50" data-expected-client-height="30"></div> |
| </div> |
| </div> |
| |
| <div class="container max-content" data-expected-width="130" data-expected-height="110" data-expected-client-width="120" data-expected-client-height="100"> |
| <div style="width: 120px;"> |
| <div class="item percent border padding margin" data-expected-width="90" data-expected-height="60" data-expected-client-width="80" data-expected-client-height="50"></div> |
| </div> |
| </div> |
| |
| </body> |