Skip to content

Commit 17453b4

Browse files
tabatkinstabatkins
committed
[css-color] Correct stringification.
1 parent 563bb57 commit 17453b4

2 files changed

Lines changed: 24 additions & 30 deletions

File tree

‎css-color/Overview.bs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2499,7 +2499,7 @@ APIs for Parsing and Manipulating Colors</h2>
24992499
var c = new HSLColor("red");
25002500
c.l += .1;
25012501
el.style.backgroundColor = c;
2502-
// c is automatically turned into the string "rgba(100%, 20%, 20%, 100%)"
2502+
// c is automatically turned into the string "hsla(0deg, 100%, 60%, 100%)"
25032503
</pre>
25042504

25052505
If you wish, you can control what type of syntax it stringifies as,

‎css-color/Overview.html‎

Lines changed: 23 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@
8282
</p>
8383
<h1 class="p-name no-ref" id=title>CSS Color Module Level 4</h1>
8484
<h2 class="no-num no-toc no-ref heading settled heading" id=subtitle><span class=content>Editor’s Draft,
85-
<span class=dt-updated><span class=value-title title=20140728>28 July 2014</span></span></span></h2>
85+
<span class=dt-updated><span class=value-title title=20140730>30 July 2014</span></span></span></h2>
8686
<div data-fill-with=spec-metadata><dl>
8787
<dt>This version:
8888
<dd><a class=u-url href=http://dev.w3.org/csswg/css-color/>http://dev.w3.org/csswg/css-color/</a>
@@ -2612,7 +2612,7 @@ <h2 class="heading settled heading" data-level=15 id=apis><span class=secno>15 <
26122612
<pre>var c = new HSLColor("red");
26132613
c.l += .1;
26142614
el.style.backgroundColor = c;
2615-
// c is automatically turned into the string "rgba(100%, 20%, 20%, 100%)"
2615+
// c is automatically turned into the string "hsla(0deg, 100%, 60%, 100%)"
26162616
</pre>
26172617

26182618
<p>If you wish, you can control what type of syntax it stringifies as,
@@ -2656,10 +2656,10 @@ <h3 class="heading settled heading" data-level=15.1 id=api-RGBColor><span class=
26562656
attribute <a data-link-type=idl href=#enumdef-colorstringifiertype title=ColorStringifierType>ColorStringifierType</a> <a class=idl-code data-global-name="RGBColor<interface>/defaultstringifier<attribute>" data-link-for=RGBColor data-link-type=attribute data-type="ColorStringifierType " href=#dom-rgbcolor-defaultstringifier title=defaultStringifier>defaultStringifier</a>;
26572657
};
26582658
dictionary <dfn class=idl-code data-dfn-type=dictionary data-export="" data-global-name="" id=dictdef-rgbcolorinit>RGBColorInit<a class=self-link href=#dictdef-rgbcolorinit></a></dfn> {
2659-
double <dfn class=idl-code data-dfn-for=RGBColorInit data-dfn-type=attribute data-export="" data-global-name="RGBColorInit<interface>/r<attribute>" data-type="double " id=dom-rgbcolorinit-r>r<a class=self-link href=#dom-rgbcolorinit-r></a></dfn> = 0;
2660-
double <dfn class=idl-code data-dfn-for=RGBColorInit data-dfn-type=attribute data-export="" data-global-name="RGBColorInit<interface>/g<attribute>" data-type="double " id=dom-rgbcolorinit-g>g<a class=self-link href=#dom-rgbcolorinit-g></a></dfn> = 0;
2661-
double <dfn class=idl-code data-dfn-for=RGBColorInit data-dfn-type=attribute data-export="" data-global-name="RGBColorInit<interface>/b<attribute>" data-type="double " id=dom-rgbcolorinit-b>b<a class=self-link href=#dom-rgbcolorinit-b></a></dfn> = 0;
2662-
double <dfn class=idl-code data-dfn-for=RGBColorInit data-dfn-type=attribute data-export="" data-global-name="RGBColorInit<interface>/a<attribute>" data-type="double " id=dom-rgbcolorinit-a>a<a class=self-link href=#dom-rgbcolorinit-a></a></dfn> = 1;
2659+
double <dfn class=idl-code data-default=0 data-dfn-for=RGBColorInit data-dfn-type=attribute data-export="" data-global-name="RGBColorInit<interface>/r<attribute>" data-type="double " id=dom-rgbcolorinit-r>r<a class=self-link href=#dom-rgbcolorinit-r></a></dfn> = 0;
2660+
double <dfn class=idl-code data-default=0 data-dfn-for=RGBColorInit data-dfn-type=attribute data-export="" data-global-name="RGBColorInit<interface>/g<attribute>" data-type="double " id=dom-rgbcolorinit-g>g<a class=self-link href=#dom-rgbcolorinit-g></a></dfn> = 0;
2661+
double <dfn class=idl-code data-default=0 data-dfn-for=RGBColorInit data-dfn-type=attribute data-export="" data-global-name="RGBColorInit<interface>/b<attribute>" data-type="double " id=dom-rgbcolorinit-b>b<a class=self-link href=#dom-rgbcolorinit-b></a></dfn> = 0;
2662+
double <dfn class=idl-code data-default=1 data-dfn-for=RGBColorInit data-dfn-type=attribute data-export="" data-global-name="RGBColorInit<interface>/a<attribute>" data-type="double " id=dom-rgbcolorinit-a>a<a class=self-link href=#dom-rgbcolorinit-a></a></dfn> = 1;
26632663
};
26642664
enum <dfn class=idl-code data-dfn-type=enum data-export="" data-global-name="" id=enumdef-colorstringifiertype>ColorStringifierType<a class=self-link href=#enumdef-colorstringifiertype></a></dfn> {
26652665
"rgb",
@@ -2854,10 +2854,10 @@ <h3 class="heading settled heading" data-level=15.2 id=api-HSLColor><span class=
28542854
attribute <a data-link-type=idl href=#enumdef-colorstringifiertype title=ColorStringifierType>ColorStringifierType</a> <a class=idl-code data-global-name="HSLColor<interface>/defaultstringifier<attribute>" data-link-for=HSLColor data-link-type=attribute data-type="ColorStringifierType " href=#dom-hslcolor-defaultstringifier title=defaultStringifier>defaultStringifier</a>;
28552855
};
28562856
dictionary <dfn class=idl-code data-dfn-type=dictionary data-export="" data-global-name="" id=dictdef-hslcolorinit>HSLColorInit<a class=self-link href=#dictdef-hslcolorinit></a></dfn> {
2857-
double <dfn class=idl-code data-dfn-for=HSLColorInit data-dfn-type=attribute data-export="" data-global-name="HSLColorInit<interface>/h<attribute>" data-type="double " id=dom-hslcolorinit-h>h<a class=self-link href=#dom-hslcolorinit-h></a></dfn> = 0;
2858-
double <dfn class=idl-code data-dfn-for=HSLColorInit data-dfn-type=attribute data-export="" data-global-name="HSLColorInit<interface>/s<attribute>" data-type="double " id=dom-hslcolorinit-s>s<a class=self-link href=#dom-hslcolorinit-s></a></dfn> = 0;
2859-
double <dfn class=idl-code data-dfn-for=HSLColorInit data-dfn-type=attribute data-export="" data-global-name="HSLColorInit<interface>/l<attribute>" data-type="double " id=dom-hslcolorinit-l>l<a class=self-link href=#dom-hslcolorinit-l></a></dfn> = 0;
2860-
double <dfn class=idl-code data-dfn-for=HSLColorInit data-dfn-type=attribute data-export="" data-global-name="HSLColorInit<interface>/a<attribute>" data-type="double " id=dom-hslcolorinit-a>a<a class=self-link href=#dom-hslcolorinit-a></a></dfn> = 1;
2857+
double <dfn class=idl-code data-default=0 data-dfn-for=HSLColorInit data-dfn-type=attribute data-export="" data-global-name="HSLColorInit<interface>/h<attribute>" data-type="double " id=dom-hslcolorinit-h>h<a class=self-link href=#dom-hslcolorinit-h></a></dfn> = 0;
2858+
double <dfn class=idl-code data-default=0 data-dfn-for=HSLColorInit data-dfn-type=attribute data-export="" data-global-name="HSLColorInit<interface>/s<attribute>" data-type="double " id=dom-hslcolorinit-s>s<a class=self-link href=#dom-hslcolorinit-s></a></dfn> = 0;
2859+
double <dfn class=idl-code data-default=0 data-dfn-for=HSLColorInit data-dfn-type=attribute data-export="" data-global-name="HSLColorInit<interface>/l<attribute>" data-type="double " id=dom-hslcolorinit-l>l<a class=self-link href=#dom-hslcolorinit-l></a></dfn> = 0;
2860+
double <dfn class=idl-code data-default=1 data-dfn-for=HSLColorInit data-dfn-type=attribute data-export="" data-global-name="HSLColorInit<interface>/a<attribute>" data-type="double " id=dom-hslcolorinit-a>a<a class=self-link href=#dom-hslcolorinit-a></a></dfn> = 1;
28612861
};
28622862
</pre>
28632863

@@ -3039,10 +3039,10 @@ <h3 class="heading settled heading" data-level=15.3 id=api-HexColor><span class=
30393039
attribute <a data-link-type=idl href=#enumdef-colorstringifiertype title=ColorStringifierType>ColorStringifierType</a> <a class=idl-code data-global-name="HexColor<interface>/defaultstringifier<attribute>" data-link-for=HexColor data-link-type=attribute data-type="ColorStringifierType " href=#dom-hexcolor-defaultstringifier title=defaultStringifier>defaultStringifier</a>;
30403040
};
30413041
dictionary <dfn class=idl-code data-dfn-type=dictionary data-export="" data-global-name="" id=dictdef-hexcolorinit>HexColorInit<a class=self-link href=#dictdef-hexcolorinit></a></dfn> {
3042-
[Clamp] octet <dfn class=idl-code data-dfn-for=HexColorInit data-dfn-type=attribute data-export="" data-global-name="HexColorInit<interface>/r<attribute>" data-type="octet " id=dom-hexcolorinit-r>r<a class=self-link href=#dom-hexcolorinit-r></a></dfn> = 0;
3043-
[Clamp] octet <dfn class=idl-code data-dfn-for=HexColorInit data-dfn-type=attribute data-export="" data-global-name="HexColorInit<interface>/g<attribute>" data-type="octet " id=dom-hexcolorinit-g>g<a class=self-link href=#dom-hexcolorinit-g></a></dfn> = 0;
3044-
[Clamp] octet <dfn class=idl-code data-dfn-for=HexColorInit data-dfn-type=attribute data-export="" data-global-name="HexColorInit<interface>/b<attribute>" data-type="octet " id=dom-hexcolorinit-b>b<a class=self-link href=#dom-hexcolorinit-b></a></dfn> = 0;
3045-
[Clamp] octet <dfn class=idl-code data-dfn-for=HexColorInit data-dfn-type=attribute data-export="" data-global-name="HexColorInit<interface>/a<attribute>" data-type="octet " id=dom-hexcolorinit-a>a<a class=self-link href=#dom-hexcolorinit-a></a></dfn> = 255;
3042+
[Clamp] octet <dfn class=idl-code data-default=0 data-dfn-for=HexColorInit data-dfn-type=attribute data-export="" data-global-name="HexColorInit<interface>/r<attribute>" data-type="octet " id=dom-hexcolorinit-r>r<a class=self-link href=#dom-hexcolorinit-r></a></dfn> = 0;
3043+
[Clamp] octet <dfn class=idl-code data-default=0 data-dfn-for=HexColorInit data-dfn-type=attribute data-export="" data-global-name="HexColorInit<interface>/g<attribute>" data-type="octet " id=dom-hexcolorinit-g>g<a class=self-link href=#dom-hexcolorinit-g></a></dfn> = 0;
3044+
[Clamp] octet <dfn class=idl-code data-default=0 data-dfn-for=HexColorInit data-dfn-type=attribute data-export="" data-global-name="HexColorInit<interface>/b<attribute>" data-type="octet " id=dom-hexcolorinit-b>b<a class=self-link href=#dom-hexcolorinit-b></a></dfn> = 0;
3045+
[Clamp] octet <dfn class=idl-code data-default=255 data-dfn-for=HexColorInit data-dfn-type=attribute data-export="" data-global-name="HexColorInit<interface>/a<attribute>" data-type="octet " id=dom-hexcolorinit-a>a<a class=self-link href=#dom-hexcolorinit-a></a></dfn> = 255;
30463046
};
30473047
</pre>
30483048

@@ -3189,12 +3189,12 @@ <h3 class="heading settled heading" data-level=15.4 id=api-CMYKColor><span class
31893189
attribute <a data-link-type=idl href=#enumdef-colorstringifiertype title=ColorStringifierType>ColorStringifierType</a> <a class=idl-code data-global-name="CMYKColor<interface>/defaultstringifier<attribute>" data-link-for=CMYKColor data-link-type=attribute data-type="ColorStringifierType " href=#dom-cmykcolor-defaultstringifier title=defaultStringifier>defaultStringifier</a>;
31903190
};
31913191
dictionary <dfn class=idl-code data-dfn-type=dictionary data-export="" data-global-name="" id=dictdef-cmykcolorinit>CMYKColorInit<a class=self-link href=#dictdef-cmykcolorinit></a></dfn> {
3192-
double <dfn class=idl-code data-dfn-for=CMYKColorInit data-dfn-type=attribute data-export="" data-global-name="CMYKColorInit<interface>/c<attribute>" data-type="double " id=dom-cmykcolorinit-c>c<a class=self-link href=#dom-cmykcolorinit-c></a></dfn> = 0;
3193-
double <dfn class=idl-code data-dfn-for=CMYKColorInit data-dfn-type=attribute data-export="" data-global-name="CMYKColorInit<interface>/m<attribute>" data-type="double " id=dom-cmykcolorinit-m>m<a class=self-link href=#dom-cmykcolorinit-m></a></dfn> = 0;
3194-
double <dfn class=idl-code data-dfn-for=CMYKColorInit data-dfn-type=attribute data-export="" data-global-name="CMYKColorInit<interface>/y<attribute>" data-type="double " id=dom-cmykcolorinit-y>y<a class=self-link href=#dom-cmykcolorinit-y></a></dfn> = 0;
3195-
double <dfn class=idl-code data-dfn-for=CMYKColorInit data-dfn-type=attribute data-export="" data-global-name="CMYKColorInit<interface>/k<attribute>" data-type="double " id=dom-cmykcolorinit-k>k<a class=self-link href=#dom-cmykcolorinit-k></a></dfn> = 0;
3196-
double <dfn class=idl-code data-dfn-for=CMYKColorInit data-dfn-type=attribute data-export="" data-global-name="CMYKColorInit<interface>/a<attribute>" data-type="double " id=dom-cmykcolorinit-a>a<a class=self-link href=#dom-cmykcolorinit-a></a></dfn> = 1;
3197-
<a data-link-type=idl href=#dom-rgbcolor title=RGBColor>RGBColor</a>? <dfn class=idl-code data-dfn-for=CMYKColorInit data-dfn-type=attribute data-export="" data-global-name="CMYKColorInit<interface>/fallback<attribute>" data-type="RGBColor? " id=dom-cmykcolorinit-fallback>fallback<a class=self-link href=#dom-cmykcolorinit-fallback></a></dfn> = null;
3192+
double <dfn class=idl-code data-default=0 data-dfn-for=CMYKColorInit data-dfn-type=attribute data-export="" data-global-name="CMYKColorInit<interface>/c<attribute>" data-type="double " id=dom-cmykcolorinit-c>c<a class=self-link href=#dom-cmykcolorinit-c></a></dfn> = 0;
3193+
double <dfn class=idl-code data-default=0 data-dfn-for=CMYKColorInit data-dfn-type=attribute data-export="" data-global-name="CMYKColorInit<interface>/m<attribute>" data-type="double " id=dom-cmykcolorinit-m>m<a class=self-link href=#dom-cmykcolorinit-m></a></dfn> = 0;
3194+
double <dfn class=idl-code data-default=0 data-dfn-for=CMYKColorInit data-dfn-type=attribute data-export="" data-global-name="CMYKColorInit<interface>/y<attribute>" data-type="double " id=dom-cmykcolorinit-y>y<a class=self-link href=#dom-cmykcolorinit-y></a></dfn> = 0;
3195+
double <dfn class=idl-code data-default=0 data-dfn-for=CMYKColorInit data-dfn-type=attribute data-export="" data-global-name="CMYKColorInit<interface>/k<attribute>" data-type="double " id=dom-cmykcolorinit-k>k<a class=self-link href=#dom-cmykcolorinit-k></a></dfn> = 0;
3196+
double <dfn class=idl-code data-default=1 data-dfn-for=CMYKColorInit data-dfn-type=attribute data-export="" data-global-name="CMYKColorInit<interface>/a<attribute>" data-type="double " id=dom-cmykcolorinit-a>a<a class=self-link href=#dom-cmykcolorinit-a></a></dfn> = 1;
3197+
<a data-link-type=idl href=#dom-rgbcolor title=RGBColor>RGBColor</a>? <dfn class=idl-code data-default=null data-dfn-for=CMYKColorInit data-dfn-type=attribute data-export="" data-global-name="CMYKColorInit<interface>/fallback<attribute>" data-type="RGBColor? " id=dom-cmykcolorinit-fallback>fallback<a class=self-link href=#dom-cmykcolorinit-fallback></a></dfn> = null;
31983198
};
31993199
</pre>
32003200

@@ -4159,7 +4159,7 @@ <h3 class="no-num no-ref heading settled heading" id=normative><span class=conte
41594159
<h3 class="no-num no-ref heading settled heading" id=informative><span class=content>
41604160
Informative References</span><a class=self-link href=#informative></a></h3>
41614161
<div data-fill-with=informative-references><dl>
4162-
<dt id=biblio-colorimetry title=COLORIMETRY><a class=self-link href=#biblio-colorimetry></a>[COLORIMETRY]<dd>???. <a href=None>Colorimetry, Third Edition</a>. ISBN 978-3-901906-33-6 URL: <a href=None>None</a></dd>
4162+
<dt id=biblio-colorimetry title=COLORIMETRY><a class=self-link href=#biblio-colorimetry></a>[COLORIMETRY]<dd>???. Colorimetry, Third Edition. ISBN 978-3-901906-33-6 URL: <a href=None>None</a></dd>
41634163
<dt id=biblio-css1 title=CSS1><a class=self-link href=#biblio-css1></a>[CSS1]<dd>Håkon Wium Lie; Bert Bos. <a href=http://www.w3.org/TR/2008/REC-CSS1-20080411>Cascading Style Sheets (CSS1) Level 1 Specification</a>. 11 April 2008. W3C Recommendation. URL: <a href=http://www.w3.org/TR/2008/REC-CSS1-20080411>http://www.w3.org/TR/2008/REC-CSS1-20080411</a></dd>
41644164
<dt id=biblio-css3-text-decor title=CSS3-TEXT-DECOR><a class=self-link href=#biblio-css3-text-decor></a>[CSS3-TEXT-DECOR]<dd>Elika J. Etemad; Koji Ishii. <a href=http://www.w3.org/TR/2013/CR-css-text-decor-3-20130801/>CSS Text Decoration Module Level 3</a>. 1 August 2013. W3C Candidate Recommendation. (Work in progress.) URL: <a href=http://www.w3.org/TR/2013/CR-css-text-decor-3-20130801/>http://www.w3.org/TR/2013/CR-css-text-decor-3-20130801/</a></dd>
41654165
<dt id=biblio-css3color title=CSS3COLOR><a class=self-link href=#biblio-css3color></a>[CSS3COLOR]<dd>Tantek Çelik; Chris Lilley; L. David Baron. <a href=http://www.w3.org/TR/2011/REC-css3-color-20110607>CSS Color Module Level 3</a>. 7 June 2011. W3C Recommendation. URL: <a href=http://www.w3.org/TR/2011/REC-css3-color-20110607>http://www.w3.org/TR/2011/REC-css3-color-20110607</a></dd>
@@ -4582,10 +4582,7 @@ <h2 class="no-num heading settled" id=issues-index><span class=content>Issues In
45824582
you convert between contrast-ratio space and luminance space
45834583
with <code>L = 21^p</code>,
45844584
then find the gray with that luminance.</p>
4585-
<a href=#issue-658bb235> ↵ </a></div>
4586-
4587-
4588-
<div class=issue>
4585+
<a href=#issue-658bb235> ↵ </a></div><div class=issue>
45894586
More possibilities:
45904587

45914588
<ul>
@@ -4605,10 +4602,7 @@ <h2 class="no-num heading settled" id=issues-index><span class=content>Issues In
46054602
<li>
46064603
Warmer/cooler. How to define? What’s warmer, red or yellow? What’s cooler, blue or green?
46074604
</ul>
4608-
<a href=#issue-312f3018> ↵ </a></div>
4609-
4610-
4611-
<div class=issue>
4605+
<a href=#issue-312f3018> ↵ </a></div><div class=issue>
46124606
This blends the two colors in a way that pays attention to alpha,
46134607
similar to how compositing does.
46144608
Is there a better formula?

0 commit comments

Comments
 (0)