mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-12 22:28:59 +02:00
b52c903c19
Automatic update from web-platform-tests[css-grid] Compute again the baseline offsets during step 3 The new Baseline Alignment algorithm states that items with sizing cyclic dependencies must be excluded from any baseline context they participate in. One of these cyclic dependencies can happen with intrinsic sized grid areas and relative items. The grid spec states [1] that flex-sized tracks should be considered as content-sized when the grid container has an indefinite size. We were using the AvailableSize(direction) function to determine whether the grid container is indefinite or not. However, this function may provide different results during the different phases of the grid layout logic. This issue causes assert violations like the one described in the bugs listed below. The new Baseline Alignment logic is now integrated in the Grid Track sizing algorithm. Hence, we need to ensure that an item that participates in any baseline alignment context during the track sizing also does during the alignment phase, at the end of the grid layout logic. In order to achieve that, this CL forces a new computation of the Baseline offsets during the step 3 of the Grid sizing algorith, since during this step the available space is not indefinite anymore. It's worth mentioning that this change assumes the issue grid items being excluded and included of Baseline Context during the different phases of the Grid sizing algorithm, which I hope we can clarify in the issue [2] I filed for the CSS WG. [1] https://drafts.csswg.org/css-grid/#fr-unit [2] https://github.com/w3c/csswg-drafts/issues/3046 Bug: 867833, 874861, 876593 Change-Id: I668d399b920c9280a8e20b3e8362f562eded4770 Reviewed-on: https://chromium-review.googlesource.com/1177757 Reviewed-by: Sergio Villar <svillar@igalia.com> Reviewed-by: Emil A Eklund <eae@chromium.org> Commit-Queue: Javier Fernandez <jfernandez@igalia.com> Cr-Commit-Position: refs/heads/master@{#587799} -- wpt-commits: 16e4b911814b15f308f39cb06e5ac8b790608d37 wpt-pr: 12529
162 lines
11 KiB
HTML
162 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<title>CSS Grid Layout Test: Self-Baseline alignment and sizing cyclic dependency</title>
|
|
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
|
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
|
|
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
|
|
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
|
|
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
|
|
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
|
|
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
|
|
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
|
|
<link rel="stylesheet" href="../../support/grid.css">
|
|
<link rel="stylesheet" href="../../support/alignment.css">
|
|
<meta name="assert" content="Grid items with relative size in the inline or block axis and an intrinsically-sized column or row respectively, don't participate in baseline alignment in the, row-like or column-like respectively, shared alignment context.">
|
|
<style>
|
|
.inline-grid {
|
|
position: relative;
|
|
border: solid;
|
|
text-orientation: sideways;
|
|
font-family: Ahem;
|
|
}
|
|
|
|
.columns { grid-template-columns: 100px 100px; }
|
|
.rows { grid-template-rows: 100px 100px; }
|
|
|
|
.min-content-columns { grid-template-columns: min-content; }
|
|
.max-content-columns { grid-template-columns: max-content; }
|
|
.fit-content-columns { grid-template-columns: fit-content; }
|
|
.min-content-rows { grid-template-rows: min-content; }
|
|
.max-content-rows { grid-template-rows: max-content; }
|
|
.fit-content-rows { grid-template-rows: fit-content; }
|
|
|
|
.flex-columns { grid-template-columns: 1fr; }
|
|
.max-flex-columns { grid-template-columns: minmax(0px, 1fr); }
|
|
.flex-rows { grid-template-rows: 1fr; }
|
|
.max-flex-rows { grid-template-rows: minmax(0px, 1fr); }
|
|
|
|
.height25 { height: 25px; }
|
|
.height50 { height: 50px; }
|
|
.height200 { height: 200px; }
|
|
.width25 { width: 25px; }
|
|
.width50 { width: 50px; }
|
|
.width200 { width: 200px; }
|
|
|
|
.height200Percent { height: 200%; }
|
|
.width200Percent { width: 200%; }
|
|
</style>
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="/resources/check-layout-th.js"></script>
|
|
<body onload="checkLayout('.inline-grid')">
|
|
|
|
<div style="height: 125px">
|
|
<pre>auto-sized rows - items with relative height</pre>
|
|
<div class="inline-grid alignItemsBaseline columns">
|
|
<div class="firstRowFirstColumn height50" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
|
|
<div class="firstRowSecondColumn height200Percent" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
|
|
<div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="50" data-expected-width="200" data-expected-height="25"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="height: 200px">
|
|
<pre>min-content-sized rows - items with relative height</pre>
|
|
<div class="inline-grid alignItemsBaseline columns min-content-rows">
|
|
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="80">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
|
<div class="firstRowSecondColumn height200Percent" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="160"></div>
|
|
<div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="80" data-expected-width="200" data-expected-height="25"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="height: 200px">
|
|
<pre>max-content-sized rows - items with relative height</pre>
|
|
<div class="inline-grid alignItemsBaseline columns max-content-rows">
|
|
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="80">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
|
<div class="firstRowSecondColumn height200Percent" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="160"></div>
|
|
<div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="80" data-expected-width="200" data-expected-height="25"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="height: 200px">
|
|
<pre>fit-content-sized rows - items with relative height</pre>
|
|
<div class="inline-grid alignItemsBaseline columns fit-content-rows">
|
|
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="80">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
|
<div class="firstRowSecondColumn height200Percent" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="160"></div>
|
|
<div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="80" data-expected-width="200" data-expected-height="25"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="height: 125px">
|
|
<pre>flexible-sized rows - items with relative height</pre>
|
|
<div class="inline-grid alignItemsBaseline columns flex-rows">
|
|
<div class="firstRowFirstColumn height50" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
|
|
<div class="firstRowSecondColumn height200Percent" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
|
|
<div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="50" data-expected-width="200" data-expected-height="25"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="height: 125px">
|
|
<pre>flex max-function rows - items with relative height</pre>
|
|
<div class="inline-grid alignItemsBaseline columns max-flex-rows">
|
|
<div class="firstRowFirstColumn height50" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
|
|
<div class="firstRowSecondColumn height200Percent" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
|
|
<div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="50" data-expected-width="200" data-expected-height="25"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="height: 250px">
|
|
<pre>auto-sized columns - items with relative width</pre>
|
|
<div class="inline-grid justifyItemsBaseline rows">
|
|
<div class="firstRowFirstColumn verticalRL width50" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
|
|
<div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
|
|
<div class="firstRowSpanning2AutoColumn verticalRL width25" data-offset-x="50" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="height: 250px">
|
|
<pre>min-content-sized columns - items with relative width</pre>
|
|
<div class="inline-grid justifyItemsBaseline rows min-content-columns">
|
|
<div class="firstRowFirstColumn verticalRL" data-offset-x="0" data-offset-y="0" data-expected-width="80" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
|
<div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0" data-offset-y="100" data-expected-width="160" data-expected-height="100"></div>
|
|
<div class="firstRowSpanning2AutoColumn verticalRL width25" data-offset-x="80" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="height: 250px">
|
|
<pre>max-content-sized columns - items with relative width</pre>
|
|
<div class="inline-grid justifyItemsBaseline rows max-content-columns">
|
|
<div class="firstRowFirstColumn verticalRL" data-offset-x="0" data-offset-y="0" data-expected-width="80" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
|
<div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0" data-offset-y="100" data-expected-width="160" data-expected-height="100"></div>
|
|
<div class="firstRowSpanning2AutoColumn verticalRL width25" data-offset-x="80" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="height: 250px">
|
|
<pre>fit-content-sized columns - items with relative width</pre>
|
|
<div class="inline-grid justifyItemsBaseline rows fit-content-columns">
|
|
<div class="firstRowFirstColumn verticalRL" data-offset-x="0" data-offset-y="0" data-expected-width="80" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
|
<div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0" data-offset-y="100" data-expected-width="160" data-expected-height="100"></div>
|
|
<div class="firstRowSpanning2AutoColumn verticalRL width25" data-offset-x="80" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="height: 250px">
|
|
<pre>flexible-sized columns - items with relative width</pre>
|
|
<div class="inline-grid justifyItemsBaseline rows flex-columns">
|
|
<div class="firstRowFirstColumn verticalRL width50" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
|
|
<div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
|
|
<div class="firstRowSpanning2AutoColumn verticalRL width25" data-offset-x="50" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="height: 250px">
|
|
<pre>flex max-function columns - items with relative width<br>baseline is not applied initially, but orthogonal items force repeating the track sizing and height is not indefinite in that phase.</pre>
|
|
<!-- https://github.com/w3c/csswg-drafts/issues/3046 -->
|
|
<div class="inline-grid justifyItemsBaseline rows max-flex-columns">
|
|
<div class="firstRowFirstColumn verticalRL width50" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
|
|
<div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="-50" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
|
|
<div class="firstRowSpanning2AutoColumn verticalRL width25" data-offset-x="50" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|