Skip to content

[css-gaps-1]: Introduce spec changes for *-inset-cap-* and *-inset-junction-* #13697 #13842

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kbabbitt merged 8 commits into from
Apr 30, 2026
Merged

[css-gaps-1]: Introduce spec changes for *-inset-cap-* and *-inset-junction-* #13697 #13842

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
07d761d
init cap/junct
Apr 25, 2026
bd8fb22
add changes
Apr 27, 2026
7959ae6
nitty nit
Apr 28, 2026
33c0f88
nit
Apr 28, 2026
18817db
nit
Apr 28, 2026
e3841d9
nit
Apr 28, 2026
76877f6
feedbck
Apr 29, 2026
18ba962
Merge branch 'main' into cap-junction
kbabbitt Apr 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
173 changes: 121 additions & 52 deletions css-gaps-1/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -982,7 +982,7 @@ Break behaviors at intersections: The 'column-rule-break', 'row-rule-break', and
Adjusting gap decoration endpoints: The 'rule-inset' properties</h3>

<pre class='propdef'>
Name: column-rule-edge-inset-start, column-rule-edge-inset-end, column-rule-interior-inset-start, column-rule-interior-inset-end, row-rule-edge-inset-start, row-rule-edge-inset-end, row-rule-interior-inset-start, row-rule-interior-inset-end
Name: column-rule-inset-cap-start, column-rule-inset-cap-end, column-rule-inset-junction-start, column-rule-inset-junction-end, row-rule-inset-cap-start, row-rule-inset-cap-end, row-rule-inset-junction-start, row-rule-inset-junction-end
Value: <<length-percentage>>
Initial: ''0''
Applies to: <a>grid containers</a>, <a>flex containers</a>, <a>multicol containers</a>, and <a>grid lanes containers</a>
Expand All @@ -994,18 +994,72 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties</h3>
These properties can be used to offset the start and end points of <a>gap decorations</a> relative to the
<a>segment endpoints</a> which would normally determine where decorations start and end.

<p>An <dfn>edge segment endpoint</dfn> is any [=segment endpoint=] created at the content edges of the container.</p>
<p>An <dfn>interior segment endpoint</dfn> is any [=segment endpoint=] created at a [=gap junction=].</p>
<p>
A <dfn>junction segment endpoint</dfn> is a [=segment endpoint=] at a [=gap junction=]
where one or more other [=gap decoration segments=] are also present.
Comment thread
kbabbitt marked this conversation as resolved.
</p>

<p>
A <dfn>cap segment endpoint</dfn> is any [=segment endpoint=] that is not a [=junction segment endpoint=].
This includes endpoints at the container's content edges,
as well as endpoints at a [=gap junction=] where no other [=gap decoration segment=] is present.
Comment thread
kbabbitt marked this conversation as resolved.
</p>


<div class="example">
<pre>
.simple-grid {
rule-break: intersection;
rule-visibility-items: between;
}
</pre>
<figure>
<img alt="" src="images/example-cap-junct-simple-grid.png">
<figcaption>
In a fully populated grid, every interior [=gap junction=] produces [=junction segment endpoints=] (marked <b>J</b>),
while the container's content edges produce [=cap segment endpoints=] (marked <b>C</b>).
</figcaption>
</figure>
</div>

<div class="example">
<pre>
.simple-grid-with-empty-cells {
rule-break: intersection;
rule-visibility-items: between;
}
</pre>
<figure>
<img alt="" src="images/example-cap-junct-less-simple-grid.png">
<figcaption>
When a [=gap decoration segment=] terminates at an interior [=gap junction=]
where no other [=gap decoration segment=] is present,
Comment thread
kbabbitt marked this conversation as resolved.
its endpoint is a [=cap segment endpoint=].
</figcaption>
</figure>
</div>

<div class="example" id="example-cap-junction-donut">
<pre>
.donut-grid-layout {
rule-break: intersection;
rule-visibility-items: between;
}
</pre>
<figure>
<img alt="" src="images/example-cap-junct-donut-grid.png">
<figcaption>
In a "donut" grid layout, where items surround an empty space in the middle of the container,
endpoints bordering the empty interior region are [=cap segment endpoints=].
</figcaption>
</figure>
</div>

Percentages are resolved against the <dfn>crossing gap width</dfn>, defined as follows:

@kbabbitt kbabbitt Apr 29, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the distinction here is actually:

<dl>
    <dt>
        Segment endpoints at a [=gap junction=]
    <dd>
        The [=crossing gap width=] is the size of the [=gap junction=]
        /* etc. ... */
    <dt>
        Other segment endpoints
    <dd>
        The [=crossing gap width=] is ''0''.
</dl>

The reason I think this is that the percentage basis for segment endpoints next to a spanner in multicol is also 0; see https://codepen.io/kevinbcmu/pen/OPbJwWw

Let's also make sure we have a WPT for that case.

@oSamDavis oSamDavis Apr 29, 2026

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done, let me know if that's sufficient.

<dl>
<dt>
Edge segment endpoints
<dd>
The [=crossing gap width=] is ''0''.
Segment endpoints at a [=gap junction=]

<dt>
Interior segment endpoints
<dd>
The [=crossing gap width=] is the size of the [=gap junction=]
in the same dimension as the [=gap=] in which the [=segment endpoint=] lies
Expand All @@ -1017,16 +1071,29 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties</h3>
However, in cases where [=gaps=] intersect or abut one another at overlapping intervals,
the [=crossing gap width=] will be determined by the union of such intervals.
See <a href="#example-unpaired-endpoints-1">this example</a> for one such case.
<dt>
Other segment endpoints
<dd>
The [=crossing gap width=] is ''0''.
</dl>

<p class="note">
Note: This classification by position is distinct from the
[=cap segment endpoint=] / [=junction segment endpoint=] classification.
A [=cap segment endpoint=] may sit at a container edge or at a [=gap junction=]
(see <a href="#example-cap-junction-donut">this example</a>). Hence,
''column-rule-inset-cap-start: 50%'' resolves to half the [=gap junction=]
size at an interior cap and ''0'' at other caps such as container edges.
</p>

<p>
The 'column-rule-edge-inset-start' and 'row-rule-edge-inset-start' properties apply to [=start segment endpoints=] that are [=edge segment endpoints=].
The 'column-rule-interior-inset-start' and 'row-rule-interior-inset-start' properties apply to [=start segment endpoints=] that are [=interior segment endpoints=].
The 'column-rule-inset-cap-start' and 'row-rule-inset-cap-start' properties apply to [=start segment endpoints=] that are [=cap segment endpoints=].
The 'column-rule-inset-junction-start' and 'row-rule-inset-junction-start' properties apply to [=start segment endpoints=] that are [=junction segment endpoints=].
For these properties, positive values offset in the [=end=] direction, and negative values offset in the [=start=] direction, along the axis of the gap.
</p>
<p>
The 'column-rule-edge-inset-end' and 'row-rule-edge-inset-end' properties apply to [=end segment endpoints=] that are [=edge segment endpoints=].
The 'column-rule-interior-inset-end' and 'row-rule-interior-inset-end' properties apply to [=end segment endpoints=] that are [=interior segment endpoints=].
The 'column-rule-inset-cap-end' and 'row-rule-inset-cap-end' properties apply to [=end segment endpoints=] that are [=cap segment endpoints=].
The 'column-rule-inset-junction-end' and 'row-rule-inset-junction-end' properties apply to [=end segment endpoints=] that are [=junction segment endpoints=].
For these properties, positive values offset in the [=start=] direction, and negative values offset in the [=end=] direction, along the axis of the gap.
</p>

Expand All @@ -1048,10 +1115,10 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties</h3>
</div>

<wpt>
parsing/rule-edge-start-end-inset-computed.html
parsing/rule-edge-start-end-inset-invalid.html
parsing/rule-interior-start-end-inset-computed.html
parsing/rule-interior-start-end-inset-invalid.html
parsing/rule-inset-cap-start-end-computed.html
parsing/rule-inset-cap-start-end-invalid.html
parsing/rule-inset-junction-start-end-computed.html
parsing/rule-inset-junction-start-end-invalid.html
flex/flex-gap-decorations-011.html
flex/flex-gap-decorations-013.html
flex/flex-gap-decorations-014.html
Expand Down Expand Up @@ -1107,7 +1174,7 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties</h3>
}
</pre>
<figure>
<img alt="" src="images/example-column-start-end-edge-interior-insets.png">
<img alt="" src="images/example-column-inset-start-end.png">
<figcaption>
A start inset of ''8px'' recedes the starts of [=gap decorations=],
while an end inset of ''0px'' aligns the ends of [=gap decorations=] with content edges.
Expand All @@ -1118,11 +1185,11 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties</h3>
<pre class='propdef shorthand'>
Name: column-rule-inset-start, column-rule-inset-end, row-rule-inset-start, row-rule-inset-end
Value: <<length-percentage>>
Applies to: Same as 'column-rule-edge-inset-start', 'column-rule-interior-inset-start', 'column-rule-edge-inset-end', 'column-rule-interior-inset-end', 'row-rule-edge-inset-start', 'row-rule-interior-inset-start', 'row-rule-edge-inset-end', and 'row-rule-interior-inset-end'
Applies to: Same as 'column-rule-inset-cap-start', 'column-rule-inset-junction-start', 'column-rule-inset-cap-end', 'column-rule-inset-junction-end', 'row-rule-inset-cap-start', 'row-rule-inset-junction-start', 'row-rule-inset-cap-end', and 'row-rule-inset-junction-end'
</pre>

These [=shorthand properties=] set the corresponding ''-edge-'' and ''-interior-'' properties to the same value.
For example, 'column-rule-inset-start' sets both 'column-rule-edge-inset-start' and 'column-rule-interior-inset-start' to the same value.
These [=shorthand properties=] set the corresponding ''-cap-'' and ''-junction-'' properties to the same value.
For example, 'column-rule-inset-start' sets both 'column-rule-inset-cap-start' and 'column-rule-inset-junction-start' to the same value.

<pre class='propdef shorthand'>
Name: rule-inset-start
Expand All @@ -1148,63 +1215,63 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties</h3>
parsing/rule-inset-start-end-valid.html
</wpt>

<h4 id="insets-edge-interior">
''-edge-'' and ''-interior-'' shorthands</h4>
<h4 id="insets-cap-junction">
''-cap-'' and ''-junction-'' shorthands</h4>

These shorthands allow authors to achieve different treatments at edge versus interior intersections.
These shorthands allow authors to achieve different treatments at [=cap segment endpoints=] versus [=junction segment endpoints=].

<div class="example">
<pre>
.inset-edge-0px-interior-negative-5px {
column-rule-edge-inset: 0px;
column-rule-interior-inset: -5px;
.inset-cap-0px-inset-junction-negative-5px {
column-rule-inset-cap: 0px;
column-rule-inset-junction: -5px;
column-rule-break: intersection;
}
</pre>
<figure>
<img alt="" src="images/example-column-interior-inset-5px.png">
<img alt="" src="images/example-column-inset-junction-5px.png">
<figcaption>
An interior inset of ''-5px'' extends the endpoints of interior <a>gap decorations</a>
slightly beyond the edges of adjacent items. An edge inset of ''0px'' aligns the endpoints of edge <a>gap decorations</a>
with the content edges.
A junction inset of ''-5px'' extends the endpoints of <a>gap decorations</a> at [=junction segment endpoints=]
slightly beyond the edges of adjacent items. A cap inset of ''0px'' aligns the endpoints of <a>gap decorations</a>
at [=cap segment endpoints=] with the content edges.
</figcaption>
</figure>
</div>

<pre class='propdef shorthand'>
Name: column-rule-edge-inset, column-rule-interior-inset, row-rule-edge-inset, row-rule-interior-inset
Name: column-rule-inset-cap, column-rule-inset-junction, row-rule-inset-cap, row-rule-inset-junction
Value: <<length-percentage>> [ <<length-percentage>> ]?
Applies to: Same as 'column-rule-edge-inset-start', 'column-rule-edge-inset-end', 'column-rule-interior-inset-start', 'column-rule-interior-inset-end', 'row-rule-edge-inset-start', 'row-rule-edge-inset-end', 'row-rule-interior-inset-start', and 'row-rule-interior-inset-end'
Applies to: Same as 'column-rule-inset-cap-start', 'column-rule-inset-cap-end', 'column-rule-inset-junction-start', 'column-rule-inset-junction-end', 'row-rule-inset-cap-start', 'row-rule-inset-cap-end', 'row-rule-inset-junction-start', and 'row-rule-inset-junction-end'
</pre>

These shorthands set the corresponding ''-start'' and ''-end'' properties.
For example, 'column-rule-edge-inset' sets both 'column-rule-edge-inset-start' and 'column-rule-edge-inset-end'.
For example, 'column-rule-inset-cap' sets both 'column-rule-inset-cap-start' and 'column-rule-inset-cap-end'.
If one value is specified, both properties are set to that value.
If two values are specified, ''-start'' is set to the first and ''-end'' is set to the second.

<pre class='propdef shorthand'>
Name: rule-edge-inset
Value: <<'column-rule-edge-inset'>>
Applies to: Same as 'column-rule-edge-inset' and 'row-rule-edge-inset'
Name: rule-inset-cap
Value: <<'column-rule-inset-cap'>>
Applies to: Same as 'column-rule-inset-cap' and 'row-rule-inset-cap'
</pre>

This [=shorthand property=] sets 'column-rule-edge-inset' and 'row-rule-edge-inset' to the same value.
This [=shorthand property=] sets 'column-rule-inset-cap' and 'row-rule-inset-cap' to the same value.

<pre class='propdef shorthand'>
Name: rule-interior-inset
Value: <<'column-rule-interior-inset'>>
Applies to: Same as 'column-rule-interior-inset' and 'row-rule-interior-inset'
Name: rule-inset-junction
Value: <<'column-rule-inset-junction'>>
Applies to: Same as 'column-rule-inset-junction' and 'row-rule-inset-junction'
</pre>

This [=shorthand property=] sets 'column-rule-interior-inset' and 'row-rule-interior-inset' to the same value.
This [=shorthand property=] sets 'column-rule-inset-junction' and 'row-rule-inset-junction' to the same value.

<wpt>
parsing/rule-edge-inset-bidirectional-shorthand.html
parsing/rule-edge-interior-inset-computed.html
parsing/rule-edge-interior-inset-invalid.html
parsing/rule-edge-interior-inset-shorthand.html
parsing/rule-edge-interior-inset-valid.html
parsing/rule-interior-inset-bidirectional-shorthand.html
parsing/rule-inset-cap-bidirectional-shorthand.html
parsing/rule-inset-cap-junction-computed.html
parsing/rule-inset-cap-junction-invalid.html
parsing/rule-inset-cap-junction-shorthand.html
parsing/rule-inset-cap-junction-valid.html
parsing/rule-inset-junction-bidirectional-shorthand.html
</wpt>

<h4 id="insets-universal">
Expand Down Expand Up @@ -1282,19 +1349,19 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties</h3>

<pre class='propdef shorthand'>
Name: column-rule-inset, row-rule-inset
Value: <<'column-rule-edge-inset'>> [ / <<'column-rule-interior-inset'>> ]?
Applies to: Same as 'column-rule-edge-inset', 'column-rule-interior-inset', 'row-rule-edge-inset', and 'row-rule-interior-inset'
Value: <<'column-rule-inset-cap'>> [ / <<'column-rule-inset-junction'>> ]?
Applies to: Same as 'column-rule-inset-cap', 'column-rule-inset-junction', 'row-rule-inset-cap', and 'row-rule-inset-junction'
</pre>

These shorthands set the corresponding edge and interior start and end values.
These shorthands set the corresponding cap and junction start and end values.
The order of values is:
<pre class='prod'>
edge-start edge-end? [/ interior-start interior-end?]?
cap-start cap-end? [/ junction-start junction-end?]?
</pre>

Omitted values are filled in as follows:
<ol>
<li>If the interior values are omitted, they are copied from the edge values.
<li>If the junction values are omitted, they are copied from the cap values.
<li>Any omitted end value is copied from the corresponding start value.
</ol>

Expand Down Expand Up @@ -2501,6 +2568,8 @@ Changes since the <a href="https://www.w3.org/TR/2026/WD-css-gaps-1-20260227/">2
<li>Moved the [[#gaps|gap]] properties from [[!CSS-ALIGN-3]] to this specification.
(<a href="https://github.com/w3c/csswg-drafts/issues/13089">Issue 13089</a>)
<li>Updated with links to additional WPTs.
<li>Updated edge and interior insets to be cap and junction insets.
(<a href="https://github.com/w3c/csswg-drafts/issues/13697">Issue 13697</a>)
<li>Clarified that gaps suppressed due to fragmentation still consume gap decoration values.
(<a href="https://github.com/w3c/csswg-drafts/issues/13754">Issue 13754</a>)
</ul>
Expand Down
Binary file added css-gaps-1/images/example-cap-junct-donut-grid.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added css-gaps-1/images/example-cap-junct-less-simple-grid.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added css-gaps-1/images/example-cap-junct-simple-grid.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
0 ...ges/example-column-interior-inset-5px.png → ...ges/example-column-inset-junction-5px.png
View file
Open in desktop
File renamed without changes
0 ...column-start-end-edge-interior-insets.png → ...images/example-column-inset-start-end.png
View file
Open in desktop
File renamed without changes