| <!doctype html> |
| <title>grid-auto applies to explicit rows</title> |
| |
| <link rel=author title="Tab Atkins-Bittner" href="https://www.xanthir.com/contact/"> |
| <link rel=help href="https://www.w3.org/TR/css-grid-1/#implicit-grids"> |
| <meta name=assert content="grid-auto-rows/columns should dictate the size of all rows past grid-template-rows/columns, even if they are part of the explicit grid as established by grid-template-areas; they're not just limited to implicit tracks."> |
| |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/resources/check-layout-th.js"></script> |
| <style> |
| .grid { |
| display: grid; |
| grid-template-areas: "a b c" "d e f" "g e h"; |
| grid-template-rows: 11px 13px; |
| grid-auto-rows: 17px 19px; |
| grid-template-columns: 23px 29px; |
| grid-auto-columns: 31px 37px; |
| } |
| |
| .grid > div { |
| background: rgba(0, 0, 0, .2); |
| } |
| #c1 { grid-area: 1 / 1 / 2 / 2; } |
| #c2 { grid-area: 1 / 1 / 3 / 3; } |
| #c3 { grid-area: 1 / 1 / 4 / 4; } |
| #c4 { grid-area: 1 / 1 / 5 / 5; } |
| </style> |
| |
| <div class=grid> |
| <div id=c1 data-expected-width=23 data-expected-height=11></div> |
| <div id=c2 data-expected-width=52 data-expected-height=24></div> |
| <div id=c3 data-expected-width=83 data-expected-height=41></div> |
| <div id=c4 data-expected-width=120 data-expected-height=60></div> |
| </div> |
| |
| <script> |
| checkLayout('.grid'); |
| </script> |
