[css-contain] content-visibility in <fieldset> #7765

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-visibility shouldn'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