Skip to content

Commit d040b3f

Browse files
tabatkinstabatkins
committed
[css-position-4] First draft of Position 4. Steal Appendix E from CSS2.
1 parent b2938b7 commit d040b3f

1 file changed

Lines changed: 292 additions & 0 deletions

File tree

‎css-position-4/Overview.bs‎

Lines changed: 292 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,292 @@
1+
<pre class='metadata'>
2+
Title: CSS Positioned Layout Module Level 4
3+
Status: ED
4+
Work Status: Exploring
5+
Shortname: css-position
6+
Level: 4
7+
Group: csswg
8+
ED: https://drafts.csswg.org/css-position-4/
9+
Editor: Elika J. Etemad / fantasai, Invited Expert, http://fantasai.inkedblade.net/contact, w3cid 35400
10+
Editor: Tab Atkins Jr., Google, http://xanthir.com/contact/, w3cid 42199
11+
Abstract: This module contains defines coordinate-based positioning and offsetting schemes of <a href="https://www.w3.org/TR/CSS/">CSS</a>: [=relative positioning=], [=sticky positioning=], [=absolute positioning=], and [=fixed positioning=].
12+
13+
It also defines the painting/rendering model of CSS.
14+
</pre>
15+
16+
<pre class=link-defaults>
17+
spec:css-break-4; type:dfn; text:fragment
18+
spec:dom; type:dfn; for:/; text:element
19+
</pre>
20+
21+
Introduction {#intro}
22+
=====================
23+
24+
This is an early delta spec over [[css-position-3]].
25+
26+
<h2 id="painting-order">
27+
Painting Order and Stacking Contexts</h2>
28+
29+
This chapter describes the painting order of CSS's [=box tree=].
30+
31+
When traversing the [=box tree=],
32+
[=tree order=] is often used.
33+
For [=fragments=],
34+
this refers to the logical order of the fragments,
35+
not the visual order.
36+
(This can be relevant, for example,
37+
when rending bidirectional text.)
38+
39+
Painting order is defined in terms of a "painter's model",
40+
where elements are described as painting in a stack,
41+
with the bottom of the stack rendered "first",
42+
below items higher in the stack.
43+
The user is implied to exist above the top of the stack,
44+
looking down:
45+
46+
<pre class=ascii-art>
47+
| | | |
48+
| | | | ⇦ ☻
49+
| | | | user
50+
z-index: canvas -1 0 1
51+
</pre>
52+
53+
The stacking context background and most negative positioned
54+
stacking contexts are at the bottom of the stack, while the most
55+
positive positioned stacking contexts are at the top of the stack.
56+
57+
The canvas is transparent if contained within another, and
58+
given a UA-defined color if it is not. It is infinite in extent
59+
and contains the root element. Initially, the viewport is anchored
60+
with its top left corner at the canvas origin.
61+
62+
<div algorithm>
63+
To <dfn>paint a stacking context</dfn>
64+
given a [=document=], [=element=], or [=box=] |root|,
65+
and an infinite canvas |canvas|:
66+
67+
1. If |root| is a [=document=],
68+
[=paint a stacking context=] given |root|'s root element
69+
and |canvas|,
70+
then return |canvas|.
71+
72+
1. If |root| is an [=element=],
73+
[=paint a stacking context=] given |root|'s [=principal box=]
74+
and |canvas|,
75+
then return |canvas|.
76+
77+
1. Assert: |root| is a [=box=],
78+
and generates a [=stacking context=].
79+
80+
1. If |root| is a [=root element's=] [=principal box=],
81+
paint |root|'s background over the entire |canvas|,
82+
with the origin of the background positioning area
83+
being the position on |canvas|
84+
that would be used if |root|'s background was being painted normally.
85+
86+
1. If |root| is a [=block-level box=],
87+
[=paint a block's decorations=]
88+
given |root| and |canvas|.
89+
90+
1. For each of |root|'s positioned descendants
91+
with negative (non-zero) 'z-index' values,
92+
sort those descendants by 'z-index' order (most negative first)
93+
then [=tree order=],
94+
and [=paint a stacking context=] given each descendant and |canvas|.
95+
96+
1. For each of |root|'s in-flow, non-positioned, block-level descendants,
97+
in [=tree order=],
98+
[=paint a block's decorations=]
99+
given the descendant and |canvas|.
100+
101+
1. For each of |root|'s non-positioned floating descendants,
102+
in tree order,
103+
[=paint a fake stacking context=]
104+
given the descendant and |canvas|.
105+
106+
1.
107+
: If |root| is an [=inline-level=] box
108+
:: For each line box |root| is in,
109+
[=paint a box in a line box=]
110+
given |root|,
111+
the line box,
112+
and |canvas|.
113+
114+
: Otherwise
115+
:: First for |root|,
116+
then for all its in-flow, non-positioned, [=block-level=] descendant boxes,
117+
in [=tree order=]:
118+
119+
1. If the box is a [=replaced element=],
120+
paint the replaced content into |canvas|, atomically.
121+
122+
2. Otherwise, for each line box of the box,
123+
[=paint a box in a line box=]
124+
given the box,
125+
the line box,
126+
and |canvas|.
127+
128+
3. If the UA uses [=in-band outlines=],
129+
paint the outlines of the box
130+
into |canvas|.
131+
132+
1. For each of |root|'s positioned descendants
133+
with ''z-index: auto'' or ''z-index: 0'',
134+
in [=tree order=]:
135+
136+
<dl class=switch>
137+
: descendant has ''z-index: auto''
138+
:: [=Paint a fake stacking context=]
139+
given the descendant and |canvas|.
140+
141+
: descendant has ''z-index: 0''
142+
:: [=Paint a stacking context=]
143+
given the descendant and |canvas|.
144+
</dl>
145+
146+
1. For each of |root|'s positioned descendants
147+
with positive (non-zero) 'z-index' values,
148+
sort those descendants by 'z-index' order (smallest first)
149+
then [=tree order=],
150+
and [=paint a stacking context=] given each descendant and |canvas|.
151+
152+
1. If the UA uses [=out-of-band outlines=],
153+
draw all of |root|'s outlines
154+
(those that it skipped drawing
155+
due to not using [=in-band outlines=]
156+
during the current invocation of this algorithm)
157+
into |canvas|.
158+
</div>
159+
160+
<div algorithm>
161+
To <dfn>paint a block's decorations</dfn>
162+
given a block box |root|
163+
and a canvas |canvas|:
164+
165+
1. If |root| is not a [=table wrapper box=]:
166+
1. Paint |root|'s background to |canvas|
167+
if it is not the [=root element's=] [=principal box=].
168+
2. Paint |root|'s border to |canvas|.
169+
170+
2. If |root| is a [=table wrapper box=]:
171+
1. Paint |root|'s background to |canvas|
172+
if it is not the [=root element's=] [=principal box=].
173+
2. For each column group of |root| in [=tree order=],
174+
paint the column group's background to |canvas|.
175+
3. For each column of |root| in [=tree order=],
176+
paint the column's background to |canvas|.
177+
4. For each row group of |root| in [=tree order=],
178+
paint the row group's background to |canvas|.
179+
5. For each row of |root| in [=tree order=],
180+
paint the row's background to |canvas|.
181+
6. For each cell of |root| in [=tree order=],
182+
paint the cell's background to |canvas|.
183+
7. Paint the borders of all of the table elements of |root|.
184+
If the borders are separated,
185+
do so in [=tree order=];
186+
if connected,
187+
do so as specified in [[css-tables-3]].
188+
</div>
189+
190+
<div algorithm>
191+
To <dfn>paint a box in a line box</dfn>,
192+
given a box |root|,
193+
a line box |line box|,
194+
and a canvas |canvas|:
195+
196+
1. Paint the backgrounds
197+
of |root|'s [=fragments=] that are in |line box|
198+
into |canvas|.
199+
200+
2. Paint the borders
201+
of |root|'s [=fragments=] that are in |line box|
202+
into |canvas|.
203+
204+
3. <dl class=switch>
205+
: If |root| is an [=inline box=]
206+
:: For all |root|'s in-flow, non-positioned, inline-level children
207+
that generate [=fragments=] in |line box|,
208+
and all child [=CSS/text sequences=]
209+
that generate [=fragments=] in |line box|,
210+
in [=tree order=]:
211+
212+
<dl class=switch>
213+
: If this child is a [=text sequence=], then:
214+
::
215+
1. Paint any underlining affecting the text,
216+
in tree order of the elements applying the underlining
217+
(such that the deepest element's underlining, if any,
218+
is painted topmost
219+
and the root element's underlining, if any,
220+
is drawn bottommost)
221+
into |canvas|.
222+
223+
2. Paint any overlining affecting the text,
224+
in tree order of the elements applying the overlining
225+
(such that the deepest element's overlining, if any,
226+
is painted topmost
227+
and the root element's overlining, if any,
228+
is drawn bottommost)
229+
into |canvas|.
230+
231+
3. Paint the text into |canvas|.
232+
233+
4. Paint any line-through affecting the text,
234+
in tree order of the elements applying the line-through
235+
(such that the deepest element's line-through, if any,
236+
is painted topmost
237+
and the root element's line-through, if any,
238+
is drawn bottommost)
239+
into |canvas|.
240+
241+
: If this child is a [=box=]:
242+
::
243+
[=Paint a box in a line box=]
244+
given the child,
245+
|line box|,
246+
and |canvas|.
247+
248+
: If |root| is an [=inline-level=] [=block box|block=] or [=table wrapper box=]
249+
:: [=Paint a fake stacking context=]
250+
given |root| and |canvas|.
251+
252+
: If |root| is an [=inline-level=] replaced element
253+
:: Paint the replaced content into |canvas|, atomically.
254+
</dl>
255+
256+
4. If the UA uses [=in-band outlines=],
257+
paint the outlines
258+
of |root|'s [=fragments=] that are in |line box|
259+
into |canvas|.
260+
</div>
261+
262+
<div algorithm>
263+
To <dfn>paint a fake stacking context</dfn>,
264+
given a [=box=] |root|
265+
and a canvas |canvas|:
266+
267+
1. [=Paint a stacking context=] given |root| and |canvas|,
268+
treating |root| as if it created a new stacking context,
269+
but omitting any positioned descendants
270+
or descendants that actually create a stacking context
271+
(letting the parent stacking context paint them, instead).
272+
</div>
273+
274+
UAs can draw outlines (from the 'outline' property)
275+
either <dfn lt="in-band outline">in-band</dfn>
276+
(painted along each element,
277+
and thus potentially obscured/overlapping by following content)
278+
or <dfn lt="out-of-band outline">out-of-band</dfn>
279+
(all outlines painted at the end of the stacking context,
280+
so nothing in the stacking context can obscure them).
281+
It is recommended that UAs use [=out-of-band outlines=],
282+
as making outlines easily visible
283+
is an important accessibility feature.
284+
285+
Note: While the backgrounds of bidirectional inlines
286+
are painted in tree order,
287+
they are positioned in visual order.
288+
Since the positioning of inline backgrounds is unspecified in CSS&nbsp;2,
289+
the exact result of these two requirements is UA-defined.
290+
CSS3 may define this in more detail.
291+
292+
Issue: This is probably defined now.

0 commit comments

Comments
 (0)