| <!DOCTYPE html> |
| <html> |
| <head> |
| <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet"> |
| <link href="../css-intrinsic-dimensions/resources/height-keyword-classes.css" rel="stylesheet"> |
| <link href="resources/grid.css" rel="stylesheet"> |
| <style> |
| .margin { |
| margin: 10px; |
| } |
| |
| .border { |
| border: 5px solid black; |
| } |
| |
| .padding { |
| padding: 20px; |
| } |
| |
| .scroll { |
| overflow: scroll; |
| } |
| |
| .item { |
| width: 100px; |
| height: 100px; |
| background: lime; |
| } |
| </style> |
| <script src="../../resources/check-layout.js"></script> |
| </head> |
| <body onload="checkLayout('.grid');"> |
| <p>This test checks that grid container size includes border, padding and scrollbar; ignoring margin as expected.</p> |
| |
| <div class="grid min-content" data-expected-width="100" data-expected-height="100"> |
| <div class="item" data-expected-width="100" data-expected-height="100"></div> |
| </div> |
| |
| <div class="grid min-content margin" data-expected-width="100" data-expected-height="100"> |
| <div class="item" data-expected-width="100" data-expected-height="100"></div> |
| </div> |
| |
| <div class="grid min-content border" data-expected-width="110" data-expected-height="110"> |
| <div class="item" data-expected-width="100" data-expected-height="100"></div> |
| </div> |
| |
| <div class="grid min-content padding" data-expected-width="140" data-expected-height="140"> |
| <div class="item" data-expected-width="100" data-expected-height="100"></div> |
| </div> |
| |
| <div class="grid min-content scroll" data-expected-width="115" data-expected-height="115"> |
| <div class="item" data-expected-width="100" data-expected-height="100"></div> |
| </div> |
| |
| <div class="grid min-content margin border" data-expected-width="110" data-expected-height="110"> |
| <div class="item" data-expected-width="100" data-expected-height="100"></div> |
| </div> |
| |
| <div class="grid min-content margin padding" data-expected-width="140" data-expected-height="140"> |
| <div class="item" data-expected-width="100" data-expected-height="100"></div> |
| </div> |
| |
| <div class="grid min-content margin scroll" data-expected-width="115" data-expected-height="115"> |
| <div class="item" data-expected-width="100" data-expected-height="100"></div> |
| </div> |
| |
| <div class="grid min-content border padding" data-expected-width="150" data-expected-height="150"> |
| <div class="item" data-expected-width="100" data-expected-height="100"></div> |
| </div> |
| |
| <div class="grid min-content border scroll" data-expected-width="125" data-expected-height="125"> |
| <div class="item" data-expected-width="100" data-expected-height="100"></div> |
| </div> |
| |
| <div class="grid min-content padding scroll" data-expected-width="155" data-expected-height="155"> |
| <div class="item" data-expected-width="100" data-expected-height="100"></div> |
| </div> |
| |
| <div class="grid min-content margin border padding" data-expected-width="150" data-expected-height="150"> |
| <div class="item" data-expected-width="100" data-expected-height="100"></div> |
| </div> |
| |
| <div class="grid min-content margin border scroll" data-expected-width="125" data-expected-height="125"> |
| <div class="item" data-expected-width="100" data-expected-height="100"></div> |
| </div> |
| |
| <div class="grid min-content margin padding scroll" data-expected-width="155" data-expected-height="155"> |
| <div class="item" data-expected-width="100" data-expected-height="100"></div> |
| </div> |
| |
| <div class="grid min-content border padding scroll" data-expected-width="165" data-expected-height="165"> |
| <div class="item" data-expected-width="100" data-expected-height="100"></div> |
| </div> |
| |
| <div class="grid min-content margin border padding scroll" data-expected-width="165" data-expected-height="165"> |
| <div class="item" data-expected-width="100" data-expected-height="100"></div> |
| </div> |
| |
| </body> |
| </html> |
