diff --git a/layout/docs/css-gap-decorations/Overview.bs b/layout/docs/css-gap-decorations/Overview.bs
index 4e9d7ed600fc8..e8ef4c88ef5f8 100644
--- a/layout/docs/css-gap-decorations/Overview.bs
+++ b/layout/docs/css-gap-decorations/Overview.bs
@@ -61,6 +61,16 @@ Module Interactions {#placement}
as additions to the Box Alignment spec.
+Definitions {#definitions}
+--------------------------------
+
+ In this specification, we will use the term lateral axis to refer to
+ the axis in which the rule's thickness grows (i.e. the axis ''column-rule-width''
+ use). The other axis is the rule's longitudinal axis and
+ its size in this axis is the rule length.
+ These definitions are relative to the rule itself and does not depend on if
+ the rule is a row or column rule, or what the 'writing-mode' is.
+
Rule Images and Gradients {#rule-image}
=======================================
@@ -98,13 +108,13 @@ The 'column-rule-image-slice' and 'row-rule-image-slice' Properties {#column-rul
Initial: 0
Applies to: multi-column containers, flex containers, grid containers, table and table-row-group containers
Inherited: no
- Percentages: refer to size of the image
+ Percentages: refer to image size in the rule's longitudinal axis
Computed value: one or two values, each either a number or percentage
Animation type: discrete
- 'column-rule-image-slice' specify inward offsets from the block axis
- start and end edges of the image, dividing it into three regions:
+ 'column-rule-image-slice' specify inward offsets from the start and end edges
+ of the image in the rule's longitudinal axis, dividing it into three regions:
two edge areas and one middle area.
When two values are specified, they set the offsets on the start and end sides in
@@ -112,7 +122,7 @@ The 'column-rule-image-slice' and 'row-rule-image-slice' Properties {#column-rul
<>
-
Percentages are relative to the block-size of the image.
+
Percentages are relative to the image size in the rule's longitudinal axis
<>
Numbers represent pixels in the image (if the image is a raster
@@ -131,8 +141,6 @@ The 'column-rule-image-slice' and 'row-rule-image-slice' Properties {#column-rul
However if the sum of the start and end values is equal to or greater than
the size of the image, the middle part becomes empty.
- 'row-rule-image-slice' works the same but in the inline axis.
-
The 'column-rule-image-repeat' and 'row-rule-image-repeat' Properties {#column-rule-image-repeat}
-------------------------------------------------------------------------------------------------
@@ -234,14 +242,6 @@ The 'column-rule-image' and 'row-rule-image' Shorthands {#column-rule-image}
Rule Positioning and Sizing {#size}
===================================
- In this specification, we will use the term lateral axis to refer to
- the axis in which the rule's thickness grows (i.e. the axis ''column-rule-width''
- use). The other axis is the rule's longitudinal axis and
- its size in this axis is the rule length.
- These definitions are relative to the rule itself and does not depend on if
- the rule is a row or column rule, or what the 'writing-mode' is.
-
-
The 'column-rule-width' and 'row-rule-width' Properties {#column-rule-width}
----------------------------------------------------------------------------
@@ -271,6 +271,8 @@ The 'column-rule-width' and 'row-rule-width' Properties {#column-rule-width}
Negative specified values are not allowed.
The [=used value=] is floored at zero (in case a 'calc()' expression evaluates to a negative value for example).
+ See [[#resolving-position-and-size-algo]] below for how 'auto' is resolved.
+
The 'column-rule-length' and 'row-rule-length' Properties {#column-rule-length}
-------------------------------------------------------------------------------
@@ -290,6 +292,8 @@ The 'column-rule-length' and 'row-rule-length' Properties {#column-rule-length}
Negative specified values are not allowed.
The [=used value=] is floored at zero (in case a 'calc()' expression evaluates to a negative value for example).
+ See [[#resolving-position-and-size-algo]] below for how 'auto' is resolved.
+
Note: These properties work the same as the '*-rule-width' properties in the [=lateral axis=], except that they have a different initial value.
@@ -663,7 +667,7 @@ The 'column-rule-extent' and 'row-rule-extent' Properties {#column-rule-extent}
These properties specify the extent of the rule in its [=longitudinal axis=].
segment is an abstract term to describe the distance between two consecutive gaps.
An extent can cover one or more segments and the extent size is the distance between
- the start position of the start-most of those segments and the end position of the end-most segment.
+ the start position of the first of those segments and the end position of the last segment.
We'll define ''column-rule-extent/segment'' in more detail in the container-specific sub-sections that follow.
The ''column-rule-extent/allow-overlap'' only affects rules in grid and table layout with spanning items/cells.
diff --git a/layout/docs/css-gap-decorations/Overview.html b/layout/docs/css-gap-decorations/Overview.html
index d75f06c510435..f38a8d48fb94a 100644
--- a/layout/docs/css-gap-decorations/Overview.html
+++ b/layout/docs/css-gap-decorations/Overview.html
@@ -8,10 +8,11 @@
-
-
+
+
-
+
+
the Box Alignment spec.
Additionally, all new properties and shorthands in this proposal are intended
as additions to the Box Alignment spec.
+
1.3. Definitions
+
In this specification, we will use the term lateral axis to refer to
+ the axis in which the rule’s thickness grows (i.e. the axis column-rule-width use). The other axis is the rule’s longitudinal axis and
+ its size in this axis is the rule length.
+ These definitions are relative to the rule itself and does not depend on if
+ the rule is a row or column rule, or what the writing-mode is.
2. Rule Images and Gradients
Authors may specify an image or gradient to be used in place of the column-rule-style.
These properties are loosely modeled after the corresponding border-image-* properties.
@@ -892,7 +913,7 @@
column-rule-image-slice specify inward offsets from the block axis
- start and end edges of the image, dividing it into three regions:
+
column-rule-image-slice specify inward offsets from the start and end edges
+ of the image in the rule’s longitudinal axis, dividing it into three regions:
two edge areas and one middle area.
When two values are specified, they set the offsets on the start and end sides in
that order. If the end value is missing, it is the same as the start value.
Numbers represent pixels in the image (if the image is a raster
image) or vector coordinates (if the image is a vector image).
@@ -952,7 +973,6 @@
The regions given by the column-rule-image-slice values may overlap.
However if the sum of the start and end values is equal to or greater than
the size of the image, the middle part becomes empty.
-
In this specification, we will use the term lateral axis to refer to
- the axis in which the rule’s thickness grows (i.e. the axis column-rule-width use). The other axis is the rule’s longitudinal axis and
- its size in this axis is the rule length.
- These definitions are relative to the rule itself and does not depend on if
- the rule is a row or column rule, or what the writing-mode is.
These properties sets the thickness (lateral size) of a rule in the column and row axis, respectively.
Negative specified values are not allowed.
The used value is floored at zero (in case a 'calc()' expression evaluates to a negative value for example).
+
These properties sets the rule length (longitudinal size) of a rule in the column and row axis, respectively.
Negative specified values are not allowed.
The used value is floored at zero (in case a 'calc()' expression evaluates to a negative value for example).
+
perhaps make all a separate keyword? like so: [segment | [[start | end | short | long] all?] ] allow-overlap?
These properties specify the extent of the rule in its longitudinal axis. segment is an abstract term to describe the distance between two consecutive gaps.
An extent can cover one or more segments and the extent size is the distance between
- the start position of the start-most of those segments and the end position of the end-most segment.
+ the start position of the first of those segments and the end position of the last segment.
We’ll define segment in more detail in the container-specific sub-sections that follow.
The allow-overlap only affects rules in grid and table layout with spanning items/cells.
It controls whether a rule should continue through such a span.
@@ -2140,7 +2157,7 @@
overflow: hidden which clips its rules at the padding area edge.
@@ -2239,7 +2256,7 @@
multi-column containers, flex containers, grid containers, table and table-row-group containers
no
-
refer to size of the image
+
refer to image size in the rule’s longitudinal axis
discrete
per grammar
one or two values, each either a number or percentage
@@ -3280,6 +3297,33 @@
this proposal makes the assumption that the related proposal that row-gap should apply to multi-column containers is also adopted
(issue #6746). ↵
+
+
+
-
-
-