Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-07 14:35:33 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision e4c65276b686cd788b2c4f8c395025df371e84a1

Browse source
This commit is contained in:
WPT Sync Bot 2019-10-12 10:24:51 +00:00
parent a84d4ab755
commit 6edbabc2c6
68 changed files with 661 additions and 354 deletions
Download patch file Download diff file Expand all files Collapse all files

81
tests/wpt/web-platform-tests/css/css-grid/layout-algorithm/grid-flex-track-intrinsic-sizes-001.html Normal file
View file

@ -0,0 +1,81 @@
<!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="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.">
<style>
#grid {
display: grid;
width: 50px;
height: 50px;
border: solid;
}
#item {
width: 100px;
height: 100px;
background: blue;
}
</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>

105
tests/wpt/web-platform-tests/css/css-grid/layout-algorithm/grid-flex-track-intrinsic-sizes-002.html Normal file
View file

@ -0,0 +1,105 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Intrinsic contributions of 2 items with flex tracks</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.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 contributions of 2 items are distributed in the right order when flexible tracks are involved.">
<style>
#grid {
display: grid;
grid-template-areas: ". . . ."
". a . ."
". . . ."
". . . b";
width: 50px;
height: 50px;
border: solid;
}
#item1 {
grid-column: 1 / a;
grid-row: 1 / a;
width: 60px;
height: 60px;
background: blue;
}
#item2 {
grid-column: a / b;
grid-row: a / b;
width: 150px;
height: 150px;
background: yellow;
}
</style>
<div id="log"></div>
<div id="grid">
<div id="item1"></div>
<div id="item2"></div>
</div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../grid-definition/support/testing-utils.js"></script>
<script>
function checkTrackSizes(trackList, expected) {
TestingUtils.testGridTemplateColumnsRows("grid", trackList, trackList, expected, expected);
}
// We have a symmetric grid with 2 items and 4 tracks, as follows:
// ╔═╤═╗─┬─┐
// ╟─╔═╬═╪═╗
// ╚═╬═╝─┼─╢
// ├─╫─┼─┼─╢
// └─╚═╧═╧═╝
// The 1st item has spans less tracks (2) than the 2nd item (3),
// therefore its contribution (60px) is distributed first.
// All the 60px go to the 2nd track, since the 1st track is not intrinsic.
// Then the 2nd item only needs to distribute 150px-60px=90px
// among the 3rd and 4th tracks.
checkTrackSizes("minmax(0, 1fr) auto auto auto", "0px 60px 45px 45px");
// The 1st item now spans a flexible track with an intrinsic minimum,
// therefore its contribution (60px) is distributed last.
// The 2nd item distributes its contribution (150px) among the 2nd, 3rd and 4th tracks.
// Then the 1st item only needs to distribute 60px-50px=10px to the 1st track.
checkTrackSizes("1fr auto auto auto", "10px 50px 50px 50px");
// Now both items span a flexible track with an intrinsic minimum,
// so their contributions are handled simultaneously,
// even if the 1st item still spans less tracks than the 2nd one.
// Therefore the distribution is as follows:
// - 1st track: 60px/2 = 30px
// - 2nd track: max(60px/2, 150px/3) = 50px
// - 3rd track: 150px/3 = 50px
// - 4th track: 150px/3 = 50px
checkTrackSizes("1fr 1fr 1fr 1fr", "30px 50px 50px 50px");
// Like the previous case, but with different flex ratios:
// - 1st track: 60px/2 = 30px
// - 2nd track: max(60px/2, 150px/6) = 30px
// - 3rd track: 150px/6 = 25px
// - 4th track: 150px*4/6 = 100px
checkTrackSizes("1fr 1fr 1fr 4fr", "30px 30px 25px 100px");
// Change the grid as follows:
// ╔═╦═╤═╗
// ╠═╝─┼─╢
// ╟─┼─┼─╢
// ╚═╧═╧═╝
document.getElementById("grid").style.gridTemplateAreas = `
"a . ."
". . ."
". . b"`;
// Now the 1st item has a span of 1, so usually we would handle its contribution
// at the very beginning, before items that span multiple tracks.
// But not if its track is flexible, then it's still handled at the end,
// simultaneously with other items that span some intrinsic flexible track.
// - 1nd track: max(60px, 150px/3) = 60px
// - 2nd track: 150px/3 = 50px
// - 3rd track: 150px/3 = 50px
checkTrackSizes("1fr 1fr 1fr", "60px 50px 50px");
</script>