Skip to content

Commit

Permalink
[e] (0) Filling in the rendering section: more research for placeholders
Browse files Browse the repository at this point in the history 
git-svn-id: http://svn.whatwg.org/webapps@2747 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information
@Hixie
Hixie committed Feb 3, 2009
1 parent 87a6018 commit 0ae4788
Show file tree
Hide file tree
Showing 2 changed files with 109 additions and 34 deletions.
68 changes: 52 additions & 16 deletions index
View file
Expand Up @@ -1056,7 +1056,7 @@
<li><a href=#the-figure-element-0><span class=secno>10.4.12 </span>The <code>figure</code> element</a></li>
<li><a href=#the-hr-element-0><span class=secno>10.4.13 </span>The <code>hr</code> element</a></li>
<li><a href=#the-input-element-as-a-text-entry-widget><span class=secno>10.4.14 </span>The <code>input</code> element as a text entry widget</a></li>
<li><a href=#the-input-element-as-date-widgets><span class=secno>10.4.15 </span>The <code>input</code> element as date widgets</a></li>
<li><a href=#the-input-element-as-domain-specific-widgets><span class=secno>10.4.15 </span>The <code>input</code> element as domain-specific widgets</a></li>
<li><a href=#the-input-element-as-a-range-control><span class=secno>10.4.16 </span>The <code>input</code> element as a range control</a></li>
<li><a href=#the-input-element-as-a-color-well><span class=secno>10.4.17 </span>The <code>input</code> element as a color well</a></li>
<li><a href=#the-input-element-as-a-check-box-widget><span class=secno>10.4.18 </span>The <code>input</code> element as a check box widget</a></li>
Expand Down Expand Up @@ -55822,18 +55822,20 @@ li { display: list-item; }</pre>
<p>For the purposes of the CSS table model, the <code><a href=#the-col-element>col</a></code>
element is to be treated as if it was present as many times as its
<code title=attr-col-span><a href=#attr-col-span>span</a></code> attribute <a href=#rules-for-parsing-non-negative-integers title="rules
for parsing non-negative integers">specifies</a>.</p>
for parsing non-negative integers">specifies</a>.</p> <!-- XXX
link to dfn instead of parser -->

<p>For the purposes of the CSS table model, the
<code><a href=#the-colgroup-element>colgroup</a></code> element, if it contains no <code><a href=#the-col-element>col</a></code>
element, is to be treated as if it had as many such children as its
<code title=attr-colgroup-span><a href=#attr-colgroup-span>span</a></code> attribute <a href=#rules-for-parsing-non-negative-integers title="rules for parsing non-negative
integers">specifies</a>.</p>
integers">specifies</a>.</p> <!-- XXX link to dfn instead of
parser -->

<p>For the purposes of the CSS table model, the <code title=attr-tdth-colspan><a href=#attr-tdth-colspan>colspan</a></code> and <code title=attr-tdth-rowspan><a href=#attr-tdth-rowspan>rowspan</a></code> attributes on
<code><a href=#the-td-element>td</a></code> and <code><a href=#the-th-element>th</a></code> elements are expected to provide
the <i>special knowledge</i> regarding cells spanning rows and
columns.</p>
columns.</p> <!-- XXX link to dfn instead of parser -->


<h4 id=margins-and-padding><span class=secno>10.3.3 </span>Margins and padding</h4>
Expand Down Expand Up @@ -55879,8 +55881,13 @@ img[align=right] { margin-left: 3px; }</pre>
bottom of the initial containing block are expected to be collapsed
to zero.</p>

<hr><p class=XXX>...body...</p>
<!-- marginwidth, marginheight -->

<hr><p class=XXX>...tables...</p>
<!-- cellspacing, cellpadding, height, width* (int/%; *width=0 => width:auto); <table hspace/vspace> (int); <table cols>; <table border> (border => border=1); -->
<!-- td/th width height: 0=>auto; %=>%; n=>px -->



<h4 id=alignment><span class=secno>10.3.4 </span>Alignment</h4>
Expand All @@ -55905,9 +55912,12 @@ th { text-align: center; }</pre>
<!-- XXX <div/h1-h6/p align="left|right|center/middle|justify"> -->

<hr><p class=XXX>...tables...</p>
<!-- <table align="left|right|center/abscenter/absmiddle/middle|char|justify"> -->
<!-- <tr/td/th/col/etc align="left|right|center/absmiddle|char|justify"> -->
<!-- <col width=int/% align=^ valign="top|middle|bottom|baseline" span=n char=? charoff=?> -->
<!-- table align="left|right|center/abscenter/absmiddle/middle|char|justify" -->
<!-- tr/td/th/col/ align="left|right|center/absmiddle|char|justify" -->
<!-- td/th/col/ valign="top|middle|bottom|baseline" -->
<!-- td/th/col/ ch=? charoff=n>0 -->
<!-- col width=int/% span=n -->



<h4 id=fonts-and-colors><span class=secno>10.3.5 </span>Fonts and colors</h4>
Expand Down Expand Up @@ -55950,11 +55960,14 @@ thead, tbody, tfoot, tr { border-color: inherit; }</pre>
<var title="">x</var> <var title="">x</var> <var title="">x</var> <var title="">x</var> h1 { font-size: 0.83em; }
<var title="">x</var> <var title="">x</var> <var title="">x</var> <var title="">x</var> <var title="">x</var> h1 { font-size: 0.67em; }</pre>

<hr><p class=XXX>Need to define the content attributes of BODY in
terms of CSS or something.</p>
<hr><p class=XXX>...background...</p>
<!-- body, table, td, th, tbody, tfoot, thead, tr: background (empty string ignored?), bgcolor -->

<hr><p class=XXX>...body...</p>
<!--link, vlink, alink, text -->

<hr><p class=XXX>...tables...</p>
<!-- <table bgcolor bordercolor> -->
<!-- table: bordercolor -->


<h4 id=punctuation-and-decorations><span class=secno>10.3.6 </span>Punctuation and decorations</h4>
Expand Down Expand Up @@ -56017,8 +56030,8 @@ bdo[dir] { unicode-bidi: bidi-override; }</pre>
<!-- XXX <ol>/<ul> type (1|a|A|i|I|disc|circle/round|square), start (n); <li> type (A|a|I|i|1|disc|circle/round|square), value (n) -->

<hr><p class=XXX>...tables...</p>
<!-- rules/layout/frames -->

<!-- table: rules/layout/frames -->
<!-- td/th: nowrap -->


<h4 id=resetting-rules-for-inherited-properties><span class=secno>10.3.7 </span>Resetting rules for inherited properties</h4>
Expand Down Expand Up @@ -56054,6 +56067,15 @@ table {
<!-- applet, audio, canvas, embed, iframe, img, input type=image, object, video -->
<!-- <code>input</code> elements whose <code title="attr-input-type">type</code> attribute is in the <span title="attr-input-type-image">Image Button</span> state -->

<!--
iframe:
width, height = as <img>; frameborder, scrolling=as <frame>; align=as <img>; marginheight, marginwidth (int/%) (=?)
img, input type=image:
width, height (int/%); hspace, vspace => margins (int/%); border (int>=0) => border-width, with border-style: solid;
align (left=float:left|right=float:right|top=v-a:t|bottom/baseline=v-a:b|center/middle=[1]|texttop=v-a:tt|absmiddle/abscenter=v-a:m|absbottom=v-a:b)
[1] = position vertical middle with parent baseline
-->

<!--
img - how to handle alt text, img in link (no border)... Define
that either the src="" is shown (as an image) or the alt="" is
Expand Down Expand Up @@ -56161,31 +56183,44 @@ table {
<h4 id=the-hr-element-0><span class=secno>10.4.13 </span>The <code><a href=#the-hr-element>hr</a></code> element</h4>

<p class=XXX>...</p>
<!-- align=left|right|center (as auto margins), width=(int=>width:px; %->width:%)
color (color implies noshade); sets 'color' which then propagates to border-color; defaults to 'gray'
size=int, noshade
with noshade: border-width = size/2 (default size=2 => 1px per side); solid borders; rounded corners
without no shade: inset borders
without noshade, size>1: height = size-2; border-width=1px
without noshade, size=1: height = 0; border-top-width=1px only
-->



<h4 id=the-input-element-as-a-text-entry-widget><span class=secno>10.4.14 </span>The <code><a href=#the-input-element>input</a></code> element as a text entry widget</h4>

<p class=XXX>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#text-state-and-search-state title=attr-input-type-text>Text</a>, <a href=#text-state-and-search-state title=attr-input-type-search>Search</a>, <a href=#url-state title=attr-input-type-url>URL</a>, <a href=#e-mail-state title=attr-input-type-email>E-mail</a>, <a href=#password-state title=attr-input-type-password>Password</a>, or <a href=#number-state title=attr-input-type-number>Number</a> state, ...</p>
<p class=XXX>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#text-state-and-search-state title=attr-input-type-text>Text</a>, <a href=#text-state-and-search-state title=attr-input-type-search>Search</a>, <a href=#url-state title=attr-input-type-url>URL</a>, <a href=#e-mail-state title=attr-input-type-email>E-mail</a>, or <a href=#password-state title=attr-input-type-password>Password</a> state, ...</p>
<!-- datalist presentation -->

<!-- size: http://mxr.mozilla.org/mozilla-central/ident?i=CalcIntrinsicSize -->


<h4 id=the-input-element-as-date-widgets><span class=secno>10.4.15 </span>The <code><a href=#the-input-element>input</a></code> element as date widgets</h4>
<h4 id=the-input-element-as-domain-specific-widgets><span class=secno>10.4.15 </span>The <code><a href=#the-input-element>input</a></code> element as domain-specific widgets</h4>

<p class=XXX>When an <code><a href=#the-input-element>input</a></code> element's <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>, <a href=#date-state title=attr-input-type-date>Date</a>, <a href=#month-state title=attr-input-type-month>Month</a>, <a href=#week-state title=attr-input-type-week>Week</a>, <a href=#time-state title=attr-input-type-time>Time</a>, or <a href=#local-date-and-time-state title=attr-input-type-datetime-local>Local Date and Time</a>
state, ...</p>
<p class=XXX>When an <code><a href=#the-input-element>input</a></code> element's <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>, <a href=#date-state title=attr-input-type-date>Date</a>, <a href=#month-state title=attr-input-type-month>Month</a>, <a href=#week-state title=attr-input-type-week>Week</a>, <a href=#time-state title=attr-input-type-time>Time</a>, <a href=#local-date-and-time-state title=attr-input-type-datetime-local>Local Date and Time</a> or
<a href=#number-state title=attr-input-type-number>Number</a> state...</p>
<!-- datalist presentation -->



<h4 id=the-input-element-as-a-range-control><span class=secno>10.4.16 </span>The <code><a href=#the-input-element>input</a></code> element as a range control</h4>

<p class=XXX>When an <code><a href=#the-input-element>input</a></code> element's <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, ...</p>
<!-- datalist presentation -->



<h4 id=the-input-element-as-a-color-well><span class=secno>10.4.17 </span>The <code><a href=#the-input-element>input</a></code> element as a color well</h4>

<p class=XXX>When an <code><a href=#the-input-element>input</a></code> element's <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, ...</p>
<!-- datalist presentation -->



Expand Down Expand Up @@ -56235,6 +56270,7 @@ table {
<h4 id=the-select-element-0><span class=secno>10.4.25 </span>The <code><a href=#the-select-element>select</a></code> element</h4>

<p class=XXX>...</p>
<!-- multiple, size; optgroup -->



Expand Down
75 changes: 57 additions & 18 deletions source
View file
Expand Up @@ -61011,21 +61011,23 @@ li { display: list-item; }</pre>
<p>For the purposes of the CSS table model, the <code>col</code>
element is to be treated as if it was present as many times as its
<code title="attr-col-span">span</code> attribute <span title="rules
for parsing non-negative integers">specifies</span>.</p>
for parsing non-negative integers">specifies</span>.</p> <!-- XXX
link to dfn instead of parser -->

<p>For the purposes of the CSS table model, the
<code>colgroup</code> element, if it contains no <code>col</code>
element, is to be treated as if it had as many such children as its
<code title="attr-colgroup-span">span</code> attribute <span
title="rules for parsing non-negative
integers">specifies</span>.</p>
integers">specifies</span>.</p> <!-- XXX link to dfn instead of
parser -->

<p>For the purposes of the CSS table model, the <code
title="attr-tdth-colspan">colspan</code> and <code
title="attr-tdth-rowspan">rowspan</code> attributes on
<code>td</code> and <code>th</code> elements are expected to provide
the <i>special knowledge</i> regarding cells spanning rows and
columns.</p>
columns.</p> <!-- XXX link to dfn instead of parser -->


<h4>Margins and padding</h4>
Expand Down Expand Up @@ -61073,8 +61075,15 @@ img[align=right] { margin-left: 3px; }</pre>

<hr>

<p class="XXX">...body...</p>
<!-- marginwidth, marginheight -->

<hr>

<p class="XXX">...tables...</p>
<!-- cellspacing, cellpadding, height, width* (int/%; *width=0 => width:auto); <table hspace/vspace> (int); <table cols>; <table border> (border => border=1); -->
<!-- td/th width height: 0=>auto; %=>%; n=>px -->



<h4>Alignment</h4>
Expand All @@ -61101,9 +61110,12 @@ th { text-align: center; }</pre>
<hr>

<p class="XXX">...tables...</p>
<!-- <table align="left|right|center/abscenter/absmiddle/middle|char|justify"> -->
<!-- <tr/td/th/col/etc align="left|right|center/absmiddle|char|justify"> -->
<!-- <col width=int/% align=^ valign="top|middle|bottom|baseline" span=n char=? charoff=?> -->
<!-- table align="left|right|center/abscenter/absmiddle/middle|char|justify" -->
<!-- tr/td/th/col/ align="left|right|center/absmiddle|char|justify" -->
<!-- td/th/col/ valign="top|middle|bottom|baseline" -->
<!-- td/th/col/ ch=? charoff=n>0 -->
<!-- col width=int/% span=n -->



<h4>Fonts and colors</h4>
Expand Down Expand Up @@ -61151,13 +61163,18 @@ thead, tbody, tfoot, tr { border-color: inherit; }</pre>

<hr>

<p class="XXX">Need to define the content attributes of BODY in
terms of CSS or something.</p>
<p class="XXX">...background...</p>
<!-- body, table, td, th, tbody, tfoot, thead, tr: background (empty string ignored?), bgcolor -->

<hr>

<p class="XXX">...body...</p>
<!--link, vlink, alink, text -->

<hr>

<p class="XXX">...tables...</p>
<!-- <table bgcolor bordercolor> -->
<!-- table: bordercolor -->


<h4>Punctuation and decorations</h4>
Expand Down Expand Up @@ -61222,8 +61239,8 @@ bdo[dir] { unicode-bidi: bidi-override; }</pre>
<hr>

<p class="XXX">...tables...</p>
<!-- rules/layout/frames -->

<!-- table: rules/layout/frames -->
<!-- td/th: nowrap -->


<h4>Resetting rules for inherited properties</h4>
Expand Down Expand Up @@ -61259,6 +61276,15 @@ table {
<!-- applet, audio, canvas, embed, iframe, img, input type=image, object, video -->
<!-- <code>input</code> elements whose <code title="attr-input-type">type</code> attribute is in the <span title="attr-input-type-image">Image Button</span> state -->

<!--
iframe:
width, height = as <img>; frameborder, scrolling=as <frame>; align=as <img>; marginheight, marginwidth (int/%) (=?)
img, input type=image:
width, height (int/%); hspace, vspace => margins (int/%); border (int>=0) => border-width, with border-style: solid;
align (left=float:left|right=float:right|top=v-a:t|bottom/baseline=v-a:b|center/middle=[1]|texttop=v-a:tt|absmiddle/abscenter=v-a:m|absbottom=v-a:b)
[1] = position vertical middle with parent baseline
-->

<!--
img - how to handle alt text, img in link (no border)... Define
that either the src="" is shown (as an image) or the alt="" is
Expand Down Expand Up @@ -61366,6 +61392,14 @@ table {
<h4>The <code>hr</code> element</h4>

<p class="XXX">...</p>
<!-- align=left|right|center (as auto margins), width=(int=>width:px; %->width:%)
color (color implies noshade); sets 'color' which then propagates to border-color; defaults to 'gray'
size=int, noshade
with noshade: border-width = size/2 (default size=2 => 1px per side); solid borders; rounded corners
without no shade: inset borders
without noshade, size>1: height = size-2; border-width=1px
without noshade, size=1: height = 0; border-top-width=1px only
-->



Expand All @@ -61376,23 +61410,25 @@ table {
title="attr-input-type-text">Text</span>, <span
title="attr-input-type-search">Search</span>, <span
title="attr-input-type-url">URL</span>, <span
title="attr-input-type-email">E-mail</span>, <span
title="attr-input-type-password">Password</span>, or <span
title="attr-input-type-number">Number</span> state, ...</p>
title="attr-input-type-email">E-mail</span>, or <span
title="attr-input-type-password">Password</span> state, ...</p>
<!-- datalist presentation -->

<!-- size: http://mxr.mozilla.org/mozilla-central/ident?i=CalcIntrinsicSize -->


<h4>The <code>input</code> element as date widgets</h4>
<h4>The <code>input</code> element as domain-specific widgets</h4>

<p class="XXX">When an <code>input</code> element's <code
title="attr-input-type">type</code> attribute is in the <span
title="attr-input-type-datetime">Date and Time</span>, <span
title="attr-input-type-date">Date</span>, <span
title="attr-input-type-month">Month</span>, <span
title="attr-input-type-week">Week</span>, <span
title="attr-input-type-time">Time</span>, or <span
title="attr-input-type-datetime-local">Local Date and Time</span>
state, ...</p>
title="attr-input-type-time">Time</span>, <span
title="attr-input-type-datetime-local">Local Date and Time</span> or
<span title="attr-input-type-number">Number</span> state...</p>
<!-- datalist presentation -->



Expand All @@ -61401,6 +61437,7 @@ table {
<p class="XXX">When an <code>input</code> element's <code
title="attr-input-type">type</code> attribute is in the <span
title="attr-input-type-range">Range</span> state, ...</p>
<!-- datalist presentation -->



Expand All @@ -61409,6 +61446,7 @@ table {
<p class="XXX">When an <code>input</code> element's <code
title="attr-input-type">type</code> attribute is in the <span
title="attr-input-type-color">Color</span> state, ...</p>
<!-- datalist presentation -->



Expand Down Expand Up @@ -61468,6 +61506,7 @@ table {
<h4>The <code>select</code> element</h4>

<p class="XXX">...</p>
<!-- multiple, size; optgroup -->



Expand Down

0 comments on commit 0ae4788

Please sign in to comment.