Skip to content

[css-color] Inconsistency of inherited value for color #10536

Open
@matthiasclasen

Description

@matthiasclasen

I've recently tried to firm up the css implementation in GTK to deal properly with currentcolor, and found some inconsistencies with the newer additions to the css-color spec.


In a situation like this:

<div> 
  <div>
    <b>What color is this text?</b>
  </div>
</div>
div {
  color: color(srgb 0 0 1);
}

div > div { 
  color: color-mix(in srgb, currentcolor, color(srgb 1 0 0));
}

What is the used value of the color property for the b element?


Trying to find the used value for the color property on the b element
according to the specs:

Since there is no cascaded value, the specified value is found by inheritance,
so the specified value is the computed value of the color property
on the parent element (css-cascade-5).

For finding out what that is, we look at css-color-5 and find that
the computed value for color-mix with currentcolor is the same color-mix
expression. So the computed value of the color property for the inner
div is

color-mix(in srgb, currentcolor, color(srgb 1 0 0)).

And thus, this is the specified value of the color property for the b element.

The computed value for the b element gets determined the same way again:
a color-mix expression with currentcolor computed to itself. So the
computed value of the color property on the b element is again

color-mix(in srgb, currentcolor, color(srgb 1 0 0)).

To find the used value, we need to substitute currentcolor, since we
are dealing with the color property, the value to use for currentcolor
is the inherited value of the color property (css-color-4), i.e. again

color-mix(in srgb, currentcolor, color(srgb 1 0 0)).

Substituting that into the computed value gives me

color-mix(in srgb, color-mix(in srgb, currentcolor, color(srgb 1 0 0)))

which is bad, since we haven't gotten rid of currentcolor this way.

If we bend the interpretation of the color spec to mean that inside the color property, currentcolor
is replaced by the used value of the color property on the parent element, we end up with

color-mix(in srgb, color(srgb 0.5 0 0.5), color(srgb 1 0 0))

which resolves to

color(srgb 0.75 0 0.25)

This is what my GTK code currently produces.


But when I look at browsers, I get

color(srgb 0.5 0 0.5)

which seems to indicate that browsers instead ignore what css-cascade-5 says and always inherit
the used value for the color property.


I think the specs are inconsistent and need to be clarified in this regard.

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