[csswg-drafts] [css-contain] content-visibility in <fieldset> (#7765)

Loirooriol has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-contain] content-visibility in <fieldset> ==
`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](https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0A%3Cp%3E%0A%20%20%3Cbutton%20onclick%3D%22document.querySelector(%27legend%27).offsetLeft%22%3EClick%20me%3C%2Fbutton%3E%0A%3C%2Fp%3E%0A%3Cfieldset%20style%3D%22content-visibility%3A%20hidden%22%3E%0A%20%20%3Clegend%3Elorem%20ipsum%3C%2Flegend%3Esit%20amet%0A%3C%2Ffieldset%3E)

```html
<!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:

```html
<fieldset></fieldset>
```

![](https://user-images.githubusercontent.com/7477678/191059230-2b730cf0-62c3-49a0-8b9f-701694fc46d8.png)


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:
```html
<fieldset style="contain:strict">
  <legend style="visibility:hidden">lorem ipsum</legend>
</fieldset>
```

![](https://user-images.githubusercontent.com/7477678/191059330-e9aa9199-28da-43f6-8e2c-693521e63df9.png)

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 

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7765 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 19 September 2022 16:01:51 UTC