| <!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%; |
| } |
| |
| .margin { |
| margin: 10px; |
| } |
| |
| .border { |
| border: 5px solid black; |
| } |
| |
| .padding { |
| padding: 20px; |
| } |
| </style> |
| <script src="../../resources/check-layout.js"></script> |
| </head> |
| <body onload="checkLayout('.grid');"> |
| <p>This test checks that percentage tracks ignore grid container's margin, border and padding 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 margin"> |
| <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 border"> |
| <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 padding"> |
| <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 margin border"> |
| <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 margin padding"> |
| <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 border padding"> |
| <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 margin border padding"> |
| <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> |
