[css-values] Computed value of a negative calc unit that doesn't allow negative lengths.

In the [CSS values spec, section 8.1.4. Range Checking](https://drafts.csswg.org/css-values/#calc-range):

> However, the **used value** resulting from an expression must be clamped to the range allowed in the target context.

Note that the used value is expected to be clamped, but not the computed value. Both Blink and Firefox (at least, probably other engines too) clamp the value at computed value time, as can be seen running the following test, where all the properties that don't accept negative lengths (like `font-size`, `padding-xxx`, etc.) report a computed value of `0px` instead of the expected `-1px`.

``` html
<!doctype html>
<script>
window.onload = function() {
  let style = window.getComputedStyle(document.body);
  for (prop of style) {
    if (prop in document.body.style) {
      document.body.style[prop] = 'calc(-1px)';
      console.log(prop, "reported: ", getComputedStyle(document.body)[prop]);
    }
  }
}
</script>
```


Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[css-values] Computed value of a negative calc unit that doesn't allow negative lengths. #434

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[css-values] Computed value of a negative calc unit that doesn't allow negative lengths. #434

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions