Skip to content

Commit bc3011f

Browse files
tabatkinstabatkins
committed
[css-grid] Add the translated layout algo too.
--HG-- extra : rebase_source : 61e1ba1639555cb69c2c734d76b26a2696a4e586
1 parent 0bc623b commit bc3011f

2 files changed

Lines changed: 693 additions & 63 deletions

File tree

‎css-grid/Overview.bs‎

Lines changed: 319 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2577,37 +2577,34 @@ Grid Baselines</h3>
25772577

25782578

25792579

2580-
<h2 id='layout-algorithm'>
2581-
Grid Layout Algorithm</h2>
2580+
<h2 id="layout-algorithm">
2581+
Microsoft's Grid Track Sizing Algorithm</h2>
25822582

2583-
<h3 id='algo-terms'>
2583+
<h3 id="algo-terms">
25842584
Definition of Terms for use in Calculating Grid Track Sizes</h3>
25852585

25862586
<dl>
2587-
<dt><dfn id="AvailableSpace-definition">AvailableSpace</dfn>
2588-
<dd>
2589-
The <a>grid container</a>’s content box size in the applicable dimension.
2587+
<dt><dfn>AvailableSpace</dfn>
2588+
<dd>The grid container’s content box size in the applicable dimension.
25902589

2591-
<dt><dfn id="MaxTrackSizingFunction-definition">MaxTrackSizingFunction</dfn>
2592-
<dd>
2593-
One of the <<track-breadth>> sizing functions assigned as the maximum breadth of a <a>Grid track</a>.
2590+
<dt><dfn>MaxTrackSizingFunction</dfn>
2591+
<dd>One of the <<track-breadth>> sizing functions assigned as the maximum breadth of a Grid track.
25942592

2595-
<dt><dfn id="MinTrackSizingFunction-definition">MinTrackSizingFunction</dfn>
2596-
<dd>
2597-
One of the <<track-breadth>> sizing functions assigned as the minimum breadth of a <a>Grid track</a>.
2593+
<dt><dfn>MinTrackSizingFunction</dfn>
2594+
<dd>One of the <<track-breadth>> sizing functions assigned as the minimum breadth of a Grid track.
25982595

2599-
<dt><dfn id="RemainingSpace-definition">RemainingSpace</dfn>
2600-
<dd>
2601-
The max of zero and the AvailableSpace less the sum of all <a>Grid track</a> UsedBreadth values. This is undefined if AvailableSpace is undefined (i.e. the Grid element is shrink-to-fit or the height is auto.)
2596+
<dt><dfn>RemainingSpace</dfn>
2597+
<dd>The max of zero and the AvailableSpace less the sum of all Grid track UsedBreadth values.
2598+
This is undefined if AvailableSpace is undefined
2599+
(i.e. the Grid element is shrink-to-fit or the height is auto.)
26022600

2603-
<dt><dfn id="SpanCount-definition">SpanCount</dfn>
2604-
<dd>
2605-
The number of <a>Grid tracks</a> crossed by a <a>Grid item</a> in the applicable dimension.
2601+
<dt><dfn>SpanCount</dfn>
2602+
<dd>The number of Grid tracks crossed by a Grid item in the applicable dimension.
26062603
</dl>
26072604

2608-
26092605
<h3 id="track-sizing-algorithm">
26102606
Grid Track Sizing Algorithm</h3>
2607+
26112608
<ol>
26122609
<li>Call ComputedUsedBreadthOfGridTracks for Grid Columns to resolve their logical width.
26132610
<li>Call ComputedUsedBreadthOfGridTracks for Grid Rows to resolve their logical height. The logical width of Grid Columns from the prior step is used in the formatting of <a>Grid items</a> in content-sized Grid Rows to determine their required height.
@@ -3063,6 +3060,309 @@ Intrinsic Sizing</h3>
30633060
<p class='issue'>
30643061
This section'll need updating after the algorithm is rewritten.
30653062

3063+
3064+
3065+
3066+
<h2 id='tab-layout-algorithm'>
3067+
Translated Grid Layout Algorithm</h2>
3068+
3069+
<h3 id='algo-terms'>
3070+
Definition of Terms for use in Calculating Grid Track Sizes</h3>
3071+
3072+
<dl>
3073+
<dt><dfn>min track sizing function</dfn>
3074+
<dd>
3075+
If the track was sized with a ''minmax()'' function,
3076+
this is the first argument to that function.
3077+
Otherwise, it's the track's sizing function.
3078+
3079+
<dt><dfn>max track sizing function</dfn>
3080+
<dd>
3081+
If the track was sized with a ''minmax()'' function,
3082+
this is the second argument to that function.
3083+
Otherwise, it's the track's sizing function.
3084+
3085+
<dt><dfn>available space</dfn>
3086+
<dd>
3087+
The <a>grid container</a>’s content box size in the applicable dimension.
3088+
3089+
<dt><dfn>remaining space</dfn>
3090+
<dd>
3091+
Equal to the <a>available space</a> minus the sum of the <a>base sizes</a> of all the grid tracks.
3092+
This value can change over the course of the algorithm,
3093+
as <a>base sizes</a> are adjusted.
3094+
If the sum of the <a>base sizes</a> is greater than the <a>available space</a>,
3095+
the <a>remaining space</a> is instead zero.
3096+
3097+
If <a>available space</a> is <a>indefinite</a>,
3098+
the <a>remaining space</a> is <a>indefinite</a> as well.
3099+
3100+
<dt><dfn>span count</dfn>
3101+
<dd>
3102+
The number of <a>grid tracks</a> crossed by a <a>grid item</a> in the applicable dimension.
3103+
</dl>
3104+
3105+
<h3 id='algo-overview'>
3106+
Overall Sizing Algorithm</h3>
3107+
3108+
<pre class='issue'>
3109+
1. Find the used size of all grid columns.
3110+
2. Find the used size of all grid rows.
3111+
3. If the minimum content size of any grid item
3112+
has changed based on step 2's computations,
3113+
rerun this algorithm once.
3114+
</pre>
3115+
3116+
<p class='issue'>
3117+
What situations trigger step 3?
3118+
3119+
<h3 id="algo-find-size">
3120+
Find the Used Size of Grid Tracks</h4>
3121+
3122+
This algorithm is run against either the grid columns or the grid rows.
3123+
3124+
<b>Initialize each track's base size and growth limit.</b>
3125+
Each track has a <dfn>base size</dfn>,
3126+
a <<length>> which grows throughout the algorithm
3127+
and which will eventually be the track's final size,
3128+
and a <dfn>growth limit</dfn>,
3129+
a <<length>> which provides a desired maximum size for the <a>base size</a>.
3130+
(The <a>base size</a> might end up being larger than the <a>growth limit</a>,
3131+
but the algorithm attempts to avoid this situation.)
3132+
3133+
For each track,
3134+
if the track's <a>min track sizing function</a> is:
3135+
3136+
<dl>
3137+
<dt>a <a>definite</a> length
3138+
<dd>
3139+
the track's <a>base size</a> is that length.
3140+
3141+
Note: <a>Indefinite</a> lengths cannot occur,
3142+
as they're as ''auto''.
3143+
3144+
<dt>''min-content'' or ''max-content''
3145+
<dt><<flex>>
3146+
<dd>
3147+
the track's <a>base size</a> is zero.
3148+
</dl>
3149+
3150+
For each track,
3151+
if the track's <a>max track sizing function</a> is:
3152+
3153+
<dl>
3154+
<dt>a <a>definite</a> length
3155+
<dd>
3156+
the track's <a>growth limit</a> is that length.
3157+
3158+
<dt>''min-content'' or ''max-content''
3159+
<dd>
3160+
the track's <a>growth limit</a> is infinity.
3161+
3162+
<dt><<flex>>
3163+
<dd>
3164+
the track's <a>growth limit</a> is its <a>base size</a>.
3165+
</dl>
3166+
3167+
3168+
<h3 id="algo-content">
3169+
Resolve Content-Based Track Sizing Functions</h3>
3170+
3171+
This step determines the contribution that each <a>grid item</a> makes
3172+
to any ''min-content'' or ''max-content'' track sizing functions.
3173+
3174+
It is run multiple times,
3175+
once for each set of <a>grid items</a> with a particular <a>span count</a>,
3176+
and each time it moves through four phases,
3177+
each one addressing one combination of ''min-content'' or ''max-content''
3178+
as a <a>min track sizing function</a> or <a>max track sizing function</a>.
3179+
3180+
Note: There is no single way to satisfy these constraints
3181+
when items span across multiple tracks.
3182+
This algorithm embodies a number of heuristics
3183+
which have been seen to deliver good results on real-world use-cases,
3184+
such as the "game" examples earlier in this specification.
3185+
This algorithm may be updated in the future
3186+
to take into account more advanced heuristics as they are identified.
3187+
3188+
Starting from the set of all <a>grid items</a> in the grid,
3189+
remove any with a <a>span count</a> greater than one
3190+
which span a track with a <<flex>> <a>max track sizing function</a>.
3191+
Of the remaining,
3192+
sort them into groups according to their <a>span count</a>,
3193+
and order the groups in ascending order of <a>span count</a>.
3194+
For each group, in order,
3195+
perform the following steps four times:
3196+
3197+
<ol>
3198+
<li>
3199+
<b>Initialize variables</b>.
3200+
3201+
Let each item's <dfn>needed space</dfn> be:
3202+
3203+
<dl>
3204+
<dt>In phase 1
3205+
<dd>
3206+
The min-content size of the item,
3207+
minus the sum of the <a>base sizes</a> of the grid tracks it spans.
3208+
<dt>In phase 2
3209+
<dd>
3210+
The max-content size of the item,
3211+
minus the sum of the <a>base sizes</a> of the grid tracks it spans.
3212+
<dt>In phase 3
3213+
<dd>
3214+
The min-content size of the item,
3215+
minus the sum of the <a>growth limits</a> of the grid tracks it spans
3216+
(or, if the <a>growth limit</a> is infinite, the <a>base size</a>).
3217+
<dt>In phase 4
3218+
<dd>
3219+
The max-content size of the item,
3220+
minus the sum of the <a>growth limits</a> of the grid tracks it spans
3221+
(or, if the <a>growth limit</a> is infinite, the <a>base size</a>).
3222+
</dl>
3223+
3224+
Let each item's <dfn>growable tracks</dfn> be:
3225+
3226+
<dl>
3227+
<dt>In phase 1
3228+
<dd>
3229+
The grid tracks it spans with a ''min-content'' or ''max-content'' <a>min track sizing function</a>.
3230+
<dt>In phase 2
3231+
<dd>
3232+
The grid tracks it spans with a ''max-content'' <a>min track sizing function</a>.
3233+
<dt>In phase 3
3234+
<dd>
3235+
The grid tracks it spans with a ''min-content'' or ''max-content'' <a>max track sizing function</a>.
3236+
<dt>In phase 4
3237+
<dd>
3238+
The grid tracks it spans with a ''max-content'' <a>max track sizing function</a>.
3239+
</dl>
3240+
3241+
Let each item's <dfn>overgrowable tracks</dfn> be:
3242+
3243+
<dl>
3244+
<dt>In phase 1
3245+
<dd>
3246+
The item's <a>growable tracks</a> that also have a ''min-content'' or ''max-content'' <a>max track sizing function</a>.
3247+
If there are no such tracks,
3248+
then it's all the <a>growable tracks</a>.
3249+
<dt>In phase 2
3250+
<dd>
3251+
The item's <a>growable tracks</a> that also have a ''max-content'' <a>max track sizing function</a>.
3252+
If there ar eno such tracks,
3253+
then it's all the <a>growable tracks</a>.
3254+
<dt>In phase 3
3255+
<dt>In phase 4
3256+
<dd>
3257+
The item's <a>growable tracks</a>.
3258+
</dl>
3259+
3260+
Let each track's <dfn>growth delta</dfn> initially be zero.
3261+
3262+
<li>
3263+
<b>Calculate growth deltas.</b>
3264+
3265+
For each grid item in the group:
3266+
3267+
<ol>
3268+
<li>
3269+
<dl>
3270+
<dt>In phase 1
3271+
<dt>In phase 2
3272+
<dd>
3273+
Let each track's <dfn>hypothetical size</dfn>
3274+
be the track's <a>base size</a>.
3275+
<dt>In phase 3
3276+
<dt>In phase 4
3277+
<dd>
3278+
Let each track's <a>hypothetical size</a>
3279+
be the track's <a>growth limit</a> if it's finite,
3280+
or else the track's <a>base size</a> otherwise.
3281+
</dl>
3282+
3283+
<li>
3284+
Distribute the item's <a>needed space</a>
3285+
as evenly as possible among the <a>hypothetical sizes</a> of the item's <a>growable tracks</a>,
3286+
maxing each out as its <a>hypothetical size</a> reaches its <a>growth limit</a>.
3287+
3288+
<dl>
3289+
<dt>In phase 4
3290+
<dd>
3291+
If the track's <a>growth limit</a> was changed from infinite to a finite value
3292+
in phase 3,
3293+
treat its <a>growth limit</a> as infinite for the purposes of this step.
3294+
</dl>
3295+
3296+
<li>
3297+
If all <a>growable tracks</a> reached their <a>growth limit</a> in the previous step
3298+
and there is still <a>needed space</a> to distribute,
3299+
distribute the leftover space evenly among the <a>hypothetical sizes</a> of the item's <a>overgrowable tracks</a>.
3300+
3301+
<li>
3302+
<dl>
3303+
<dt>In phase 1
3304+
<dt>In phase 2
3305+
<dd>
3306+
For each track,
3307+
if the difference between its <a>hypothetical size</a> and its <a>base size</a>
3308+
is greater than its <a>growth delta</a>,
3309+
set its <a>growth delta</a> to that difference.
3310+
<dt>In phase 3
3311+
<dd>In phase 4
3312+
<dd>
3313+
For each track,
3314+
if its <a>growth limit</a> is finite,
3315+
and the difference between its <a>hypothetical size</a> and its <a>growth limit</a>
3316+
is greater than its <a>growth delta</a>,
3317+
set its <a>growth delta</a> to that difference.
3318+
Otherwise, if its <a>growth limit</a> is infinite,
3319+
and the difference between its <a>hypothetical size</a> and its <a>base size</a>
3320+
is greater than its <a>growth delta</a>,
3321+
set its <a>growth delta</a> to that difference.
3322+
</dl>
3323+
</ol>
3324+
3325+
<li>
3326+
<b>Adjust each track's affected size.</b>
3327+
3328+
<dl>
3329+
<dt>In phase 1
3330+
<dt>In phase 2
3331+
<dd>
3332+
For each track,
3333+
increase its <a>base size</a> by its <a>growth delta</a>.
3334+
<dt>In phase 3
3335+
<dt>In phase 4
3336+
For each track,
3337+
if its <a>growth limit</a> is finite,
3338+
increase its <a>growth limit</a> by its <a>growth delta</a>.
3339+
Otherwise, if its <a>growth limit</a> is infinite,
3340+
set its <a>growth limit</a>
3341+
to the sum of its <a>base size</a> and its <a>growth delta</a>.
3342+
</dl>
3343+
</ol>
3344+
3345+
<h3 id="algo-grow-tracks">
3346+
Grow All Tracks To Their Max</h3>
3347+
3348+
If <a>remaining space</a> is a definite value,
3349+
distribute the <a>remaining space</a>
3350+
as evenly as possible among the <a>base sizes</a> of all the tracks,
3351+
maxing each out as its <a>base size</a> reaches its <a>growth limit</a>.
3352+
3353+
If <a>remaining space</a> is indefinite,
3354+
then for each track whose <a>base size</a> is less than its <a>growth limit</a>,
3355+
set its <a>base size</a> to its <a>growth limit</a>.
3356+
3357+
<h3 id="algo-flex-tracks">
3358+
Process Flexible Tracks</h3>
3359+
3360+
3361+
3362+
3363+
3364+
3365+
30663366
<h2 id='layout-algorithm-fantasai'>
30673367
Rewritten Grid Layout Algorithm</h2>
30683368

0 commit comments

Comments
 (0)