From 07d761dd10a918b2bf95c920b2aa07dfe2156aa8 Mon Sep 17 00:00:00 2001
From: "Sam Davis Omekara (from Dev Box)" An edge segment endpoint is any [=segment endpoint=] created at the content edges of the container. An interior segment endpoint is any [=segment endpoint=] created at a [=gap junction=].
+ A cap segment endpoint is any [=segment endpoint=] whose [=gap decoration segment=]
+ cannot join with any other [=gap decoration segment=] at that location.
+ This includes endpoints at the container's content edges,
+ as well as endpoints left dangling at a [=gap junction=] because no corresponding [=gap decoration segment=]
+ exists to join with due to 'rule-break' or 'rule-visibility-items' properties.
+
+ A junction segment endpoint is any [=segment endpoint=] whose [=gap decoration segment=] can join
+ with one or more other [=gap decoration segments=] at the same [=gap junction=].
+
- 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.
- 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.
{K}j
z
- A cap segment endpoint is any [=segment endpoint=] whose [=gap decoration segment=]
- cannot join with any other [=gap decoration segment=] at that location.
- This includes endpoints at the container's content edges,
- as well as endpoints left dangling at a [=gap junction=] because no corresponding [=gap decoration segment=]
- exists to join with due to 'rule-break' or 'rule-visibility-items' properties.
+ A junction segment endpoint is a [=segment endpoint=] at a [=gap junction=]
+ where one or more other [=gap decoration segments=] are also present.
- A junction segment endpoint is any [=segment endpoint=] whose [=gap decoration segment=] can join
- with one or more other [=gap decoration segments=] at the same [=gap junction=].
+ A cap segment endpoint 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
+ due to 'rule-break' or 'rule-visibility-items' properties.
A cap segment endpoint 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
- due to 'rule-break' or 'rule-visibility-items' properties.
+ as well as endpoints at a [=gap junction=] where no other [=gap decoration segment=] is present.
+ 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 ''0'' at a container edge, but to half the [=gap junction=] size at an interior cap.
+
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 76877f6ef9e410b978dd0e21c9bc197f00c928f8 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 ''0'' at a container edge, but to half the [=gap junction=] size at an interior cap.
+ 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.
- 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: <
+ .simple-grid {
+ rule-break: intersection;
+ rule-visibility-items: between;
+ }
+
+
+
+ .simple-grid-with-empty-cells {
+ rule-break: intersection;
+ rule-visibility-items: between;
+ }
+
+
+
+ .donut-grid-layout {
+ rule-break: intersection;
+ rule-visibility-items: between;
+ }
+
+
+
+
Name: column-rule-inset-start, column-rule-inset-end, row-rule-inset-start, row-rule-inset-end
Value: <
- 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.
Name: rule-inset-start
@@ -1001,63 +1065,63 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties
parsing/rule-inset-start-end-valid.html
-
- ''-edge-'' and ''-interior-'' shorthands
+
+ ''-cap-'' and ''-junction-'' shorthands
- 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=].
- .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;
}
+
- 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: <
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.
- 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'
- 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.
- 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'
- 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.
@@ -1135,19 +1199,19 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties
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'
- 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:
- edge-start edge-end? [/ interior-start interior-end?]?
+ cap-start cap-end? [/ junction-start junction-end?]?
Omitted values are filled in as follows:
-
diff --git a/css-gaps-1/images/example-cap-junct-donut-grid.png b/css-gaps-1/images/example-cap-junct-donut-grid.png
new file mode 100644
index 0000000000000000000000000000000000000000..1a3aa258a138acb6a3aac940f0586cbb8d03437d
GIT binary patch
literal 6968
zcmeI1X;4#Ho5!(L+(kqISrtSZkkD+hg9wPqrh=kEz$PN10){OhfplvN$dcG@VNWZv
zi3Hh0LV^fk4>W>=JrWdTOALXqBq8sK-Tlr?)l|JxQ&Te^razo4_uSl^^W1Zu|L^(V
z2WMOyc5GGHDj^}Uv*s6n$3OJeWUkQc0L8siWLVF<^&vB3{zjx07Ub5?8pBa)?mLtm2iv-rmOP
z4@Eh-xw(YKePJhbFVX4r=2z#7UXaO_H*VbUrKKB{-uR%U=i=)HgBgxMW923|hB~#?
zN1D{5I8?cuq9X0=7~a4aHd_}GDjPGrvJ)jdYGgzuhR^u6Khr7oYkzh
<7+*7R?jKJSpDQ>WdUWpu
zdZQ)@%a>TxpgW|YtLcj13OCg&P>hnb^%^=+O
@@ -2452,6 +2448,4 @@ Changes since the 1
+
+
+
+
.donut-grid-layout {
rule-break: intersection;
@@ -917,7 +916,7 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties
The [=crossing gap width=] is ''0''.