| <!DOCTYPE html> |
| <link href="resources/grid.css" rel="stylesheet"> |
| <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet"> |
| <style> |
| body { |
| margin: 0; |
| } |
| .container { |
| width: 100px; |
| } |
| .grid { |
| border: 5px solid; |
| grid-template-rows: 50px; |
| font: 25px/1 Ahem; |
| } |
| .i1 { |
| color: magenta; |
| background: cyan; |
| writing-mode: vertical-lr; |
| } |
| .i2 { |
| color: red; |
| background: blue; |
| grid-column: 2; |
| } |
| </style> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script src="../../resources/check-layout-th.js"></script> |
| <script> |
| function runTest() { |
| document.body.offsetLeft; |
| document.body.offsetLeft; |
| checkLayout('.grid'); |
| } |
| </script> |
| <body onload="runTest();"> |
| <p>Regresison test for bug 628565 - Ensure that we get the same sizing results when doing several layouts.</p> |
| <div class="grid fit-content" data-expected-width="135" data-expected-height="60"> |
| <div class="i1" data-expected-width="50" data-expected-height="50">XX X</div> |
| <div class="i2" data-expected-width="75" data-expected-height="50">XX X</div> |
| </div> |
| <br> |
| <div class="grid min-content" data-expected-width="85" data-expected-height="60"> |
| <div class="i1" data-expected-width="50" data-expected-height="50">XX X</div> |
| <div class="i2" data-expected-width="50" data-expected-height="50">XX X</div> |
| </div> |
| <br> |
| <div class="grid max-content" data-expected-width="135" data-expected-height="60"> |
| <div class="i1" data-expected-width="50" data-expected-height="50">XX X</div> |
| <div class="i2" data-expected-width="75" data-expected-height="50">XX X</div> |
| </div> |
| </body |
