W3C home > Mailing lists > Public > public-css-archive@w3.org > March 2019

Re: [csswg-drafts] [css-values-4] Should physical units in specified values in calc() collapse into px unit when serialized? (#3741)

From: Amelia Bellamy-Royds via GitHub <sysbot+gh@w3.org>
Date: Fri, 29 Mar 2019 21:41:23 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-478158560-1553895682-sysbot+gh@w3.org>
> None of these should be combined at specified-value time, per spec; the units should just get sorted.

Edge does it this way, except for percentages being in the wrong sorted order and no support for `q` units.

But they seem to be the odd ones out in not simplifying units at serialization.

<details>

<summary>Show full EdgeHTML 18.17763 results for Gerard's test</summary>

Result | Test Name | Message
-- | -- | --
Fail | testing calc(1pc + 1in + 1vh + 10%) | assert_equals: expected "calc(10% + 1in + 1pc + 1vh)" but got "calc(1in + 1pc + 1vh + 10%)"   at Anonymous function (http://www.gtalbot.org/BrowserBugsSection/CSS3Values/calc-serialization-specified-values-789.html:56:7)    at Test.prototype.step (http://www.gtalbot.org/resources/testharness.js:1587:13)    at test (http://www.gtalbot.org/resources/testharness.js:544:9)    at verifySerialization (http://www.gtalbot.org/BrowserBugsSection/CSS3Values/calc-serialization-specified-values-789.html:51:5)    at startTesting (http://www.gtalbot.org/BrowserBugsSection/CSS3Values/calc-serialization-specified-values-789.html:76:5)    at Global code (http://www.gtalbot.org/BrowserBugsSection/CSS3Values/calc-serialization-specified-values-789.html:92:3)
Fail | testing calc(25.4q + 1vh + 12%) | assert_equals: expected "calc(12% + 25.4q + 1vh)" but got "calc(1in + 1pc + 1vh + 10%)"   at Anonymous function (http://www.gtalbot.org/BrowserBugsSection/CSS3Values/calc-serialization-specified-values-789.html:56:7)    at Test.prototype.step (http://www.gtalbot.org/resources/testharness.js:1587:13)    at test (http://www.gtalbot.org/resources/testharness.js:544:9)    at verifySerialization (http://www.gtalbot.org/BrowserBugsSection/CSS3Values/calc-serialization-specified-values-789.html:51:5)    at startTesting (http://www.gtalbot.org/BrowserBugsSection/CSS3Values/calc-serialization-specified-values-789.html:78:5)    at Global code (http://www.gtalbot.org/BrowserBugsSection/CSS3Values/calc-serialization-specified-values-789.html:92:3)
Fail | testing calc(1em + 1.27cm + 13% + 3em) | assert_equals: expected "calc(13% + 1.27cm + 4em)" but got "calc(1.27cm + 4em + 13%)"   at Anonymous function (http://www.gtalbot.org/BrowserBugsSection/CSS3Values/calc-serialization-specified-values-789.html:56:7)    at Test.prototype.step (http://www.gtalbot.org/resources/testharness.js:1587:13)    at test (http://www.gtalbot.org/resources/testharness.js:544:9)    at verifySerialization (http://www.gtalbot.org/BrowserBugsSection/CSS3Values/calc-serialization-specified-values-789.html:51:5)    at startTesting (http://www.gtalbot.org/BrowserBugsSection/CSS3Values/calc-serialization-specified-values-789.html:80:5)    at Global code (http://www.gtalbot.org/BrowserBugsSection/CSS3Values/calc-serialization-specified-values-789.html:92:3)
Pass | testing calc(5mm + 6cm) |  
Pass | testing calc(7mm + 0.5in + 2pc) |  
Fail | testing calc(-80px + 25.4mm) | assert_equals: expected "calc(25.4mm - 80px)" but got "calc(25.4mm + -80px)"   at Anonymous function (http://www.gtalbot.org/BrowserBugsSection/CSS3Values/calc-serialization-specified-values-789.html:56:7)    at Test.prototype.step (http://www.gtalbot.org/resources/testharness.js:1587:13)    at test (http://www.gtalbot.org/resources/testharness.js:544:9)    at verifySerialization (http://www.gtalbot.org/BrowserBugsSection/CSS3Values/calc-serialization-specified-values-789.html:51:5)    at startTesting (http://www.gtalbot.org/BrowserBugsSection/CSS3Values/calc-serialization-specified-values-789.html:88:5)    at Global code (http://www.gtalbot.org/BrowserBugsSection/CSS3Values/calc-seri


</details>

>All 3 tested browsers will convert the term 25.4mm to 96px. Same question.
> …
> All 3 tested browsers will _not_ convert the term 1.27cm to 48px.

Is this a typo, @TalbotG ?

Regardless of when in the process simplification happens, I would expect the same rules for all absolute length units.  And that's what I'm seeing in my testing. Edge, Chrome, Firefox all treat cm and mm units using the same rules. 

For Chrome and Firefox, that means that the units are left alone during serialization _if and only if_ they are the only unit used in the calc, but are simplified to px if there is more than one absolute unit in the expression — although Chrome adds brackets in for every operation, so it also depends on the order if there are any relative units.

> My opinion is that each of these 5 serializations are possible, reasonable and coherent within a point of view.

And I'm not confident that we have a web compat argument for any of them.  For simple serialization, as an author I'd expect minimum modifications — whitespace normalization and maybe sorting. Even doing something like collapsing `calc(100px/3)` to `calc(33.3333px)` involves a loss of information. But if you're going to simplify that, then I don't know where the limit should be.

_____________________

My test as a Codepen if anyone wants to play around with other values. It prints to the console the specified value, the serialized value read back, and the computed value (using a property that returns the regular computed value from `getComputedStyle`):
https://codepen.io/AmeliaBR/pen/rbBzKK?editors=0012

-- 
GitHub Notification of comment by AmeliaBR
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3741#issuecomment-478158560 using your GitHub account
Received on Friday, 29 March 2019 21:41:25 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 19 October 2021 01:31:06 UTC