[css-box][css-shapes][css-masking] `half-border-box` in Box-Edge Keywords
Nobody has claimed this yet.
- 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-boxis 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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