Skip to content

Commit 9b58272

Browse files
fantasaifantasai
committed
[css-align] Disallow <overflow-position> combinations with <content-distribution> keywords because that makes no sense and has no effect.
1 parent bbcfb4e commit 9b58272

2 files changed

Lines changed: 35 additions & 11 deletions

File tree

‎css-align/Overview.bs‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -425,6 +425,12 @@ Overflow Alignment: the ''safe'' and ''true'' keywords</h3>
425425
<p class='issue'>
426426
Transplant example 10 from flexbox.
427427

428+
<p class='issue'>
429+
The current grammar constructions allow combining ''safe'' and ''true''
430+
with ''<item-position>/stretch'' for 'justify-self'/'align-self'
431+
but not with ''<content-position>/stretch'' for 'justify-content'/'align-content'.
432+
This is inconsistent.
433+
428434
<h2 id='content-distribution'>
429435
Content Distribution: the 'justify-content' and 'align-content' properties</h2>
430436

@@ -437,7 +443,7 @@ Content Distribution: the 'justify-content' and 'align-content' properties</h2>
437443

438444
<pre class="propdef">
439445
Name: justify-content, align-content
440-
Value: auto | <<baseline-position>> | [ <<content-distribution>>? && <<content-position>>? ]! && <<overflow-position>>?
446+
Value: auto | <<baseline-position>> | <<content-distribution>> || [ <overflow-position>? && <content-position> ]
441447
Initial: auto
442448
Applies to: block containers, flex containers, and grid containers
443449
Inherited: no
@@ -595,7 +601,7 @@ Inline/Main-Axis Alignment: the 'justify-self' property</h3>
595601

596602
<pre class="propdef">
597603
Name: justify-self
598-
Value: auto | <<baseline-position>> | [ <<item-position>> && <<overflow-position>>? ]
604+
Value: auto | <<baseline-position>> | [ <<overflow-position>>? && <<item-position>> ]
599605
Initial: auto
600606
Applies to: block-level boxes, absolutely-positioned boxes, and grid items
601607
Inherited: no
@@ -695,7 +701,7 @@ Block/Cross-Axis Alignment: the 'align-self' property</h3>
695701

696702
<pre class="propdef">
697703
Name: align-self
698-
Value: auto | <<baseline-position>> | [ <<item-position>> && <<overflow-position>>? ]
704+
Value: auto | <<baseline-position>> | [ <<overflow-position>>? && <<item-position>> ]
699705
Initial: auto
700706
Applies to: block-level boxes
701707
Inherited: no

‎css-align/Overview.html‎

Lines changed: 26 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -919,6 +919,13 @@ <h3 class="heading settled" data-level="3.4" id="overflow-values"><span class="s
919919
<p class="issue" id="issue-8fcc582f"><a class="self-link" href="#issue-8fcc582f"></a>
920920
Transplant example 10 from flexbox.
921921

922+
</p>
923+
<p class="issue" id="issue-b5143810"><a class="self-link" href="#issue-b5143810"></a>
924+
The current grammar constructions allow combining <a class="css" data-link-type="maybe" href="#valdef-overflow-position-safe">safe</a> and <a class="css" data-link-type="maybe" href="#valdef-overflow-position-true">true</a>
925+
with <a class="css" data-link-for="" data-link-type="maybe" href="#valdef-item-position-stretch">stretch</a> for <a class="property" data-link-type="propdesc" href="#propdef-justify-self">justify-self</a>/<a class="property" data-link-type="propdesc" href="#propdef-align-self">align-self</a>
926+
but not with <a class="css" data-link-for="" data-link-type="maybe" href="#valdef-item-position-stretch">stretch</a> for <a class="property" data-link-type="propdesc" href="#propdef-justify-content">justify-content</a>/<a class="property" data-link-type="propdesc" href="#propdef-align-content">align-content</a>.
927+
This is inconsistent.
928+
922929
</p>
923930
<h2 class="heading settled" data-level="4" id="content-distribution"><span class="secno">4. </span><span class="content">
924931
Content Distribution: the <a class="property" data-link-type="propdesc" href="#propdef-justify-content">justify-content</a> and <a class="property" data-link-type="propdesc" href="#propdef-align-content">align-content</a> properties</span><a class="self-link" href="#content-distribution"></a></h2>
@@ -944,7 +951,11 @@ <h2 class="heading settled" data-level="4" id="content-distribution"><span class
944951
</tr>
945952
<tr>
946953
<th>Value:</th>
947-
<td class="prod">auto <a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-one">|</a> <a class="production css" data-link-type="type" href="#typedef-baseline-position">&lt;baseline-position></a> <a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-one">|</a> [ <a class="production css" data-link-type="type" href="#typedef-content-distribution">&lt;content-distribution></a><a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#mult-opt">?</a> &amp;&amp; <a class="production css" data-link-type="type" href="#typedef-content-position">&lt;content-position></a><a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#mult-opt">?</a> ]<a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#mult-req">!</a> &amp;&amp; <a class="production css" data-link-type="type" href="#typedef-overflow-position">&lt;overflow-position></a><a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#mult-opt">?</a></td>
954+
<td class="prod">auto <a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-one">|</a> <a class="production css" data-link-type="type" href="#typedef-baseline-position">&lt;baseline-position></a> <a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-one">|</a> <a class="production css" data-link-type="type" href="#typedef-content-distribution">&lt;content-distribution></a> <a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-any">||</a> [
955+
<overflow-position><a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#mult-opt">?</a> &amp;&amp;
956+
<content-position> ]</content-position>
957+
</overflow-position>
958+
</td>
948959
</tr>
949960
<tr>
950961
<th>Initial:</th>
@@ -1208,7 +1219,7 @@ <h3 class="heading settled" data-level="5.1" id="justify-self-property"><span cl
12081219
</tr>
12091220
<tr>
12101221
<th>Value:</th>
1211-
<td class="prod">auto <a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-one">|</a> <a class="production css" data-link-type="type" href="#typedef-baseline-position">&lt;baseline-position></a> <a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-one">|</a> [ <a class="production css" data-link-type="type" href="#typedef-item-position">&lt;item-position></a> &amp;&amp; <a class="production css" data-link-type="type" href="#typedef-overflow-position">&lt;overflow-position></a><a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#mult-opt">?</a> ]</td>
1222+
<td class="prod">auto <a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-one">|</a> <a class="production css" data-link-type="type" href="#typedef-baseline-position">&lt;baseline-position></a> <a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-one">|</a> [ <a class="production css" data-link-type="type" href="#typedef-overflow-position">&lt;overflow-position></a><a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#mult-opt">?</a> &amp;&amp; <a class="production css" data-link-type="type" href="#typedef-item-position">&lt;item-position></a> ]</td>
12121223
</tr>
12131224
<tr>
12141225
<th>Initial:</th>
@@ -1381,7 +1392,7 @@ <h3 class="heading settled" data-level="5.2" id="align-self-property"><span clas
13811392
</tr>
13821393
<tr>
13831394
<th>Value:</th>
1384-
<td class="prod">auto <a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-one">|</a> <a class="production css" data-link-type="type" href="#typedef-baseline-position">&lt;baseline-position></a> <a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-one">|</a> [ <a class="production css" data-link-type="type" href="#typedef-item-position">&lt;item-position></a> &amp;&amp; <a class="production css" data-link-type="type" href="#typedef-overflow-position">&lt;overflow-position></a><a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#mult-opt">?</a> ]</td>
1395+
<td class="prod">auto <a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-one">|</a> <a class="production css" data-link-type="type" href="#typedef-baseline-position">&lt;baseline-position></a> <a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-one">|</a> [ <a class="production css" data-link-type="type" href="#typedef-overflow-position">&lt;overflow-position></a><a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#mult-opt">?</a> &amp;&amp; <a class="production css" data-link-type="type" href="#typedef-item-position">&lt;item-position></a> ]</td>
13851396
</tr>
13861397
<tr>
13871398
<th>Initial:</th>
@@ -2317,7 +2328,7 @@ <h2 class="no-num heading settled" id="property-index"><span class="content">Pro
23172328
<tbody>
23182329
<tr>
23192330
<th scope="row"><a class="css" data-link-type="property" href="#propdef-justify-content">justify-content</a></th>
2320-
<td>auto | &lt;baseline-position> | [ &lt;content-distribution>? &amp;&amp; &lt;content-position>? ]! &amp;&amp; &lt;overflow-position>?</td>
2331+
<td>auto | &lt;baseline-position> | &lt;content-distribution> || [ ? &amp;&amp; ]</td>
23212332
<td>auto</td>
23222333
<td>block containers, flex containers, and grid containers</td>
23232334
<td>no</td>
@@ -2328,7 +2339,7 @@ <h2 class="no-num heading settled" id="property-index"><span class="content">Pro
23282339
</tr>
23292340
<tr>
23302341
<th scope="row"><a class="css" data-link-type="property" href="#propdef-align-content">align-content</a></th>
2331-
<td>auto | &lt;baseline-position> | [ &lt;content-distribution>? &amp;&amp; &lt;content-position>? ]! &amp;&amp; &lt;overflow-position>?</td>
2342+
<td>auto | &lt;baseline-position> | &lt;content-distribution> || [ ? &amp;&amp; ]</td>
23322343
<td>auto</td>
23332344
<td>block containers, flex containers, and grid containers</td>
23342345
<td>no</td>
@@ -2339,7 +2350,7 @@ <h2 class="no-num heading settled" id="property-index"><span class="content">Pro
23392350
</tr>
23402351
<tr>
23412352
<th scope="row"><a class="css" data-link-type="property" href="#propdef-justify-self">justify-self</a></th>
2342-
<td>auto | &lt;baseline-position> | [ &lt;item-position> &amp;&amp; &lt;overflow-position>? ]</td>
2353+
<td>auto | &lt;baseline-position> | [ &lt;overflow-position>? &amp;&amp; &lt;item-position> ]</td>
23432354
<td>auto</td>
23442355
<td>block-level boxes, absolutely-positioned boxes, and grid items</td>
23452356
<td>no</td>
@@ -2350,7 +2361,7 @@ <h2 class="no-num heading settled" id="property-index"><span class="content">Pro
23502361
</tr>
23512362
<tr>
23522363
<th scope="row"><a class="css" data-link-type="property" href="#propdef-align-self">align-self</a></th>
2353-
<td>auto | &lt;baseline-position> | [ &lt;item-position> &amp;&amp; &lt;overflow-position>? ]</td>
2364+
<td>auto | &lt;baseline-position> | [ &lt;overflow-position>? &amp;&amp; &lt;item-position> ]</td>
23542365
<td>auto</td>
23552366
<td>block-level boxes</td>
23562367
<td>no</td>
@@ -2409,7 +2420,14 @@ <h2 class="no-num heading settled" id="issues-index"><span class="content">Issue
24092420
<div class="issue">
24102421
Transplant example 10 from flexbox.
24112422

2412-
<a href="#issue-8fcc582f"> ↵ </a></div>
2423+
<a href="#issue-8fcc582f"> ↵ </a></div>
2424+
<div class="issue">
2425+
The current grammar constructions allow combining <a class="css" data-link-type="maybe" href="#valdef-overflow-position-safe">safe</a> and <a class="css" data-link-type="maybe" href="#valdef-overflow-position-true">true</a>
2426+
with <a class="css" data-link-for="" data-link-type="maybe" href="#valdef-item-position-stretch">stretch</a> for <a class="property" data-link-type="propdesc" href="#propdef-justify-self">justify-self</a>/<a class="property" data-link-type="propdesc" href="#propdef-align-self">align-self</a>
2427+
but not with <a class="css" data-link-for="" data-link-type="maybe" href="#valdef-item-position-stretch">stretch</a> for <a class="property" data-link-type="propdesc" href="#propdef-justify-content">justify-content</a>/<a class="property" data-link-type="propdesc" href="#propdef-align-content">align-content</a>.
2428+
This is inconsistent.
2429+
2430+
<a href="#issue-b5143810"> ↵ </a></div>
24132431
<div class="issue">This needs to be integrated with overflow-anchor, when the property exists,
24142432
so that you get the same behavior whether an elements *starts out* overflowing,
24152433
or is filled element-by-element.<a href="#issue-f2f93187"> ↵ </a></div>

0 commit comments

Comments
 (0)