Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-grid/grid-definition/grid-auto-explicit-rows-001.html - WPT Dashboard Interop Dashboard
<!doctype html>
<title>grid-auto applies to explicit rows</title>
<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>