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

Add missing css.properties.display.flow feature #24386

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Add missing css.properties.display.flow feature #24386

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2a850ce
Add missing css.properties.display.flow feature
queengooborg Sep 9, 2024
5477a14
Merge branch 'main' into css/properties/display/flow/additions
caugner Nov 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 32 additions & 0 deletions css/properties/display.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -274,6 +274,38 @@
}
}
},
"flow": {
"__compat": {
"support": {
"chrome": {
"version_added": "115"
},
"chrome_android": "mirror",
"edge": "mirror",
"firefox": {
"version_added": "≤72"
},
Comment on lines +285 to +287
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

According to https://bugzil.la/1657594, Firefox may not actually support it:

The Compatibility panel should indicate that display: flow is converted to display:block in Firefox,

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Discussed with Vinyl, and the question is whether it's always display:block, or if it is converted to the default value for the element (e.g. display: inline for <span>)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So I generated a test case with ChatGPT: https://developer.mozilla.org/de/play?id=h%2BLlW3ImqADHCJYkMw2xE%2BjFSvlfWApNyUj1hSyEa2VSWUgXOu84ObYg3ftPQZ74pE8GnTGvbE18Lg0V

Tested in Chrome 131, Firefox Nightly 134.0a1 (2024-11-21), and Safari 18.1.1.

All browsers do not seem to support flow, i.e. the computed value is block.

But maybe that's in accordance to the spec:

Otherwise it generates a block container box.

So I came up with another (ChatGPT-generated) test case that sets style.display and reads it again: https://developer.mozilla.org/en-US/play?id=UGBq0JaWyjIGJz8nqIEbFux3a3rDR5mS3uppv7pl%2Bn03MxTNx0%2B%2BXNGDjtIzkD0ICNQbWIjuTJQKhQJm

And this test also fails in all three browsers engines. 🤔

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See: openwebdocs/mdn-bcd-collector#1975

"firefox_android": "mirror",
"ie": {
"version_added": false
},
"oculus": "mirror",
"opera": "mirror",
"opera_android": "mirror",
"safari": {
"version_added": "15"
},
"safari_ios": "mirror",
"samsunginternet_android": "mirror",
"webview_android": "mirror"
},
"status": {
"experimental": false,
"standard_track": true,
"deprecated": false
}
}
},
"flow-root": {
"__compat": {
"support": {
Expand Down