Skip to content

Commit 09e30bd

Browse files
committed
[css-multicol-1] spanners inside transforms
Fixes: #6805 Specifies that a spanner can only be created if there is nothing between it and the multicol element that creates a containing block for descendants. Also adds an example using transforms.
1 parent 819fdbd commit 09e30bd

File tree

2 files changed

+45
-4
lines changed

2 files changed

+45
-4
lines changed

css-multicol-1/Overview.bs

Lines changed: 35 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1120,7 +1120,38 @@ Spanning Columns</h2>
11201120
</div>
11211121

11221122
A spanning element may be lower than the first level of descendants
1123-
as long as they are part of the same [=formatting context=].
1123+
as long as they are part of the same [=formatting context=],
1124+
and there is nothing between the spanning element and [=multicol container=] that establishes a containing block for fixed position descendants.
1125+
1126+
<div class="example">
1127+
In this example, the element with ''column-span: all'' is inside an element with ''transform: rotate(90deg)''.
1128+
The transform establishes a containing block for fixed position descendents,
1129+
therefore a spanner will not be created.
1130+
1131+
<pre highlight="markup">
1132+
&lt;article&gt;
1133+
&lt;section&gt;
1134+
&lt;div class="spanner"&gt;Attempted spanner&lt;/div&gt;
1135+
&lt;/section&gt;
1136+
&lt;/article&gt;
1137+
</pre>
1138+
1139+
<pre highlight="css">
1140+
article {
1141+
columns: 2;
1142+
}
1143+
1144+
section {
1145+
transform: rotate(90deg);
1146+
}
1147+
1148+
.spanner {
1149+
column-span: all;
1150+
background: silver;
1151+
}
1152+
</pre>
1153+
</div>
1154+
11241155
If the fragment before the spanner is empty, nothing special happens;
11251156
the top margin/border/padding is above the spanning element, as an empty [=fragment=].
11261157

@@ -1564,11 +1595,11 @@ Pagination and Overflow Outside Multicol Containers</h3>
15641595

15651596
This appendix is <em>informative</em>.
15661597

1567-
<!-- <h3 id="changes-from-20211012">Changes from the <a href="https://www.w3.org/TR/2021/CR-css-multicol-1-20211012/">Candidate Recommendation (CR) of 12 October 2021</a></h3>
1598+
<h3 id="changes-from-20211012">Changes from the <a href="https://www.w3.org/TR/2021/CR-css-multicol-1-20211012/">Candidate Recommendation (CR) of 12 October 2021</a></h3>
15681599

15691600
<ul>
1570-
<li></li>
1571-
</ul> -->
1601+
<li>Added the text "and there is nothing between the spanning element and [=multicol container=] that establishes a containing block for fixed position descendants." <a href="https://github.com/w3c/csswg-drafts/issues/6805#issuecomment-1063159219">Resolved 9 Mar 2022</a></li>
1602+
</ul>
15721603

15731604
<h3 id="changes-from-20210212">Changes from the <a href="https://www.w3.org/TR/2021/WD-css-multicol-1-20210212/">Working Draft (WD) of 12 February 2021</a></h3>
15741605

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
Draft: https://www.w3.org/TR/2021/WD-css-multicol-1-20210212/
2+
Title: CSS Multi-column Layout Module Level 1
3+
4+
----
5+
Issue 1.
6+
Summary: Prevent column spanners from escaping containing blocks created by transforms.
7+
From: Morten Stenshorne
8+
Comment: https://github.com/w3c/csswg-drafts/issues/6805
9+
Closed: Accepted
10+
Resolved: https://github.com/w3c/csswg-drafts/issues/6805#issuecomment-1063159219

0 commit comments

Comments
 (0)