[css-align] justify/align have double effect in fieldsets?
Nobody has claimed this yet.
- Dominant language
- Bikeshed
- Stars
- 4.9k
- Forks
- 816
- PR merge metrics
- PR metrics pending
Description
HTML specifies that fieldset elements generate a principal box that establishes a box formatting context. Then, the anonymous fieldset content box inherits the justify/align properties from the fieldset element.
So, the justify/align properties take effect in the anonymous content box AND the principal box.
Things get hairy with column flexboxes:
<fieldset style="display: flex; flex-flow: column; align-content: end; width: 200px; min-height: 200px;">
<div style="width: 100px; height: 100px;"></div>
</fieldset>
If align-content: end applies in both principal and anonymous boxes, then the 100x100 square will be on the bottom right of the fieldset: the principal box moves the anonymous box to the bottom because that's what align-content: end does in block flow, then the anonymous box moves the flex item to the right, because that's what align-content: end does in column flexboxes.
For simplicity, can we change css-align to require that {justify/align}-{items/content} properties don't take effect in fieldset-generated principal boxes?
This is a bit intertwined with the proposal to change how the anonymous content box's height is derived at https://github.com/whatwg/html/issues/9123.
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 with the css-align fieldset behavior described here, the linked HTML fieldset and anonymous content box rules, and the provided column-flexbox example. Consider the interaction with WHATWG HTML issue 9123; done means the specifications clearly resolve whether justify/align properties apply to fieldset-generated principal boxes and define the example's expected behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100