Re: [csswg-drafts] [css-box][css-shapes][css-masking] `half-border-box` in Box-Edge Keywords (#12965)

While compiling the overview table above, I noticed that some uses of the box keywords in property value syntaxes slightly differ from the general rules, or could be improved otherwise.
 
* Judging only from the respective fallbacks, it strangely could make sense to unify `half-border-box` (CSS) with `view-box` (SVG), but this would not make sense for `<shape-box>` I think.
* **[`fill-origin`] and [`stroke-origin`]** in CSS (not SVG) contexts introduce *text glyph (stroke) outlines* as “box types”:
  * `fill-box`: bounding box of the <mark>text glyph outlines</mark> of the element and all in-flow or floated descendants
  * `stroke-box`: bounding box of the <mark>text glyph stroke outlines</mark> of the element and all in-flow or floated descendants.
* Despite their apparent similarity in name to [`background-origin`], [`mask-origin`], [`fill-origin`] and [`stroke-origin`] properties, the *origin* values of the **[`perspective-origin`] and [`transform-origin`]** properties are *positions*, not any kind of box!  
Alas, alongside the latter at least, an alternative [`transform-box`] proeprty exists:   
   * `content-box`, `border-box`: reference box of a table is the <mark>border box of its table wrapper box</mark>, not its [table box].
* SVG also specifies a [_decorated bounding box_](https://svgwg.org/svg2-draft/coords.html#TermDecoratedBoundingBox) that includes (vertex) markers (i.e. from `<marker>` elements referenced in `marker-start`/`-mid`/`-end`, not from `::marker` pseudo-elements).
  * This **\*`decor-box` or \*`marker-box`** is not recognized by [css-box] yet.
  * It may be the same as or larger than the native _stroke bounding box_ (i.e. `stroke-box`).
  * I’m not sure whether this also applies to CSS’s _margin box_ or if it could actually calso be smaller than this.
* With #11924 adopted, several instances could be rewritten more concisely, some even without (see `*=` in grammar below):
  * [`box-sizing`]
  * [`fill-origin`] and [`stroke-origin`]
  * [`transform-box`]
  * [`block-step-insert`] (This one could even be a mistake, actually.)

~~~~ ebnf
<'box-sizing'> = content-box | border-box 
              *= <visual-box ![padding-box]>

<'background-origin'> = <visual-box>#
<'background-clip'> = <visual-box>#

<'mask-origin'> = <coord-box>#
<'mask-clip'> = [ <coord-box> | no-clip ]#
<'clip-path'> = <clip-source> | [ <basic-shape> || <geometry-box> ] | none 

<'fill-origin'>   = …
<'stroke-origin'> = match-parent | fill-box | stroke-box | content-box | padding-box | border-box 
                 *= match-parent | <paint-box>

<'transform-box'> = content-box | border-box | fill-box | stroke-box | view-box 
                 *= <coord-box ![padding-box]>

<'shape-outside'> = none | [ <basic-shape> || <shape-box> ] | <image>
<'shape-inside'> = auto | outside-shape | [ <basic-shape> || shape-box ] | <image> | display 

<'overflow-clip-margin-*'> = <visual-box> || <length [0,∞]>

<'initial-letter-align'> = [ border-box? [ alphabetic | ideographic | hanging | leading ]? ]!

<'block-step-insert'> = margin-box | padding-box | content-box
                     *= <layout-box ![border-box]>
~~~~
<!--
~~~~ ebnf
<basic-shape> = <basic-shape-rect> | <circle()> | <ellipse()> | <polygon()> | <path()> | <shape()>
<basic-shape-rect> = <inset()> | <xywh()> | <rect()>
<*css-box> = <layout-box>
           = margin-box | border-box | padding-box | content-box
<*svg-box> = stroke-box | view-box | fill-box
<*draw-box> = stroke-box | fill-box
~~~~
-->

 [`box-sizing`]: <https://drafts.csswg.org/css-sizing/#box-sizing>
 [`box-sizing` (CSS UI)]: <https://drafts.csswg.org/css-ui-3/#box-sizing>
 [`fill-origin`]: <https://drafts.csswg.org/fill-stroke/#fill-origin>
 [`stroke-origin`]: <https://drafts.csswg.org/fill-stroke/#stroke-origin>
 [`mask-origin`]: <https://drafts.csswg.org/css-masking/#propdef-mask-origin>
 [`mask-clip`]: <https://drafts.csswg.org/css-masking/#the-mask-clip>
 [`clip-path`]: <https://drafts.csswg.org/css-masking/#the-clip-path>
 [`background-origin`]: <https://drafts.csswg.org/css-backgrounds/#propdef-background-origin>
 [`background-clip`]: <https://drafts.csswg.org/css-backgrounds/#background-clip>
 [`perspective-origin`]: <https://drafts.csswg.org/css-transforms/#propdef-perspective-origin>
 [`transform-origin`]: <https://drafts.csswg.org/css-transforms/#propdef-transform-origin>
 [`transform-box`]: <https://drafts.csswg.org/css-transforms/#transform-box>
 [`initial-letter-align`]: <https://drafts.csswg.org/css-inline/#aligning-initial-letter>
 [`block-step-insert`]: <https://drafts.csswg.org/css-rhythm/#block-step-insert>
 [`shape-outside`]: <https://drafts.csswg.org/css-shapes/#shape-outside-property>
 [`shape-inside`]: <https://drafts.csswg.org/css-shapes-2/#shape-inside-property>
 [`overflow-clip-margin`]: <https://drafts.csswg.org/css-overflow/#overflow-clip-margin>
 [table box]: <https://drafts.csswg.org/css-tables/#terminology>
 [`anchor()`]: <https://drafts.csswg.org/css-anchor-position/#anchor-pos>
 [`anchor-size()`]: <https://drafts.csswg.org/css-anchor-position/#anchor-size-fn>
 [`anchor-center`]: <https://drafts.csswg.org/css-anchor-position/#anchor-center>


-- 
GitHub Notification of comment by Crissov
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12965#issuecomment-4182806749 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 3 April 2026 09:55:56 UTC