Skip to content

Commit 9d613ee

Browse files
annevkannevk
committed
rewrite how to serialize a selector; resolved values also work for CSS3; maybe no special handling for shorthand properties after all
1 parent 6373ad2 commit 9d613ee

2 files changed

Lines changed: 351 additions & 179 deletions

File tree

‎cssom/Overview.html‎

Lines changed: 175 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,13 @@
2525
<div class=head>
2626
<h1 id=cssom>CSSOM</h1>
2727

28-
<h2 class="no-num no-toc" id="">Editor's Draft 16 March 2010</h2>
28+
<h2 class="no-num no-toc" id="">Editor's Draft 17 March 2010</h2>
2929

3030
<dl>
3131
<dt>This Version:
3232

3333
<dd><a
34-
href="http://www.w3.org/TR/2010/ED-cssom-20100316/">http://www.w3.org/TR/2010/ED-cssom-20100316/</a>
34+
href="http://www.w3.org/TR/2010/ED-cssom-20100317/">http://www.w3.org/TR/2010/ED-cssom-20100317/</a>
3535

3636
<dt>Latest Version:
3737

@@ -698,89 +698,128 @@ <h2 id=selectors><span class=secno>5. </span>Selectors</h2>
698698
<p>Selectors are defined in the Selectors specification. This section
699699
defines how to serialize them.</p>
700700
<!-- XXX ref -->
701+
<!-- XXX ref universal selector etc? some are in <span> some not -->
701702

702703
<p>To <dfn id=parse-a-group-of-selectors>parse a group of selectors</dfn>
703704
means to parse the value using the <code title="">selectors_group</code>
704705
production defined in the Selectors specification and return either a
705706
group of selectors if parsing did not fail or null if parsing did fail.</p>
706707
<!-- XXX ref -->
707708

708-
<p>To <dfn id=serialize-a-group-of-selectors>serialize a group of
709-
selectors</dfn> run these steps:</p>
710-
<!-- http://dump.testsuite.org/2009/cssom/serializing-selectors.htm -->
709+
<p>To <dfn id=serialize-a-simple-selector>serialize a simple selector</dfn>
710+
let <var title="">s</var> be the empty string, run the steps below, and
711+
finally return <var title="">s</var>:
711712

712-
<ol><!-- XXX say something about CSS character escapes? -->
713+
<dl>
714+
<dt>type selector
713715

714-
<li>
715-
<p>Remove leading and trailing <a href="#whitespace">whitespace</a>.
716+
<dt>universal selector
716717

717-
<li>
718-
<p>Replace one or more consecutive <a href="#whitespace">whitespace</a>
719-
characters with a single U+0020 SPACE character.
718+
<dd>
719+
<ol>
720+
<li>
721+
<p>If the <span>namespace prefix</span> maps to a namespace that is not
722+
the <span>default namespace</span> and is not the null namespace (not
723+
in a namespace) append the <a href="#escape-an-identifier"
724+
title="escape an identifier">escaped</a> <span>namespace
725+
prefix</span>, followed by a "<code>|</code>" (U+007C) to <var
726+
title="">s</var>.
720727

721-
<li>
722-
<p>Make sure combinators other than the descendant combinator are
723-
preceded and followed by a single U+0020 SPACE character (and not more).
728+
<li>
729+
<p>If the <span>namespace prefix</span> maps to a namespace that is the
730+
null namespace (not in a namespace) append "<code>|</code>" (U+007C)
731+
to <var title="">s</var>.
732+
</li>
733+
<!-- This includes |* -->
724734

725-
<li>
726-
<p>Make sure each U+002C COMMA (,) character is followed by a single
727-
U+0020 SPACE character (and not more).
735+
<li>
736+
<p>If this is a type selector append the <a
737+
href="#escape-an-identifier" title="escape an identifier">escaped</a>
738+
element name to <var title="">s</var>.</p>
728739

729-
<li>
730-
<p>If there is no default namespace and the namespace prefix of a
731-
<span>type selector</span> or <span>universal selector</span> is set to
732-
a U+002A ASTERISK (*) character remove the namespace component of that
733-
<span>type selector</span> or <span>universal selector</span>.
734-
</li>
735-
<!-- XXX namespace refs? -->
740+
<li>
741+
<p>If this is a universal selector append "<code>*</code> (U+002A) to
742+
<var title="">s</var>.
743+
</ol>
736744

737-
<li>
738-
<p>Remove any <span title="universal selector">universal selectors</span>
739-
that can be omitted.
745+
<dt>attribute selector
740746

741-
<li>
742-
<p>Follow these rules for serializing attribute selectors:</p>
747+
<dd>
748+
<ol>
749+
<li>
750+
<p>Append "<code>[</code>" (U+005B) to <var title="">s</var>.
743751

744-
<ul>
745752
<li>
746-
<p>If there is no namespace prefix (which includes the asterisk) remove
747-
the U+007C VERTICAL LINE (|) before the attribute name if it is
748-
present.
749-
</li>
750-
<!-- XXX ref namespace prefix? -->
753+
<p>If the <span>namespace prefix</span> maps to a namespace that is not
754+
the null namespace (not in a namespace) append the <a
755+
href="#escape-an-identifier" title="escape an identifier">escaped</a>
756+
<span>namespace prefix</span>, followed by a "<code>|</code>" (U+007C)
757+
to <var title="">s</var>.
751758

752759
<li>
753-
<p>If an identifier was given as value insert a leading and trailing
754-
U+0022 QUOTATION MARK (") character around the identifier and escape
755-
any U+0022 QUOTATION MARK (") characters in the value by inserting a
756-
U+005C REVERSE SOLIDUS (\) character in front of them.
760+
<p>If the <span>namespace prefix</span> maps to a namespace that is the
761+
null namespace (not in a namespace) append "<code>|</code>" (U+007C)
762+
to <var title="">s</var>.
757763
</li>
758-
<!-- XXX or does this happen during parsing -->
759-
</ul>
764+
<!-- This includes |* -->
760765

761-
<li>
762-
<p>Pseudo-classes without arguments and pseudo-elements are serialized to
763-
their canonical form as given in the specification that defines them.</p>
766+
<li>
767+
<p>Append the <a href="#escape-an-identifier" title="escape an
768+
identifier">escaped</a> attribute name to <var title="">s</var>.
764769

765-
<p class=note>E.g. <code>:HOver</code> becomes <code>:hover</code> and
766-
<code>:befoRe</code> becomes <code>::before</code>.</p>
770+
<li>
771+
<p>If there is an attribute value specified, append "<code>=</code>",
772+
"<code>~=</code>", "<code>|=</code>", "<code>^=</code>",
773+
"<code>$=</code>", or "<code>*=</code>" as appropriate (depending on
774+
the type of attribute selector), followed by '<code>"</code>'
775+
(U+0022), followed by the <a href="#escape-a-string" title="escape a
776+
string">string escaped</a> attribute value, followed by
777+
'<code>"</code>' (U+0022), to <var title="">s</var>.
767778

768-
<li>
769-
<p>The rules for pseudo-classes with arguments are to serialize their
770-
name to their canonical name as given in the specification, remove any
771-
leading and trailing <a href="#whitespace">whitespace</a> around the
772-
argument, and serialize the value as follows:</p>
779+
<li>
780+
<p>Append "<code>]</code>" (U+005D) to <var title="">s</var>.
781+
</ol>
782+
783+
<dt>class selector
784+
785+
<dd>
786+
<p>Append a "<code>.</code>" (U+002E), followed by the <a
787+
href="#escape-an-identifier" title="escape an identifier">escaped</a>
788+
class name to <var title="">s</var>.
789+
790+
<dt>ID selector
791+
792+
<dd>
793+
<p>Append a "<code>#</code>" (U+0023), followed by the <a
794+
href="#escape-an-identifier" title="escape an identifier">escaped</a> ID
795+
to <var title="">s</var>.
796+
797+
<dt>pseudo-class
798+
799+
<dd>
800+
<p>If the pseudo-class does not accept arguments append "<code>:</code>"
801+
(U+003A), followed by the name of the pseudo-class, to <var
802+
title="">s</var>.</p>
803+
804+
<p>Otherwise, append "<code>:</code>" (U+003A), followed by the name of
805+
the pseudo-class, followed by "<code>(</code>" (U+0028), followed by the
806+
value of the pseudo-class argument determined as per below, followed by
807+
"<code>)</code> (U+0029), to <var title="">s</var>.</p>
773808

774809
<dl>
775-
<dt>If the pseudo-class is <code title="">:lang()</code>
810+
<dt><code title="">:lang()</code>
776811

777812
<dd>
778-
<p>The literal value.
813+
<p>The <a href="#escape-an-identifier" title="escape an
814+
identifier">escaped</a> value.
815+
816+
<dt><code title="">:nth-child()</code>
817+
818+
<dt><code title="">:nth-last-child()</code>
779819

780-
<dt>If the pseudo-class is <code title="">:nth-child()</code>, <code
781-
title="">:nth-last-child()</code>, <code
782-
title="">:nth-of-type()</code>, or <code
783-
title="">:nth-last-of-type()</code>
820+
<dt><code title="">:nth-of-type()</code>
821+
822+
<dt><code title="">:nth-last-of-type()</code>
784823

785824
<dd>
786825
<ol>
@@ -792,51 +831,101 @@ <h2 id=selectors><span class=secno>5. </span>Selectors</h2>
792831

793832
<li>
794833
<p>If <var title="">a</var> is zero let the value be <var
795-
title="">b</var> serialized as string.
796-
</li>
797-
<!-- XXX serialize integer -->
834+
title="">b</var> <a href="#serialize-a-css-value-component"
835+
title="serialize a CSS value component">serialized</a> as
836+
&lt;number>.
798837

799838
<li>
800839
<p>If <var title="">a</var> is one or minus one and <var
801-
title="">b</var> is zero let the value be "<code title="">n</code>".
840+
title="">b</var> is zero let the value be "<code title="">n</code>"
841+
(U+006E).
802842

803843
<li>
804844
<p>If <var title="">a</var> is one or minus one let the value be
805-
"<code title="">n</code>" followed by a U+002B PLUS SIGN (+)
806-
character if <var title="">b</var> is positive, followed by <var
807-
title="">b</var> serialized as string.
808-
</li>
809-
<!-- XXX serialize integer -->
845+
"<code title="">n</code>" (U+006E), followed by "<code>+</code>"
846+
(U+002B) if <var title="">b</var> is positive, followed by <var
847+
title="">b</var> <a href="#serialize-a-css-value-component"
848+
title="serialize a CSS value component">serialized</a> as
849+
&lt;number>.
810850

811851
<li>
812852
<p>If <var title="">b</var> is zero let the value be <var
813-
title="">a</var> serialized as string followed by "<code
814-
title="">n</code>".
815-
</li>
816-
<!-- XXX serialize integer -->
853+
title="">a</var> <a href="#serialize-a-css-value-component"
854+
title="serialize a CSS value component">serialized</a> as
855+
&lt;number>, followed by "<code title="">n</code>" (U+006E).
817856

818857
<li>
819-
<p>Otherwise let the value be <var title="">a</var> serialized as
820-
string followed by "<code title="">n</code>", followed by a
821-
"<code>+</code>" (U+002B) if <var title="">b</var> is positive,
822-
followed by <var title="">b</var> serialized as string.
823-
</li>
824-
<!-- XXX serialize integer -->
858+
<p>Otherwise let the value be <var title="">a</var> <a
859+
href="#serialize-a-css-value-component" title="serialize a CSS value
860+
component">serialized</a> as &lt;number>, followed by "<code
861+
title="">n</code>" (U+006E), followed by "<code>+</code>" (U+002B)
862+
if <var title="">b</var> is positive, followed by <var
863+
title="">b</var> <a href="#serialize-a-css-value-component"
864+
title="serialize a CSS value component">serialized</a> as
865+
&lt;number>.
825866
</ol>
826867

827-
<dt>If the pseudo-class is <code title="">:not()</code>
868+
<dt><code title="">:not()</code>
828869

829870
<dd>
830871
<p>The result of serializing the value using the rules for <a
831872
href="#serialize-a-group-of-selectors" title="serialize a group of
832873
selectors">serializing a group of selectors</a>.
874+
</dl>
875+
</dl>
833876

834-
<dt>Any other pseudo-class
877+
<p>To <dfn id=serialize-a-selector>serialize a selector</dfn> let <var
878+
title="">s</var> be the empty string, run the steps below for each part of
879+
the chain of the selector, and finally return <var title="">s</var>:
835880

836-
<dd>
837-
<p class=XXX>Hopefully Selectors Level 4 defines serialization itself.
838-
</dl>
881+
<ol>
882+
<li>
883+
<p>If there is only one <span>simple selector</span> in the
884+
<span>sequence of simple selectors</span> which is a <span>universal
885+
selector</span>, append the result of <a
886+
href="#serialize-a-simple-selector" title="serialize a simple
887+
selector">serializing</a> the <span>universal selector</span> to <var
888+
title="">s</var>.
889+
890+
<li>
891+
<p>Otherwise, for each <span>simple selector</span> in the <span>sequence
892+
of simple selectors</span> that is not a universal selector of which the
893+
<span>namespace prefix</span> maps to the null namespace (not in a
894+
namespace) or of which the <span>namespace prefix</span> maps to a
895+
namespace that is not the <span>default namespace</span> <a
896+
href="#serialize-a-simple-selector" title="serialize a simple
897+
selector">serialize</a> the <span>simple selector</span> and append the
898+
result to <var title="">s</var>.
899+
900+
<li>
901+
<p>If this is not the last part of the chain of the selector append a
902+
space (U+0020), followed by the combinator "<code>></code>",
903+
"<code>+</code>", or "<code>~</code>" as appropriate, followed by
904+
another space (U+0020) if the combinator was not whitespace, to <var
905+
title="">s</var>.
906+
907+
<li>
908+
<p>If this is the last part of the chain of the selector and there is a
909+
pseudo-element, append "<code>::</code>" followed by the name of the
910+
pseudo-class, to <var title="">s</var>.
911+
</ol>
912+
913+
<p>To <dfn id=serialize-a-group-of-selectors>serialize a group of
914+
selectors</dfn> let <var title="">s</var> be the empty string, run the
915+
steps below for each selector in the group of selectors, and finally
916+
return <var title="">s</var>:
917+
918+
<ol>
919+
<li>
920+
<p>Append the result of <a href="#serialize-a-selector" title="serialize
921+
a selector">serializing</a> the selector to <var title="">s</var>.
922+
923+
<li>
924+
<p>If the selector is not the last selector in the group of selectors
925+
append "<code>,</code>" (U+002C), followed by a space (U+0020), to <var
926+
title="">s</var>.
839927
</ol>
928+
<!-- http://dump.testsuite.org/2009/cssom/serializing-selectors.htm -->
840929

841930
<h2 id=style-sheets><span class=secno>6. </span>Style Sheets</h2>
842931

@@ -3516,7 +3605,7 @@ <h4 id=serializing-css-values><span class=secno>7.4.2. </span>Serializing
35163605
<p>To <dfn id=escape-a-url>escape a URL</dfn> means to create a string
35173606
represented by '<code title="">url("</code>', followed by the <a
35183607
href="#escape-a-string" title="escape a string">escaped</a> value of the
3519-
given string, followed by <code>")</code>.</p>
3608+
given string, followed by '<code>")</code>'.</p>
35203609
<!--
35213610
<ol>
35223611
<li><p>Relative lengths (<code>em</code>, <code>ex</code>, <code>px</code>,
@@ -3786,10 +3875,6 @@ <h2 id=resolved-values><span class=secno>9. </span>Resolved Values</h2>
37863875
issue this specification introduces the concept of a <dfn
37873876
id=resolved-value>resolved value</dfn>.
37883877

3789-
<p>Since CSS specifications never included the concept of <a
3790-
href="#resolved-value">resolved value</a> this specification attempts to
3791-
define it for the properties defined in CSS 2.1.
3792-
37933878
<p>The <a href="#resolved-value">resolved value</a> for a given property
37943879
can be determined as follows:
37953880

@@ -3829,7 +3914,10 @@ <h2 id=resolved-values><span class=secno>9. </span>Resolved Values</h2>
38293914
<dt>'<code>pause</code>'
38303915

38313916
<dd>
3832-
<p>There is no <a href="#resolved-value">resolved value</a>.
3917+
<p>There is no <a href="#resolved-value">resolved value</a>.</p>
3918+
3919+
<p class=XXX>The idea is to treat these like "any other property" because
3920+
whether a property is a shorthand property changes over time.</p>
38333921

38343922
<dt>'<code>line-height</code>'
38353923

0 commit comments

Comments
 (0)