css.types.ratio - `<ratio>` with `<number> / <number>` or `<number>` seems to be supported since Firefox 78
Open
Beginner friendly
Nobody has claimed this yet.
browser:multiple
data:css
needs collector test
- Dominant language
- JSON
- Stars
- 5.8k
- Forks
- 2.6k
- Avg merge
- 1d 21h
- Merged PRs (30d)
- 186
Description
see : https://mrhenry.github.io/web-tests/#de023e11-f61a-4635-a74c-e4a152251bdf
From Firefox 78 all these variants of <ratio> seem to pass :
@media screen and (min-aspect-ratio: 1/100) {
#a {
color: #0f0;
}
}
@media screen and (min-aspect-ratio: 0.01/1) {
#b {
color: #0f0;
}
}
@media screen and (min-aspect-ratio: 0.01) {
#c {
color: #0f0;
}
}
#d {
color: #0f0;
}
@media screen and (min-aspect-ratio: 0/0) {
#d {
color: red;
}
}
@media screen and (max-aspect-ratio: 0/0) {
#e {
color: #0f0;
}
}
@media screen and (min-aspect-ratio: calc(1)/calc(10*10)) {
#f {
color: #0f0;
}
}
@media screen and (min-aspect-ratio: calc(1/100)) {
#g {
color: #0f0;
}
}
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with css/types/ratio.json lines 53-62 and compare its Firefox data with the linked web-tests result. Verify the reported forms from Firefox 78, then update the compatibility entries so they match the confirmed behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- web-dev
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 65/100