Skip to content

Commit

Permalink
[giow] (0) The CSS rules need to do attribute value matching consiste…
Browse files Browse the repository at this point in the history 
…ntly across HTML and XHTML, despite the rules for interpreting author style sheets.

Fixing http://www.w3.org/Bugs/Public/show_bug.cgi?id=9335

git-svn-id: http://svn.whatwg.org/webapps@4949 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information
@Hixie
Hixie committed Apr 2, 2010
1 parent f6f145d commit 30b2206
Show file tree
Hide file tree
Showing 3 changed files with 186 additions and 157 deletions.
114 changes: 62 additions & 52 deletions complete.html
View file
Expand Up @@ -81765,6 +81765,21 @@ <h4 id=introduction-12><span class=secno>14.2.1 </span>Introduction</h4>
are expected to be flipped around on elements whose 'direction'
property is 'rtl'. These are marked "<dfn id=ltr-specific>LTR-specific</dfn>".</p>

<p id=case-sensitive-selector-exception>For the purpose of the
rules marked "case-sensitive", user agents are expected to use
case-sensitive matching of attribute values rather than
case-insensitive matching, regardless of whether a case-insensitive
matching is normally required for the given attribute.</p>

<p id=case-insensitive-selector-exception>Similarly, for the
purpose of the rules marked "case-insensitive", user agents are
expected to use <a href=#ascii-case-insensitive>ASCII case-insensitive</a> matching of
attribute values rather than case-sensitive matching, even for
attributes in XHTML documents.</p>

<p class=note>These markings only affect the handling of attribute
<em>values</em>, not attribute names or element names.</p>

<hr><p>When the text below says that an attribute <var title="">attribute</var> on an element <var title="">element</var>
<dfn id=maps-to-the-pixel-length-property>maps to the pixel length property</dfn> (or properties) <var title="">properties</var>, it means that if <var title="">element</var> has an attribute <var title="">attribute</var> set, and parsing that attribute's value
using the <a href=#rules-for-parsing-non-negative-integers>rules for parsing non-negative integers</a>
Expand Down Expand Up @@ -81792,7 +81807,7 @@ <h4 id=display-types><span class=secno>14.2.2 </span>Display types</h4>

[hidden], area, base, basefont, command, datalist, head,
input[type=hidden], link, menu[type=context], meta, noembed, noframes,
param, rp, script, source, style, title {
param, rp, script, source, style, title { /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
display: none;
}

Expand Down Expand Up @@ -82063,44 +82078,44 @@ <h4 id=alignment><span class=secno>14.2.4 </span>Alignment</h4>

<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);

table[align=left] { float: left; }
table[align=right] { float: right; }
table[align=left] { float: left; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
table[align=right] { float: right; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
table[align=center], table[align=abscenter],
table[align=absmiddle], table[align=middle] {
table[align=absmiddle], table[align=middle] { /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
margin-left: auto; margin-right: auto;
}

caption[align=bottom] { caption-side: bottom; }
caption[align=bottom] { caption-side: bottom; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
p[align=left], h1[align=left], h2[align=left], h3[align=left],
h4[align=left], h5[align=left], h6[align=left] {
h4[align=left], h5[align=left], h6[align=left] { /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
text-align: left;
}
p[align=right], h1[align=right], h2[align=right], h3[align=right],
h4[align=right], h5[align=right], h6[align=right] {
h4[align=right], h5[align=right], h6[align=right] { /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
text-align: right;
}
p[align=center], h1[align=center], h2[align=center], h3[align=center],
h4[align=center], h5[align=center], h6[align=center] {
h4[align=center], h5[align=center], h6[align=center] { /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
text-align: center;
}
p[align=justify], h1[align=justify], h2[align=justify], h3[align=justify],
h4[align=justify], h5[align=justify], h6[align=justify] {
h4[align=justify], h5[align=justify], h6[align=justify] { /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
text-align: justify;
}
col[valign=top], thead[valign=top], tbody[valign=top],
tfoot[valign=top], tr[valign=top], td[valign=top], th[valign=top] {
tfoot[valign=top], tr[valign=top], td[valign=top], th[valign=top] { /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
vertical-align: top;
}
col[valign=middle], thead[valign=middle], tbody[valign=middle],
tfoot[valign=middle], tr[valign=middle], td[valign=middle], th[valign=middle] {
tfoot[valign=middle], tr[valign=middle], td[valign=middle], th[valign=middle] { /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
vertical-align: middle;
}
col[valign=bottom], thead[valign=bottom], tbody[valign=bottom],
tfoot[valign=bottom], tr[valign=bottom], td[valign=bottom], th[valign=bottom] {
tfoot[valign=bottom], tr[valign=bottom], td[valign=bottom], th[valign=bottom] { /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
vertical-align: bottom;
}
col[valign=baseline], thead[valign=baseline], tbody[valign=baseline],
tfoot[valign=baseline], tr[valign=baseline], td[valign=baseline], th[valign=baseline] {
tfoot[valign=baseline], tr[valign=baseline], td[valign=baseline], th[valign=baseline] { /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
vertical-align: baseline;
}</pre>

Expand Down Expand Up @@ -82205,7 +82220,7 @@ <h4 id=fonts-and-colors><span class=secno>14.2.5 </span>Fonts and colors</h4>
table[rules=groups] &gt; tfoot &gt; tr &gt; td, table[rules=groups] &gt; tfoot &gt; tr &gt; th,
table[rules=rows] &gt; tfoot &gt; tr &gt; td, table[rules=rows] &gt; tfoot &gt; tr &gt; th,
table[rules=cols] &gt; tfoot &gt; tr &gt; td, table[rules=cols] &gt; tfoot &gt; tr &gt; th,
table[rules=all] &gt; tfoot &gt; tr &gt; td, table[rules=all] &gt; tfoot &gt; tr &gt; th {
table[rules=all] &gt; tfoot &gt; tr &gt; td, table[rules=all] &gt; tfoot &gt; tr &gt; th { /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
border-color: black;
}</pre>

Expand Down Expand Up @@ -82451,9 +82466,9 @@ <h4 id=punctuation-and-decorations><span class=secno>14.2.6 </span>Punctuation a
table { border-style: outset; }
td, th { border-style: inset; }

[dir=ltr] { direction: ltr; unicode-bidi: embed; }
[dir=rtl] { direction: rtl; unicode-bidi: embed; }
bdo[dir=ltr], bdo[dir=rtl] { unicode-bidi: bidi-override; }</pre>
[dir=ltr] { direction: ltr; unicode-bidi: embed; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
[dir=rtl] { direction: rtl; unicode-bidi: embed; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
bdo[dir=ltr], bdo[dir=rtl] { unicode-bidi: bidi-override; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */</pre>

<p>In addition, rules setting the 'quotes' property appropriately
for the locales and languages understood by the user are expected to
Expand All @@ -82467,9 +82482,9 @@ <h4 id=punctuation-and-decorations><span class=secno>14.2.6 </span>Punctuation a
td[nowrap], th[nowrap] { white-space: nowrap; }
pre[wrap] { white-space: pre-wrap; }

br[clear=left] { clear: left; }
br[clear=right] { clear: right; }
br[clear=all], br[clear=both] { clear: both; }
br[clear=left] { clear: left; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
br[clear=right] { clear: right; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
br[clear=all], br[clear=both] { clear: both; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */

ol[type=1], li[type=1] { list-style-type: decimal; }
ol[type=a], li[type=a] { list-style-type: lower-alpha; } /* <a href=#case-sensitive-selector-exception>case-sensitive</a> */
Expand Down Expand Up @@ -82542,11 +82557,6 @@ <h4 id=punctuation-and-decorations><span class=secno>14.2.6 </span>Punctuation a
border-width: 1px;
}</pre>

<p id=case-sensitive-selector-exception>For the purpose of the
four rules marked "case-sensitive" above, user agents are expected
to use case-sensitive matching of attribute values rather than
case-insensitive matching as is normally required for the <code title=attr-olul-type>type</code> attribute.</p>

<p>When rendering <code><a href=#the-li-element>li</a></code> elements, user agents are expected
to use the ordinal value of the <code><a href=#the-li-element>li</a></code> element to render
the counter in the list item marker.</p>
Expand Down Expand Up @@ -82617,9 +82627,9 @@ <h4 id=the-hr-element-0><span class=secno>14.2.8 </span>The <code><a href=#the-h

<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);

hr[align=left] { margin-left: 0; margin-right: auto; }
hr[align=right] { margin-left: auto; margin-right: 0; }
hr[align=center] { margin-left: auto; margin-right: auto; }
hr[align=left] { margin-left: 0; margin-right: auto; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
hr[align=right] { margin-left: auto; margin-right: 0; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
hr[align=center] { margin-left: auto; margin-right: auto; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
hr[color], hr[noshade] { border-style: solid; }</pre>

<p>If an <code><a href=#the-hr-element>hr</a></code> element has either a <code title=attr-hr-color><a href=#attr-hr-color>color</a></code> attribute or a <code title=attr-hr-noshade><a href=#attr-hr-noshade>noshade</a></code> attribute, and furthermore
Expand Down Expand Up @@ -82823,8 +82833,8 @@ <h4 id=images-0><span class=secno>14.3.2 </span>Images</h4>

<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);

img[align=left] { margin-right: 3px; }
img[align=right] { margin-left: 3px; }</pre>
img[align=left] { margin-right: 3px; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
img[align=right] { margin-left: 3px; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */</pre>

</div>

Expand All @@ -82838,45 +82848,45 @@ <h4 id=attributes-for-embedded-content-and-images><span class=secno>14.3.3 </spa

<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);

iframe[frameborder=0], iframe[frameborder=no] { border: none; }
iframe[frameborder=0], iframe[frameborder=no] { border: none; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */

applet[align=left], embed[align=left], iframe[align=left],
img[align=left], input[type=image][align=left], object[align=left] {
img[align=left], input[type=image][align=left], object[align=left] { /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
float: left;
}

applet[align=right], embed[align=right], iframe[align=right],
img[align=right], input[type=image][align=right], object[align=right] {
img[align=right], input[type=image][align=right], object[align=right] { /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
float: right;
}

applet[align=top], embed[align=top], iframe[align=top],
img[align=top], input[type=image][align=top], object[align=top] {
img[align=top], input[type=image][align=top], object[align=top] { /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
vertical-align: top;
}

applet[align=bottom], embed[align=bottom], iframe[align=bottom],
img[align=bottom], input[type=image][align=bottom], object[align=bottom],
applet[align=baseline], embed[align=baseline], iframe[align=baseline],
img[align=baseline], input[type=image][align=baseline], object[align=baseline] {
img[align=baseline], input[type=image][align=baseline], object[align=baseline] { /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
vertical-align: baseline;
}

applet[align=texttop], embed[align=texttop], iframe[align=texttop],
img[align=texttop], input[type=image][align=texttop], object[align=texttop] {
img[align=texttop], input[type=image][align=texttop], object[align=texttop] { /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
vertical-align: text-top;
}

applet[align=absmiddle], embed[align=absmiddle], iframe[align=absmiddle],
img[align=absmiddle], input[type=image][align=absmiddle], object[align=absmiddle],
applet[align=abscenter], embed[align=abscenter], iframe[align=abscenter],
img[align=abscenter], input[type=image][align=abscenter], object[align=abscenter] {
img[align=abscenter], input[type=image][align=abscenter], object[align=abscenter] { /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
vertical-align: middle;
}

applet[align=bottom], embed[align=bottom], iframe[align=bottom],
img[align=bottom], input[type=image][align=bottom],
object[align=bottom] {
object[align=bottom] { /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
vertical-align: bottom;
}</pre>

Expand Down Expand Up @@ -83068,7 +83078,7 @@ <h4 id=the-input-element-as-a-text-entry-widget><span class=secno>14.4.4 </span>
<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);

input { binding: <i title="">input-textfield</i>; }
input[type=password] { binding: <i title="">input-password</i>; }
input[type=password] { binding: <i title="">input-password</i>; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
/* later rules override this for other values of type="" */</pre>

<p>When the <i title="">input-textfield</i> binding applies to an
Expand Down Expand Up @@ -83114,13 +83124,13 @@ <h4 id=the-input-element-as-domain-specific-widgets><span class=secno>14.4.5 </s

<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);

input[type=datetime] { binding: <i title="">input-datetime</i>; }
input[type=date] { binding: <i title="">input-date</i>; }
input[type=month] { binding: <i title="">input-month</i>; }
input[type=week] { binding: <i title="">input-week</i>; }
input[type=time] { binding: <i title="">input-time</i>; }
input[type=datetime-local] { binding: <i title="">input-datetime-local</i>; }
input[type=number] { binding: <i title="">input-number</i>; }</pre>
input[type=datetime] { binding: <i title="">input-datetime</i>; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
input[type=date] { binding: <i title="">input-date</i>; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
input[type=month] { binding: <i title="">input-month</i>; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
input[type=week] { binding: <i title="">input-week</i>; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
input[type=time] { binding: <i title="">input-time</i>; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
input[type=datetime-local] { binding: <i title="">input-datetime-local</i>; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
input[type=number] { binding: <i title="">input-number</i>; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */</pre>

<p>When the <i title="">input-datetime</i> binding applies to an
<code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#date-and-time-state title=attr-input-type-datetime>Date and Time</a> state, the
Expand Down Expand Up @@ -83169,7 +83179,7 @@ <h4 id=the-input-element-as-a-range-control><span class=secno>14.4.6 </span>The

<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);

input[type=range] { binding: <i title="">input-range</i>; }</pre>
input[type=range] { binding: <i title="">input-range</i>; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */</pre>

<p>When the <i title="">input-range</i> binding applies to an
<code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#range-state title=attr-input-type-range>Range</a> state, the element is
Expand All @@ -83195,7 +83205,7 @@ <h4 id=the-input-element-as-a-color-well><span class=secno>14.4.7 </span>The <co

<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);

input[type=color] { binding: <i title="">input-color</i>; }</pre>
input[type=color] { binding: <i title="">input-color</i>; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */</pre>

<p>When the <i title="">input-color</i> binding applies to an
<code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#color-state title=attr-input-type-color>Color</a> state, the element is
Expand All @@ -83217,8 +83227,8 @@ <h4 id=the-input-element-as-a-check-box-and-radio-button-widgets><span class=sec

<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);

input[type=checkbox] { binding: <i title="">input-checkbox</i>; }
input[type=radio] { binding: <i title="">input-radio</i>; }</pre>
input[type=checkbox] { binding: <i title="">input-checkbox</i>; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
input[type=radio] { binding: <i title="">input-radio</i>; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */</pre>

<p>When the <i title="">input-checkbox</i> binding applies to an
<code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#checkbox-state title=attr-input-type-checkbox>Checkbox</a> state, the element
Expand All @@ -83239,7 +83249,7 @@ <h4 id=the-input-element-as-a-file-upload-control><span class=secno>14.4.9 </spa

<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);

input[type=file] { binding: <i title="">input-file</i>; }</pre>
input[type=file] { binding: <i title="">input-file</i>; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */</pre>

<p>When the <i title="">input-file</i> binding applies to an
<code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#file-upload-state title=attr-input-type-file>File Upload</a> state, the element
Expand All @@ -83257,7 +83267,7 @@ <h4 id=the-input-element-as-a-button><span class=secno>14.4.10 </span>The <code>

<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);

input[type=submit], input[type=reset], input[type=button] {
input[type=submit], input[type=reset], input[type=button] { /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
binding: <i title="">input-button</i>;
}</pre>

Expand Down

0 comments on commit 30b2206

Please sign in to comment.