зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1650857 [wpt PR 24463] - Duplicate -001, but with the item getting its size from a child rather than explicitly., a=testonly
Automatic update from web-platform-tests Duplicate -001, but with the item getting its size from a child rather than explicitly. (#24463) * Duplicate -001, but with the item getting its size from a child rather than explicitly. * Whoops, remove the <base> I was using for testing. -- wpt-commits: e8401319ee32642fa1fd77b50f097ee9c5199487 wpt-pr: 24463
This commit is contained in:
Родитель
0a3aa25caf
Коммит
44d5051706
|
@ -0,0 +1,86 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Intrinsic contribution of an item with flex tracks</title>
|
||||
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
|
||||
<link rel="author" title="Tab Atkins-Bittner" href="mailto:jackalmage@gmail.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-spanning-items" title="11.5.3 Increase sizes to accommodate spanning items crossing content-sized tracks">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-spanning-flex-items" title="11.5.4 Increase sizes to accommodate spanning items crossing flexible tracks">
|
||||
<meta name="assert" content="This test checks that the intrinsic contribution of a single grid item is distributed correctly among the tracks it spans when flexible tracks are involved, and the item's size is determined by its children rather than explicitly.">
|
||||
<style>
|
||||
#grid {
|
||||
display: grid;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: solid;
|
||||
}
|
||||
#item {
|
||||
background: blue;
|
||||
}
|
||||
#item::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<div id="grid">
|
||||
<div id="item"></div>
|
||||
</div>
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="../grid-definition/support/testing-utils.js"></script>
|
||||
<script>
|
||||
const item = document.getElementById("item");
|
||||
function checkTrackSizes(span, trackList, expected) {
|
||||
item.style.gridColumn = item.style.gridRow = `span ${span}`;
|
||||
TestingUtils.testGridTemplateColumnsRows("grid", trackList, trackList, expected, expected);
|
||||
}
|
||||
|
||||
// Item spanning an intrinsic flexible track
|
||||
checkTrackSizes(1, "0fr", "100px");
|
||||
checkTrackSizes(1, "1fr", "100px");
|
||||
checkTrackSizes(1, "2fr", "100px");
|
||||
|
||||
// Item spanning a fixed flexible track
|
||||
checkTrackSizes(1, "minmax(0, 0fr)", "0px");
|
||||
checkTrackSizes(1, "minmax(0, .5fr)", "25px");
|
||||
checkTrackSizes(1, "minmax(0, 1fr)", "50px");
|
||||
checkTrackSizes(1, "minmax(0, 2fr)", "50px");
|
||||
checkTrackSizes(1, "minmax(75px, 1fr)", "75px");
|
||||
|
||||
// Item spanning 2 intrinsic flexible tracks
|
||||
checkTrackSizes(2, "0fr 0fr", "50px 50px");
|
||||
checkTrackSizes(2, "0fr 1fr", "0px 100px");
|
||||
checkTrackSizes(2, "1fr 0fr", "100px 0px");
|
||||
checkTrackSizes(2, "1fr 1fr", "50px 50px");
|
||||
checkTrackSizes(2, "1fr 3fr", "25px 75px");
|
||||
checkTrackSizes(2, "0fr 0fr 1fr", "50px 50px 0px");
|
||||
|
||||
// Item spanning 2 fixed flexible tracks
|
||||
checkTrackSizes(2, "minmax(0, 0fr) minmax(0, 0fr)", "0px 0px");
|
||||
checkTrackSizes(2, "minmax(0, 0fr) minmax(0, 1fr)", "0px 50px");
|
||||
checkTrackSizes(2, "minmax(15px, 0fr) minmax(0, 1fr)", "15px 35px");
|
||||
checkTrackSizes(2, "minmax(20px, 1fr) minmax(0, 1fr)", "25px 25px");
|
||||
checkTrackSizes(2, "minmax(30px, 1fr) minmax(0, 1fr)", "30px 20px");
|
||||
|
||||
// Item spanning an intrinsic flexible track and a fixed flexible track
|
||||
checkTrackSizes(2, "0fr minmax(0, 0fr)", "100px 0px");
|
||||
checkTrackSizes(2, "0fr minmax(0, 1fr)", "100px 0px");
|
||||
checkTrackSizes(2, "1fr minmax(0, 1fr)", "100px 0px");
|
||||
checkTrackSizes(2, "1fr minmax(25px, 1fr)", "75px 25px");
|
||||
|
||||
// Item spanning an intrinsic flexible track and an intrinsic non-flexible track
|
||||
checkTrackSizes(2, "0fr auto", "100px 0px");
|
||||
checkTrackSizes(2, "1fr auto", "100px 0px");
|
||||
checkTrackSizes(2, "1fr max-content", "100px 0px");
|
||||
|
||||
// Item spanning a fixed flexible track and an intrinsic non-flexible track
|
||||
checkTrackSizes(2, "minmax(0, 0fr) auto", "0px 100px");
|
||||
checkTrackSizes(2, "minmax(0, 1fr) auto", "0px 100px");
|
||||
checkTrackSizes(2, "minmax(25px, 0fr) auto", "25px 75px");
|
||||
checkTrackSizes(2, "minmax(25px, 1fr) auto", "25px 75px");
|
||||
</script>
|
Загрузка…
Ссылка в новой задаче