Skip to content

Commit 1ca45b8

Browse files
tabatkinstabatkins
committed
[css-display] Tablify the one-keyword 'display' property values.
--HG-- extra : rebase_source : 88aa03260685c6a3833ae8766f2119902f8bfa42
1 parent 9664058 commit 1ca45b8

2 files changed

Lines changed: 240 additions & 139 deletions

File tree

‎css-display/Overview.bs‎

Lines changed: 112 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@ Interacting with Ancestors and Siblings: the 'display-outside' property</h3>
155155
For the purposes of box generation and layout,
156156
the element must be treated as if it had been replaced with its children and pseudo-elements in the document tree.
157157
<p class='issue'>
158-
''contents'' currently only has an effect on box generation and layout.
158+
''display-outside/contents'' currently only has an effect on box generation and layout.
159159
Other things that care about the document tree are unaffected, like counter scopes.
160160
Is this what we want?
161161

@@ -217,7 +217,7 @@ The 'display' shorthand property</h3>
217217

218218
<pre class="propdef">
219219
Name: display
220-
Value: inline | block | list-item | inline-list-item | inline-block | table | inline-table | table-cell | table-caption | flex | inline-flex | grid | inline-grid | [ <<'display-inside'>> || <<'display-outside'>> || <<'display-list'>> ]
220+
Value: [ <<'display-inside'>> || <<'display-outside'>> || <<'display-list'>> ] | inline | inline-list-item | inline-table | inline-flex | inline-grid
221221
Initial: see individual properties
222222
Applies to: see individual properties
223223
Inherited: see individual properties
@@ -226,69 +226,117 @@ The 'display' shorthand property</h3>
226226
Media: see individual properties
227227
</pre>
228228

229-
The single-keyword values listed explicitly in the grammar above are handled specially,
230-
for legacy reasons.
231-
All other single-keyword values,
232-
and all other values in general,
233-
are handled as normal for shorthands.
234-
235-
<dl dfn-type="value" dfn-for="display">
236-
<dt><dfn>inline</dfn>
237-
<dd>
238-
Expands identically to ''inline-level auto''.
239-
240-
<dt><dfn>block</dfn>
241-
<dd>
242-
Expands identically to ''block-level block''.
243-
244-
<dt><dfn>list-item</dfn>
245-
<dd>
246-
Expands identically to ''block-level block list-item''.
247-
248-
<dt><dfn>inline-list-item</dfn>
249-
<dd>
250-
Expands identically to ''inline-level block list-item''.
251-
252-
<dt><dfn>inline-block</dfn>
253-
<dd>
254-
Expands identically to ''inline-level block''.
255-
256-
<dt><dfn>table</dfn>
257-
<dd>
258-
Expands identically to ''block-level table''.
259-
260-
<dt><dfn>inline-table</dfn>
261-
<dd>
262-
Expands identically to ''inline-level table''.
263-
264-
<dt><dfn>table-caption</dfn>
265-
<dd>
266-
Expands identically to ''table-caption block''.
267-
268-
<dt><dfn>table-cell</dfn>
269-
<dd>
270-
Expands identically to ''table-cell block''.
271-
272-
<dt><dfn>flex</dfn>
273-
<dd>
274-
Expands identically to ''block-level flex''.
275-
276-
<dt><dfn>inline-flex</dfn>
277-
<dd>
278-
Expands identically to ''inline-level flex''.
279-
280-
<dt><dfn>grid</dfn>
281-
<dd>
282-
Expands identically to ''block-level grid''.
229+
The 'display' <a>shorthand property</a> sets all the display type properties in one declaration:
230+
'display-outside', 'display-inside', and 'display-list'.
231+
If only one keyword is specified
232+
or only one keyword is specified together with ''display-list/list-item'',
233+
the shorthand expands as specified below:
234+
235+
<table dfn-type="value" dfn-for="display" class='data'>
236+
<thead>
237+
<tr>
238+
<th>'display'
239+
<th>'display-outside'
240+
<th>'display-inside'
241+
<tbody>
242+
<tr>
243+
<th><dfn export>inline</dfn>
244+
<td>''inline-level''
245+
<td>''auto''
246+
<tr>
247+
<th><dfn export>block</dfn>
248+
<td>''block-level''
249+
<td>''display-inside/block''
250+
<tr>
251+
<th><dfn export>inline-block</dfn>
252+
<td>''inline-level''
253+
<td>''display-inside/block''
254+
<tr>
255+
<th><dfn>list-item</dfn> <a href="#list-item-note">*</a>
256+
<td>''block-level''
257+
<td>''display-inside/block''
258+
<tr>
259+
<th><dfn>inline-list-item</dfn> <a href="#list-item-note">*</a>
260+
<td>''inline-level''
261+
<td>''auto''
262+
<tbody>
263+
<tr>
264+
<th><dfn>table</dfn>
265+
<td>''block-level''
266+
<td>''display-inside/table''
267+
<tr>
268+
<th><dfn>inline-table</dfn>
269+
<td>''inline-level''
270+
<td>''display-inside/table''
271+
<tr>
272+
<th><dfn>table-caption</dfn>
273+
<td>''display-outside/table-caption''
274+
<td>''display-inside/block''
275+
<tr>
276+
<th><dfn>table-cell</dfn>
277+
<td>''display-outside/table-cell''
278+
<td>''display-inside/block''
279+
<tbody>
280+
<tr>
281+
<th><dfn>flex</dfn>
282+
<td>''block-level''
283+
<td>''display-inside/flex''
284+
<tr>
285+
<th><dfn>inline-flex</dfn>
286+
<td>''inline-level''
287+
<td>''display-inside/flex''
288+
<tbody>
289+
<tr>
290+
<th><dfn>grid</dfn>
291+
<td>''block-level''
292+
<td>''display-inside/grid''
293+
<tr>
294+
<th><dfn>inline-grid</dfn>
295+
<td>''inline-level''
296+
<td>''display-inside/grid''
297+
<tbody>
298+
<tr>
299+
<th><dfn>ruby</dfn>
300+
<td>''inline-level''
301+
<td>''display-inside/ruby''
302+
<tbody>
303+
<tr>
304+
<th><dfn>none</dfn>
305+
<td>''display-outside/none''
306+
<td>''display-inside/block''
307+
<tr>
308+
<th><dfn>contents</dfn>
309+
<td>''display-outside/contents''
310+
<td>''display-inside/block''
311+
<tbody>
312+
<tr>
313+
<th><var>all other <<'display-outside'>></var>
314+
<td><<'display-outside'>>
315+
<td>''auto''
316+
</table>
317+
318+
<span id="list-item-note">* For ''display/list-item'' and ''display/inline-list-item'', additionally set 'display-list' to ''display-list/list-item''.
319+
320+
<h3 id='transformations'>
321+
Automatic Box Type Transformations</h3>
322+
323+
Some layout effects require <dfn title="blockify|blockification">blockification</dfn>
324+
or <dfn title="inlinify|inlinification">inlinification</dfn> of the box type,
325+
causing the box’s 'display-outside' property, if it is not ''display-outside/none'' or ''display-outside/contents'',
326+
to compute to ''block-level'' or ''inline-level'' (respectively).
327+
328+
<div class='example'>
329+
Some examples of this include:
330+
331+
<ul>
332+
<li>Absolute positioning or floating an element <a>blockifies</a> the box’s display type. [[CSS21]]
333+
<li>Containment in a <a spec=css-ruby>ruby container</a> <a>inlinifies</a> the box’s display type, as described in [[CSS3RUBY]].
334+
<li>A parent with a ''display-inside/grid'' or ''display-inside/flex'' 'display-inside' value <a>blockifies</a> the box’s display type. [[CSS3-GRID-LAYOUT]] [[CSS3-FLEXBOX]]
335+
</ul>
336+
</div>
283337

284-
<dt><dfn>inline-grid</dfn>
285-
<dd>
286-
Expands identically to ''inline-level grid''.
287-
288-
<dt><dfn>none</dfn>
289-
<dd>
290-
Expands identically to ''block none none''.
291-
</dl>
338+
The root element’s display type is always <a>blockified</a>.
339+
Additionally, a 'display-outside' of ''display-outside/contents'' computes to ''block-level'' on the root element.
292340

293341

294342

@@ -337,7 +385,6 @@ Controlling box generation: the 'box-suppress' property</h2>
337385
must work as normal on this element and its descendants.
338386
</dl>
339387

340-
341388
<h2 id='run-in'>
342389
Run-In Layout</h2>
343390

0 commit comments

Comments
 (0)