Skip to content
Permalink
Browse files

[] (0) How to parse a color in an IE-compatible way. (credit: sp)

git-svn-id: http://svn.whatwg.org/webapps@2776 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information...
Hixie committed Feb 11, 2009
1 parent 79bdf26 commit fda3fb16096c9556e360fb378e207cb5b7cb8573
Showing with 212 additions and 4 deletions.
  1. +100 −2 index
  2. +112 −2 source
102 index
@@ -34,7 +34,7 @@
<div class=head>
<p><a class=logo href=http://www.whatwg.org/ rel=home><img alt=WHATWG src=/images/logo></a></p>
<h1>HTML 5</h1>
<h2 class="no-num no-toc" id=draft-recommendation-&mdash;-date:-01-jan-1901>Draft Recommendation &mdash; 10 February 2009</h2>
<h2 class="no-num no-toc" id=draft-recommendation-&mdash;-date:-01-jan-1901>Draft Recommendation &mdash; 11 February 2009</h2>
<p>You can take part in this work. <a href=http://www.whatwg.org/mailing-list>Join the working group's discussion list.</a></p>
<p><strong>Web designers!</strong> We have a <a href=http://blog.whatwg.org/faq/>FAQ</a>, a <a href=http://forums.whatwg.org/>forum</a>, and a <a href=http://www.whatwg.org/mailing-list#help>help mailing list</a> for you!</p>
<dl><dt>Multiple-page version:</dt>
@@ -3842,7 +3842,99 @@
the first step that returns a value. This algorithm will either
return a <a href=#simple-color>simple color</a> or an error.</p>

<ol class=XXX><li>...
<ol><li><p>Let <var title="">input</var> be the string being
parsed.</li>

<li><p>If <var title="">input</var> is the empty string, then
return an error.</li>

<li><p>If <var title="">input</var> is an <a href=#ascii-case-insensitive>ASCII
case-insensitive</a> match for one of the keywords listed in the
<a href=http://www.w3.org/TR/css3-color/#svg-color>SVG color
keywords</a> section of the CSS3 Color specification, the return
the <a href=#simple-color>simple color</a> corresponding to that keyword. <a href=#refsCSS3COLOR>[CSS3COLOR]</a></li>

<li>

<p>If <var title="">input</var> is four characters long, and the
first character in <var title="">input</var> is a U+0023 NUMBER
SIGN (#) character, and the the last three characters of <var title="">input</var> are all in the range U+0030 DIGIT ZERO (0)
.. U+0039 DIGIT NINE (9), U+0041 LATIN CAPITAL LETTER A .. U+0046
LATIN CAPITAL LETTER F, and U+0061 LATIN SMALL LETTER A .. U+0066
LATIN SMALL LETTER F, then run these substeps:</p>

<ol><li><p>Let <var title="">result</var> be a <a href=#simple-color>simple
color</a>.</p>

<li><p>Interpret the second character of <var title="">input</var> as a hexadecimal digit; let the red
component of <var title="">result</var> be the resulting number
multiplied by 17.</p>

<li><p>Interpret the third character of <var title="">input</var>
as a hexadecimal digit; let the green component of <var title="">result</var> be the resulting number multiplied by
17.</p>

<li><p>Interpret the fourth character of <var title="">input</var> as a hexadecimal digit; let the blue
component of <var title="">result</var> be the resulting number
multiplied by 17.</p>

<li><p>Return <var title="">result</var>.</p>

</ol></li>

<li><p>Replace any characters in <var title="">input</var> that
have a Unicode codepoint greater than U+FFFF (i.e. any characters
that are not in the basic multilingual plane) with the
two-character string "<code title="">00</code>".</li>

<li><p>If <var title="">input</var> is longer than 128 characters,
truncate <var title="">input</var>, leaving only the first 128
characters.</li>

<li><p>If the first character in <var title="">input</var> is a
U+0023 NUMBER SIGN character (#), remove it.</li>

<li><p>Replace any character in <var title="">input</var> that is
not in the range U+0030 DIGIT ZERO (0) .. U+0039 DIGIT NINE (9),
U+0041 LATIN CAPITAL LETTER A .. U+0046 LATIN CAPITAL LETTER F, and
U+0061 LATIN SMALL LETTER A .. U+0066 LATIN SMALL LETTER F with the
character U+0030 DIGIT ZERO (0).</li>

<li><p>While <var title="">input</var>'s length is zero or not a
multiple of three, append a U+0030 DIGIT ZERO (0) character to <var title="">input</var>.</li>

<li><p>Split <var title="">input</var> into three strings of equal
length, to obtain three components. Let <var title="">length</var>
be the length of those components (one third the length of <var title="">input</var>).</li>

<li><p>If <var title="">length</var> is greater than 8, then remove
the leading <span><var title="">length</var>-8</span> characters in
each component, and let <var title="">length</var> be 8.</li>

<li><p>While <var title="">length</var> is greater than two and the
first character in each component is a U+0030 DIGIT ZERO (0)
character, remove that character and reduce <var title="">length</var> by one.</li>

<li><p>If <var title="">length</var> is <em>still</em> greater than
two, truncate each component, leaving only the first two
characters in each.</li>

<li><p>Let <var title="">result</var> be a <a href=#simple-color>simple
color</a>.</p>

<li><p>Interpret the first component as a hexadecimal number; let
the red component of <var title="">result</var> be the resulting
number.</li>

<li><p>Interpret the second component as a hexadecimal number; let
the green component of <var title="">result</var> be the resulting
number.</li>

<li><p>Interpret the third component as a hexadecimal number; let
the blue component of <var title="">result</var> be the resulting
number.</li>

<li><p>Return <var title="">result</var>.</p>

</ol><hr><p class=note>The <a href=#canvas-context-2d title=canvas-context-2d>2D graphics
context</a> has a separate color syntax that also handles
<a href=#represents>represents</a> a <a href=#hyperlink>hyperlink</a> (a hypertext
anchor).</p>

<!-- v2: Eric Meyer requests the ability to nest links so that a big
hyperlink, e.g. representing a calendar event, can be clickable,
while within it there are subareas that represent links to distinct
areas, e.g. a link to see photos of the event, or to edit the event,
or some such. -->

<p>If the <code><a href=#the-a-element>a</a></code> element has no <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute, then the element
<a href=#represents>represents</a> a placeholder for where a link might
otherwise have been placed, if it had been relevant.</p>
114 source
@@ -3311,9 +3311,113 @@
the first step that returns a value. This algorithm will either
return a <span>simple color</span> or an error.</p>

<ol class=XXX>
<ol>

<li><p>Let <var title="">input</var> be the string being
parsed.</p></li>

<li><p>If <var title="">input</var> is the empty string, then
return an error.</p></li>

<li><p>If <var title="">input</var> is an <span>ASCII
case-insensitive</span> match for one of the keywords listed in the
<a href="http://www.w3.org/TR/css3-color/#svg-color">SVG color
keywords</a> section of the CSS3 Color specification, the return
the <span>simple color</span> corresponding to that keyword. <a
href="#refsCSS3COLOR">[CSS3COLOR]</a></p></li>

<li>

<p>If <var title="">input</var> is four characters long, and the
first character in <var title="">input</var> is a U+0023 NUMBER
SIGN (#) character, and the the last three characters of <var
title="">input</var> are all in the range U+0030 DIGIT ZERO (0)
.. U+0039 DIGIT NINE (9), U+0041 LATIN CAPITAL LETTER A .. U+0046
LATIN CAPITAL LETTER F, and U+0061 LATIN SMALL LETTER A .. U+0066
LATIN SMALL LETTER F, then run these substeps:</p>

<ol>

<li><p>Let <var title="">result</var> be a <span>simple
color</span>.</p>

<li><p>Interpret the second character of <var
title="">input</var> as a hexadecimal digit; let the red
component of <var title="">result</var> be the resulting number
multiplied by 17.</p>

<li><p>Interpret the third character of <var title="">input</var>
as a hexadecimal digit; let the green component of <var
title="">result</var> be the resulting number multiplied by
17.</p>

<li><p>Interpret the fourth character of <var
title="">input</var> as a hexadecimal digit; let the blue
component of <var title="">result</var> be the resulting number
multiplied by 17.</p>

<li><p>Return <var title="">result</var>.</p>

</ol>

</li>

<li>...
<li><p>Replace any characters in <var title="">input</var> that
have a Unicode codepoint greater than U+FFFF (i.e. any characters
that are not in the basic multilingual plane) with the
two-character string "<code title="">00</code>".</p></li>

<li><p>If <var title="">input</var> is longer than 128 characters,
truncate <var title="">input</var>, leaving only the first 128
characters.</p></li>

<li><p>If the first character in <var title="">input</var> is a
U+0023 NUMBER SIGN character (#), remove it.</p></li>

<li><p>Replace any character in <var title="">input</var> that is
not in the range U+0030 DIGIT ZERO (0) .. U+0039 DIGIT NINE (9),
U+0041 LATIN CAPITAL LETTER A .. U+0046 LATIN CAPITAL LETTER F, and
U+0061 LATIN SMALL LETTER A .. U+0066 LATIN SMALL LETTER F with the
character U+0030 DIGIT ZERO (0).</p></li>

<li><p>While <var title="">input</var>'s length is zero or not a
multiple of three, append a U+0030 DIGIT ZERO (0) character to <var
title="">input</var>.</p></li>

<li><p>Split <var title="">input</var> into three strings of equal
length, to obtain three components. Let <var title="">length</var>
be the length of those components (one third the length of <var
title="">input</var>).</p></li>

<li><p>If <var title="">length</var> is greater than 8, then remove
the leading <span><var title="">length</var>-8</span> characters in
each component, and let <var title="">length</var> be 8.</p></li>

<li><p>While <var title="">length</var> is greater than two and the
first character in each component is a U+0030 DIGIT ZERO (0)
character, remove that character and reduce <var
title="">length</var> by one.</p></li>

<li><p>If <var title="">length</var> is <em>still</em> greater than
two, truncate each component, leaving only the first two
characters in each.</p></li>

<li><p>Let <var title="">result</var> be a <span>simple
color</span>.</p>

<li><p>Interpret the first component as a hexadecimal number; let
the red component of <var title="">result</var> be the resulting
number.</p></li>

<li><p>Interpret the second component as a hexadecimal number; let
the green component of <var title="">result</var> be the resulting
number.</p></li>

<li><p>Interpret the third component as a hexadecimal number; let
the blue component of <var title="">result</var> be the resulting
number.</p></li>

<li><p>Return <var title="">result</var>.</p>

</ol>

<span>represents</span> a <span>hyperlink</span> (a hypertext
anchor).</p>

<!-- v2: Eric Meyer requests the ability to nest links so that a big
hyperlink, e.g. representing a calendar event, can be clickable,
while within it there are subareas that represent links to distinct
areas, e.g. a link to see photos of the event, or to edit the event,
or some such. -->

<p>If the <code>a</code> element has no <code
title="attr-hyperlink-href">href</code> attribute, then the element
<span>represents</span> a placeholder for where a link might

0 comments on commit fda3fb1

Please sign in to comment.
You can’t perform that action at this time.