Skip to content

Commit e95b328

Browse files
FremyCompanyFremyCompany
committed
[css-tables] Editorial: fixed linting issues
1 parent 102990f commit e95b328

1 file changed

Lines changed: 42 additions & 27 deletions

File tree

‎css-tables-3/Overview.bs‎

Lines changed: 42 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ Work Status: Exploring
77
Group: csswg
88
ED: https://drafts.csswg.org/css-tables-3/
99
TR: https://www.w3.org/TR/css-tables-3/
10-
Previous Version: https://www.w3.org/TR/2016/WD-css-tables-3-20161025/
10+
Previous Version: https://www.w3.org/TR/2019/WD-css-tables-3-20190727/
1111
Previous Version: https://www.w3.org/TR/CSS2/tables.html
1212
Repository: w3c/csswg-drafts
1313
Warning: not ready
@@ -21,6 +21,17 @@ Abstract: This CSS module defines a two-dimensional grid-based layout system, op
2121
Ignored Terms: block-level box
2222
</pre>
2323

24+
<!-- NOTE TO SELF:
25+
BEFORE PUBLISHING A NEW WORKING DRAFT:
26+
- switch Status to WD
27+
- search the w3c list archives for the wg resolution allowing to republish
28+
- fix all the linting issues
29+
AFTER PUBLISHING A NEW WORKING DRAFT:
30+
- revert Status to ED
31+
- update Previous Version to the permalink of the new version you pushed
32+
- commit those changes to csswg-drafts
33+
-->
34+
2435
<pre class=link-defaults>
2536
spec:css-sizing-3; type:property; text:min-height
2637
spec:css-sizing-3; type:property; text:min-width
@@ -127,7 +138,7 @@ spec:css-sizing-3; type:property; text:box-sizing
127138
</style>
128139

129140
<figure>
130-
<img src="images/table-structure.png" width=493 />
141+
<img alt="[see-caption-below]" src="images/table-structure.png" width=493 />
131142
<figcaption>Two representations of the structure of a table (tree vs layout)</figcaption>
132143
</figure>
133144

@@ -607,7 +618,7 @@ spec:css-sizing-3; type:property; text:box-sizing
607618
The following schema describes the algorithm in a different way,
608619
to make it easier to understand.
609620
</p>
610-
<img src="images/CSS-Tables-Layout-Merged.svg" style="width: 100%" />
621+
<img alt="[see-caption-below]" src="images/CSS-Tables-Layout-Merged.svg" style="width: 100%" />
611622
<figcaption>Overview of the table layout algorithm. Not normative.</figcaption>
612623
</figure>
613624

@@ -859,7 +870,7 @@ spec:css-sizing-3; type:property; text:box-sizing
859870
is not attempting to define their implementation of said values.
860871
</div>
861872

862-
<div classs="note">
873+
<div class="note">
863874
Gecko has a bug when dealing with multiple captions.
864875
<a class="hint" href="http://codepen.io/FremyCompany/pen/WrJxwP">!Testcase</a>
865876
</div>
@@ -895,7 +906,7 @@ spec:css-sizing-3; type:property; text:box-sizing
895906

896907
<li>The computed values of properties 'position', 'float', 'margin'-*, 'top', 'right', 'bottom', and 'left' on the table
897908
are used on the table-wrapper box and not the table grid box;
898-
the same holds true for the <a href="https://drafts.csswg.org/css-transforms/#grouping-property-values">properties whose use could force the used value of <object>'transform-style'</object> to <code>flat</code></a> and their shorthands/longhands relatives:
909+
the same holds true for the properties whose use could force the used value of 'transform-style' to <code>flat</code></a> (see <a href="https://drafts.csswg.org/css-transforms/#grouping-property-values">list</a>) and their shorthands/longhands relatives:
899910
this list currently includes 'overflow', 'opacity', 'filter', 'clip', 'clip-path', 'isolation', 'mask'-*, 'mix-blend-mode', 'transform'-* and 'perspective'.
900911
<br>
901912
Where the specified values are not applied on the table grid and/or wrapper boxes,
@@ -1025,7 +1036,7 @@ spec:css-sizing-3; type:property; text:box-sizing
10251036
</ul>
10261037

10271038
<li>Harmonize the conflicting borders of S
1028-
</ul>
1039+
</ol>
10291040

10301041
<li>Divide the used width of all borders by two.<br>
10311042
<div class="note">
@@ -1775,7 +1786,7 @@ spec:css-sizing-3; type:property; text:box-sizing
17751786

17761787
</div>
17771788
</details>
1778-
<img src="images/CSS-Tables-Column-Width-Assignment.svg" style="width: 100%" />
1789+
<img alt="[see-caption-below]" src="images/CSS-Tables-Column-Width-Assignment.svg" style="width: 100%" />
17791790
<figcaption>Overview of the width distribution algorithm. Not normative.</figcaption>
17801791
</figure>
17811792

@@ -1940,7 +1951,7 @@ spec:css-sizing-3; type:property; text:box-sizing
19401951
<a href="#resolving-percentages-heights-in-table-cell-content">(see section below)</a>
19411952
</div>
19421953

1943-
The <dnf id="table-cell-baseline">baseline of a cell</dfn> is defined as
1954+
The <dfn id="table-cell-baseline">baseline of a cell</dfn> is defined as
19441955
the baseline of the first in-flow line box in the cell, or
19451956
the first in-flow table-row in the cell,
19461957
whichever comes first.
@@ -1968,7 +1979,7 @@ spec:css-sizing-3; type:property; text:box-sizing
19681979
</xmp>
19691980

19701981
<figure>
1971-
<img src="images/td-baseline-example-rendering.png" width="585" height="185" />
1982+
<img alt="[see-caption-below]" src="images/td-baseline-example-rendering.png" width="585" height="185" />
19721983
<figcaption>Rendering of <a href="https://jsfiddle.net/x8sh0f60/3/">this example</a> in a compliant browser</figcaption>
19731984
</figure>
19741985
</div>
@@ -2006,19 +2017,19 @@ spec:css-sizing-3; type:property; text:box-sizing
20062017

20072018
<table class="def">
20082019
<tr>
2009-
<th valign=top>baseline</th>
2020+
<th style="vertical-align:top">baseline</th>
20102021
<td>The baseline of the cell is aligned with the baseline of the other cells of the first row it spans (see the definition of baselines of <a href="#table-cell-baseline">cells</a> and <a href="#table-row-baseline">rows</a>).</td>
20112022
<tr>
2012-
<th valign=top>top</th>
2023+
<th style="vertical-align:top">top</th>
20132024
<td>The top of the cell box is aligned with the top of the first row it spans.</td>
20142025
<tr>
2015-
<th valign=top>bottom</th>
2026+
<th style="vertical-align:top">bottom</th>
20162027
<td>The bottom of the cell box is aligned with the bottom of the last row it spans.</td>
20172028
<tr>
2018-
<th valign=top>middle</th>
2029+
<th style="vertical-align:top">middle</th>
20192030
<td>The center of the cell is aligned with the center of the rows it spans.</td>
20202031
<tr>
2021-
<th valign=top title="sub, super, text-top, text-bottom, &lt;length>, &lt;percentage>">...</th>
2032+
<th style="vertical-align:top" title="sub, super, text-top, text-bottom, &lt;length>, &lt;percentage>">...</th>
20222033
<td>Other values do not apply to cells; the cell is aligned at the baseline instead.</td>
20232034
</table>
20242035

@@ -2057,7 +2068,7 @@ spec:css-sizing-3; type:property; text:box-sizing
20572068
Example showing how the previous algorithm creates the various alignment lines of a row.
20582069

20592070
<figure>
2060-
<a href="http://www.w3.org/TR/CSS2/images/longdesc/cell-align-desc.html"><img src="images/cell-align-explainer.png" width="375" height="241"></a>
2071+
<a href="http://www.w3.org/TR/CSS2/images/longdesc/cell-align-desc.html"><img alt="[see-caption-below]" src="images/cell-align-explainer.png" width="375" height="241"></a>
20612072
<figcaption>
20622073
Diagram showing the effect of various values of 'vertical-align' on table cells.
20632074
Cell boxes 1 and 2 are aligned at their baselines. Cell box 2 has the largest height above the baseline, so that determines the baseline of the row.
@@ -2173,8 +2184,6 @@ spec:css-sizing-3; type:property; text:box-sizing
21732184

21742185
<style>
21752186
ul.inline { display: inline; margin: 0; padding: 0; }
2176-
--ul.inline::before { content:"("; display: inline; }
2177-
--ul.inline::after { content:")"; display: inline; }
21782187
ul.inline > li { display: inline; margin: 0; padding: 0; }
21792188
ul.inline > li::after { content:", "; display: inline; }
21802189
ul.inline > li:last-of-type::after { content:""; display: none; }
@@ -2301,7 +2310,11 @@ spec:css-sizing-3; type:property; text:box-sizing
23012310
</section>
23022311
</xmp>
23032312

2304-
<table border="1" rules="all" style="margin: auto; font-family: 'Consolas', monospace">
2313+
<style>
2314+
.border-1 td, .border-1 th { border: 1px solid black; }
2315+
.rules-all { border-collapse: collapse; }
2316+
</style>
2317+
<table class="border-1 rules-all" style="margin: auto; font-family: 'Consolas', monospace">
23052318
<thead>
23062319
<tr>
23072320
<th>--table-cell-height&nbsp;&nbsp;</th>
@@ -2382,7 +2395,7 @@ spec:css-sizing-3; type:property; text:box-sizing
23822395
<ul><li>the width/height assigned to the caption during layout</ul>
23832396
<li>top location is the sum of:
23842397
<ul><li>the height reserved for previous top captions (including margins), if any
2385-
<li>any necessary extra top margin remaining after collapsing margins with the previous caption, if any.</ul>
2398+
<li>any necessary extra top margin remaining after collapsing margins with the previous caption, if any.</ul></div>
23862399
<li>left location is the sum of:
23872400
<ul><li>the margin left of the caption
23882401
<li>half of (the table width minus the width of caption and its total horizontal margin).</ul>
@@ -2510,7 +2523,7 @@ With a table-root as containing block</h3>
25102523
The <b>blue</b> area is the table background area, and the darker blue area where the table border area. <br/>
25112524
The <b>black</b> area is the descendant positioned relative to the table, the arrows represent the top/left/bottom/right displacements.
25122525
</figcaption>
2513-
<img src="images/css-tables-abspos.svg" width="702" height="402" alt=''>
2526+
<img alt="[see-caption-above]" src="images/css-tables-abspos.svg" width="702" height="402">
25142527
</figure>
25152528

25162529
</div>
@@ -2627,7 +2640,7 @@ With a table-internal box as non-containing block parent</h3>
26272640
The correct rendering of this code snippet is depicted here:
26282641

26292642
<figure>
2630-
<img src="images/empty-cells-example.gif" width=500 height=300 />
2643+
<img alt="[see-caption-below]" src="images/empty-cells-example.gif" width=500 height=300 />
26312644
<figcaption>Rendering of three columns whose middle one is hidden by empty-cells:hide</figcaption>
26322645
</figure>
26332646
</div>
@@ -2664,7 +2677,7 @@ With a table-internal box as non-containing block parent</h3>
26642677
the rendering of its borders on and those of its table-cells is modified.
26652678
The following rules describe in which way.
26662679

2667-
<p cass="note">
2680+
<p class="note">
26682681
The rules for background and borders painting defined in [[#drawing-backgrounds-and-borders]]
26692682
still apply if they are not overriden.
26702683

@@ -2697,7 +2710,7 @@ With a table-internal box as non-containing block parent</h3>
26972710
if the layers above it have a transparent background.
26982711

26992712
<figure>
2700-
<img src="https://www.w3.org/TR/CSS2/images/tbl-layers.png">
2713+
<img alt="[see-caption-below]" src="https://www.w3.org/TR/CSS2/images/tbl-layers.png">
27012714
<figcaption>Schema of table layers.</figcaption>
27022715
</figure></p>
27032716

@@ -2837,7 +2850,7 @@ With a table-internal box as non-containing block parent</h3>
28372850
and the vertical gap must be inserted after the repeated footer.
28382851

28392852
<figure>
2840-
<img src="./images/CSS-Tables-Fragmentation-1.svg" style="width:100%; max-width: 500px;" />
2853+
<img alt="[see-caption-below]" src="./images/CSS-Tables-Fragmentation-1.svg" style="width:100%; max-width: 500px;" />
28412854
<figcaption>Expected rendering of table fragmented across two pages</figcaption>
28422855
</figure>
28432856

@@ -2849,7 +2862,7 @@ With a table-internal box as non-containing block parent</h3>
28492862
in its previous fragment (top borders must not be repainted in continuation fragments).
28502863

28512864
<figure>
2852-
<img src="./images/CSS-Tables-Fragmentation-2.svg" style="width:100%; max-width: 500px;" />
2865+
<img alt="[see-caption-below]" src="./images/CSS-Tables-Fragmentation-2.svg" style="width:100%; max-width: 500px;" />
28532866
<figcaption>Expected rendering of table containing a tall row fragmented across two pages</figcaption>
28542867
</figure>
28552868

@@ -2885,7 +2898,7 @@ With a table-internal box as non-containing block parent</h3>
28852898
The same applies for footer rows and the table bottom border.
28862899

28872900
<figure>
2888-
<img src="./images/CSS-Tables-Repeating-Headers.svg" style="width:100%; max-width: 500px;" />
2901+
<img alt="[see-caption-below]" src="./images/CSS-Tables-Repeating-Headers.svg" style="width:100%; max-width: 500px;" />
28892902
<figcaption>Expected rendering of table with headers and footers fragmented across two pages</figcaption>
28902903
</figure>
28912904

@@ -2908,7 +2921,7 @@ Using CSS Tables does not incur any privacy risk to mitigate.
29082921
<!--——————————————————————————————————————————————————————————————————————————-->
29092922
<h2 id="bug-list">List of bugs being tracked</h2>
29102923

2911-
<p style="font-size: italic">
2924+
<p style="font-style: italic">
29122925
This section is not normative.
29132926

29142927
<ul class="bug-list">
@@ -3399,6 +3412,8 @@ Using CSS Tables does not incur any privacy risk to mitigate.
33993412
#if-css-supports ::-webkit-details-marker, details:not([open]) > aside { display: block; }
34003413
#if-css-supports ::-moz-details-marker, details:not([open]) > aside { display: block; }
34013414
#if-css-supports ::-ms-details-marker, details:not([open]) > aside { display: block; }
3415+
/* THIS IS COMMENTED BECAUSE IT FAILS VALIDATION * /
34023416
#if-css-supports ::details-marker, details:not([open]) > aside { display: block; }
3417+
/* END OF COMMENT */
34033418

34043419
</style>

0 commit comments

Comments
 (0)