From 2ddb28c95845767493de2bfcb9152eb336ec33c9 Mon Sep 17 00:00:00 2001
From: "Sam Davis Omekara (from Dev Box)"
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: <
+ The overlap-join keyword + produces neat joins between crossing [=gap decorations=]: +
+ ++ Note: At a [=junction segment endpoint=], this is equivalent to an inset of + ''calc(-50% - w / 2)'', + where w is the [=used value=] of the crossing decoration's + 'column-rule-width' or 'row-rule-width'. +
+
+ .inset-overlap-join {
+ rule-inset: overlap-join;
+ rule-break: intersection;
+ rule-visibility-items: between;
+ }
+
+
+
+ .inset-overlap-join {
+ rule-inset: overlap-join;
+ rule-break: intersection;
+ rule-visibility-items: between;
+ }
+
+
+
.inset-end {
@@ -1159,6 +1218,13 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties
multicol/multicol-gap-decorations-022.html
multicol/multicol-gap-decorations-023.html
multicol/multicol-gap-decorations-033.html
+ parsing/rule-inset-cap-start-end-overlap-join-computed.html
+ parsing/rule-inset-cap-start-end-overlap-join-invalid.html
+ parsing/rule-inset-junction-start-end-overlap-join-computed.html
+ parsing/rule-inset-junction-start-end-overlap-join-invalid.html
+ grid/grid-gap-decorations-overlap-join-001.html
+ grid/grid-gap-decorations-overlap-join-002.html
+ grid/grid-gap-decorations-overlap-join-dangling-001.html
@@ -1184,7 +1250,7 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties
Name: column-rule-inset-start, column-rule-inset-end, row-rule-inset-start, row-rule-inset-end
- Value: <>
+ Value: <> | ''overlap-join''
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'
@@ -1240,7 +1306,7 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties
Name: column-rule-inset-cap, column-rule-inset-junction, row-rule-inset-cap, row-rule-inset-junction
- Value: <> [ <> ]?
+ Value: [ <> | ''overlap-join'' ] [ <> | ''overlap-join'' ]?
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'
@@ -2572,6 +2638,8 @@ Changes since the 2
(Issue 13697)
(`w=b{9{n6=jRyJ!d@6~6o-unO5>HRmes;j?V{iG*e zT5j@ct)=Iq(|c2O->vHNvy0W1LZ #KX{wtM$petoWgXVo*)nYX^&6?x>XyZrF1xiPo- z? wI}D={`LLjQDgtl=~+!&Xt$@VxpV#**^P7fR$I;wKYQN(KhvtrSypx5 zch!{@ZuxubWBBV^bAS%Nefhr1yR2=hcfMwAkGy~P*}60aX{Q=SrX%7C4x<#lAV}B{ zwKnWN4|{V}!kM;Rm7kZ{uUfTg{ 6kzf^&zyL&Fay7AUpG_U(rQGkBjK z)824XE^C!GN=}33yNK#5YhLgAH)BC_bMwC!oA(!8dGqbtHhZNP)vr%~D~6hR;PT_! zeXBvaYX0WCz~pP@YdT-<@wWe54 wD!rd}=Fqzbt0+ @t^es$`%raFZ~pJHpvj;A%R5@l(^(}p*=n2pj?Le`#ea1_U>qrZ z|NQU9@BQBw|6TPraPNDo>I2qUJ9n&JEZohlpO{ b%7 literal 0 HcmV?d00001 diff --git a/css-gaps-1/images/example-2-overlap-join.png b/css-gaps-1/images/example-2-overlap-join.png new file mode 100644 index 0000000000000000000000000000000000000000..94a4efe499e20bd9e24854e06494318461edbab6 GIT binary patch literal 3336 zcmeH~ZCH}`9>;HM9$PEz;aU%l;$s$?&92AvKTr$Tnr`veXuuZKBtaOnDITu`@5j z%H{?dF+oeO={0dUr9=WHM`?zltf^xN>H$R}d W%z zV?qI-wc;&%iZi%>Gb=ig0028YU*Lo~0h 9(nXk2cRQRPE;C$X+)GQj-VuJ_Ut zyfbMLO}^30P1^*&tSh <`&^_;bJ;Zfm;XIiK~7P04Q>mJ73)P7to@{PeU}z%Xx_V rv-KK_ONwW%i)}dCu4gw ztTUT?6~}57#dEkQ-ICV0bjKQeMc-N5wN>>=!%j}K%nKFCOy;)Ty@9;|*7OWmJ)|&c zDV<{^lULbV+?_{HR&xCN^0IHV@;HZ ;S9gq%X6a z_MBr+p{g)0jmT lNdp6P zi6XX+UqW6D%JoN$Toq-_Wk-4Y32iqACOw$RSW;f#Bu)@$%D4POoWyNA&F*=s4ypT) zrk$>c?`v7LSiTzT=80^N&?K^CBD6_LX+tbl8e|>paVaIT%l+ X-yF4fAd^2 zJmf9S9m1v=V+hn3^Jt$|Ao6eKjY6OrRfLKl*WEwQnXO1^4%E-_YiEXi3VaCcAL zy;Jx@@KS@1AM|@3V(HiM!bNDfxdn|>v!JQh)4BqF`FA{$**RceVF<{^7{6MWl)0Uw zB2>{O5hHy@2?56!_Ubx6@{#!_`rr}mbLxQcvRUJm1H4okX$Q5In}_d6P^Rz|%d7Y! zHK~+9el3@tMK{%FW9McMr(vs_4iU+#dxE0h2OkP2uBCm~KAc=J2#w#Jzsj98iatfn ztLG1feL9^XJ~tWvL3^!Lb$*)6FFao~ZtJOn1M~G|aG-LH*VlufUvd7`lM|TH(NW1h zN2JYWlkA)L55Ax)*}>NEUg`LSme*M8!T o2g+?QIVqn zQ3<0gmoD5G&+oO*`kRExE`RZy;HOuUW~!b;FYnd3DdpA}8ixhWhLFBf2|D|Xrocf8 zyv!_x%RT!Bge9h@=cgH*=2LU+45TbKNQ$>)x8HyF@zs;3(WcOC>W1jox%`KU)^w z`A8XDfDDnH3w~sO=JB|*LX-das&c)*Q1|ynj -&oXcR99N-VA3zST!%LHL7G@t+me} zC=_?976TgcLdp)q=lCT(=iI%){ddQ@c!EcY&)E+qRc~MYlFo2_s5In6G%0)qm<<}u zn5+#lKoFds`g!-;KbOIw5SAL#nqD>hK^9+Wyb@R2uV)*7 rx4>adfcOjY@-|#s8G$92Wnuaz?-IUzcb8g!oH24_A+^*g5;_8`0D-+^y$^QOPY> z->TSQ7p*r}{Fx~)EcybK9e-%*m9~CgTQ&t}{jb5FrT+0Mp8>s1a#$_dI}DSSsCsKE zydhtbQnZcFNZ|{9DjbSrCN;Mmt%fmQrmoo>BwB4p+R=cW5zg>YR!{$T@hoEFyDfpdx~!@g&-Iw>T&JmO3dz1xBpvL8g%{_uNt ~+ zjOJ)(VGI$95c?9vW$>r|e1_A_aN-)Tvj Date: Mon, 27 Apr 2026 20:07:54 -0700 Subject: [PATCH 2/9] nit and update --- css-gaps-1/Overview.bs | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/css-gaps-1/Overview.bs b/css-gaps-1/Overview.bs index 99ee4a183af6..9e4f1f4e4d3a 100644 --- a/css-gaps-1/Overview.bs +++ b/css-gaps-1/Overview.bs @@ -1111,7 +1111,7 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties
Note: At a [=junction segment endpoint=], this is equivalent to an inset of - ''calc(-50% - w / 2)'', - where w is the [=used value=] of the crossing decoration's + ''calc(-50% - |w| / 2)'', + where |w| is the [=used value=] of the crossing decoration's 'column-rule-width' or 'row-rule-width', whichever applies.
+
+
The overlap-join keyword - produces neat joins between crossing [=gap decorations=]: + produces neat joins between [=gap decorations=] that meet at the same [=gap junction=]:
Note: At a [=junction segment endpoint=], this is equivalent to an inset of @@ -1115,7 +1116,7 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties
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: <+> | ''overlap-join'' + Value: < > Initial: ''0'' Applies to: grid containers, flex containers, multicol containers, and grid lanes containers Inherited: no @@ -991,6 +991,10 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties Animation type: by computed value type
+ <inset-value> = <+ These properties can be used to offset the start and end points of gap decorations relative to the segment endpoints which would normally determine where decorations start and end. @@ -1098,7 +1102,7 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties> | overlap-join +
- The overlap-join keyword + The overlap-join keyword produces neat joins between [=gap decorations=] that meet at the same [=gap junction=]:
@@ -1130,9 +1134,9 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties
Name: column-rule-inset-start, column-rule-inset-end, row-rule-inset-start, row-rule-inset-end - Value: <@@ -1307,7 +1311,7 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties> | ''overlap-join'' + Value: < > 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'
Name: column-rule-inset-cap, column-rule-inset-junction, row-rule-inset-cap, row-rule-inset-junction - Value: [ <@@ -2639,7 +2643,7 @@ Changes since the 2 (Issue 13697)> | ''overlap-join'' ] [ < > | ''overlap-join'' ]? + Value: < > < >? 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'
@@ -1119,8 +1119,7 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties 'column-rule-width' or 'row-rule-width', whichever applies.
- 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 this example). 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. -
-
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=].
From da72bd28492b4bed84cd0fd7cca33f0a9903755c Mon Sep 17 00:00:00 2001
From: "Sam Davis Omekara (from Dev Box)"
+ 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 this example). 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. +
+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=]. @@ -1102,13 +1111,6 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties At a [=junction segment endpoint=], the [=gap decoration=] extends into the [=gap junction=] by half the [=crossing gap width=], plus half the [=used value=] of the crossing gap's 'column-rule-width' or 'row-rule-width' (whichever applies). - -
- Note: At a [=junction segment endpoint=], this is equivalent to an inset of - ''calc(-50% - |w| / 2)'', - where |w| is the [=used value=] of the crossing decoration's - 'column-rule-width' or 'row-rule-width', whichever applies. -