| <!DOCTYPE html> |
| <style> |
| .grid { |
| display: grid; |
| grid-template-columns: 50px; |
| grid-template-rows: 50px; |
| height: 50px; |
| width: 50px; |
| margin: 50px; |
| } |
| |
| .item { |
| font: 50px/1 Ahem; |
| } |
| |
| .overflowVisible { |
| overflow: visible; |
| } |
| |
| .overflowHidden { |
| overflow: hidden; |
| } |
| |
| .overflowScroll { |
| overflow: scroll; |
| } |
| |
| .overflowAuto { |
| overflow: auto; |
| } |
| </style> |
| |
| <p>This test checks that min-width|height auto behavior for grid items only applies if overflow is visible.</p> |
| <p>The test passes if you see three 50x50 squares and one 100x100 square.</p> |
| |
| <div class="grid"> |
| <div class="item overflowHidden">XX<br>XX</div> |
| </div> |
| |
| <div class="grid"> |
| <div class="item overflowScroll">XX<br>XX</div> |
| </div> |
| |
| <div class="grid"> |
| <div class="item overflowAuto">XX<br>XX</div> |
| </div> |
| |
| <div class="grid"> |
| <div class="item overflowVisible">XX<br>XX</div> |
| </div> |
