Skip to content

[css-color] Clamping component values at computed-value time vs parsing time #7677

Closed
@mysteryDate

Description

@mysteryDate

From https://www.w3.org/TR/css-color-4/#rgb-functions:

The final argument, the <alpha-value>, specifies the alpha of the color. If given as a <number>, the useful range of the value is 0 (representing a fully transparent color) to 1 (representing a fully opaque color). If given as a <percentage>, 0% represents a fully transparent color, while 100% represents a fully opaque color. If omitted, it defaults to 100%.
Values outside these ranges are not invalid, but are clamped to the ranges defined here at computed-value time.

All user agents I've tested in fact do the clamping at parsing time:

  <!doctype html>
  <style>
    #target {
          color: rgba(400, 400, 300, -300);
    }
  </style>
  <div id="target"></div>
  <pre id="res"></pre>
  <script>
    res.innerText = "specified: " + document.styleSheets[0].cssRules[0].style.color + "\ncomputed: " + getComputedStyle(target).color;
  </script>

Firefox, Safari and Chrome all give "specified: rgba(255, 255, 255, 0)"

Is there a disadvantage to just doing the clamping at parsing time? It is easier to implement and is already the behavior that we're living with.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions