w3c / w3c/csswg-drafts

[css-box][css-shapes][css-masking] `half-border-box` in Box-Edge Keywords

Open
#12,965 2 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

css-box-4 css-shapes-1
Dominant language
Bikeshed
Stars
4.9k
Forks
816
PR merge metrics
PR metrics pending

Description

The Box module specifies several value types of box-edge keyword sets to be used in other specifications:

  • <visual-box> = content-box | padding-box | border-box
  • <layout-box> = <visual-box> | margin-box
  • <paint-box> = <visual-box> | fill-box | stroke-box
  • <coord-box> = <paint-box> | view-box

Some modules still need to extend these. In particular, css-shapes adds one type that css-masking extends to another one:

  • <shape-box> = <visual-box> | margin-box | half-border-box
  • <geometry-box> = <shape-box> | fill-box | stroke-box | view-box

However, both of these differ only by the addition of the peculiar half-border-box keyword from one of the predefined subsets of <box>:

  • <shape-box> = <layout-box> | half-border-box
  • <geometry-box> = <coord-box> | half-border-box (EDIT: This is wrong! margin-box is missing from <coord-box>.)

Therefore, I wonder whether that box-edge keyword and the value sets using it should be backported to [css-box] or if those two specialized set definitions should be simplified as shown above in their respective modules.

<box> margin-box stroke-box border-box view-box half-border-box padding-box fill-box content-box
<visual-box>
<layout-box>
<shape-box>
<paint-box>
<coord-box>
<geometry-box>
CSS margin box/edge = border-box* border box/edge = border-box middle between padding box and border box padding box/edge = content-box content box/edge
SVG = stroke-box stroke bounding box = stroke-box nearest SVG viewport’s origin box = fill-box object bounding box = fill-box
mapping

By the way, <display-box> from css-display is unrelated despite the similar name. Perhaps it should be changed to <display-external> or something else.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by comparing the , , , , , and definitions in the linked CSS Box, CSS Shapes, and CSS Masking specifications. Review the existing issue discussion and verify the noted coord-box correction. Done requires an agreed Working Group resolution and consistent updates to the affected definitions.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
documentation
Issue type
Refactor
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.