From 705c9b240d60e7ffd98851efc31c039a07d3e4a4 Mon Sep 17 00:00:00 2001 From: Mats Palmgren Date: Mon, 6 Dec 2021 17:49:37 +0000 Subject: [PATCH] Bug 1735445 - Minor editorial fixes in the CSS Gap Decorations draft spec. NPOTB DONTBUILD A few changes to address some of the feedback in: https://github.com/w3c/csswg-drafts/issues/6748#issuecomment-962273499 I moved the definition of the lateral/longitudinal axes earlier in the document so that they can be used for the rule-image-* section too. I also tweaked the borders/rule-colors in the last example to make it clearer. Differential Revision: https://phabricator.services.mozilla.com/D132971 --- layout/docs/css-gap-decorations/Overview.bs | 34 ++- layout/docs/css-gap-decorations/Overview.html | 284 +++++++++++++----- .../examples/grid-longitudinal-003.html | 4 +- .../media/grid-longitudinal-003.png | Bin 6875 -> 11902 bytes 4 files changed, 224 insertions(+), 98 deletions(-) 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 @@ - - + + - + +
-

+

CSS Gap Decorations

-

Editor’s Draft,

+

Editor’s Draft,

Specification Metadata
@@ -744,7 +758,7 @@

archived. Alternately, feedback can be sent to the (archived) public mailing list www-style@w3.org.

-

This document is governed by the 15 September 2020 W3C Process Document.

+

This document is governed by the 2 November 2021 W3C Process Document.

@@ -756,6 +770,7 @@

Table of Contents

  1. 1.1 Overview
  2. 1.2 Module Interactions +
  3. 1.3 Definitions
  • 2 Rule Images and Gradients @@ -862,6 +877,12 @@

    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 @@

    Computed value: the keyword none or the computed <image> - Canonical order: + Canonical order: per grammar Animation type: @@ -921,25 +942,25 @@

    no Percentages: - refer to size of the image + refer to image size in the rule’s longitudinal axis Computed value: one or two values, each either a number or percentage - Canonical order: + Canonical order: per grammar 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 that order. If the end value is missing, it is the same as the start value.

    <percentage [0,∞]> -
    Percentages are relative to the block-size of the image. +
    Percentages are relative to the image size in the rule’s longitudinal axis
    <number [0,∞]>
    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.

    -

    row-rule-image-slice works the same but in the inline axis.

    2.3. The column-rule-image-repeat and row-rule-image-repeat Properties

    @@ -978,7 +998,7 @@

    Computed value:

    - -
    the specified keyword
    Canonical order: + Canonical order: per grammar
    Animation type: @@ -1030,7 +1050,7 @@

    Animation type:

    		see individual properties
    Canonical order: + Canonical order: per grammar

    3. Rule Positioning and Sizing

    -

    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.

    3.1. The column-rule-width and row-rule-width Properties

    @@ -1123,7 +1138,7 @@

    Computed value:

    - - -
    absolute length if the specified value is <line-width>; 0px if the column rule style is none or hidden. Otherwise, the specified value.
    Canonical order: + Canonical order: per grammar
    Animation type: @@ -1132,6 +1147,7 @@

    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).

    +

    See § 3.4 Resolving a rule’s position and size below for how auto is resolved.

    3.2. The column-rule-length and row-rule-length Properties

    @@ -1157,7 +1173,7 @@

    Computed value:

    - - -
    the specified value
    Canonical order: + Canonical order: per grammar
    Animation type: @@ -1166,6 +1182,7 @@

    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).

    +

    See § 3.4 Resolving a rule’s position and size 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.

    3.3. The Rule Lateral Inset Properties

    @@ -1192,7 +1209,7 @@

    Computed value:

    - -
    the specified value
    Canonical order: + Canonical order: per grammar
    Animation type: @@ -1262,7 +1279,7 @@

    Animation type:

    		see individual properties
    Canonical order: + Canonical order: per grammar
    @@ -1292,7 +1309,7 @@

    Animation type:

    -
    see individual properties
    Canonical order: + Canonical order: per grammar

    These are shortands for specifying the corresponding start/end values. @@ -1322,7 +1339,7 @@

    Computed value:

    		the specified value
    Canonical order: + Canonical order: per grammar
    Animation type: @@ -1381,7 +1398,7 @@

    Animation type:

    		see individual properties
    Canonical order: + Canonical order: per grammar
    @@ -1411,7 +1428,7 @@

    Animation type:

    -
    see individual properties
    Canonical order: + Canonical order: per grammar

    These shortands specify the corresponding start/end values. If one value is specified it is used for both start/end.

    @@ -1440,7 +1457,7 @@

    Computed value:

    		the specified value
    Canonical order: + Canonical order: per grammar
    Animation type: @@ -1478,7 +1495,7 @@

    Animation type:

    		see individual properties
    Canonical order: + Canonical order: per grammar
    @@ -1508,7 +1525,7 @@

    Animation type:

    -
    see individual properties
    Canonical order: + Canonical order: per grammar

    These shortands specify the corresponding start/end values. If one value is specified it is used for both start/end.

    @@ -1538,7 +1555,7 @@

    Computed value: specified keyword - Canonical order: + Canonical order: per grammar Animation type: @@ -1568,7 +1585,7 @@

    Computed value: computed color - Canonical order: + Canonical order: per grammar Animation type: @@ -1604,7 +1621,7 @@

    4 Animation type: see individual properties - Canonical order: + Canonical order: per grammar

    lots of new possible shorthands... we now have many @@ -1639,7 +1656,7 @@

    Computed value: the specified value - Canonical order: + Canonical order: per grammar Animation type: @@ -1693,7 +1710,7 @@

    Computed value: the specified value - Canonical order: + Canonical order: per grammar Animation type: @@ -1760,7 +1777,7 @@

    Computed value: the specified value - Canonical order: + Canonical order: per grammar Animation type: @@ -1769,7 +1786,7 @@

    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.
    - +
    Examples of rule overflow and clipping.
    @@ -2239,7 +2256,7 @@

    Non-e

    Further information on submitting testcases and implementation reports can be found from on the CSS Working Group’s website at http://www.w3.org/Style/CSS/Test/. Questions should be directed to the public-css-testsuite@w3.org mailing list.

    - +

    Index

    Terms defined by this specification

    • + + + - - -