8000 [css-grid] Fix validator errors. · w3c/csswg-drafts@e04bedb · GitHub
Skip to content

Commit e04bedb

Browse files
tabatkinstabatkins
committed
[css-grid] Fix validator errors.
1 parent 679170c commit e04bedb

2 files changed

Lines changed: 34 additions & 20 deletions

File tree

‎css-grid/Overview.html‎

Lines changed: 21 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,13 @@
4747
</style>
4848
</head>
4949
<body class=h-entry>
50+
<style scoped>
51+
#grid-property-breakdown tr:nth-child(3) td {
52+
width: 25%;
53+
border-style: solid;
54+
}
55+
</style>
56+
5057
<style scoped type=text/css>
5158
.example {
5259
clear:both
@@ -1561,7 +1568,7 @@ <h3 class="heading settled heading" data-level=6.2 id=grid-auto-flow-property><s
15611568
while addressing use cases and back-compat.
15621569

15631570
<p>
1564-
Auto-placement takes <a data-link-type=dfn href=#grid-item title="grid items">grid items</a> in <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-flexbox-1/#propdef-order title=order>order</a>-modified document order.
1571+
Auto-placement takes <a data-link-type=dfn href=#grid-item title="grid items">grid items</a> in <a data-link-type=dfn href=http://dev.w3.org/csswg/css-flexbox-1/#order-modified-document-order title="order-modified document order">order-modified document order</a>.
15651572

15661573
<div class=example>
15671574
<p>
@@ -1683,7 +1690,7 @@ <h4 class="heading settled heading" data-level=6.2.1 id=auto-placement-algo><spa
16831690

16841691
<p> For each <a data-link-type=dfn href=#grid-item title="grid item">grid item</a> with a <a data-link-type=dfn href=#definite-grid-position title="definite row position">definite row position</a>
16851692
(that is, the <a class=property data-link-type=propdesc href=#propdef-grid-row-start title=grid-row-start>grid-row-start</a> and <a class=property data-link-type=propdesc href=#propdef-grid-row-end title=grid-row-end>grid-row-end</a> properties define a <a data-link-type=dfn href=#definite-grid-position title="definite grid position">definite grid position</a>),
1686-
in <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-flexbox-1/#propdef-order title=order>order</a>-modified document order,
1693+
in <a data-link-type=dfn href=http://dev.w3.org/csswg/css-flexbox-1/#order-modified-document-order title="order-modified document order">order-modified document order</a>,
16871694
position its <a data-link-type=dfn href=http://dev.w3.org/csswg/css-writing-modes-3/#inline-start title=inline-start>inline-start</a> edge
16881695
to the earliest (smallest positive index) line index
16891696
that ensures this item’s <a data-link-type=dfn href=#grid-area title="grid area">grid area</a> will not overlap any <a data-link-type=dfn href=#occupied-grid-cell title="occupied grid cells">occupied grid cells</a>.
@@ -1736,7 +1743,7 @@ <h4 class="heading settled heading" data-level=6.2.1 id=auto-placement-algo><spa
17361743
Initially the <a data-link-type=dfn href=#auto-placement-cursor title="auto-placement cursor">auto-placement cursor</a> at is specified with a row and column position both equal to 1.
17371744

17381745
<p> For each <a data-link-type=dfn href=#grid-item title="grid item">grid item</a> that hasn’t been positioned by the previous steps,
1739-
in <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-flexbox-1/#propdef-order title=order>order</a>-modified document order:
1746+
in <a data-link-type=dfn href=http://dev.w3.org/csswg/css-flexbox-1/#order-modified-document-order title="order-modified document order">order-modified document order</a>:
17401747

17411748
<dl>
17421749
<dt>If the item has a <a data-link-type=dfn href=#definite-grid-position title="definite column position">definite column position</a>:
@@ -1848,7 +1855,7 @@ <h2 class="heading settled heading" data-level=8 id=placement><span class=secno>
18481855

18491856

18501857

1851-
<p> The <dfn data-dfn-type=dfn data-export="" id=grid-placement-property title="grid-placement property">grid-placement properties<a class=self-link href=#grid-placement-property></a></dfn>—<wbr></wbr>the longhands <a class=property data-link-type=propdesc href=#propdef-grid-row-start title=grid-row-start>grid-row-start</a>, <a class=property data-link-type=propdesc href=#propdef-grid-row-end title=grid-row-end>grid-row-end</a>, <a class=property data-link-type=propdesc href=#propdef-grid-column-start title=grid-column-start>grid-column-start</a>, <a class=property data-link-type=propdesc href=#propdef-grid-column-end title=grid-column-end>grid-column-end</a>, and their shorthands <a class=property data-link-type=propdesc href=#propdef-grid-row title=grid-row>grid-row</a>, <a class=property data-link-type=propdesc href=#propdef-grid-column title=grid-column>grid-column</a>, and <a class=property data-link-type=propdesc href=#propdef-grid-area title=grid-area>grid-area</a>—<wbr></wbr>allow the author to specify a <a data-link-type=dfn href=#grid-item title="grid item">grid item</a>’s <a data-link-type=dfn href=#grid-placement title=placement>placement</a>
1858+
<p> The <dfn data-dfn-type=dfn data-export="" id=grid-placement-property title="grid-placement property">grid-placement properties<a class=self-link href=#grid-placement-property></a></dfn>—<wbr>the longhands <a class=property data-link-type=propdesc href=#propdef-grid-row-start title=grid-row-start>grid-row-start</a>, <a class=property data-link-type=propdesc href=#propdef-grid-row-end title=grid-row-end>grid-row-end</a>, <a class=property data-link-type=propdesc href=#propdef-grid-column-start title=grid-column-start>grid-column-start</a>, <a class=property data-link-type=propdesc href=#propdef-grid-column-end title=grid-column-end>grid-column-end</a>, and their shorthands <a class=property data-link-type=propdesc href=#propdef-grid-row title=grid-row>grid-row</a>, <a class=property data-link-type=propdesc href=#propdef-grid-column title=grid-column>grid-column</a>, and <a class=property data-link-type=propdesc href=#propdef-grid-area title=grid-area>grid-area</a>—<wbr>allow the author to specify a <a data-link-type=dfn href=#grid-item title="grid item">grid item</a>’s <a data-link-type=dfn href=#grid-placement title=placement>placement</a>
18521859
by providing any (or none) of the following six pieces of information:
18531860

18541861
<table class=data style="width: auto">
@@ -1900,20 +1907,20 @@ <h3 class="heading settled heading" data-level=8.1 id=common-uses><span class=se
19001907

19011908
<p> The <a data-link-type=dfn href=#grid-placement-property title="grid-placement property">grid-placement property</a> longhands are organized into three shorthands:
19021909

1903-
<table class=data rules=all>
1910+
<table class=data id=grid-property-breakdown>
19041911
<tr>
19051912
<td colspan=4><a class=property data-link-type=propdesc href=#propdef-grid-area title=grid-area>grid-area</a>
19061913
<tr>
19071914
<td colspan=2><a class=property data-link-type=propdesc href=#propdef-grid-column title=grid-column>grid-column</a>
19081915
<td colspan=2><a class=property data-link-type=propdesc href=#propdef-grid-row title=grid-row>grid-row</a>
19091916
<tr>
1910-
<td width=25%><a class=property data-link-type=propdesc href=#propdef-grid-column-start title=grid-column-start>grid-column-start</a>
1911-
<td width=25%><a class=property data-link-type=propdesc href=#propdef-grid-column-end title=grid-column-end>grid-column-end</a>
1912-
<td width=25%><a class=property data-link-type=propdesc href=#propdef-grid-row-start title=grid-row-start>grid-row-start</a>
1913-
<td width=25%><a class=property data-link-type=propdesc href=#propdef-grid-row-end title=grid-row-end>grid-row-end</a>
1917+
<td><a class=property data-link-type=propdesc href=#propdef-grid-column-start title=grid-column-start>grid-column-start</a>
1918+
<td><a class=property data-link-type=propdesc href=#propdef-grid-column-end title=grid-column-end>grid-column-end</a>
1919+
<td><a class=property data-link-type=propdesc href=#propdef-grid-row-start title=grid-row-start>grid-row-start</a>
1920+
<td><a class=property data-link-type=propdesc href=#propdef-grid-row-end title=grid-row-end>grid-row-end</a>
19141921
</table>
19151922

1916-
<h4 class="heading settled heading" data-level=8.1.1 id=common-uses-named-areas><span class=secno>8.1.1 </span><span class=content>
1923+
<h4 class="heading settled heading" data-level=8.1.1 id=common-uses-named-areas><span class=secno>8.1.1 </span><span class=content>
19171924
Named Areas</span><a class=self-link href=#common-uses-named-areas></a></h4>
19181925

19191926
<p> An item can be placed into a <a data-link-type=dfn href=#named-grid-area title="named grid area">named grid area</a>
@@ -2422,7 +2429,7 @@ <h3 class="heading settled heading" data-level=9.5 id=z-order><span class=secno>
24222429
When <a data-link-type=dfn href=#grid-item title="grid items">grid items</a> overlap,
24232430
the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#z-index title=z-index>z-index</a> property provides control over the drawing order of <a data-link-type=dfn href=#grid-item title="grid items">grid items</a>.
24242431
<a data-link-type=dfn href=#grid-item title="grid items">Grid items</a> paint <a href=http://www.w3.org/TR/css3-flexbox/#painting>exactly the same as flex items</a> <a data-biblio-type=normative data-link-type=biblio href=#css3-flexbox title=css3-flexbox>[CSS3-FLEXBOX]</a>:
2425-
they use <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-flexbox-1/#propdef-order title=order>order</a>-modified document order,
2432+
they use <a data-link-type=dfn href=http://dev.w3.org/csswg/css-flexbox-1/#order-modified-document-order title="order-modified document order">order-modified document order</a>,
24262433
and <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#z-index title=z-index>z-index</a> values other than <a class=css-code data-link-for=z-index data-link-type=value title=auto>auto</a> create a stacking context even if <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#position title=position>position</a> is <span class=css data-link-type=maybe title=static>static</span>.
24272434

24282435
<p class=note>
@@ -2478,13 +2485,13 @@ <h3 class="heading settled heading" data-level=9.6 id=grid-baselines><span class
24782485

24792486
<li>
24802487
Otherwise, if the grid container has at least one <a data-link-type=dfn href=#grid-item title="grid item">grid item</a> whose area intersects the first row/column,
2481-
and the first such <a data-link-type=dfn href=#grid-item title="grid item">grid item</a> (in <a data-link-type=dfn href=#order-modified-grid-order title="order-modified grid order"><a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-flexbox-1/#propdef-order title=order>order</a>-modified grid order</a>) has a baseline
2488+
and the first such <a data-link-type=dfn href=#grid-item title="grid item">grid item</a> (in <a data-link-type=dfn href=#order-modified-grid-order title="order-modified grid order">order-modified grid order</a>) has a baseline
24822489
parallel to the relevant axis,
24832490
the grid container’s baseline is that baseline.
24842491

24852492
<li>
24862493
Otherwise, the grid container’s baseline is <a href=http://www.w3.org/TR/css3-writing-modes/#inline-alignment>synthesized</a>
2487-
from the first item’s (in <a data-link-type=dfn href=#order-modified-grid-order title="order-modified grid order"><a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-flexbox-1/#propdef-order title=order>order</a>-modified grid order</a>) content box,
2494+
from the first item’s (in <a data-link-type=dfn href=#order-modified-grid-order title="order-modified grid order">order-modified grid order</a>) content box,
24882495
or, failing that, from the grid container’s content box.
24892496
</ol>
24902497

@@ -2499,7 +2506,7 @@ <h3 class="heading settled heading" data-level=9.6 id=grid-baselines><span class
24992506
in row-major order if calculating the inline-axis baseline,
25002507
or in column-major order if calculating the block-axis baseline.
25012508
If two items are encountered at the same time,
2502-
they are taken in <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-flexbox-1/#propdef-order title=order>order</a>-modified document order.
2509+
they are taken in <a data-link-type=dfn href=http://dev.w3.org/csswg/css-flexbox-1/#order-modified-document-order title="order-modified document order">order-modified document order</a>.
25032510

25042511
<p>
25052512
When calculating the baseline according to the above rules,

‎css-grid/Overview.src.html‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1897,19 +1897,26 @@ <h3 id='common-uses'>
18971897

18981898
The <a>grid-placement property</a> longhands are organized into three shorthands:
18991899

1900-
<table rules=all class=data>
1900+
<table class=data id="grid-property-breakdown">
19011901
<tr>
19021902
<td colspan=4>'grid-area'
19031903
<tr>
19041904
<td colspan=2>'grid-column'
19051905
<td colspan=2>'grid-row'
19061906
<tr>
1907-
<td width=25%>'grid-column-start'
1908-
<td width=25%>'grid-column-end'
1909-
<td width=25%>'grid-row-start'
1910-
<td width=25%>'grid-row-end'
1907+
<td>'grid-column-start'
1908+
<td>'grid-column-end'
1909+
<td>'grid-row-start'
1910+
<td>'grid-row-end'
19111911
</table>
19121912

1913+
<style scoped>
1914+
#grid-property-breakdown tr:nth-child(3) td {
1915+
width: 25%;
1916+
border-style: solid;
1917+
}
1918+
</style>
1919+
19131920
<h4 id='common-uses-named-areas'>
19141921
Named Areas</h4>
19151922

@@ -2551,7 +2558,7 @@ <h3 id='grid-baselines'>
25512558
and its inline axis is parallel to that dimension.
25522559

25532560
<p>
2554-
<dfn export title="order-modified document order">'order'-modified grid order</dfn> is the order in which
2561+
<dfn export title="order-modified grid order">'order'-modified grid order</dfn> is the order in which
25552562
<a>grid items</a> are encountered when traversing the grid's <a>grid cells</a>,
25562563
in row-major order if calculating the inline-axis baseline,
25572564
or in column-major order if calculating the block-axis baseline.

0 commit comments

Comments
 (0)