Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 4 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-grid/subgrid/subgrid-baseline-018.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Test: nested subgrid baseline with a subgridded axis between standalone subgrids keeps items in place</title>
<link rel="author" title="Yanling Wang" href="mailto:yanlingwang@microsoft.com">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<!--
DOM nesting (class name -> baseline-axis role):
.grid (root)
-> .subgrid (standalone axis)
-> .subgrid-axis (subgridded axis)
-> .subgrid (standalone axis)
-> .inner-grid (standalone axis)
-> .inner-subgrid (subgridded axis)
-->
<style>
body { margin: 0; padding: 0; font: 15px/1 Ahem; }
.grid {
display: inline-grid;
grid-template-columns: repeat(2, auto);
grid-template-rows:
[top-start] min-content
[top-end middle-start] min-content
[middle-end bottom-start] min-content
[bottom-end];
}
.subgrid {
align-items: baseline;
display: grid;
grid-template-columns: subgrid;
grid-column: 1 / -1;
grid-row: middle;
grid-template-rows:
[top-start] min-content
[top-end middle-start] min-content
[middle-end bottom-start] min-content
[bottom-end];
}
.subgrid-axis {
display: grid;
grid-template-columns: subgrid;
grid-template-rows: subgrid;
grid-column: 1 / -1;
grid-row: 1 / -1;
}
.inner-grid {
display: grid;
grid-template-columns: subgrid;
grid-column: 1 / -1;
grid-template-rows: minmax(2rem, auto) auto;
}
.inner-subgrid {
display: grid;
align-items: baseline;
grid-template-rows: subgrid;
grid-template-columns: repeat(3, auto);
grid-row: 1 / -1;
}
.big { font-size: 30px; }
.mid { font-size: 20px; }
.small { font-size: 10px; }
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.item')">
<div class="grid">
<div class="subgrid">
<div class="subgrid-axis">
<div class="subgrid">
<div class="inner-grid">
<div class="inner-subgrid">
<div class="item big" data-offset-x="0" data-offset-y="0">A</div>
<div class="item mid" data-offset-x="30" data-offset-y="8">B</div>
<div class="item small" data-offset-x="50" data-offset-y="16">C</div>
</div>
<div class="inner-subgrid">
<div class="item" data-offset-x="60" data-offset-y="12">d</div>
<div class="item big" data-offset-x="75" data-offset-y="0">E</div>
<div class="item mid" data-offset-x="105" data-offset-y="8">F</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>