| <!DOCTYPE html> |
| <link href="resources/grid.css" rel="stylesheet"> |
| <style> |
| |
| .wrapper { |
| position: relative; |
| width: 100px; |
| height: 100px; |
| margin: 10px; |
| } |
| |
| .grid { |
| position: absolute; |
| font: 10px/1 Ahem; |
| } |
| |
| .grid > div { |
| min-width: 0px; |
| } |
| |
| .topBottomLeftRight { |
| top: 0; |
| bottom: 0; |
| left: 0; |
| right: 0; |
| } |
| |
| .oneRowOneColumn { |
| grid-template-rows: 100%; |
| grid-template-columns: 100%; |
| } |
| |
| .twoRowsTwoColumns { |
| grid-template-rows: 25% 75%; |
| grid-template-columns: 60% 40%; |
| } |
| |
| </style> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script src="../../resources/check-layout-th.js"></script> |
| <body onload="checkLayout('.grid')"> |
| <div id="log"></div> |
| |
| <p>This test checks that percentage tracks are properly resolved for absolute positioned grid containers.</p> |
| |
| |
| <div class="wrapper"> |
| <div class="grid oneRowOneColumn"> |
| <div class="firstRowFirstColumn" |
| data-offset-x="0" data-offset-y="0" data-expected-width="30" data-expected-height="10"> |
| XXX |
| </div> |
| </div> |
| </div> |
| |
| <div class="wrapper"> |
| <div class="grid oneRowOneColumn topBottomLeftRight"> |
| <div class="firstRowFirstColumn" |
| data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100"> |
| XXX |
| </div> |
| </div> |
| </div> |
| |
| <div class="wrapper"> |
| <div class="grid twoRowsTwoColumns"> |
| <div class="firstRowFirstColumn" |
| data-offset-x="0" data-offset-y="0" data-expected-width="36" data-expected-height="10"> |
| XXX |
| </div> |
| <div class="firstRowSecondColumn" |
| data-offset-x="36" data-offset-y="0" data-expected-width="24" data-expected-height="10"> |
| XXX |
| </div> |
| <div class="secondRowFirstColumn" |
| data-offset-x="0" data-offset-y="10" data-expected-width="36" data-expected-height="10"> |
| XXX |
| </div> |
| <div class="secondRowSecondColumn" |
| data-offset-x="36" data-offset-y="10" data-expected-width="24" data-expected-height="10"> |
| XXX |
| </div> |
| </div> |
| </div> |
| |
| <div class="wrapper"> |
| <div class="grid twoRowsTwoColumns topBottomLeftRight"> |
| <div class="firstRowFirstColumn" |
| data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="25"> |
| XXX |
| </div> |
| <div class="firstRowSecondColumn" |
| data-offset-x="60" data-offset-y="0" data-expected-width="40" data-expected-height="25"> |
| XXX |
| </div> |
| <div class="secondRowFirstColumn" |
| data-offset-x="0" data-offset-y="25" data-expected-width="60" data-expected-height="75"> |
| XXX |
| </div> |
| <div class="secondRowSecondColumn" |
| data-offset-x="60" data-offset-y="25" data-expected-width="40" data-expected-height="75"> |
| XXX |
| </div> |
| </div> |
| </div> |
| |
| </body> |
