Skip to content

Commit 5189922

Browse files
bfgeekbfgeek
committed
[css-layout-api] Add images of possible constraint spaces.
1 parent 2af5b05 commit 5189922

File tree

9 files changed

+214
-32
lines changed

9 files changed

+214
-32
lines changed

‎css-layout-api/Overview.bs‎

Lines changed: 52 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -44,13 +44,10 @@ Layout Boxes {#layout-boxes}
4444
<pre class='idl'>
4545
interface Box {
4646
readonly attribute ComputedStylePropertyMapReadOnly styleMap;
47-
FragmentRequestToken doLayout(ConstraintSpace space, ChildBreakToken breakToken);
47+
FragmentRequestToken doLayout(DerivedConstraintSpace space, ChildBreakToken breakToken);
4848
};
4949
</pre>
5050

51-
Issue(w3c/css-houdini-drafts#254): We may want a different name for the {{Box}} concept. In this
52-
context box has no layout information only style.
53-
5451
A {{Box}} represents a CSS generated <a>box</a> before any layout has occurred. (The box will have a
5552
computed value of 'display' that is not ''none''). The {{Box}} does not contain any layout
5653
information itself (like inline or block size) but can be used to generate {{Fragment}}s which do
@@ -182,10 +179,10 @@ registerLayout('block-like', class {
182179

183180
The {{Fragment}}'s {{Fragment/breakToken}} specifies where the {{Box}} last fragmented. If the
184181
{{Fragment/breakToken}} is null the {{Box}} cannot produce any more {{Fragment}}s. The
185-
{{Fragment/breakToken}} can be passed to the <<doLayout()>> function to produce the next
182+
{{Fragment/breakToken}} can be passed to the {{Box/doLayout()}} function to produce the next
186183
{{Fragment}} for a particular {{Box}}. The {{Fragment/breakToken}} cannot be changed. If the
187184
<a>current layout</a> requires a different {{Fragment/breakToken}} the author must perform
188-
<<doLayout()>> again with different arguments.
185+
{{Box/doLayout()}} again with different arguments.
189186

190187
The {{Fragment}}'s {{Fragment/dominantBaseline}}, {{Fragment/alphabeticBaseline}}, and
191188
{{Fragment/centerBaseline}} attributes specify where all the baselines for the {{Fragment}} are
@@ -212,10 +209,10 @@ interface ConstraintSpace {
212209
readonly attribute double inlinePercentResolutionSize;
213210
readonly attribute double blockPercentResolutionSize;
214211

215-
readonly attribute double? inlineScrollTriggerOffset;
216-
readonly attribute double? blockScrollTriggerOffset;
212+
readonly attribute boolean inlineScrollTrigger;
213+
readonly attribute boolean blockScrollTrigger;
217214

218-
readonly attribute double? blockFragmentationOffset;
215+
readonly attribute boolean blockFragmentation;
219216
readonly attribute BlockFragmentationType blockFragmentationType;
220217
};
221218

@@ -229,10 +226,10 @@ dictionary ConstraintSpaceOptions {
229226
double inlinePercentResolutionSize = null;
230227
double blockPercentResolutionSize = null;
231228

232-
double inlineScrollTriggerOffset = null;
233-
double blockScrollTriggerOffset = null;
229+
boolean inlineScrollTrigger = false;
230+
boolean blockScrollTrigger = false;
234231

235-
double blockFragmentationOffset = null;
232+
double blockFragmentation = false;
236233
BlockFragmentationType blockFragmentationType = "none";
237234
};
238235

@@ -313,11 +310,11 @@ The {{ConstraintSpace}} has {{ConstraintSpace/inlinePercentResolutionSize}} and
313310
{{ConstraintSpace/blockPercentResolutionSize}} attributes. These represent the size that a layout
314311
percentages should be resolved against while performing layout.
315312

316-
The {{ConstraintSpace}} has {{ConstraintSpace/inlineScrollTriggerOffset}} and
317-
{{ConstraintSpace/blockScrollTriggerOffset}} attributes. The <a>current layout</a> can use this
313+
The {{ConstraintSpace}} has {{ConstraintSpace/inlineScrollTrigger}} and
314+
{{ConstraintSpace/blockScrollTrigger}} attributes. The <a>current layout</a> can use this
318315
information to early opt-out of a layout if it knows it will require additional space for a scroll
319-
bar in that direction. If either the {{ConstraintSpace/inlineScrollTriggerOffset}} or
320-
{{ConstraintSpace/blockScrollTriggerOffset}} attributes are null the <a>current layout</a> can
316+
bar in that direction. If either the {{ConstraintSpace/inlineScrollTrigger}} or
317+
{{ConstraintSpace/blockScrollTrigger}} attributes are null the <a>current layout</a> can
321318
assume it does not need to report to the parent layout that it will require a scroll bar in that
322319
direction.
323320

@@ -343,26 +340,49 @@ provided to a <a>current layout</a>.
343340
<td>
344341
<pre>
345342
ConstraintSpace {
346-
inlineSize = 100,
347-
blockSize = 100,
348-
blockScrollTriggerOffset = 100
343+
inlineSize = 120
344+
blockSize = 120
349345
}
350346
</pre>
351347
</td>
352348
<td>
353349
<pre>
354350
ConstraintSpace {
355-
inlineSize = 100,
356-
blockSize = 100,
357-
blockScrollTriggerOffset = 100
351+
inlineSize = 120
352+
blockSize = 100
353+
blockScrollTrigger = true
358354
}
359355
</pre>
360356
</td>
361357
</tr>
358+
<tr>
359+
<td><img style="height: 50%; text-align: center;" src="images/constraint_space_1.png"></img></td>
360+
<td><img style="height: 50%; text-align: center;" src="images/constraint_space_2.png"></img></td>
361+
</tr>
362362
<tr>
363363
<td>
364-
TODO add image.
364+
<pre>
365+
ConstraintSpace {
366+
inlineSize = 140
367+
blockSize = 100
368+
inlineScrollTrigger = true
369+
blockScrollTrigger = true
370+
}
371+
</pre>
365372
</td>
373+
<td>
374+
<pre>
375+
ConstraintSpace {
376+
inlineSize = 140
377+
blockSize = 100
378+
blockFragmentation = true
379+
}
380+
</pre>
381+
</td>
382+
</tr>
383+
<tr>
384+
<td><img style="height: 50%; text-align: center;" src="images/constraint_space_3.png"></img></td>
385+
<td><img style="height: 50%; text-align: center;" src="images/constraint_space_4.png"></img></td>
366386
</tr>
367387
</tbody>
368388
</table>
@@ -391,8 +411,7 @@ registerLayout('block-like-with-scroll', class {
391411

392412
// Early opt-out of layout algorithm if we triggered a scroll in the
393413
// block direction.
394-
if (space.blockScrollTriggerOffset != null &&
395-
space.blockScrollTriggerOffset < blockOffset) {
414+
if (space.blockScrollTrigger && space.blockSize < blockOffset) {
396415
return {blockScrollTriggered: true};
397416
}
398417
}
@@ -410,9 +429,9 @@ registerLayout('block-like-with-scroll', class {
410429
</pre>
411430
</div>
412431

413-
The {{ConstraintSpace}} has {{ConstraintSpace/blockFragmentationOffset}} and
432+
The {{ConstraintSpace}} has {{ConstraintSpace/blockFragmentation}} and
414433
{{ConstraintSpace/blockFragmentationType}} attributes. The <a>current layout</a> should produce a
415-
{{Fragment}} which fragments at this offset if possible.
434+
{{Fragment}} which fragments at the {{ConstraintSpace/blockSize}} if possible.
416435

417436
The <a>current layout</a> may choose not to fragment a child {{Box}} based on the
418437
{{ConstraintSpace/blockFragmentationType}} if the child has a property like ''break-inside:
@@ -426,15 +445,16 @@ partial interface ConstraintSpace {
426445
void addExclusion(Exclusion exclusion, optional ExclusionOptions options);
427446

428447
sequence&lt;Exclusion> getExclusions(optional ExclusionOptions options);
429-
Exclusion getLastExclusion(optional ExclusionOptions options);
430448
};
431449

432-
enum ExclusionTag { "fragment", "exclusion", "float" };
450+
enum ExclusionTag { "fragment", "exclusion", "float-left", "float-right" };
433451
enum ExclusionType { "none", "inline-flow", "inline-start", "inline-end", "inline-both" };
452+
enum ExclusionBox { "none", "border", "margin" };
434453

435454
dictionary ExclusionOptions {
436455
ExclusionTag tag = "fragment";
437456
ExclusionType type = "none"; // default to "inline-flow" instead?
457+
ExclusionBox box = "none"; // TODO needed?
438458
};
439459

440460
interface Exclusion {
@@ -562,14 +582,14 @@ dictionary BreakTokenOptions {
562582
Object data = null;
563583
};
564584

565-
enum BreakType { "none", "line", "column", "page", "region" };
585+
enum BreakType { "none", "inline", "inline-hyphen", "column", "page", "region" };
566586
</pre>
567587

568588
Issue(w3c/css-houdini-drafts#258): What type of {{BreakType}}s are needed?
569589

570590
A {{Box}} can produce multiple {{Fragment}}s. A {{Box}} may fragment in the block direction if a
571-
{{ConstraintSpace/blockFragmentationOffset}} is present in the {{ConstraintSpace}}. It may fragment
572-
in the inline direction if it is an inline layout.
591+
{{ConstraintSpace/blockFragmentation}} is true. It may fragment in the inline direction if it is an
592+
inline layout.
573593

574594
A subsequent {{Fragment}} is produced by using the previous {{Fragment}}'s {{Fragment/breakToken}}.
575595
This tells the <a>child layout</a> to produce a {{Fragment}} starting at the point encoded in the

‎css-layout-api/images/constraint_space_1.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<style type="text/css">
5+
body {
6+
--width: 120px;
7+
--height: 120px;
8+
9+
border: solid 1px;
10+
height: calc(var(--height) + 40px);
11+
width: calc(var(--width) + 40px);
12+
position: absolute;
13+
}
14+
15+
div {
16+
border: 2px solid #2196F3;
17+
height: var(--height);
18+
width: var(--width);
19+
margin: 20px;
20+
box-sizing: border-box;
21+
}
22+
23+
span {
24+
position: absolute;
25+
top: 0;
26+
font-family: sans-serif;
27+
font-size: 10px;
28+
background-color: white;
29+
padding: 2px;
30+
}
31+
</style>
32+
</head>
33+
<body>
34+
<div></div>
35+
<span style="translate: 67px 13px;">120px</span>
36+
<span style="translate: 6px 72px;">120px</span>
37+
</body>
38+
</html>

‎css-layout-api/images/constraint_space_1.png‎

23.1 KB
Loading

‎css-layout-api/images/constraint_space_2.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<style type="text/css">
5+
body {
6+
--width: 120px;
7+
--height: 100px;
8+
9+
border: solid 1px;
10+
height: calc(var(--height) + 40px);
11+
width: calc(var(--width) + 40px);
12+
position: absolute;
13+
}
14+
15+
div {
16+
border: 2px solid #2196F3;
17+
height: var(--height);
18+
width: var(--width);
19+
margin: 20px;
20+
box-sizing: border-box;
21+
border-bottom-style: dashed;
22+
}
23+
24+
span {
25+
position: absolute;
26+
top: 0;
27+
font-family: sans-serif;
28+
font-size: 10px;
29+
background-color: white;
30+
padding: 2px;
31+
}
32+
</style>
33+
</head>
34+
<body>
35+
<div></div>
36+
<span style="translate: 67px 13px;">120px</span>
37+
<span style="translate: 6px 62px;">100px</span>
38+
<span style="translate: 53px 102px;">scrollTrigger</span>
39+
</body>
40+
</html>

‎css-layout-api/images/constraint_space_2.png‎

26.8 KB
Loading

‎css-layout-api/images/constraint_space_3.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<style type="text/css">
5+
body {
6+
--width: 120px;
7+
--height: 100px;
8+
9+
border: solid 1px;
10+
height: calc(var(--height) + 40px);
11+
width: calc(var(--width) + 40px);
12+
position: absolute;
13+
}
14+
15+
div {
16+
border: 2px solid #2196F3;
17+
border-bottom-style: dashed;
18+
height: var(--height);
19+
width: var(--width);
20+
margin: 20px;
21+
box-sizing: border-box;
22+
border-right-style: dashed;
23+
}
24+
25+
span {
26+
position: absolute;
27+
top: 0;
28+
font-family: sans-serif;
29+
font-size: 10px;
30+
background-color: white;
31+
padding: 2px;
32+
}
33+
</style>
34+
</head>
35+
<body>
36+
<div style="
37+
"></div>
38+
<span style="translate: 67px 13px;">120px</span>
39+
<span style="translate: 6px 62px;">100px</span>
40+
<span style="translate: 54px 102px;">scrollTrigger</span>
41+
<span style="translate: 78px 62px;">scrollTrigger</span>
42+
</body>
43+
</html>

‎css-layout-api/images/constraint_space_3.png‎

29.3 KB
Loading

‎css-layout-api/images/constraint_space_4.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<style type="text/css">
5+
body {
6+
--width: 140px;
7+
--height: 100px;
8+
9+
border: solid 1px;
10+
height: calc(var(--height) + 40px);
11+
width: calc(var(--width) + 40px);
12+
position: absolute;
13+
}
14+
15+
div {
16+
border: 2px solid #2196F3;
17+
border-bottom-style: dotted;
18+
height: var(--height);
19+
width: var(--width);
20+
margin: 20px;
21+
box-sizing: border-box;
22+
}
23+
24+
span {
25+
position: absolute;
26+
top: 0;
27+
font-family: sans-serif;
28+
font-size: 10px;
29+
background-color: white;
30+
padding: 2px;
31+
}
32+
</style>
33+
</head>
34+
<body>
35+
<div style="
36+
"></div>
37+
<span style="translate: 75px 13px;">140px</span>
38+
<span style="translate: 6px 62px;">100px</span>
39+
<span style="translate: 59px 102px;">fragmentation</span>
40+
</body>
41+
</html>

‎css-layout-api/images/constraint_space_4.png‎

27.3 KB
Loading

0 commit comments

Comments
 (0)