forked from mirrors/gecko-dev
56a533f314
Automatic update from web-platform-tests [grid] Fix alignment of baseline sharing groups. Previously we'd make baseline sharing groups both start aligned. This was incorrect (however correct via. the spec if you read it a certain way). Instead the "major" group should be start aligned, and the "minor" group should be end aligned. See: https://github.com/w3c/csswg-drafts/issues/7645 Change-Id: Iaa04f89e84116acfb9242a1c9cad0e9219f210f1 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3858306 Reviewed-by: Kurt Catti-Schmidt <kschmi@microsoft.com> Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org> Cr-Commit-Position: refs/heads/main@{#1041724} -- wpt-commits: 4705a80ce28f07353ff682106f6548e1003e2032 wpt-pr: 35715
96 lines
3.2 KiB
HTML
96 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<title>CSS Grid Layout Test: minimum contribution with baseline-alignment shim</title>
|
|
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
|
|
<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-content" title="11.5. Resolve Intrinsic Track Sizes">
|
|
<meta name="assert" content="Checks that the minimum contribution takes the baseline-alignment shim into account when calculating the outer size that grid items would have if their preferred size were their minimum size. Also checks that the shim is used again when clamping the automatic minimum size to less than or equal to the stretch fit into the grid area.">
|
|
<style>
|
|
.grid {
|
|
display: grid;
|
|
position: relative;
|
|
font-size: 0;
|
|
height: 0;
|
|
width: 0;
|
|
margin-bottom: 125px;
|
|
grid-template-rows: 50px 50px;
|
|
justify-items: baseline;
|
|
}
|
|
.item1, .item2 {
|
|
writing-mode: vertical-rl;
|
|
}
|
|
.item1 {
|
|
padding-left: 25px;
|
|
background: yellow;
|
|
}
|
|
.item2 {
|
|
padding-right: 25px;
|
|
background: magenta;
|
|
}
|
|
.item1::before, .item2::before {
|
|
content: '';
|
|
display: inline-block;
|
|
width: 25px;
|
|
height: 25px;
|
|
vertical-align: top;
|
|
}
|
|
.item2::before {
|
|
vertical-align: bottom;
|
|
}
|
|
.area {
|
|
position: absolute;
|
|
z-index: -1;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
grid-column: 1 / 2;
|
|
grid-row: 1 / 3;
|
|
background: cyan;
|
|
}
|
|
</style>
|
|
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="/resources/check-layout-th.js"></script>
|
|
|
|
<div id="log"></div>
|
|
|
|
<div class="grid" style="grid-template-columns: minmax(auto, 0px);">
|
|
<div class="item1" data-offset-x="-25" data-offset-y="0"></div>
|
|
<div class="item2" data-offset-x="25" data-offset-y="50"></div>
|
|
<div class="area" data-expected-width="75" data-expected-height="100"></div>
|
|
</div>
|
|
|
|
<div class="grid" style="grid-template-columns: minmax(auto, 75px);">
|
|
<div class="item1" data-offset-x="-25" data-offset-y="0"></div>
|
|
<div class="item2" data-offset-x="25" data-offset-y="50"></div>
|
|
<div class="area" data-expected-width="75" data-expected-height="100"></div>
|
|
</div>
|
|
|
|
<div class="grid" style="grid-template-columns: minmax(auto, 88px);">
|
|
<div class="item1" data-offset-x="-12" data-offset-y="0"></div>
|
|
<div class="item2" data-offset-x="38" data-offset-y="50"></div>
|
|
<div class="area" data-expected-width="88" data-expected-height="100"></div>
|
|
</div>
|
|
|
|
<div class="grid" style="grid-template-columns: minmax(auto, 100px);">
|
|
<div class="item1" data-offset-x="0" data-offset-y="0"></div>
|
|
<div class="item2" data-offset-x="50" data-offset-y="50"></div>
|
|
<div class="area" data-expected-width="100" data-expected-height="100"></div>
|
|
</div>
|
|
|
|
<div class="grid" style="grid-template-columns: minmax(auto, 150px);">
|
|
<div class="item1" data-offset-x="0" data-offset-y="0"></div>
|
|
<div class="item2" data-offset-x="50" data-offset-y="50"></div>
|
|
<div class="area" data-expected-width="100" data-expected-height="100"></div>
|
|
</div>
|
|
|
|
<div class="grid" style="grid-template-columns: minmax(auto, auto);">
|
|
<div class="item1" data-offset-x="0" data-offset-y="0"></div>
|
|
<div class="item2" data-offset-x="50" data-offset-y="50"></div>
|
|
<div class="area" data-expected-width="100" data-expected-height="100"></div>
|
|
</div>
|
|
|
|
<script>
|
|
checkLayout(".grid");
|
|
</script>
|