-
Notifications
You must be signed in to change notification settings - Fork 695
/
Copy pathOverview.bs
1096 lines (904 loc) · 43.1 KB
/
Overview.bs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<pre class='metadata'>
Title: CSS Box Sizing Module Level 4
Shortname: css-sizing
Level: 4
Status: ED
Work Status: Revising
Group: csswg
ED: https://drafts.csswg.org/css-sizing-4/
TR: https://www.w3.org/TR/css-sizing-4/
Issue Tracking: CSSWG GitHub https://github.com/w3c/csswg-drafts/issues
Previous Version: https://www.w3.org/TR/2021/WD-css-sizing-4-20210520/
Editor: Tab Atkins, Google, http://xanthir.com/contact/, w3cid 42199
Editor: Elika J. Etemad / fantasai, Apple, http://fantasai.inkedblade.net/contact, w3cid 35400
Editor: Jen Simmons, Apple, http://jensimmons.com/, w3cid 52801
Abstract: This module extends the CSS sizing properties with keywords that represent content-based "intrinsic" sizes and context-based "extrinsic" sizes, allowing CSS to more easily describe boxes that fit their content or fit into a particular layout context. This is a delta spec over CSS Sizing Level 3.
Ignored Terms: block-level box
Test Suite: https://wpt.fyi/results/css/css-sizing
</pre>
<pre class='link-defaults'>
spec:css-display-3; type:dfn; text:box
spec:css-align-3; type:property; text:column-gap
spec:css2; type: property
text: min-width
text: min-height
text: max-width
text: max-height
spec:css-align-3; type:value; text:stretch
spec:css-logical-1; type:property; text:block-size
</pre>
<!-- Notes on stuff to do... [copy/pasted from etherpad, probably out-of-date, evaluate later]
Swap definition of preferred size in for max-content.
Define current max-content as super-max-content.
Mark an issue about whether it's a necessary concept;
I'm unsure, but I think it will show up in orthogonal flow sizing.
-->
<h2 id="intro">
Introduction</h2>
ISSUE: This is a diff spec over <a href="https://www.w3.org/TR/css-sizing-3/">CSS Sizing Level 3</a>.
It is currently an Exploratory Working Draft:
if you are implementing anything, please use Level 3 as a reference.
We will merge the Level 3 text into this draft once it reaches CR.
<h3 id="placement">
Module interactions</h3>
<p>This module extends the 'width', 'height', 'min-width', 'min-height', 'max-width', 'max-height', and 'column-width'
features defined in [[!CSS2]] chapter 10 and in [[!CSS3COL]]
<h3 id="values">
Value Definitions</h3>
This specification follows the <a href="https://www.w3.org/TR/CSS2/about.html#property-defs">CSS property definition conventions</a> from [[!CSS2]]
using the <a href="https://www.w3.org/TR/css-values-3/#value-defs">value definition syntax</a> from [[!CSS-VALUES-3]].
Value types not defined in this specification are defined in CSS Values & Units [[!CSS-VALUES-3]].
Combination with other CSS modules may expand the definitions of these value types.
In addition to the property-specific values listed in their definitions,
all properties defined in this specification
also accept the <a>CSS-wide keywords</a> as their property value.
For readability they have not been repeated explicitly.
<!-- Big Text: terms
█████▌ █████▌ ████▌ █ █ ███▌
█▌ █▌ █▌ █▌ ██ ██ █▌ █▌
█▌ █▌ █▌ █▌ █▌█ █▐█ █▌
█▌ ████ ████▌ █▌ █ ▐█ ███▌
█▌ █▌ █▌▐█ █▌ ▐█ █▌
█▌ █▌ █▌ ▐█ █▌ ▐█ █▌ █▌
█▌ █████▌ █▌ █▌ █▌ ▐█ ███▌
-->
<h2 id="terms">
Terminology</h2>
Issue: [[css-sizing-3#terms]]
<!-- merge this with the final sizing-3 definition
<dt><dfn export>preferred aspect ratio</dfn>
<dd>
A [=box=] or [=replaced element=]’s preferred ratio of width to height.
This can be explicitly specified via the 'aspect-ratio' property,
or, for replaced elements, it can be an [=intrinsic aspect ratio=]
derived from the content.
The [=preferred aspect ratio=] of a box can be associated
with either its [=content box=] or [=border box=].
Not all boxes or replaced elements have a [=preferred aspect ratio=]
(and in fact, non-replaced elements typically do not).
-->
<!-- Big Text: propdefs
████▌ ████▌ ███▌ ████▌ ████▌ █████▌ █████▌ ███▌
█▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌
█▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌
████▌ ████▌ █▌ █▌ ████▌ █▌ █▌ ████ ████ ███▌
█▌ █▌▐█ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌
█▌ █▌ ▐█ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌
█▌ █▌ █▌ ███▌ █▌ ████▌ █████▌ █▌ ███▌
-->
<h2 id="specifying-sizes" oldids='size-keywords'>
Specifying Box Sizes</h2>
ISSUE: [[css-sizing-3#specifying-sizes]]
<h3 id="sizing-properties">
Sizing Properties</h3>
ISSUE(820): Add shorthands.
<h3 id="sizing-values" oldids='width-height-keywords'>
New Sizing Values: the ''stretch'', ''fit-content'', and ''contain'' keywords</h3>
<pre class="propdef partial">
Name: width, height, min-width, min-height, max-width, max-height
New Values: stretch | fit-content | contain
</pre>
<dl dfn-type=value dfn-for="width, height, inline-size, block-size, min-width, min-height, min-inline-size, min-block-size, max-width, max-height, max-inline-size, max-block-size">
<dt><dfn>stretch</dfn>
<dd>
Applies [=stretch-fit sizing=],
attempting to match the size of the box’s [=margin box=] to the size of its [=containing block=].
See [[#stretch-fit-sizing]].
<dt><dfn>fit-content</dfn>
<dd>
Essentially ''fit-content(stretch)''
i.e. min(''width/max-content'', max(''width/min-content'', ''width/stretch'')).
<dt><dfn>contain</dfn>
<dd>
If the box has a [=preferred aspect ratio=],
applies [=contain-fit sizing=],
attempting to fit into the box’s constraints
while maintaining its [=preferred aspect ratio=] insofar as possible.
See [[#contain-fit-sizing]].
If the box has no [=preferred aspect ratio=],
applies [=stretch-fit sizing=].
</dl>
Note: These new values add to the set of values
that the definition of <<calc-size()>>
refers to as "allowed in the context".
<!-- Big Text: aspect-r
███▌ ███▌ ████▌ █████▌ ███▌ █████▌ ████▌
▐█ ▐█ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌
█▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌
█▌ █▌ ███▌ ████▌ ████ █▌ █▌ ████▌ ████▌
█████▌ █▌ █▌ █▌ █▌ █▌ █▌▐█
█▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ ▐█
█▌ █▌ ███▌ █▌ █████▌ ███▌ █▌ █▌ █▌
-->
<h2 id="ratios">
Aspect Ratios</h2>
Images often have a [=natural aspect ratio=],
which the CSS layout algorithms attempt to preserve
as they resize the element.
The 'aspect-ratio' property allows specifying this behavior
for non-replaced elements,
and for altering the effective aspect ratio of replaced elements.
ISSUE: We are still working through the details of this section.
If there is any behavior specified here
that would cause [=replaced elements=] with a [=preferred aspect ratio=]
to behave differently than they would
under the requirements of the
<a href="https://www.w3.org/TR/CSS2/visudet.html">CSS2</a>,
<a href="https://www.w3.org/TR/css-flexbox-1/">Flex Layout</a>,
and <a href="https://www.w3.org/TR/css-grid-1/">Grid Layout</a>
specs combined (without this specification in effect),
<strong>this is an error and should be <a href="https://github.com/w3c/csswg-drafts/issues">reported</a> to the CSSWG</strong>.
<h3 id="aspect-ratio">
Preferred Aspect Ratios: the 'aspect-ratio' property</h3>
<pre class="propdef">
Name: aspect-ratio
Value: auto || <<ratio>>
Initial: auto
Inherited: no
Applies to: all elements except <a>inline boxes</a> and internal ruby or table boxes
Computed value: specified keyword or a pair of numbers
Animation type: by computed value
</pre>
This property sets a <dfn export>preferred aspect ratio</dfn> for the box,
which will be used in the calculation of ''height/auto'' sizes
and some other layout functions.
<dl dfn-for="aspect-ratio" dfn-type="value">
<dt><dfn>auto</dfn>
<dd>
<a>Replaced elements</a> with a <a>natural aspect ratio</a>
use that aspect ratio;
otherwise the box has no <a>preferred aspect ratio</a>.
Size calculations involving the aspect ratio
work with the <a>content box</a> dimensions always.
<dt><dfn><<ratio>></dfn>
<dd>
The box’s <a>preferred aspect ratio</a> is the specified ratio
of ''<var>width</var> / <var>height</var>''.
Size calculations involving the aspect ratio
work with the dimensions of the box specified by 'box-sizing'.
If the <<ratio>> is [=degenerate ratio|degenerate=],
the property instead behaves as ''aspect-ratio/auto''.
<dt><dfn>auto && <<ratio>></dfn>
<dd>
If both ''aspect-ratio/auto'' and a <<ratio>> are specified together,
the [=preferred aspect ratio=] is the specified ratio
of ''<var>width</var> / <var>height</var>''
unless it is a [=replaced element=] with a [=natural aspect ratio=],
in which case that aspect ratio is used instead.
In all cases, size calculations involving the aspect ratio
work with the [=content box=] dimensions always.
If the <<ratio>> is [=degenerate ratio|degenerate=],
the property instead behaves as ''aspect-ratio/auto''.
</dl>
Note: Having a [=preferred aspect ratio=] does not make a box into a [=replaced element=];
layout rules specific to [=replaced elements=]
do not generally apply to [=non-replaced=] boxes with a [=preferred aspect ratio=].
For example, a [=non-replaced=] [=absolutely-positioned=] box
treats ''justify-self: normal'' as ''justify-self/stretch'', not as ''justify-self/start''
([[CSS-ALIGN-3#justify-abspos]]),
even if it has a [=preferred aspect ratio=]
ISSUE: CSS2.1 does not cleanly differentiate between
replaced elements vs. elements with an aspect ratio;
need to figure out specific cases that are unclear and define them,
either in the appropriate Level 3 spec or here.
<div class="example">
This example sets each item in the grid to render as a square,
determining the number of items and their widths by the available space.
<xmp highlight="html">
<ul>
<li>…
<li>…
<li>…
<li>…
</ul>
</xmp>
<pre highlight="css">
ul {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
}
li {
aspect-ratio: 1/1;
overflow: auto;
}
</pre>
</div>
<div class="example">
This example uses the <{iframe}> element’s
<code>width</code> and <code>height</code> attributes
to set the 'aspect-ratio' property,
giving the iframe an aspect ratio to use for sizing
so that it behaves exactly like an image with that aspect ratio.
<!-- https://twitter.com/ausi/status/1053013616239288320 -->
<pre highlight="html">
<iframe
src="https://www.youtube.com/embed/0Gr1XSyxZy0"
width=560
height=315>
</pre>
<pre highlight="css">
@supports (aspect-ratio: attr(width number) / 1) {
iframe {
aspect-ratio: attr(width number) / attr(height number);
width: 100%;
height: auto;
}
}
</pre>
</div>
If a replaced element's only [=natural dimension=]
is a [=natural width=] or a [=natural height=],
giving it a [=preferred aspect ratio=]
also gives it an [=natural dimensions|natural=] height or width,
whichever was missing,
by transferring the existing size
through the [=preferred aspect ratio=].
<h3 id="aspect-ratio-automatic">
Effects of Preferred Aspect Ratio on Automatic Sizes</h3>
When a box has a [=preferred aspect ratio=],
its <a>automatic sizes</a>
are calculated the same as for
a [=replaced element=] with a [=natural aspect ratio=]
and no [=natural size=] in that axis,
see e.g. <a href="https://www.w3.org/TR/CSS2/visudet.html">CSS2 § 10</a>
and <a href="https://www.w3.org/TR/css-flexbox-1/#algo-main-item">CSS Flexible Box Model Level 1 § 9.2</a>.
The axis in which the <a>preferred size</a> calculation
depends on this aspect ratio
is called the <dfn export>ratio-dependent axis</dfn>,
and the resulting size is <a>definite</a>
if its input sizes are also <a>definite</a>.
The opposite axis (on which the [=ratio-dependent axis=] size depends)
is the <dfn export>ratio-determining axis</dfn>.
Note: A [=preferred aspect ratio=]
only ever has an effect if at least one of the box's sizes
is [=automatic size|automatic=].
If neither 'width' nor 'height' is an [=automatic size=],
it can have no effect on its [=preferred sizes=].
Issue: When we move all the sizing information here,
rather than crowbar-ing our way into 2.1,
then the core principle here is just:
the resolved [=preferred size=] in the ratio-determining axis
(before applying min/max)
gets transferred thru the ratio.
Min/max constraints get transferred afterwards,
and then applied to each axis independently without regards to aspect-ratio.
<h4 id="aspect-ratio-margin-collapse">
Margin-collapsing</h4>
For the purpose of margin collapsing ([[css2/box#collapsing-margins]]),
if the [=block axis=] is the [=ratio-dependent axis=],
it is not considered to have a [=computed value|computed=] 'block-size' of ''height/auto''.
<h3 id="aspect-ratio-minimum">
Automatic Content-based Minimum Sizes</h3>
In order to avoid unintentional overflow,
the <a>automatic minimum size</a> in the <a>ratio-dependent axis</a>
of a box with a <a>preferred aspect ratio</a>
that is neither a <a>replaced element</a> nor a <a>scroll container</a>
is its <a>min-content size</a>
capped by its <a>maximum size</a>.
<div class="example">
In the following example,
the box is as wide as the container (as usual),
and its height is as tall as needed to contain its content
but at least as tall as it is wide.
<pre highlight=css>
div {
aspect-ratio: 1/1;
/* 'width' and 'height' both default to 'auto' */
}
</pre>
<pre class="figure">
+----------+ +----------+ +----------+
| ~~~~~~~~ | | ~~~~~~~~ | | ~~~~~~~~ |
| ~~~~~~~~ | | ~~~~~~~~ | | ~~~~~~~~ |
| ~~~~~~~ | | ~~~~~~~~ | | ~~~~~~~~ |
| | | ~~~ | | ~~~~~~~~ |
+----------+ +----------+ | ~~~~~~~~ |
| ~~~~~~ |
+----------+
</pre>
When ''overflow: auto'' is specified, however,
even the box with excess content maintains the 1:1 aspect ratio
(and handles overflow by becoming scrollable instead, as usual).
<pre highlight=css>
div {
overflow: auto;
aspect-ratio: 1/1;
}
</pre>
<pre class="figure">
+----------+ +----------+ +----------+
| ~~~~~~~~ | | ~~~~~~~~ | | ~~~~~~~~^|
| ~~~~~~~~ | | ~~~~~~~~ | | ~~~~~~~~ |
| ~~~~~~~ | | ~~~~~~~~ | | ~~~~~~~~ |
| | | ~~~ | | ~~~~~~~~v|
+----------+ +----------+ +----------+
</pre>
Overriding the 'min-height' property also maintains the 1:1 aspect ratio,
but will result in content overflowing the box
if it is not otherwise handled.
<pre highlight=css>
div {
aspect-ratio: 1/1;
min-height: 0;
}
</pre>
<pre class="figure">
+----------+ +----------+ +----------+
| ~~~~~~~~ | | ~~~~~~~~ | | ~~~~~~~~ |
| ~~~~~~~~ | | ~~~~~~~~ | | ~~~~~~~~ |
| ~~~~~~~ | | ~~~~~~~~ | | ~~~~~~~~ |
| | | ~~~ | | ~~~~~~~~ |
+----------+ +----------+ +-~~~~~~~~-+
~~~~~~
</pre>
</div>
<div class="example">
This automatic minimum operates in both axes.
Consider this example:
<pre highlight=html>
<div style="height: 100px; aspect-ratio: 1/1;">
<span style="display: inline-block; width: 50px;"></span>
<span style="display: inline-block; width: 150px;"></span>
</div>
</pre>
The 'width' of the container, being ''width/auto'',
resolves through the aspect ratio to 100px.
However, its 'min-width', being ''min-width/auto'',
resolves to 150px.
The resulting width of the container is thus 150px.
To ignore the contents when sizing the container,
''min-width: 0'' can be specified.
</div>
<h3 id="aspect-ratio-size-transfers">
Min/Max Size Transfers</h3>
Sizing constraints in either axis
(the <var>origin</var> axis)
are transferred through the [=preferred aspect ratio=]
and applied to any [=indefinite=]
[=minimum size|minimum=], [=maximum size|maximum=], or [=preferred size|preferred=] size
in the other axis (the <var>destination</var> axis)
as follows:
* First, any [=definite=] [=minimum size=] is converted and transferred
from the <var>origin</var> to <var>destination</var> axis.
This transferred minimum is capped
by any [=definite=] [=preferred size|preferred=] or [=maximum size=]
in the <var>destination</var> axis.
* Then, any [=definite=] [=maximum size=] is converted and transferred
from the <var>origin</var> to <var>destination</var>.
This transferred maximum is floored
by any [=definite=] [=preferred size|preferred=] or [=minimum size=]
in the <var>destination</var> axis
as well as by the transferred minimum, if any.
Note: Thus, any definite sizes are completely unaffected by a transferred constraint;
and a transferred minimum will never cause an element to exceed a definite preferred/maximum size,
nor will a transferred maximum cause an element to violate its preferred/minimum size.
Note: The basic principle is that sizing constraints
transfer through the aspect-ratio to the other side
to preserve the aspect ratio to the extent that they can
without violating any sizes specified explicitly on that affected axis.
(This is the principle that drove the contents of
the <a href="https://www.w3.org/TR/CSS2/visudet.html#min-max-widths">constraint table in CSS2 Section 10.4</a>.)
<div class="example">
In the following example:
<pre highlight=html>
<div id=container style="height: 100px; float: left;">
<div id=item style="height: 100%; aspect-ratio: 1/1;">content</div>
</div>
</pre>
Since the height of the <code>#item</code> is a percentage that resolves against a definite container,
the width of the item resolves to 100px for both its intrinsic size contributions as well as for final layout,
so the container also sizes to a width of 100px.
<pre highlight=html>
<div id=container style="height: auto; float: left;">
<div id=item style="height: 100%; aspect-ratio: 1/1;">content</div>
</div>
</pre>
In this next example,
the percentage height of the item cannot be resolved and [=behaves as auto=]
(see [[CSS2/visudet#the-height-property]]).
Since both axes now have an [=automatic size=],
the height becomes the [=ratio-dependent axis=].
Calculating the [=intrinsic size contributions=] of the box
produces a width derived from its content,
and a height calculated from that width and the aspect ratio,
yielding a square box (and a container) sized
to the width of the word “content”.
</div>
ISSUE(6071): This section might not be written correctly.
<!-- Big Text: intrinsic
████ █ █▌ █████▌ ████▌ ████ █ █▌ ███▌ ████ ███▌
▐▌ █▌ █▌ █▌ █▌ █▌ ▐▌ █▌ █▌ █▌ █▌ ▐▌ █▌ █▌
▐▌ ██▌ █▌ █▌ █▌ █▌ ▐▌ ██▌ █▌ █▌ ▐▌ █▌
▐▌ █▌▐█ █▌ █▌ ████▌ ▐▌ █▌▐█ █▌ ███▌ ▐▌ █▌
▐▌ █▌ ██▌ █▌ █▌▐█ ▐▌ █▌ ██▌ █▌ ▐▌ █▌
▐▌ █▌ █▌ █▌ █▌ ▐█ ▐▌ █▌ █▌ █▌ █▌ ▐▌ █▌ █▌
████ █▌ ▐▌ █▌ █▌ █▌ ████ █▌ ▐▌ ███▌ ████ ███▌
-->
<h2 id='intrinsic'>
Intrinsic Size Determination</h2>
<h3 id="intrinsic-sizes">
Intrinsic Sizes</h3>
ISSUE: [[css-sizing-3#intrinsic-sizes]]
<h3 id='intrinsic-size-override'>
Overriding Contained Intrinsic Sizes: the 'contain-intrinsic-*' properties</h3>
<pre class=propdef>
Name: contain-intrinsic-width, contain-intrinsic-height, contain-intrinsic-block-size, contain-intrinsic-inline-size
Value: auto? [ none | <<length>> ]
Initial: none
Inherited: no
Logical property group: contain-intrinsic-size
Applies to: elements with [=size containment=]
Computed value: as specified, with <<length>> values computed
Percentages: n/a
Animation type: by computed value type
</pre>
These properties allow elements with [=size containment=] to specify
an <dfn export>explicit intrinsic inner size</dfn>,
causing the box to size as if its in-flow content
totals to a width and height
matching the specified [=explicit intrinsic inner size=]
(rather than sizing as if it were empty).
Note: This is not always equivalent
to laying out as if the element had one child of the specified [=explicit intrinsic inner size=].
For example, a [=grid container=] with one child of the specified size
would still size according to the specified grid,
usually ending up with a larger content size than specified.
<dl dfn-type=value dfn-for="contain-intrinsic-width, contain-intrinsic-height, contain-intrinsic-block-size, contain-intrinsic-inline-size, contain-intrinsic-size">
: <dfn>auto</dfn>? [ <dfn>none</dfn> | <<length>> ]
:: If ''contain-intrinsic-size/auto'' is specified
and the element has a [=last remembered size=]
and is currently [=skipping its contents=],
its [=explicit intrinsic inner size=] in the corresponding axis
is the [=last remembered size=] in that axis.
Note: This occurs, for example,
when an element with ''content-visibility: auto''
is off-screen.
Otherwise,
the corresponding axis either doesn't have an [=explicit intrinsic inner size=]
(if ''contain-intrinsic-size/none'' is specified)
or has an [=explicit intrinsic inner size=] of the specified <<length>>.
<wpt pathprefix="css/css-contain/">
content-visibility/content-visibility-058.html
</wpt>
</dl>
If an element has an [=explicit intrinsic inner size=] in an axis,
then after laying out the element as normal for [=size containment=],
the size of the contents in that axis are instead treated as being the [=explicit intrinsic inner size=]
instead of what was calculated in layout,
and layout is performed again if necessary.
(If it has an [=explicit intrinsic inner size=] in both axises,
this implies the first layout can be skipped.)
These four properties are part of a [=logical property group=].
Note: An element with [=size containment=] is laid out as if it had no contents [[!CSS-CONTAIN-1]],
which in many cases this will cause the element to collapse to zero inner height.
This can be corrected with an explicit 'height' chosen to show the expected contents,
but that can have unintended effects in some layout systems,
such as Flex and Grid Layout,
which treat an explicit 'height' as a stronger command
than an implicit content-based height.
The element thus might lay out substantially differently than it would have
were it simply filled with content up to that height.
Providing an [=explicit intrinsic inner size=] for the element
preserves the performance benefits of ignoring its contents for layout
while still allowing it to size as if it had content.
<pre class="propdef shorthand">
Name: contain-intrinsic-size
Value: [ auto? [ none | <<length>> ] ]{1,2}
</pre>
'contain-intrinsic-size' is a shorthand property
that sets the 'contain-intrinsic-width' and 'contain-intrinsic-height' properties.
The first value represents the 'contain-intrinsic-width' value,
and the second represents the 'contain-intrinsic-height' value.
If only one value is given,
it applies to both properties.
<h4 id='last-remembered' dfn lt="last remembered size" export>
Last Remembered Size</h4>
[=Size containment=] is very valuable for ensuring a page can render efficiently,
restricting the scope of layout work that can happen
as a result of an element changing its rendering.
However, it's also very restrictive for the author,
requiring them to correctly predict what the size of the element will be;
if this guess is incorrect,
even slightly,
it can cause unsightly scrollbars or accidentally-hidden content.
The ''contain-intrinsic-size/auto'' keyword of ''contain-intrinsic-size'' allows a middle-ground:
if an element is ever <em>not</em> [=size containment|size-contained=],
this value causes the element to remember its size
(calculated as normal by layout);
then, if the element gains [=size containment=] later,
it will use the remembered size,
offering the performance benefits of [=size containment=]
while <em>probably</em> sizing accurately to its contents.
Only elements capable of being {{ResizeObserver}} targets can have a [=last remembered size=].
<div algorithm="last remembered size">
The [=last remembered size=] of an element is determined by:
* At the time that {{ResizeObserver}} events are determined and delivered,
if an element has a ''contain-intrinsic-size/auto'' keyword in ''contain-intrinsic-size'' property,
is capable of being a {{ResizeObserver}} target,
but does not have [=size containment=],
record the current inner dimensions of its [=principal box=]
as its [=last remembered size=].
* At the time that {{ResizeObserver}} events are determined and delivered,
if an element has a [=last remembered size=]
but does <em>not</em> have ''contain-intrinsic-size/auto'' keyword in ''contain-intrinsic-size'' property,
remove its [=last remembered size=].
Note: The [=last remembered size=] is state attached to the <em>element</em>,
not any particular box generated by the element.
So long as the element retains ''contain-intrinsic-size/auto'' keyword in ''contain-intrinsic-size'' property,
it will remember its [=last remembered size=]
even across changes such as going to/from ''display: none''.
</div>
<h4 id='cis-scrollbars'>
Interaction With ''overflow: auto''</h4>
The 'contain-intrinsic-size' property provides an estimate
of how large the author expects the content of an element to be,
but this estimate is not actual content
and does not represent anything that needs to be shown to the user.
Therefore, an element with ''overflow: auto'' must not generate scrollbars
as a consequence of 'contain-intrinsic-size'.
However, if 'contain-intrinsic-size' indicates a size large enough
that the element would generate scrollbars
if it contained actual content of that size,
then the element must be <em>sized</em> as if it generated those scrollbar(s)
in accordance with such hypothetical content.
<div class='example'>
In the following example code:
<pre highlight=css>
div {
width: max-content;
contain-intrinsic-size: 100px 100px;
overflow: auto;
}
</pre>
The element ends up being ''100px'' wide and ''100px'' tall:
'contain-intrinsic-size' provides the max-content width,
and also the height.
If the element then ended up with content that was ''150px'' tall,
it would show a vertical scrollbar;
if the scrollbar is not overlay,
it will take up some of that ''100px'' width,
leaving a smaller amount
(roughly ''84px'', typically)
for the content to flow into.
(See [[css-overflow-3#scrollbar-layout]].)
Even though there's now less than ''100px'' of horizontal space available for the content,
it will not generate a horizontal scrollbar just because 'contain-intrinsic-size' indicates a ''100px'' width;
that would only happen if the actual content
had something unbreakable
and wider than the remaining space.
</div>
<div class=example>
In contrast, in the following example code:
<pre highlight=css>
div {
width: max-content;
contain-intrinsic-size: 100px 100px;
height: 50px;
overflow: auto;
}
</pre>
The element has a fixed ''50px'' height,
but 'contain-intrinsic-size' indicates a ''100px'' “estimated content height”.
The element thus assumes that it will need a vertical scrollbar
when it's filled with actual content,
resulting in a max-content width a little more than ''100px''
(roughly ''116px'', typically),
to accommodate the estimated ''100px'' of max-content width from 'contain-intrinsic-size',
and as well as the vertical scrollbar width (roughly ''16px'', typically).
However, even though the element reserves space on the assumption of needing a scrollbar,
it will not actually generate one
unless the actual content overflows:
if it ends up containing content that's less than 50px tall,
no vertical scrollbar will be generated at all,
but the element will still be ''116px'' wide.
</div>
<!-- Big Text: contribs
███▌ ███▌ █ █▌ █████▌ ████▌ ████ ████▌ ███▌
█▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ ▐▌ █▌ █▌ █▌ █▌
█▌ █▌ █▌ ██▌ █▌ █▌ █▌ █▌ ▐▌ █▌ █▌ █▌
█▌ █▌ █▌ █▌▐█ █▌ █▌ ████▌ ▐▌ █████ ███▌
█▌ █▌ █▌ █▌ ██▌ █▌ █▌▐█ ▐▌ █▌ █▌ █▌
█▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ ▐█ ▐▌ █▌ █▌ █▌ █▌
███▌ ███▌ █▌ ▐▌ █▌ █▌ █▌ ████ ████▌ ███▌
-->
<h3 id="intrinsic-contribution">
Intrinsic Size Contributions</h3>
ISSUE: [[css-sizing-3#intrinsic-contribution]]
<h3 id='intrinsic-contribution-override'>
Zeroing Min-Content Size Contributions: the 'min-intrinsic-sizing' property</h3>
<pre class="propdef">
Name: min-intrinsic-sizing
Value: legacy | zero-if-scroll || zero-if-extrinsic
Initial: legacy
Inherited: no
Applies to: all elements except [=inline boxes=]
Computed value: as specified
Percentages: n/a
Animation type: discrete
</pre>
ISSUE: This property seriously needs some name bikeshedding.
This property defines whether the [=min-content contribution=]
of a [=non-replaced=] box
is “compressed” under certain circumstances.
Values have the following meanings:
<dl dfn-for=min-intrinsic-sizing dfn-type=value>
<dt><dfn>legacy</dfn>
<dd>
The box’s [=min-content contribution=]
is handled as normal.
<dt><dfn>zero-if-scroll</dfn>
<dd>
The box’s [=min-content contribution=]
is “compressed” if it is a [=scroll container=].
<dt><dfn>zero-if-extrinsic</dfn>
<dd>
The box’s [=min-content contribution=]
is “compressed” if has an [=extrinsic size|extrinsic=]
[=preferred size|preferred=] or [=maximum size|maximum=] size.
Note: This is the default behavior of most [=replaced elements=].
</dl>
<div class="example">
The following rule will make all [=scroll containers=]
essentially ignore their contents
when passing up their size contributions
(unless they specifically requested a content-based size):
<pre highlight=css>*, ::before, ::after { min-intrinsic-size: zero-if-scroll; }</pre>
This prevents the [=scroll container=] from blowing up the size of its ancestors
if it contains large items such as a table or long lines of unbreakable text.
Meanwhile, it allows boxes that are not scroll containers
to continue influencing the [=min-content size=] of their ancestors.
</div>
Note: The behavior of ''zero-if-scroll'' would have been a better default,
but due to Web-compat, it cannot be the initial value. :(
The “compressed” [=min-content contributions=] is calculated
by pretending the box were empty,
except when factoring in sizing constraints imposed by explicit
''width/min-content'', ''width/max-content'', and ''width/fit-content'' values
of the [=sizing properties=].
<!-- Big Text: extrinsic
█████▌ █ █ █████▌ ████▌ ████ █ █▌ ███▌ ████ ███▌
█▌ █ █ █▌ █▌ █▌ ▐▌ █▌ █▌ █▌ █▌ ▐▌ █▌ █▌
█▌ █ █ █▌ █▌ █▌ ▐▌ ██▌ █▌ █▌ ▐▌ █▌
████ █ █▌ ████▌ ▐▌ █▌▐█ █▌ ███▌ ▐▌ █▌
█▌ █ █ █▌ █▌▐█ ▐▌ █▌ ██▌ █▌ ▐▌ █▌
█▌ █ █ █▌ █▌ ▐█ ▐▌ █▌ █▌ █▌ █▌ ▐▌ █▌ █▌
█████▌ █ █ █▌ █▌ █▌ ████ █▌ ▐▌ ███▌ ████ ███▌
-->
<h2 id='extrinsic'>
Extrinsic Size Determination</h2>
ISSUE: [[css-sizing-3#extrinsic]]
<h3 id="stretch-fit-sizing">
Stretch-fit Sizing: filling the containing block</h3>
Stretch-fit sizing tries to set the box’s used size
to the length necessary
to make its outer size as close to filling the [=containing block=] as possible
while still respecting the constraints imposed by min-height/min-width/max-height/max-width.
: If used in an axis where the relevant [=self-alignment property=] applies to the element
::
Produces the same size that would be obtained
by the [=self-alignment property=] in that axis
being set to ''justify-self/stretch''
and all [=sizing properties=] and 'aspect-ratio'
being set to their initial values.
: Otherwise, if used in an axis where percentage sizes can resolve to a [=definite=] value
::
Behaves as ''100%'',
except it sizes the [=margin box=]
regardless of the value of 'box-sizing'.
If this is a [=block axis=] size,
and the element is in a Block Layout [=formatting context=],
and the parent element does not have a [=block-start=] 'border' or 'padding'
and is not an [=independent formatting context=],
treat the element's [=block-start=] margin as zero
for the purpose of calculating this size.
Do the same for the [=block-end=] margin.
Note: This simulates the effect of margins collapsing with the parent's margin.
It doesn't actually suppress the margins,
so if anything prevents the element from actually collapsing with its parent,
the [=stretch-fit size=] might actually be too large
to fit in the parent perfectly.
<!--
Importantly, this *does* ensure that the stretch-fit size
doesn't depend on the presence or absence of other elements,
or the element's position among its siblings.
Multiple children with 'stretch' will all end up the same size.
-->
: Otherwise
::
Behaves as the property's [=initial value=].
<div class="example">
For example, given the following HTML representing two [=block boxes=]:
<xmp class=html>
<div class="parent">
<div class="child">text</div>
</div>
</xmp>
In the following case,
the [=outer height=] of the child box
will exactly match the height of the parent box (200px),
but its [=inner height=] will be 20px less, to account for its margins.
<pre>
.parent { height: 200px; border: solid; }
.child { height: stretch; margin: 10px; }
</pre>
On the other hand,
in this case we can assume that the child's margins will collapse with the parent,
so the inner box will be ''200px'' tall,
exactly filling the parent.
<pre>
.outer { height: 200px; margin: 0; }
.inner { height: stretch; margin: 10px; }
</pre>
(The top margins will in fact collapse,
but the bottom margins do not collapse,
because the bottom margin of a box is not adjoining
to the bottom margin of a parent with a non-''height/auto'' height,
see [[CSS2/box#collapsing-margins]].
Luckily, an overflowing bottom margin doesn't have any visible effect.)
</div>
<div class="example">
Similarly, ''width: stretch'' causes the box to fill its container,
being 20px narrower than the width of "some more text"
(due to the 10px margin):
<pre class=html>
<div class="parent">
<div class="child">text</div>
</div>
some more text
</pre>
<pre>
.parent { float: left; margin: 0; }
.child { width: stretch; margin: 10px; }
</pre>
</div>
<div class="example">
On the other hand,
in this example the container's height is indefinite,
which would cause a percentage height on the child to [=behave as auto=],
so ''height: stretch'' [=behaves as auto=] as well.
<pre>
.parent { height: auto; margin: 0; }
.child { height: stretch; margin: 10px; }
</pre>
</div>
<h3 id="contain-fit-sizing" dfn lt="contain-fit sizing" export>
Contain-fit Sizing: stretching while maintaining an aspect ratio</h3>
Contain-fit sizing essentially applies stretch-fit sizing,
but reduces the size of the box in one axis
to maintain the box’s [=preferred aspect ratio=],
similar to the ''object-fit/contain'' keyword of the 'object-fit' and 'background-size' properties.
First, a target rectangle is determined:
<ol>
<li>
The initial target rectangle is the size of the box’s containing block,
with any indefinite size assumed as infinity.
If both dimensions are indefinite,
the initial target rectangle is set
to match the outer edges of the box were it <a>stretch-fit sized</a>.
<li>
Next, if the box has a non-''max-width/none'' 'max-width' or 'max-height',
the target rectangle is clamped in the affected dimension
to less than or equal to the “maximum size” of the box’s margin box,
i.e. the size its margin box would be
if the box was sized at its max-width/height.
(Note that, consistent with normal <a href="http://www.w3.org/TR/CSS2/visuren.html">box-sizing rules</a>,
this “maximum size” is floored by the effects of the box’s 'min-width'/'min-height'.)
<li>
Last, the target rectangle is reduced in one dimension
by the minimum necessary for it to match the box's [=preferred aspect ratio=].
</ol>
The contain-fit size in each dimension is
the size that would result from stretch-fitting into the target rectangle.
Issue: Copy whatever stretch-fit ends up doing wrt margin collapsing.
Issue: If there is a minimum size in one dimension
that would cause overflow of the target rectangle if the aspect ratio were honored,
do we honor the aspect ratio or skew the image?
If the former, we need a step similar to #2 that applies the relevant minimums.
<h3 id="percentage-sizing">
Percentage Sizing</h3>
…
<h2 class=no-num id="changes">
Changes</h2>
<h3 class=no-num id="changes-2020-05">
Recent Changes</h3>
Significant changes since the <a href="https://www.w3.org/TR/2020/WD-css-sizing-4-20201020/">20 October 2020 Working Draft</a> include: