Celeste Pan
3400a2b545
Automatic update from web-platform-tests [Masonry] Apply stacking-axis alignment Follow-ups will be needed to implement stacking-axis alignment together with dense-packing, and to add tests to ensure that content alignment works with stacking-axis alignment. To account for items which need stacking-axis alignment, we keep track of the item placed above each track opening. After placement is complete and track openings are finalized, we perform stacking axis alignment. We perform stretch alignment at the very end as we need to re-layout the item and actually add it to the container builder. Although we are still waiting on the CSSWG on whether or not explicit sizing should override stretch alignment [1], this change assumes that we do want to let explicit size override stretch alignment. Lastly, tests were fixed to have widths/heights that matched with the track with the largest running position, which is what the ref files had -- previously the containers were falling short so it looked like the stretch items weren't properly stretching. Stacking axis alignment for OOF items are already tested in: 1.third_party/blink/web_tests/external/wpt/css/css-grid/grid-lanes/abspos/column-grid-lanes-alignment.html 2.third_party/blink/web_tests/external/wpt/css/css-grid/grid-lanes/abspos/column-grid-lanes-alignment-ref.html 3.third_party/blink/web_tests/external/wpt/css/css-grid/grid-lanes/abspos/row-grid-lanes-alignment.html 4.third_party/blink/web_tests/external/wpt/css/css-grid/grid-lanes/abspos/row-grid-lanes-alignment-ref.html [1] https://github.com/w3c/csswg-drafts/issues/13950 Bug: 343257585 Change-Id: I7b1b51448e478dc0d0f762ca1fd6aa58ca2fa701 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7899886 Reviewed-by: Alison Maher <almaher@microsoft.com> Commit-Queue: Celeste Pan <celestepan@microsoft.com> Cr-Commit-Position: refs/heads/main@{#1648464} -- wpt-commits: 7ee2228f3e898d730856aa10a459f008a37d6b41 wpt-pr: 60694
56 lines
2.0 KiB
HTML
56 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>CSS Grid Lanes Test: safe alignment should have the same behavior as regular alignment for align-items start and end in column direction</title>
|
|
<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com">
|
|
<link rel="help" href="https://drafts.csswg.org/css-grid-3/#alignment">
|
|
<link rel="match" href="column-align-items-002-ref.html">
|
|
<style>
|
|
html, body {
|
|
color: black; background-color: white; font: 16px/1 monospace; padding: 0; margin: 0;
|
|
}
|
|
|
|
.grid-lanes {
|
|
display: grid-lanes;
|
|
grid-template-columns: repeat(3, 80px);
|
|
gap: 5px;
|
|
padding: 2px;
|
|
margin: 5px;
|
|
}
|
|
|
|
item {
|
|
display: block;
|
|
color: white;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="grid-lanes" style="align-items: safe start;">
|
|
<item style="height: 70px; background: #f4a0a0;">1</item>
|
|
<item style="height: 40px; background: #2ca02c;">2</item>
|
|
<item style="height: 120px; background: #ff7f0e;">3</item>
|
|
<item style="height: 60px; background: #ffbb78;">4</item>
|
|
<item style="height: 50px; background: #aad4f5;">5</item>
|
|
<item style="height: 80px; background: #c5b0d5;">6</item>
|
|
<item style="height: 40px; background: #d62728;">7</item>
|
|
<item style="height: 50px; background: #98df8a;">8</item>
|
|
<item style="height: 35px; background: #9edae5;">9</item>
|
|
</div>
|
|
|
|
<div class="grid-lanes" style="align-items: safe end;">
|
|
<item style="height: 70px; background: #f4a0a0;">1</item>
|
|
<item style="height: 40px; background: #2ca02c;">2</item>
|
|
<item style="height: 120px; background: #ff7f0e;">3</item>
|
|
<item style="height: 60px; background: #ffbb78;">4</item>
|
|
<item style="height: 50px; background: #aad4f5;">5</item>
|
|
<item style="height: 80px; background: #c5b0d5;">6</item>
|
|
<item style="height: 40px; background: #d62728;">7</item>
|
|
<item style="height: 50px; background: #98df8a;">8</item>
|
|
<item style="height: 35px; background: #9edae5;">9</item>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|