From f1c43255aef18dbc691c962ac1da67e1c87bc6f4 Mon Sep 17 00:00:00 2001 From: Javier Contreras Tenorio Date: Mon, 27 Oct 2025 11:09:29 -0700 Subject: [PATCH 1/2] initial commit --- CSSGapDecorations/explainer.md | 27 ++++++++++++++++++ .../example-column-interior-outset-5px.png | Bin 0 -> 2415 bytes ...column-start-end-edge-interior-outsets.png | Bin 0 -> 2345 bytes 3 files changed, 27 insertions(+) create mode 100644 CSSGapDecorations/images/example-column-interior-outset-5px.png create mode 100644 CSSGapDecorations/images/example-column-start-end-edge-interior-outsets.png diff --git a/CSSGapDecorations/explainer.md b/CSSGapDecorations/explainer.md index 57e350a8..3418df26 100644 --- a/CSSGapDecorations/explainer.md +++ b/CSSGapDecorations/explainer.md @@ -240,6 +240,33 @@ into the intersection and negative values receding from it. ``` +Authors may also adjust endpoints more granularly, making a distinction between "edge" +endpoints (which fall on the edge of the container), +and "interior" endpoints (any endpoint that is not an "edge"). + +```css +.edge-interior-outsets { + column-rule-edge-outset: 0px; + column-rule-interior-outset: 5px; +} +``` + + + +Similarly, authors can have even more granular control to adjust the positions of endpoints, +making a distinction between "start" and "end" endpoints, in addition to the "edge" and "interior" distinction. + +```css +.start-end-edge-interior-outsets { + column-rule-start-edge-outset: 0px; + column-rule-end-edge-outset: 8px; + column-rule-start-interior-outset: 0px; + column-rule-end-interior-outset: 8px; +} +``` + + + ### Interaction with spanning items Authors may also change the set of intersections where gap decorations break, diff --git a/CSSGapDecorations/images/example-column-interior-outset-5px.png b/CSSGapDecorations/images/example-column-interior-outset-5px.png new file mode 100644 index 0000000000000000000000000000000000000000..60b7e26ea213951cdfb6240374a040d75928656b GIT binary patch literal 2415 zcmeAS@N?(olHy`uVBq!ia0y~yU}6GdMh-Thi1o$mNkEFRILO_JVcj{Imp~3nx}&cn z1H;CC?mvmFKt5-IM`SSrgP1A^GkON8d;p5Ec)B=-RK&f#W7zlDK!D-k z!-2B&ki2&5y7mvRkKLHxt2zISO>r_X-QiAFKl_1+?OO&uJnBS>%q@9-?x8YDn9r6VzK^?ywrJ> z?4Qq=&n&)$Y|m)E7%d;rQzd2j0+ynHCH5}4L+hoJ>&=$c7=1p|i;?<~?RjPo%spw! zXeIS+JFyxYx!=(Y53*&CCjwrL9UAIz>ry{_V5F!{sq=10wr UhP~F`fsG^vPgg&ebxsLQ09XUt0RR91 literal 0 HcmV?d00001 diff --git a/CSSGapDecorations/images/example-column-start-end-edge-interior-outsets.png b/CSSGapDecorations/images/example-column-start-end-edge-interior-outsets.png new file mode 100644 index 0000000000000000000000000000000000000000..9e1b64af346691b5ae1b055f6c51fb0b61ca992d GIT binary patch literal 2345 zcmeAS@N?(olHy`uVBq!ia0y~yU}6ViehxOE$n#INVL*zpILO_JVcj{Imp~3nx}&cn z1H;CC?mvmFKt5-IM`SSrgP1A^GkON8d|+VU*yriu7*Y}U_O9cq+Xf;I7gxRhDA)V_ z#orZ^uN9d7XlxOfGtYRkNo{j?&V?Dp=i(U{>i@=>Gc^34ZNb2h^yl}Qf_cxY*z|92 z%e`Bb)3a{=k58%dD%n4uG5?u4@2(63gCZY8g8(~&LkBa1!VyLWfk!|q3mF(%fV!PV zrALDWe{x7ZXL;TC#|pz;W{d93tbEpXhxjB@5zWZZq0QI#IO04*gZ|d{zju{>jAVo- zzC-+-3=TUiNlJw={Q7gB@0@q=^tRmS?Q+tKU#s6^Gd{nkx$@cUKPKn%MpOD|4yUAK z>o9yi=e1hR6^U5sz;|bCik(SFQG3=hFdPwOKVG;do#DXrTi)wxz91@AEe&iwl=!I_u^OK{N|bI_YT^8_N|+hZa!M3kJe=*m7ZuVfFr=x zM5(Y{R?oU#jq Date: Mon, 3 Nov 2025 10:07:26 -0800 Subject: [PATCH 2/2] insets instead of outsets --- ...-outset-0px.png => example-column-inset-0px.png} | Bin ...rcent.png => example-column-inset-50percent.png} | Bin ...-outset-5px.png => example-column-inset-5px.png} | Bin ...s-5px.png => example-column-inset-minus-5px.png} | Bin ...px.png => example-column-interior-inset-5px.png} | Bin ...ample-column-start-end-edge-interior-insets.png} | Bin ...outset-0px.png => example-segment-inset-0px.png} | Bin ...-5px.png => example-segment-inset-minus-5px.png} | Bin ...s-5px.png => example-segment-inset-plus-5px.png} | Bin 9 files changed, 0 insertions(+), 0 deletions(-) rename CSSGapDecorations/images/{example-column-outset-0px.png => example-column-inset-0px.png} (100%) rename CSSGapDecorations/images/{example-column-outset-50percent.png => example-column-inset-50percent.png} (100%) rename CSSGapDecorations/images/{example-column-outset-5px.png => example-column-inset-5px.png} (100%) rename CSSGapDecorations/images/{example-column-outset-minus-5px.png => example-column-inset-minus-5px.png} (100%) rename CSSGapDecorations/images/{example-column-interior-outset-5px.png => example-column-interior-inset-5px.png} (100%) rename CSSGapDecorations/images/{example-column-start-end-edge-interior-outsets.png => example-column-start-end-edge-interior-insets.png} (100%) rename CSSGapDecorations/images/{example-segment-outset-0px.png => example-segment-inset-0px.png} (100%) rename CSSGapDecorations/images/{example-segment-outset-minus-5px.png => example-segment-inset-minus-5px.png} (100%) rename CSSGapDecorations/images/{example-segment-outset-plus-5px.png => example-segment-inset-plus-5px.png} (100%) diff --git a/CSSGapDecorations/images/example-column-outset-0px.png b/CSSGapDecorations/images/example-column-inset-0px.png similarity index 100% rename from CSSGapDecorations/images/example-column-outset-0px.png rename to CSSGapDecorations/images/example-column-inset-0px.png diff --git a/CSSGapDecorations/images/example-column-outset-50percent.png b/CSSGapDecorations/images/example-column-inset-50percent.png similarity index 100% rename from CSSGapDecorations/images/example-column-outset-50percent.png rename to CSSGapDecorations/images/example-column-inset-50percent.png diff --git a/CSSGapDecorations/images/example-column-outset-5px.png b/CSSGapDecorations/images/example-column-inset-5px.png similarity index 100% rename from CSSGapDecorations/images/example-column-outset-5px.png rename to CSSGapDecorations/images/example-column-inset-5px.png diff --git a/CSSGapDecorations/images/example-column-outset-minus-5px.png b/CSSGapDecorations/images/example-column-inset-minus-5px.png similarity index 100% rename from CSSGapDecorations/images/example-column-outset-minus-5px.png rename to CSSGapDecorations/images/example-column-inset-minus-5px.png diff --git a/CSSGapDecorations/images/example-column-interior-outset-5px.png b/CSSGapDecorations/images/example-column-interior-inset-5px.png similarity index 100% rename from CSSGapDecorations/images/example-column-interior-outset-5px.png rename to CSSGapDecorations/images/example-column-interior-inset-5px.png diff --git a/CSSGapDecorations/images/example-column-start-end-edge-interior-outsets.png b/CSSGapDecorations/images/example-column-start-end-edge-interior-insets.png similarity index 100% rename from CSSGapDecorations/images/example-column-start-end-edge-interior-outsets.png rename to CSSGapDecorations/images/example-column-start-end-edge-interior-insets.png diff --git a/CSSGapDecorations/images/example-segment-outset-0px.png b/CSSGapDecorations/images/example-segment-inset-0px.png similarity index 100% rename from CSSGapDecorations/images/example-segment-outset-0px.png rename to CSSGapDecorations/images/example-segment-inset-0px.png diff --git a/CSSGapDecorations/images/example-segment-outset-minus-5px.png b/CSSGapDecorations/images/example-segment-inset-minus-5px.png similarity index 100% rename from CSSGapDecorations/images/example-segment-outset-minus-5px.png rename to CSSGapDecorations/images/example-segment-inset-minus-5px.png diff --git a/CSSGapDecorations/images/example-segment-outset-plus-5px.png b/CSSGapDecorations/images/example-segment-inset-plus-5px.png similarity index 100% rename from CSSGapDecorations/images/example-segment-outset-plus-5px.png rename to CSSGapDecorations/images/example-segment-inset-plus-5px.png