Skip to content

[css-gaps-1] Update outset properties #12603 #13024

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

[css-gaps-1] Update outset properties #12603 #13024

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
119 changes: 113 additions & 6 deletions css-gaps-1/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -483,10 +483,20 @@ Pairing gap intersection points into segments</h4>
</div>

<h3 id="outset">
Adjusting gap decoration endpoints: The 'column-rule-outset', 'row-rule-outset', and 'rule-outset' properties</h3>
Adjusting gap decoration endpoints: The 'rule-outset' properties</h3>

<pre class='propdef'>
Name: column-rule-outset, row-rule-outset
Name: column-rule-edge-start-outset, column-rule-edge-end-outset, row-rule-edge-start-outset, row-rule-edge-end-outset
Value: <<length-percentage>>
Initial: ''0''
Applies to: <a>grid containers</a>, <a>flex containers</a>, <a>multicol containers</a>, and <a>masonry containers</a>
Inherited: no
Percentages: refer to the <a>crossing gap width</a>
Animation type: by computed value type
</pre>

<pre class='propdef'>
Name: column-rule-interior-start-outset, column-rule-interior-end-outset, row-rule-interior-start-outset, row-rule-interior-end-outset
Value: <<length-percentage>>
Initial: ''50%''
Applies to: <a>grid containers</a>, <a>flex containers</a>, <a>multicol containers</a>, and <a>masonry containers</a>
Expand All @@ -497,12 +507,70 @@ Adjusting gap decoration endpoints: The 'column-rule-outset', 'row-rule-outset',

These properties can be used to offset the endpoints of <a>gap decorations</a> relative to the
<a>gap intersection points</a> which would normally determine their endpoints.

<ul>
<li>Let |edge-intersection| refer to any [=gap intersection points=] at the content edges of a container.</li>
<li>Let |interior-intersection| refer to all other [=gap intersection points=].</li>
<li>Let |decoration-segment| refer to any segment that connects a pair of adjacent [=gap intersection points=].</li>
<li>Let |start-endpoint| and |end-endpoint| refer to the two endpoints of a given |decoration-segment|.
A given |start-endpoint| and |end-endpoint| can be either a |edge-intersection| or a |interior-intersection|.</li>
</ul>

The 'column-rule-edge-start-outset' and 'row-rule-edge-start-outset' properties control the behavior for any |start-endpoint| that is an |edge-intersection|,
while the 'column-rule-edge-end-outset' and 'row-rule-edge-end-outset' properties control the behavior for any |end-endpoint| that is an |edge-intersection|.
Positive values extend outwards, beyond the container's content bounds,
while negative values recede inwards from the content edge.

The 'column-rule-interior-start-outset' and 'row-rule-interior-start-outset' properties control the behavior for any |start-endpoint| that is an |interior-intersection|,
while the 'column-rule-interior-end-outset' and 'row-rule-interior-end-outset' properties control the behavior for any |end-endpoint| that is an |interior-intersection|.
Positive values extend towards the center of the intersection,
while negative values recede away from the intersection.

The initial value of ''50%'' places the <a>gap decoration</a> endpoint in the center of the intersection.
With a value of ''0'', the <a>gap decoration</a> endpoint will coincide with the edge of the intersection.
Positive values extend towards the center of the intersection;
negative values recede from it.
These offsets also apply at the edges of the container,
where positive values may extend beyond the content bounds of the container.

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

Sets the column-rule-edge-start-outset and column-rule-edge-end-outset properties to the specified values.
Similarly, sets the row-rule-edge-start-outset and row-rule-edge-end-outset properties to the specified values.

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

Sets the column-rule-interior-start-outset and column-rule-interior-end-outset properties to the specified values.
Similarly, sets the row-rule-interior-start-outset and row-rule-interior-end-outset properties to the specified values.

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

Sets the 'column-rule-edge-outset' and 'row-rule-edge-outset' properties to the same value.

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

Sets the 'column-rule-interior-outset' and 'row-rule-interior-outset' properties to the same value.

<pre class='propdef shorthand'>
Name: column-rule-outset, row-rule-outset
Value: <<length-percentage>> [ <<length-percentage>> ]?
Initial: ''0''
Applies to: Same as 'column-rule-edge-outset', 'column-rule-interior-outset', 'row-rule-edge-outset', and 'row-rule-interior-outset'
</pre>

<pre class='propdef shorthand'>
Name: rule-outset
Expand Down Expand Up @@ -543,6 +611,45 @@ Adjusting gap decoration endpoints: The 'column-rule-outset', 'row-rule-outset',
</figure>
</div>

<div class="example">
<pre>
.outset-0px {
column-rule-start-edge-outset: 0px;
column-rule-end-edge-outset: 8px;
column-rule-start-interior-outset: 0px;
column-rule-end-interior-outset: 8px;
column-rule-break: intersection;
}
</pre>
<figure>
<img alt="" src="images/example-column-start-end-edge-interior-outsets.png">
<figcaption>
A start edge outset of ''0px'' and an end edge outset of ''8px'' align the endpoints of edge <a>gap decorations</a>
with the content edge at the start of the gap, and extend the endpoints slightly beyond the content edge at the end of the gap.
An interior outset of ''0px'' at the start intersection and ''8px'' at the end intersection align the start endpoints of interior <a>gap decorations</a>
with the edges of adjacent items at the start of the gap, and extend the end endpoints slightly beyond the edges of adjacent items at the end of the gap.
</figcaption>
</figure>
</div>

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

<div class="example">
<pre>
.outset-50percent {
Expand Down
Binary file added css-gaps-1/images/example-column-interior-outset-5px.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-column-start-end-edge-interior-outsets.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.