Celeste Pan
78ab3a1e33
Automatic update from web-platform-tests [Masonry] Implement stacking axis alignment with fill-reverse and track-reverse This change allows us to apply stacking axis alignment when fill-reverse is enabled. Stacking axis alignment already works with track-reverse but we don't have tests for that in conjunction with stacking axis alignment yet, so this change adds the tests. Note that the definition of "start" and "end" in the case of fill-reverse is still up for debate as a CSSWG issue [1]. [1] https://github.com/w3c/csswg-drafts/issues/14052 Bug: 343257585 Change-Id: I8ef0dd4794c22a33585e7e0effc9df13751e8b08 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7947619 Reviewed-by: Alison Maher <almaher@microsoft.com> Commit-Queue: Celeste Pan <celestepan@microsoft.com> Cr-Commit-Position: refs/heads/main@{#1655131} -- wpt-commits: e0c1ff654fcf7a3f3324ef0b9e914d63b42ad443 wpt-pr: 61010
45 lines
1.4 KiB
HTML
45 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>CSS Grid Lanes Test: `align-items: end` with `fill-reverse track-reverse` 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-014-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);
|
|
height: 300px;
|
|
gap: 5px;
|
|
padding: 2px;
|
|
margin: 5px;
|
|
border: 1px solid;
|
|
align-items: end;
|
|
}
|
|
|
|
item {
|
|
display: block;
|
|
color: white;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="grid-lanes" style="grid-lanes-direction: column fill-reverse track-reverse;">
|
|
<item style="height: 40px; grid-column: span 2; background: #f4a0a0;">1</item>
|
|
<item style="height: 60px; background: #2ca02c;">2</item>
|
|
<item style="height: 50px; grid-column: span 3; background: #ff7f0e;">3</item>
|
|
<item style="height: 30px; background: #ffbb78;">4</item>
|
|
<item style="height: 60px; background: #aad4f5;">5</item>
|
|
<item style="height: 40px; grid-column: span 2; background: #c5b0d5;">6</item>
|
|
<item style="height: 50px; background: #98df8a;">7</item>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|