Skip to content

Commit 8fca01b

Browse files
committed
[css-color-4] serializing color() with alpha
1 parent 42b1b17 commit 8fca01b

File tree

1 file changed

+37
-3
lines changed

1 file changed

+37
-3
lines changed

css-color-4/Overview.bs

Lines changed: 37 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -757,9 +757,10 @@ This section updates and replaces that part of CSS Object Model, section
757757

758758
The component values are serialized in base 10,
759759
as <<number>>.
760-
A single ASII space character " "
760+
A single ASCII space character " "
761761
must be used as the separator
762-
between the component values.
762+
between the component values,
763+
and also between the colorspace name and the first color component.
763764

764765
Trailing fractional zeroes in any component values must be omitted;
765766
if the fractional part consists of all zeroes,
@@ -768,13 +769,29 @@ This section updates and replaces that part of CSS Object Model, section
768769
<div class="example" id="ex-color-serial">
769770
<p>The serialized value of</p>
770771
<pre class="lang-css"><span class="swatch" style="--color: rgba(99.56%, 6.09%, 57.02%, 0.93)"></span> color(dIsPlAy-P3 0.964 0.763 0.787)</pre>
771-
<p>Is the string "color(display-p3 0.96 0.76 0.79)",
772+
<p>is the string "color(display-p3 0.96 0.76 0.79)",
772773
if two decimal places are retained.
773774
Notice that 0.787 has rounded up to 0.79,
774775
rather than being truncated to 0.78.
775776
</p>
776777
</div>
777778

779+
<div class="example" id="ex-color-swop-serial">
780+
<p>The serialized value of the color in</p>
781+
<pre class="lang-css">@color-profile --swop5c {
782+
src: url('https://example.org/SWOP2006_Coated5v2.icc');
783+
}
784+
.header {
785+
background-color: <span class="swatch" style="--color: rgb(94.903% 45.248% 59.104%)"></span> color(--swop5c 0% 70.0% 20.00% .0%);
786+
}</pre>
787+
<p>is the string "color(--swop5c 0 0.7 0.2 0)"</p>
788+
</div>
789+
790+
<!--
791+
the name in the @color-profile is also lowercased, right?
792+
the serialization is not sufficient because the name and the link to the profile are also needed.
793+
-->
794+
778795
If the colorspace is sRGB, the colorspace must be omitted in the serialized result.
779796
<!--
780797
could go either way on that but we need to pick one, and this is shorter
@@ -791,6 +808,23 @@ This section updates and replaces that part of CSS Object Model, section
791808
(16bit, or half float, is recommended for internal storage).
792809
Values must be rounded, not truncated.
793810

811+
<a href="#serializing-alpha-values">As noted earlier</a>,
812+
unitary alpha values are not explicitly serialized.
813+
Non-unitary alpha values must be explicitly serialized,
814+
and the string " / "
815+
(an ASCII space, then forward slash, then another space)
816+
must be used to separate
817+
the final color component value
818+
from the alpha value.
819+
820+
<div class="example" id="ex-color-prophoto-alpha-serial">
821+
<p>The serialized value of</p>
822+
<pre class="lang-css"><span class="swatch" style="--color: rgba(0.003%, 50.196%, 50.196%, 0.85)"></span> color(prophoto-rgb 0.2804 0.40283 0.42259/85%)</pre>
823+
<p>is the string "color(prophoto-rgb 0.28 0.403 0.423 / 0.85%)",
824+
if three decimal places are retained.
825+
</p>
826+
</div>
827+
794828
<h2 id='numeric-srgb'>
795829
sRGB Colors</h2>
796830

0 commit comments

Comments
 (0)