[css-values-3] calc() with out-of-range value must be clamped within range allowed

• Component: CSS
• Status: RESOLVED DUPLICATE

[Gérard Talbot (no longer involved)]

CSS4 Values and Units, section 9.1.4. Range Checking
https://www.w3.org/TR/css-values-4/#calc-range
states

"
Parse-time range-checking of values is not performed within math functions, and therefore out-of-range values do not cause the declaration to become invalid. However, the value resulting from an expression must be clamped to the range allowed in the target context. Clamping is performed on computed values to the extent possible, and also on used values if computation was unable to sufficiently simplify the expression to allow range-checking.
"


Test
----

testing tab-size: calc(2 * -4) in
http://w3c-test.org/css/css-values/calc-numbers.html


Expected result
- - - - - - - -
 
document.defaultView.getComputedStyle(elemTarget)["tab-size"] == "0"


Test result
- - - - - -

https://wpt.fyi/results/css/css-values/calc-numbers.html?label=master

{ but got "12345" }

This seems to suggest that Safari 76 preview treats the declaration as invalid instead of performing clamping on computed value.


Epiphany Technological Preview 3.31.90-45-ga15d70306 using WebKitGTK 2.23.3 also fails that test in the same manner.

[Gérard Talbot (no longer involved)]

Also in CSS3:

https://www.w3.org/TR/css-values-3/#calc-range

gives

Since widths smaller than 0px are not allowed, these three declarations are equivalent:

width: calc(5px - 10px);
width: calc(-5px);
width: 0px;

[Radar WebKit Bug Importer]

<rdar://problem/48532264>

[Joonghun Park]

*** This bug has been marked as a duplicate of bug 204737 ***