mirror of
https://github.com/servo/servo.git
synced 2025-06-27 18:43:40 +01:00
222 lines
10 KiB
HTML
222 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<title>CSS Grid: Grid container baseline</title>
|
|
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
|
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines">
|
|
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-order">
|
|
<link rel="help" href="https://crbug.com/234191">
|
|
<meta name="assert" content="Check that grid container must use its first item in grid-modified document order (grid order) to compute its baseline."/>
|
|
|
|
<link href="/css/support/grid.css" rel="stylesheet">
|
|
<link href="/css/support/alignment.css" rel="stylesheet">
|
|
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
|
<style>
|
|
body { margin: 0; }
|
|
.container {
|
|
position: relative;
|
|
font: 10px/1 Ahem;
|
|
border: 5px solid;
|
|
width: 470px;
|
|
}
|
|
.grid {
|
|
display: inline-grid;
|
|
grid-template-columns: 50px 50px;
|
|
width: 150px;
|
|
background-color: transparent;
|
|
position: relative;
|
|
}
|
|
.twoRows { grid-template-rows: 50px 50px; }
|
|
.threeRows { grid-template-rows: 50px 50px 50px; }
|
|
.empty {
|
|
border-color: black;
|
|
border-style: solid;
|
|
margin: 15px 0px 30px;
|
|
border-width: 5px 0px 10px;
|
|
padding: 10px 0px 20px;
|
|
}
|
|
.item {
|
|
height: 25px;
|
|
border-color: gray;
|
|
border-style: solid;
|
|
}
|
|
.grid.grid > * {
|
|
background: silver;
|
|
background: rgba(0,0,0,0.3);
|
|
}
|
|
.target.target {
|
|
background: blue;
|
|
border-color: navy;
|
|
}
|
|
.style1 {
|
|
border-width: 5px 0px 10px;
|
|
padding: 10px 0px 20px;
|
|
}
|
|
.style2 {
|
|
border-width: 10px 0px 5px;
|
|
padding: 20px 0px 10px;
|
|
margin-top: 10px;
|
|
}
|
|
.style3 {
|
|
border-width: 10px 0px 20px;
|
|
padding: 5px 0px 10px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.bothRowFirstColumn, .secondRowSecondColumn {
|
|
margin-right: 10px;
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
background-color: pink;
|
|
}
|
|
.firstRowBothColumn, .secondRowBothColumn {
|
|
margin-top: 15px;
|
|
margin-bottom: 15px;
|
|
background-color: green;
|
|
}
|
|
</style>
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="/resources/check-layout-th.js"></script>
|
|
<script type="text/javascript">
|
|
setup({ explicit_done: true });
|
|
</script>
|
|
<body onload="document.fonts.ready.then(() => { checkLayout('.grid, container'); })">
|
|
<div id="log"></div>
|
|
<p>
|
|
The test shows 3 grids each of them with 3 items sorted differently in the DOM.<br>
|
|
Each grid container must use its first (grid order) item to compute its baseline, and using document-oder in case of element with same grid-order. Hence they might be baseline aligned each other accordingly.
|
|
</p>
|
|
|
|
<p>
|
|
This case shows 3 items located along the first row and in different columns.
|
|
The grid baseline is computed using the one located at first column (blue item)
|
|
regardless of source order.
|
|
</p>
|
|
<div class="container" data-expected-width="480" data-expected-height="120">
|
|
<div class="grid" data-offset-x="0" data-offset-y="20">
|
|
<div class="item style1 firstRowFirstColumn target" data-offset-x="0" data-offset-y="0"></div>
|
|
<div class="item style2 firstRowSecondColumn" data-offset-x="50" data-offset-y="10"></div>
|
|
<div class="item style3 firstRowThirdColumn" data-offset-x="100" data-offset-y="20"></div>
|
|
</div>
|
|
<div class="grid" data-offset-x="160" data-offset-y="10">
|
|
<div class="item style1 firstRowThirdColumn" data-offset-x="100" data-offset-y="0"></div>
|
|
<div class="item style2 firstRowFirstColumn target" data-offset-x="0" data-offset-y="10"></div>
|
|
<div class="item style3 firstRowSecondColumn" data-offset-x="50" data-offset-y="20"></div>
|
|
</div>
|
|
<div class="grid" data-offset-x="320" data-offset-y="0">
|
|
<div class="item style1 firstRowSecondColumn" data-offset-x="50" data-offset-y="0"></div>
|
|
<div class="item style2 firstRowThirdColumn" data-offset-x="100" data-offset-y="10"></div>
|
|
<div class="item style3 firstRowFirstColumn target" data-offset-x="0" data-offset-y="20"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<p>
|
|
This case shows 3 items located along the first row and in different columns.
|
|
The baseline-aligned item (blue) always determines the grid baseline.
|
|
</p>
|
|
<div class="container" data-expected-width="480" data-expected-height="120">
|
|
<div class="grid" data-offset-x="0" data-offset-y="0">
|
|
<div class="item style1 firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
|
|
<div class="item style2 firstRowSecondColumn" data-offset-x="50" data-offset-y="10"></div>
|
|
<div class="item style3 firstRowThirdColumn alignSelfBaseline target" data-offset-x="100" data-offset-y="20"></div>
|
|
</div>
|
|
<div class="grid" data-offset-x="160" data-offset-y="0">
|
|
<div class="item style1 firstRowThirdColumn" data-offset-x="100" data-offset-y="0"></div>
|
|
<div class="item style2 firstRowFirstColumn" data-offset-x="0" data-offset-y="10"></div>
|
|
<div class="item style3 firstRowSecondColumn alignSelfBaseline target" data-offset-x="50" data-offset-y="20"></div>
|
|
</div>
|
|
<div class="grid" data-offset-x="320" data-offset-y="20">
|
|
<div class="item style1 firstRowSecondColumn alignSelfBaseline target" data-offset-x="50" data-offset-y="0"></div>
|
|
<div class="item style2 firstRowThirdColumn" data-offset-x="100" data-offset-y="10"></div>
|
|
<div class="item style3 firstRowFirstColumn" data-offset-x="0" data-offset-y="20"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<p>
|
|
This case shows 3 items' areas intersecting the first row and first column,
|
|
but none of them participate in baseline alignment in the first row,
|
|
so the dom order must be used to determine each grid's baseline.
|
|
</p>
|
|
<div class="container" data-expected-width="480" data-expected-height="165">
|
|
<div class="grid twoRows" data-offset-x="0" data-offset-y="40">
|
|
<div class="firstRowFirstColumn target" data-offset-x="0" data-offset-y="0"></div>
|
|
<div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></div>
|
|
<div class="bothRowFirstColumn style2" style="align-self: last baseline" data-offset-x="0"></div>
|
|
</div>
|
|
<div class="grid twoRows" data-offset-x="160" data-offset-y="0">
|
|
<div class="bothRowFirstColumn target" data-offset-x="0" data-offset-y="10"></div>
|
|
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
|
|
<div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></div>
|
|
</div>
|
|
<div class="grid twoRows" data-offset-x="320" data-offset-y="55">
|
|
<div class="firstRowBothColumn target" data-offset-x="0" data-offset-y="15"></div>
|
|
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
|
|
<div class="bothRowFirstColumn" data-offset-x="0" data-offset-y="10"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<p>
|
|
This case shows 3 items' areas intersecting the first row and first column,
|
|
but one of the items participates in baseline alignment in the first row,
|
|
so such item is used to determine the grid's baseline
|
|
instead of using the dom order.
|
|
</p>
|
|
<div class="container" data-expected-width="480" data-expected-height="165">
|
|
<div class="grid twoRows" data-offset-x="0" data-offset-y="55">
|
|
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
|
|
<div class="firstRowBothColumn alignSelfBaseline target" style="width: 100px; height: 20px;" data-offset-x="0" data-offset-y="15"></div>
|
|
<div class="bothRowFirstColumn" data-offset-x="0" data-offset-y="10"></div>
|
|
</div>
|
|
<div class="grid twoRows" data-offset-x="160" data-offset-y="40">
|
|
<div class="bothRowFirstColumn style2" style="align-self: last baseline" data-offset-x="0"></div>
|
|
<div class="firstRowFirstColumn alignSelfBaseline target" style="width: 50px; height: 50px;" data-offset-x="0" data-offset-y="0"></div>
|
|
<div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></div>
|
|
</div>
|
|
<div class="grid twoRows" data-offset-x="320" data-offset-y="0">
|
|
<div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></div>
|
|
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
|
|
<div class="bothRowFirstColumn alignSelfBaseline target" style="width: 40px; height: 80px;" data-offset-x="0" data-offset-y="10"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<p>
|
|
This case shows one of the grids with no items,
|
|
hence its baseline must be synthesized from its margin box.
|
|
</p>
|
|
<div class="container" data-expected-width="480" data-expected-height="250">
|
|
<div class="grid twoRows" data-offset-x="0" data-offset-y="140">
|
|
<div class="firstRowFirstColumn target" data-offset-x="0" data-offset-y="0"></div>
|
|
<div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></div>
|
|
<div class="bothRowFirstColumn" data-offset-x="0" data-offset-y="10"></div>
|
|
</div>
|
|
<div class="grid twoRows" data-offset-x="160" data-offset-y="100">
|
|
<div class="bothRowFirstColumn target" data-offset-x="0" data-offset-y="10"></div>
|
|
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
|
|
<div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></div>
|
|
</div>
|
|
<div class="grid empty twoRows target" data-offset-x="320" data-offset-y="15">
|
|
</div>
|
|
</div>
|
|
|
|
<p>
|
|
This case shows two of the grids with no items in their first row,
|
|
hence the items in the second row are evaluated.
|
|
</p>
|
|
<div class="container" data-expected-width="480" data-expected-height="250">
|
|
<div id=first class="grid twoRows" data-offset-x="0" data-offset-y="80">
|
|
<div class="firstRowFirstColumn target" data-offset-x="0" data-offset-y="0"></div>
|
|
<div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></div>
|
|
<div class="bothRowFirstColumn" data-offset-x="0" data-offset-y="10"></div>
|
|
</div>
|
|
<div id=second class="grid threeRows" data-offset-x="160" data-offset-y="55">
|
|
<div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="100"></div>
|
|
<div class="secondRowBothColumn" data-offset-x="0" data-offset-y="65"></div>
|
|
<div class="secondRowSecondColumn style3 alignSelfBaseline target" id="first" data-offset-x="50" data-offset-y="60"></div>
|
|
</div>
|
|
<div class="grid empty threeRows" data-offset-x="320" data-offset-y="15">
|
|
<div class="thirdRowSecondColumn" data-offset-x="50" data-offset-y="110"></div>
|
|
<div class="secondRowFirstColumn target" data-offset-x="0" data-offset-y="60"></div>
|
|
<div class="secondRowBothColumn" data-offset-x="0" data-offset-y="75"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|