Skip to content

Commit 2c88580

Browse files
committed
[css-layout-api] Update README.md to talk about advanced exclusion behaviour
1 parent edd0f42 commit 2c88580

File tree

1 file changed

+43
-2
lines changed

1 file changed

+43
-2
lines changed

css-layout-api/README.md

+43-2
Original file line numberDiff line numberDiff line change
@@ -149,6 +149,18 @@ Exclusions can be added to the constraint space which children should avoid. E.g
149149
partial interface ConstraintSpace {
150150
void addExclusion(Fragment fragment, optional FlowEnum flow);
151151
void addExclusion(Exclusion fragment, optional FlowEnum flow);
152+
readonly attribute sequence<Exclusion> exclusions;
153+
};
154+
155+
dictionary Exclusion {
156+
double inlineSize;
157+
double blockSize;
158+
159+
double inlineStart;
160+
double blockStart;
161+
162+
double inlineEnd;
163+
double blockEnd;
152164
};
153165
```
154166

@@ -179,10 +191,39 @@ exclusions.
179191
The layoutOpportunities generator will return a series of max-rects for a given constraint space.
180192
These are ordered by `inlineStart`, `inlineSize` then `blockStart`.
181193

182-
| How do we represent non-rect exclusions? Initial thought is to always jump by `1em` of author
183-
specified amount. |
194+
| How do we represent non-rect exclusions? Initial thought is to always jump by `1em` of author |
195+
| specified amount. |
184196
| --- |
185197

198+
###### Advanced exclusions
199+
200+
Not everything in CSS avoids all exclusions. For example:
201+
202+
![inline text avoiding floats](https://raw.githubusercontent.com/w3c/css-houdini-drafts/master/images/exclusions_1.png)
203+
204+
The green block-level element doesn't avoid the intruding floats, but its inline-level children do.
205+
206+
Should authors be able to annotate exclusions with a tag, then just `LayoutOpportunities` based on
207+
those tags? For example:
208+
209+
```webidl
210+
partial interface ConstraintSpace {
211+
void addExclusion(Fragment exclusion, optional FlowEnum flow, optional sequence<DOMString> tags);
212+
213+
// calling layoutOpportunities(['left']), only provides layout opportunities which avoids
214+
// exclusions tagged with left.
215+
Generator<LayoutOpportunity> layoutOpportunities(optional sequence<DOMString> tags);
216+
};
217+
```
218+
219+
#### Breaking and `BreakToken`s
220+
221+
TODO write about how break tokens work.
222+
223+
#### Pseudo-classes and style overrides
224+
225+
TODO write about options for `::first-letter`, `::first-line`, and `flex-grow`y things should work.
226+
186227
### Performing Layout
187228

188229
The Layout API is best described with a simple dummy example:

0 commit comments

Comments
 (0)