Skip to content

Commit 8f2ed82

Browse files
tabatkinstabatkins
committed
[css-color] Shuffle the stringifiers around so each class knows how to stringify itself, and is fully defined in JS.
1 parent 6485b0e commit 8f2ed82

2 files changed

Lines changed: 131 additions & 45 deletions

File tree

‎css-color/Overview.bs‎

Lines changed: 67 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2616,25 +2616,28 @@ The RGBColor Object</h3>
26162616

26172617
<dt><dfn attribute>stringifiers</dfn> <span attribute-info for="RGBColor/stringifiers"></span>
26182618
<dd>
2619-
The <a idl for=RGBColor>stringifiers</a> static attribute on the <a idl>RGBColor</a> class
2620-
initially contains callbacks assigned to the keys "rgb", "hsl", "hex", and "cmyk".
2619+
Must be initially set to the following ECMAScript object:
26212620

2622-
Each callback,
2623-
if its first argument is an <a idl>RGBColor</a> instance,
2624-
returns a serialization of its first argument
2625-
in the ''rgba()'' syntax, ''hsla()'' syntax, <a>hex color</a> syntax, or ''device-cmyk()'' syntax,
2626-
as appropriate.
2627-
Otherwise, it must throw an XXXError.
2628-
2629-
When serializing in the ''rgba()'' syntax,
2630-
all components must be serialized as percentages.
2631-
2632-
When serializing in the <a>hex color</a> syntax,
2633-
the 8-digit syntax must be used.
2634-
2635-
When serializing in the ''device-cmyk()'' syntax,
2636-
the color must be <a>naively converted to CMYK</a>,
2637-
and the fallback color must be serialized in the ''rgba()'' syntax.
2621+
<pre>
2622+
{
2623+
"rgb": function(color) {
2624+
const r = color.r*100 + "%";
2625+
const g = color.g*100 + "%";
2626+
const b = color.b*100 + "%";
2627+
const a = color.a*100 + "%";
2628+
return "rgba(" + [r,g,b,a].join(", ") + ")";
2629+
},
2630+
"hsl": function(color) {
2631+
return "" + color.toHSL();
2632+
},
2633+
"hex": function(color) {
2634+
return "" + color.toHex();
2635+
},
2636+
"cmyk": function(color) {
2637+
return "" + color.toCMYK();
2638+
}
2639+
}
2640+
</pre>
26382641

26392642
<dt><dfn attribute>defaultStringifier</dfn> <span attribute-info for="RGBColor/defaultStringifier"></span>
26402643
<dd>
@@ -2723,12 +2726,24 @@ The HSLColor Class</h3>
27232726
represent the hue, saturation, lightness, and alpha channels of the HSL color
27242727
that the <a idl for>HSLColor</a> instance represents.
27252728

2726-
Note: The <a idl for>HSLColor</a> class's hue attribute has a normal range of 0 to 360,
2729+
Note: The <a idl for>HSLColor</a> class's hue attribute has a normal range of 0 to 360 (denoted in degrees),
27272730
and its other attributes have a normal range of 0 to 1.
27282731

27292732
<dt><dfn attribute>stringifiers</dfn> <span attribute-info for="HSLColor/stringifiers"></span>
27302733
<dd>
2731-
Initialized to an empty object.
2734+
Must be initially set to the following ECMAScript object:
2735+
2736+
<pre>
2737+
{
2738+
"hsl": function(color) {
2739+
const h = color.h + "deg";
2740+
const s = color.s*100 + "%";
2741+
const l = color.l*100 + "%";
2742+
const a = color.a*100 + "%";
2743+
return "hsla(" + [h,s,l,a].join(", ") + ")";
2744+
}
2745+
}
2746+
</pre>
27322747

27332748
<dt><dfn attribute>defaultStringifier</dfn> <span attribute-info for="HSLColor/defaultStringifier"></span>
27342749
<dd>
@@ -2807,7 +2822,19 @@ The HexColor Class</h3>
28072822

28082823
<dt><dfn attribute>stringifiers</dfn> <span attribute-info for="HexColor/stringifiers"></span>
28092824
<dd>
2810-
Initialized to an empty object.
2825+
Must be initially set to the following ECMAScript object:
2826+
2827+
<pre>
2828+
{
2829+
"hex": function(color) {
2830+
const r = (color.r &lt; 16 ? "0" : "") + color.r.toString(16);
2831+
const g = (color.g &lt; 16 ? "0" : "") + color.g.toString(16);
2832+
const b = (color.b &lt; 16 ? "0" : "") + color.b.toString(16);
2833+
const a = (color.a &lt; 16 ? "0" : "") + color.a.toString(16);
2834+
return "#" + r + g + b + a;
2835+
}
2836+
}
2837+
</pre>
28112838

28122839
<dt><dfn attribute>defaultStringifier</dfn> <span attribute-info for="HexColor/defaultStringifier"></span>
28132840
<dd>
@@ -2899,7 +2926,25 @@ The CMYKColor Class</h3>
28992926

29002927
<dt><dfn attribute>stringifiers</dfn> <span attribute-info for="CMYKColor/stringifiers"></span>
29012928
<dd>
2902-
Initialized to an empty object.
2929+
Must be initially set to the following ECMAScript object:
2930+
2931+
<pre>
2932+
{
2933+
"cmyk": function(color) {
2934+
const c = color.c;
2935+
const m = color.m;
2936+
const y = color.y;
2937+
const k = color.k;
2938+
const a = color.a;
2939+
if(/* UA knows the output device's color profile */) {
2940+
fallback = "" + (/* Equivalent RGBColor object */)
2941+
} else {
2942+
fallback = "" color.toRGB();
2943+
}
2944+
return "cmyk(" + [c,m,y,k,a,fallback].join(", ") + ")";
2945+
}
2946+
}
2947+
</pre>
29032948

29042949
<dt><dfn attribute>defaultStringifier</dfn> <span attribute-info for="CMYKColor/defaultStringifier"></span>
29052950
<dd>

‎css-color/Overview.html‎

Lines changed: 64 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2735,25 +2735,27 @@ <h3 class="heading settled heading" data-level=15.1 id=api-RGBColor><span class=
27352735

27362736
</code><dt><code><dfn class=idl-code data-dfn-for=RGBColor data-dfn-type=attribute data-export="" id=dom-rgbcolor-stringifiers>stringifiers<a class=self-link href=#dom-rgbcolor-stringifiers></a></dfn> <span data-attribute-info="" for=RGBColor/stringifiers> of type <a data-link-type=idl-name href=#dictdef-colorstringifiers title=colorstringifiers>ColorStringifiers</a></span>
27372737
</code><dd><code>
2738-
The <a data-link-for=RGBColor data-link-type=idl href=#dom-rgbcolor-stringifiers title=stringifiers>stringifiers</a> static attribute on the <a data-link-type=idl href=#dom-rgbcolor title=rgbcolor>RGBColor</a> class
2739-
initially contains callbacks assigned to the keys "rgb", "hsl", "hex", and "cmyk".
2740-
2741-
<p>Each callback,
2742-
if its first argument is an <a data-link-type=idl href=#dom-rgbcolor title=rgbcolor>RGBColor</a> instance,
2743-
returns a serialization of its first argument
2744-
in the <a class=css data-link-type=maybe href=#funcdef-rgba title=rgba()>rgba()</a> syntax, <a class=css data-link-type=maybe href=#funcdef-hsla title=hsla()>hsla()</a> syntax, <a data-link-type=dfn href=#hex-color title="hex color">hex color</a> syntax, or <a class=css data-link-type=maybe href=#funcdef-device-cmyk title=device-cmyk()>device-cmyk()</a> syntax,
2745-
as appropriate.
2746-
Otherwise, it must throw an XXXError.</p>
2747-
2748-
<p>When serializing in the <a class=css data-link-type=maybe href=#funcdef-rgba title=rgba()>rgba()</a> syntax,
2749-
all components must be serialized as percentages.</p>
2750-
2751-
<p>When serializing in the <a data-link-type=dfn href=#hex-color title="hex color">hex color</a> syntax,
2752-
the 8-digit syntax must be used.</p>
2753-
2754-
<p>When serializing in the <a class=css data-link-type=maybe href=#funcdef-device-cmyk title=device-cmyk()>device-cmyk()</a> syntax,
2755-
the color must be <a data-link-type=dfn href=#naively-convert-from-rgba-to-cmyk title="naively converted to cmyk">naively converted to CMYK</a>,
2756-
and the fallback color must be serialized in the <a class=css data-link-type=maybe href=#funcdef-rgba title=rgba()>rgba()</a> syntax.</p>
2738+
Must be initially set to the following ECMAScript object:
2739+
2740+
<pre>{
2741+
"rgb": function(color) {
2742+
const r = color.r*100 + "%";
2743+
const g = color.g*100 + "%";
2744+
const b = color.b*100 + "%";
2745+
const a = color.a*100 + "%";
2746+
return "rgba(" + [r,g,b,a].join(", ") + ")";
2747+
},
2748+
"hsl": function(color) {
2749+
return "" + color.toHSL();
2750+
},
2751+
"hex": function(color) {
2752+
return "" + color.toHex();
2753+
},
2754+
"cmyk": function(color) {
2755+
return "" + color.toCMYK();
2756+
}
2757+
}
2758+
</pre>
27572759

27582760
</code><dt><code><dfn class=idl-code data-dfn-for=RGBColor data-dfn-type=attribute data-export="" id=dom-rgbcolor-defaultstringifier>defaultStringifier<a class=self-link href=#dom-rgbcolor-defaultstringifier></a></dfn> <span data-attribute-info="" for=RGBColor/defaultStringifier> of type <a data-link-type=idl-name href=#enumdef-colorstringifiertype title=colorstringifiertype>ColorStringifierType</a></span>
27592761
</code><dd><code>
@@ -2840,12 +2842,23 @@ <h3 class="heading settled heading" data-level=15.2 id=api-HSLColor><span class=
28402842
represent the hue, saturation, lightness, and alpha channels of the HSL color
28412843
that the <a data-link-for="" data-link-type=idl href=#dom-hslcolor title=hslcolor>HSLColor</a> instance represents.
28422844

2843-
<p class=note>Note: The <a data-link-for="" data-link-type=idl href=#dom-hslcolor title=hslcolor>HSLColor</a> class’s hue attribute has a normal range of 0 to 360,
2845+
<p class=note>Note: The <a data-link-for="" data-link-type=idl href=#dom-hslcolor title=hslcolor>HSLColor</a> class’s hue attribute has a normal range of 0 to 360 (denoted in degrees),
28442846
and its other attributes have a normal range of 0 to 1.</p>
28452847

28462848
<dt><dfn class=idl-code data-dfn-for=HSLColor data-dfn-type=attribute data-export="" id=dom-hslcolor-stringifiers>stringifiers<a class=self-link href=#dom-hslcolor-stringifiers></a></dfn> <span data-attribute-info="" for=HSLColor/stringifiers> of type <a data-link-type=idl-name href=#dictdef-colorstringifiers title=colorstringifiers>ColorStringifiers</a></span>
28472849
<dd>
2848-
Initialized to an empty object.
2850+
Must be initially set to the following ECMAScript object:
2851+
2852+
<pre>{
2853+
"hsl": function(color) {
2854+
const h = color.h + "deg";
2855+
const s = color.s*100 + "%";
2856+
const l = color.l*100 + "%";
2857+
const a = color.a*100 + "%";
2858+
return "hsla(" + [h,s,l,a].join(", ") + ")";
2859+
}
2860+
}
2861+
</pre>
28492862

28502863
<dt><dfn class=idl-code data-dfn-for=HSLColor data-dfn-type=attribute data-export="" id=dom-hslcolor-defaultstringifier>defaultStringifier<a class=self-link href=#dom-hslcolor-defaultstringifier></a></dfn> <span data-attribute-info="" for=HSLColor/defaultStringifier> of type <a data-link-type=idl-name href=#enumdef-colorstringifiertype title=colorstringifiertype>ColorStringifierType</a></span>
28512864
<dd>
@@ -2922,7 +2935,18 @@ <h3 class="heading settled heading" data-level=15.3 id=api-HexColor><span class=
29222935

29232936
<dt><dfn class=idl-code data-dfn-for=HexColor data-dfn-type=attribute data-export="" id=dom-hexcolor-stringifiers>stringifiers<a class=self-link href=#dom-hexcolor-stringifiers></a></dfn> <span data-attribute-info="" for=HexColor/stringifiers> of type <a data-link-type=idl-name href=#dictdef-colorstringifiers title=colorstringifiers>ColorStringifiers</a></span>
29242937
<dd>
2925-
Initialized to an empty object.
2938+
Must be initially set to the following ECMAScript object:
2939+
2940+
<pre>{
2941+
"hex": function(color) {
2942+
const r = (color.r &lt; 16 ? "0" : "") + color.r.toString(16);
2943+
const g = (color.g &lt; 16 ? "0" : "") + color.g.toString(16);
2944+
const b = (color.b &lt; 16 ? "0" : "") + color.b.toString(16);
2945+
const a = (color.a &lt; 16 ? "0" : "") + color.a.toString(16);
2946+
return "#" + r + g + b + a;
2947+
}
2948+
}
2949+
</pre>
29262950

29272951
<dt><dfn class=idl-code data-dfn-for=HexColor data-dfn-type=attribute data-export="" id=dom-hexcolor-defaultstringifier>defaultStringifier<a class=self-link href=#dom-hexcolor-defaultstringifier></a></dfn> <span data-attribute-info="" for=HexColor/defaultStringifier> of type <a data-link-type=idl-name href=#enumdef-colorstringifiertype title=colorstringifiertype>ColorStringifierType</a></span>
29282952
<dd>
@@ -3013,7 +3037,24 @@ <h3 class="heading settled heading" data-level=15.4 id=api-CMYKColor><span class
30133037

30143038
<dt><dfn class=idl-code data-dfn-for=CMYKColor data-dfn-type=attribute data-export="" id=dom-cmykcolor-stringifiers>stringifiers<a class=self-link href=#dom-cmykcolor-stringifiers></a></dfn> <span data-attribute-info="" for=CMYKColor/stringifiers> of type <a data-link-type=idl-name href=#dictdef-colorstringifiers title=colorstringifiers>ColorStringifiers</a></span>
30153039
<dd>
3016-
Initialized to an empty object.
3040+
Must be initially set to the following ECMAScript object:
3041+
3042+
<pre>{
3043+
"cmyk": function(color) {
3044+
const c = color.c;
3045+
const m = color.m;
3046+
const y = color.y;
3047+
const k = color.k;
3048+
const a = color.a;
3049+
if(/* UA knows the output device’s color profile */) {
3050+
fallback = "" + (/* Equivalent RGBColor object */)
3051+
} else {
3052+
fallback = "" color.toRGB();
3053+
}
3054+
return "cmyk(" + [c,m,y,k,a,fallback].join(", ") + ")";
3055+
}
3056+
}
3057+
</pre>
30173058

30183059
<dt><dfn class=idl-code data-dfn-for=CMYKColor data-dfn-type=attribute data-export="" id=dom-cmykcolor-defaultstringifier>defaultStringifier<a class=self-link href=#dom-cmykcolor-defaultstringifier></a></dfn> <span data-attribute-info="" for=CMYKColor/defaultStringifier> of type <a data-link-type=idl-name href=#enumdef-colorstringifiertype title=colorstringifiertype>ColorStringifierType</a></span>
30193060
<dd>

0 commit comments

Comments
 (0)