| <!DOCTYPE html> |
| <html> |
| <head> |
| <link href="resources/grid.css" rel="stylesheet"> |
| <style> |
| .grid { |
| width: 100px; |
| height: 100px; |
| grid-template-columns: 20% 50% 30%; |
| grid-template-rows: 40% 60%; |
| } |
| |
| .scroll { |
| width: 115px; |
| height: 115px; |
| overflow: scroll; |
| } |
| |
| </style> |
| <script src="../../resources/check-layout.js"></script> |
| </head> |
| <body onload="checkLayout('.grid');"> |
| <p>This test checks that percentage tracks reduce the grid's scrollbars if any in order to calculate their breadths.</p> |
| |
| <div class="grid"> |
| <div data-expected-width="20" data-expected-height="40"></div> |
| <div data-expected-width="50" data-expected-height="40"></div> |
| <div data-expected-width="30" data-expected-height="40"></div> |
| <div data-expected-width="20" data-expected-height="60"></div> |
| <div data-expected-width="50" data-expected-height="60"></div> |
| <div data-expected-width="30" data-expected-height="60"></div> |
| </div> |
| |
| <div class="grid scroll"> |
| <div data-expected-width="20" data-expected-height="40"></div> |
| <div data-expected-width="50" data-expected-height="40"></div> |
| <div data-expected-width="30" data-expected-height="40"></div> |
| <div data-expected-width="20" data-expected-height="60"></div> |
| <div data-expected-width="50" data-expected-height="60"></div> |
| <div data-expected-width="30" data-expected-height="60"></div> |
| </div> |
| |
| </body> |
| </html> |
