You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
At Risk: application of grid placement to absolutely-positioned boxes
36
+
WPT Path Prefix: css/css-grid/
36
37
</pre>
37
38
38
39
<pre class="link-defaults">
@@ -45,10 +46,14 @@ spec:css-align-3;
45
46
type:property; text:column-gap
46
47
type:dfn; text:alignment baseline
47
48
spec:css-break-3; type:dfn; text:fragment
48
-
spec:css-flexbox-1; type:dfn
49
-
text: specified size
50
-
text: content size
51
-
text: transferred size
49
+
spec:css-flexbox-1;
50
+
type:dfn
51
+
text: specified size
52
+
text: content size
53
+
text: transferred size
54
+
type:value
55
+
text:flex
56
+
text:inline-flex
52
57
spec:css-pseudo-4; type:selector;
53
58
text:::first-line
54
59
text:::first-letter
@@ -557,7 +562,7 @@ Sizing the Grid</h3>
557
562
</div>
558
563
559
564
Finally each <a>grid item</a> is sized and aligned within its assigned <a>grid area</a>,
560
-
as specified by its own <a href="https://www.w3.org/TR/CSS2/visudet.html">sizing</a>[[!CSS21]] and <a lt="box alignment properties">alignment properties</a>[[!CSS-ALIGN-3]].
565
+
as specified by its own <a href="https://www.w3.org/TR/CSS2/visudet.html">sizing</a>[[!CSS2]] and <a lt="box alignment properties">alignment properties</a>[[!CSS-ALIGN-3]].
561
566
562
567
563
568
<!--
@@ -1077,7 +1082,7 @@ Grid Items</h2>
1077
1082
(skipping ''display:contents'' ancestors)
1078
1083
is ''grid'' or ''inline-grid'',
1079
1084
the element's own 'display' value is [=blockified=].
1080
-
(See <a href="https://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo">CSS2.1§9.7</a>[[!CSS21]]
1085
+
(See <a href="https://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo">CSS2.1§9.7</a>[[!CSS2]]
1081
1086
and [[css-display-3#transformations]]
1082
1087
for details on this type of 'display' value conversion.)
1083
1088
@@ -1105,13 +1110,13 @@ Grid Items</h2>
1105
1110
:: If the grid item is either non-replaced--
1106
1111
or is replaced but has no intrinsic aspect ratio and no intrinsic size in the relevant dimension--
1107
1112
use the width calculation rules for non-replaced boxes
1108
-
as defined in <a href="https://www.w3.org/TR/CSS21/visudet.html#blockwidth">CSS2.1 § 10.3.3</a>.
1113
+
as defined in <a href="https://www.w3.org/TR/CSS2/visudet.html#blockwidth">CSS2.1 § 10.3.3</a>.
1109
1114
1110
1115
Otherwise, if the grid item has an intrinsic ratio or an intrinsic size in the relevant dimension,
1111
1116
the grid item is sized as for ''align-self: start''
1112
1117
(consistent with the width calculation rules for block-level replaced elements in <a href="https://www.w3.org/TR/CSS2/visudet.html#block-replaced-width">CSS2.1 § 10.3.4</a>).
1113
1118
: ''align-self/stretch''
1114
-
:: Use the width calculation rules for non-replaced boxes, as defined in <a href="https://www.w3.org/TR/CSS21/visudet.html#blockwidth">CSS2.1 § 10.3.3</a>.
1119
+
:: Use the width calculation rules for non-replaced boxes, as defined in <a href="https://www.w3.org/TR/CSS2/visudet.html#blockwidth">CSS2.1 § 10.3.3</a>.
1115
1120
1116
1121
Note: This may distort the aspect ratio of the item, if it has one.
1117
1122
: all other values
@@ -1207,7 +1212,7 @@ Z-axis Ordering: the 'z-index' property</h3>
1207
1212
1208
1213
<a>Grid items</a> can overlap when they are positioned into intersecting <a>grid areas</a>,
1209
1214
or even when positioned in non-intersecting areas because of negative margins or positioning.
1210
-
The painting order of <a>grid items</a> is exactly the same as inline blocks [[CSS21]],
1215
+
The painting order of <a>grid items</a> is exactly the same as inline blocks [[CSS2]],
1211
1216
except that <a>order-modified document order</a> is used in place of raw document order,
1212
1217
and 'z-index' values other than <a value for=z-index>auto</a> create a stacking context even if 'position' is ''static''
1213
1218
(behaving exactly as if 'position' were ''relative'').
of an absolutely-positioned child of a <a>grid container</a>
4710
4715
is determined as if it were the sole grid item
4711
4716
in a <a>grid area</a>
@@ -4921,7 +4926,7 @@ Clarifications</h4>
4921
4926
is ''grid'' or ''inline-gird'',
4922
4927
the element's own 'display' value is [=blockified=].</ins>
4923
4928
4924
-
Note: <ins>Blockification still occurs even when the ''flex'' or ''inline-flex'' element does not end up generating a [=flex container=] box,
4929
+
Note: <ins>Blockification still occurs even when the ''display/flex'' or ''display/inline-flex'' element does not end up generating a [=flex container=] box,
0 commit comments