[csswg-drafts] [css2][css-flexbox][css-grid] Specify computed value of float property on grid/flex items (#8130)

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

== [css2][css-flexbox][css-grid] Specify computed value of float property on grid/flex items ==
cc @bkardell @bfgeek 

From https://w3c.github.io/csswg-drafts/css2/#propdef-float :
The computed value of float is "as specified". However, it is also mentioned that it "only applies to elements that generate boxes that are not absolutely positioned."

From https://drafts.csswg.org/css-flexbox-1/#flex-containers :
"float and clear do not create floating or clearance of flex item and do not take it out-of-flow"

From https://drafts.csswg.org/css-grid/#grid-containers:
"float and clear have no effect on a grid item"

Now consider the following testcase:

```
<!DOCTYPE html>
<style>.float { float: left; }</style>
<div data-test="Absolute position"><div class="float" style="position: absolute"></div></div>
<div data-test="Fixed position"><div class="float" style="position: fixed"></div>
<div data-test="Block" style="display: block"><div class="float"></div></div>
<div data-test="Table" style="display: table"><div class="float"></div></div>
<div data-test="Flexbox" style="display: flex"><div class="float"></div></div>
<div data-test="Grid" style="display: grid"><div class="float"></div></div>
<div data-test="None" style="display: none"><div class="float"></div></div>
<textarea id="output" cols="40" rows="30"></textarea>
<script>
  Array.from(document.getElementsByClassName('float')).forEach(float => {
      output.textContent += `${float.parentNode.dataset.test}\n`;
      output.textContent += `  float: ${window.getComputedStyle(float).float}\n\n`;
  });
</script>
```

I'm getting the following computed values for Firefox and Chrome (note that the computed float value of absolutely positioned element is `none`):

```
Absolute position
  float: none

Fixed position
  float: none

Block
  float: left

Table
  float: left

Flexbox
  float: left

Grid
  float: left

None
  float: left
```

For WebKit, I'm getting the same, except that Flexbox and Grid items also have a computed float value of `none`.

So it looks like the spec and browsers disagree about the computed `float` value.

(Note: Handling of floats in `math` display is being considered and we will likely do the same as flexbox/grid here)

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


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

Received on Thursday, 24 November 2022 11:46:08 UTC