[html5] r2776 - [] (0) How to parse a color in an IE-compatible way. (credit: sp)
whatwg at whatwg.org
whatwg at whatwg.org
Tue Feb 10 16:20:51 PST 2009
Author: ianh
Date: 2009-02-10 16:20:51 -0800 (Tue, 10 Feb 2009)
New Revision: 2776
Modified:
index
source
Log:
[] (0) How to parse a color in an IE-compatible way. (credit: sp)
Modified: index
===================================================================
--- index 2009-02-10 22:17:14 UTC (rev 2775)
+++ index 2009-02-11 00:20:51 UTC (rev 2776)
@@ -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-—-date:-01-jan-1901>Draft Recommendation — 10 February 2009</h2>
+ <h2 class="no-num no-toc" id=draft-recommendation-—-date:-01-jan-1901>Draft Recommendation — 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,8 +3842,100 @@
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
opacity.</p>
@@ -12481,6 +12573,12 @@
<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>
Modified: source
===================================================================
--- source 2009-02-10 22:17:14 UTC (rev 2775)
+++ source 2009-02-11 00:20:51 UTC (rev 2776)
@@ -3311,10 +3311,114 @@
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>...
+ <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><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>
<hr>
@@ -13219,6 +13323,12 @@
<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
More information about the Commit-Watchers
mailing list