[csswg-drafts] [mediaqueries][css-contain] How to evaluate `<ratio>` queries? (#8244)

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

== [mediaqueries][css-contain] How to evaluate `<ratio>` queries? ==
It seems hard for a viewport to have a degenerate ratio, so I guess [`@media (aspect-ratio)`](https://drafts.csswg.org/mediaqueries-4/#aspect-ratio) is mostly fine. But we have a problem for [`@container (aspect-ratio)`](https://drafts.csswg.org/css-contain-3/#aspect-ratio), there is no interoperability. [Testcase](https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0A%3Cstyle%3E%0Adiv%20%7B%20display%3A%20flow-root%3B%20container-type%3A%20size%3B%20line-height%3A%2020px%3B%20margin-bottom%3A%2020px%3B%20%7D%0Aspan%20%7B%20position%3A%20absolute%3B%20width%3A%20calc(100vw%20-%2016px)%3B%20%7D%0A%3C%2Fstyle%3E%0A%3Cbody%3E%0A%3Cscript%3E%0Avar%20operators%20%3D%20%7B%0A%20%20%22%22%3A%20%22%22%2C%0A%20%20eq%3A%20%22%3D%22%2C%0A%20%20gt%3A%20%22%3E%22%2C%0A%20%20ge%3A%20%22%3E%3D%22%2C%0A%20%20lt%3A%20%22%3C%22%2C%0A%20%20le%3A%20%22%3C%3D%22%2C%0A%7D%3B%0Avar%20sheet%20%3D%20document.styleSheets%5B0%5D%3B%0Afor%20(const%20%5BopName%2C%20op%5D%20of%20Object.entries(operators))%20%7B%0A%20%20for%20(const%20ratioArray%20of%20op%20%3F%20%5B%5B0%2C%200%5D%2C%20%5B0%2C%201%5D%2C%20%5B1%2C%201%5D%2C%20%5B1%2C%200%5D%5D%20%3A%20%5B%5B%5D%5D)%20%7B%0A%20%20%20%20const%20ratio%20%3D%20ratioArray.join(%22%20%2F%20%22)%3B%0A%20%20%20%20for%20(const%20not%20of%20%5Bfalse%2C%20true%5D)%20%7B%0A%20%20%20%20%20%20const%20condition%20%3D%20%60aspect-ratio%24%7Bop%20%3F%20%60%20%24%7Bop%7D%20%24%7Bratio%7D%60%20%3A%20%22%22%7D%60%3B%0A%20%20%20%20%20%20const%20query%20%3D%20%60%40container%20%24%7Bnot%20%3F%20%22not%20%22%20%3A%20%22%22%7D(%24%7Bcondition%7D)%60%3B%0A%20%20%20%20%20%20const%20className%20%3D%20%60%24%7Bnot%20%3F%20%22not-%22%20%3A%20%22%22%7Daspect-ratio-%24%7BopName%7D-%24%7BratioArray.join(%22-%22)%7D%60%3B%0A%20%20%20%20%20%20try%20%7B%0A%20%20%20%20%20%20%20%20sheet.insertRule(%60%24%7Bquery%7D%20%7B%20.%24%7BclassName%7D%20%3E%20span%20%7B%20color%3A%20green%20%7D%20%7D%60%2C%20sheet.cssRules.length)%3B%0A%20%20%20%20%20%20%7D%20catch%20(err)%20%7B%7D%0A%20%20%20%20%20%20for%20(const%20%5Bwidth%2C%20height%5D%20of%20%5B%5B%220px%22%2C%20%220px%22%5D%2C%20%5B%220px%22%2C%20%221px%22%5D%2C%20%5B%221px%22%2C%20%221px%22%5D%2C%20%5B%221px%22%2C%20%220px%22%5D%5D)%20%7B%0A%20%20%20%20%20%20%20%20const%20container%20%3D%20document.createElement(%22div%22)%3B%0A%20%20%20%20%20%20%20%20container.className%20%3D%20className%3B%0A%20%20%20%20%20%20%20%20container.style.width%20%3D%20width%3B%0A%20%20%20%20%20%20%20%20container.style.height%20%3D%20height%3B%0A%20%20%20%20%20%20%20%20const%20child%20%3D%20document.createElement(%22span%22)%3B%0A%20%20%20%20%20%20%20%20child.textContent%20%3D%20%60%24%7Bquery%7D%20with%20width%3A%24%7Bwidth%7D%20and%20height%3A%24%7Bheight%7D%60%3B%0A%20%20%20%20%20%20%20%20container.appendChild(child)%3B%0A%20%20%20%20%20%20%20%20document.body.appendChild(container)%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%20%20document.body.appendChild(document.createElement(%22br%22))%3B%0A%20%20%7D%0A%20%20document.body.appendChild(document.createElement(%22hr%22))%3B%0A%7D%0A%3C%2Fscript%3E)

First, how should `aspect-ratio` be [evaluated in boolean context](https://drafts.csswg.org/mediaqueries-4/#mq-boolean-context)?

Typically that checks if the condition is true for any non-zero value. Is that `0 / 1` for ratios? I'm not convinced this makes much sense, one of these options seems better:
  - Check if any ratio would evaluate to true
  - Check if any ratio different than `0 / 0` would evaluate to true
  - Check if any non-degenerate ratio would evaluate to true

Also, how to compare ratios? 
I think we could say `0/a = 0/b < c/d = e/f < g/0 = h/0` for any `a,b,c,d,e,f,g,h > 0` s.t. `c*f = d*e`.
Then the tricky part is comparing with `0 / 0`.

Some proposals:

1. We consider ratios in the [0,∞] interval, plus a special 0/0 value outside the interval. Strict inequalities between 0/0 and other ratios are false.
2.  We consider ratios in the [0,∞] interval, with 0/0 being an indeterminate value in the interval. Most comparisons with 0/0 are unknown, but some inequalities with the limits of the interval are known.
3. Like 1 or 2, but using unknown for ratios that are not comparable, i.e. when none of =, &lt; and > would be true.
4. Like 3, but using unknown when comparing a degenerate ratio with itself.

I think I'm leaning towards the 1st one.

![](https://user-images.githubusercontent.com/7477678/208349328-bed22f2c-77e7-48b4-80dd-c932c47c477b.png)

Some notes from the implemented behaviors that I have observed:

 - Evaluating `min-aspect-ratio` and `max-aspect-ratio` in a boolean context produces unknown as defined in [the spec](https://drafts.csswg.org/mediaqueries-4/#mq-min-max).
 - `aspect-ratio: <ratio>` is a synonym of `aspect-ratio = <ratio>`, `min-aspect-ratio: <ratio>` is a synonym of `aspect-ratio >= <ratio>`, and `max-aspect-ratio: <ratio>` is a synonym of `aspect-ratio <= <ratio>`.
 - Ratios are broken in Blink, e.g. `1` and `1 / 1` have different behaviors, same for `0` and `0 / 1`.


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


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

Received on Monday, 19 December 2022 05:02:53 UTC