[css-color] more detailed proposal for "compositing-space"

All,

here is a more detailed proposal for the compositing-space CSS property.

* compositing-space is a non-inherited property that creates a stacking
context if a color space is specified.

* It takes the current values:
- "default": the default value which doesn't create a new space
- "uncalibrated": composite in the color space of the output device
- "sRGB"/"P3"/"BT.2020": composite in the specified standard color space
then map to the output device
- "url(path.to.a.icc.profile)": composite with the supplied profile , then
map to the output space

* The root element has a value of "uncalibrated" by default.

* The value is not animatable

* Applies to all elements. In SVG, it applies to container elements,
graphics elements and graphics referencing elements

* If the compositing space is uncalibrated, CSS color values are defined as
sRGB
Otherwise if the compositing space is specified, CSS color values are in
that color space.

Examples:
Given the following markup:

<html>
<style>
...
</style>
<body>
   <div class="a">
      <img class="b" src="red_image_with_high_gamut_profile">
   </div>
</body>


The div with class "a" is in p3 because we want the red background to match
the red in the image.
If this is not needed, it could be any rgb value.

1. author doesn't care about consistent output across devices, but wants to
specify content in p3 color space:

. a {
   background-color: color("p3", 255, 0, 0);
}
.b {
    opacity: .5;
}

Colors are mapped to the output device color, composited and shown to
screen as-is. Output will look noticeably different across devices if
there's opacity, blending or filters

2. author insists on identical output across devices and picks sRGB as the
lowest common denominator

: root {

  compositing-space: sRGB;

}
. a {
   background-color: color("p3", 255, 0, 0);
}
.b {
    opacity: .5;
}

The colors are mapped to sRGB and composited in that space. Result is
mapped to the output space.
As long as the display supports the sRGB gamut, the output will look
identical.

3. author wants the output to be in p3 color space and look as close as
possible in a lesser color space

: root {

  compositing-space: p3;

}
. a {
   background-color: color("p3", 255, 0, 0);
}
.b {
    opacity: .5;
}

Colors are mapped to p3 (which is a no-op in this case) and composited in
p3.
Note that in this case color("p3", 255, 0, 0) and rgb(255, 0, 0) are
identical.

Received on Wednesday, 23 March 2016 03:59:12 UTC