Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
fred-wang opened this issue Nov 24, 2022 · 2 comments
Closed

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

fred-wang opened this issue Nov 24, 2022 · 2 comments
Labels
Closed as Question Answered Used when the issue is more of a question than a problem, and it's been answered. CSS2 css-flexbox-1 Current Work css-flow-3 css-grid-1 css-grid-2 Subgrid; Current Work

Comments

@fred-wang
Copy link

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)
Merged
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this issue Nov 25, 2022
@fred-wang @chromium-wpt-export-bot
[mathml] Adjust float value to none for children of 'math' display
e7bfeb1 
This CL ensures we don't have floats inside 'math' display types.
This can be revised later, once existing inconcistencies regarding
computed values of float are fixed [1].

[1] w3c/csswg-drafts#8130

Bug: 6606
Change-Id: I415d049b9783d699f4f2ceb3ca15d4c67243950d
@fred-wang fred-wang mentioned this issue Nov 25, 2022
Closed
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this issue Nov 29, 2022
@fred-wang @chromium-wpt-export-bot
[mathml] Adjust float value to none for children of 'math' display
f0a5656 
This CL ensures we don't have floats inside 'math' display types.
This can be revised later, once existing inconcistencies regarding
computed values of float are fixed [1].

[1] w3c/csswg-drafts#8130

Bug: 6606
Change-Id: I415d049b9783d699f4f2ceb3ca15d4c67243950d
@fred-wang
Copy link
Author

@bfgeek pointed out to the following issue in Chromium, which is probably not fixed in WebKit yet: https://bugs.chromium.org/p/chromium/issues/detail?id=350505

One of the test is https://wpt.fyi/results/css/css-display/display-with-float.html

@tabatkins
Copy link
Member

As far as we can tell, this is just a bug in WebKit. CSS2 only specifies one case where 'float' changes its computed value (abspos and fixpos); everything else leaves the computed value alone, and none of the later layout specs change that behavior, either. So the current Firefox and Chrome behavior are correct, per spec.

@tabatkins tabatkins added the Closed as Question Answered Used when the issue is more of a question than a problem, and it's been answered. label Oct 30, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Closed as Question Answered Used when the issue is more of a question than a problem, and it's been answered. CSS2 css-flexbox-1 Current Work css-flow-3 css-grid-1 css-grid-2 Subgrid; Current Work
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@fred-wang @tabatkins @Loirooriol