[css-contain] content-visibility in <fieldset>
Nobody has claimed this yet.
- Dominant language
- Bikeshed
- Stars
- 4.9k
- Forks
- 816
- PR merge metrics
- PR metrics pending
Description
content-visibility: hidden makes the element skip its contents. This enables all kinds of containment and makes the contents invisible, which typically is enough to avoid laying out the contents until needed.
But it's tricky for <fieldset>, for 2 reasons:
- Even if it has size containment, the size is affected by the presence of a rendered legend
- Even if the rendered legend is invisible, it's size is noticeable because the border is skipped.
So consider this testcase
<!DOCTYPE html>
<p>
<button onclick="document.querySelector('legend').offsetLeft">Click me</button>
</p>
<fieldset style="content-visibility: hidden">
<legend>lorem ipsum</legend>sit amet
</fieldset>
Initially, both Blink and Gecko render the fieldset like:
<fieldset></fieldset>
That's because the legend hasn't been laid out, so the fieldset has no rendered legend.
But when clicking the button, then the fieldset looks like:
<fieldset style="contain:strict">
<legend style="visibility:hidden">lorem ipsum</legend>
</fieldset>
This seems bad. I would say:
content-visibilityshouldn't apply to fieldset, or- when a fieldset is skipping its contents, it shouldn't be observable whether it has a rendered legend or not.
@mrobinson
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 linked live DOM testcase and compare the two fieldset states described in the issue. Read the content-visibility behavior for fieldset and rendered legends, then determine whether the property should apply or whether skipped contents must have consistent observability. Done means the CSS Working Group has resolved and specified the intended behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 30/100