@@ -161,8 +161,8 @@ See [[!css3-display]].
161
161
If the value of <a for="document layout definition">layout options</a> '
162
162
{{LayoutOptions/childDisplay}} is <code> "normal"</code> , no <a>blockification</a> occurs. Instead
163
163
children with a <<display-outside>> <a>computed value</a> of ''inline'' (a <a>root inline box</a> )
164
- will produce a single {{Fragment }} representing each line when {{LayoutChild/layoutNextFragment()}}
165
- is called.
164
+ will produce a single {{LayoutFragment }} representing each line when
165
+ {{LayoutChild/layoutNextFragment()}} is called.
166
166
167
167
Note: This allows authors to adjust the available inline size of each line, and position each line
168
168
separately.
@@ -216,15 +216,15 @@ interface LayoutChild {
216
216
readonly attribute StylePropertyMapReadOnly styleMap;
217
217
218
218
IntrinsicSizesRequest intrinsicSizes();
219
- FragmentRequest layoutNextFragment(LayoutConstraints constraints, ChildBreakToken breakToken);
219
+ LayoutFragmentRequest layoutNextFragment(LayoutConstraints constraints, ChildBreakToken breakToken);
220
220
};
221
221
</pre>
222
222
223
223
A {{LayoutChild}} represents either a CSS generated <a>box</a> before layout has occured. (The box
224
224
or boxes will all have a computed value of 'display' that is not ''none'' ).
225
225
226
226
The {{LayoutChild}} does not contain any layout information itself (like inline or block size) but
227
- can be used to generate {{Fragment }} s which do contain layout information.
227
+ can be used to generate {{LayoutFragment }} s which do contain layout information.
228
228
229
229
An author cannot construct a {{LayoutChild}} with this API, this happens at a separate stage of the
230
230
rendering engine (post style resolution).
@@ -277,7 +277,7 @@ Multiple non-<a>atomic inlines</a> are placed within the same {{LayoutChild}} to
277
277
engines to perform text shaping across element boundaries.
278
278
279
279
<div class="note">
280
- Note: As an example the following should produce one {{Fragment }} but is from
280
+ Note: As an example the following should produce one {{LayoutFragment }} but is from
281
281
three non-<a>atomic inlines</a> :
282
282
<pre class="lang-html">
283
283
ع<span style="color: blue">ع</span>ع
@@ -291,7 +291,7 @@ An array of {{LayoutChild}}ren is passed into the layout method which represents
291
291
current box which is being laid out.
292
292
293
293
To perform layout on a box the author can invoke the {{LayoutChild/layoutNextFragment()}} method.
294
- This will produce a {{Fragment }} which contains layout information.
294
+ This will produce a {{LayoutFragment }} which contains layout information.
295
295
296
296
The {{LayoutChild/layoutNextFragment()}} method may be invoked multiple times with different
297
297
arguments to query the {{LayoutChild}} for different layout information.
@@ -301,7 +301,7 @@ Layout Fragments {#layout-fragments}
301
301
302
302
<pre class='idl'>
303
303
[Exposed=LayoutWorklet]
304
- interface Fragment {
304
+ interface LayoutFragment {
305
305
readonly attribute double inlineSize;
306
306
readonly attribute double blockSize;
307
307
@@ -314,20 +314,21 @@ interface Fragment {
314
314
};
315
315
</pre>
316
316
317
- A {{Fragment }} represents a CSS <a>fragment</a> of a {{LayoutChild}} after layout has occurred on
318
- that child. This is produced by the {{LayoutChild/layoutNextFragment()}} method.
317
+ A {{LayoutFragment }} represents a CSS <a>fragment</a> of a {{LayoutChild}} after layout has occurred
318
+ on that child. This is produced by the {{LayoutChild/layoutNextFragment()}} method.
319
319
320
- The {{Fragment }} has {{Fragment /inlineSize}} and {{Fragment /blockSize}} attributes, which are set by
321
- the respective child's layout algorithm. They cannot be changed. If the <a>current layout</a>
322
- requires a different {{Fragment /inlineSize}} or {{Fragment/blockSize}} the author must perform
323
- {{LayoutChild/layoutNextFragment()}} again with different arguments in order to get different
324
- results.
320
+ The {{LayoutFragment }} has {{LayoutFragment /inlineSize}} and {{LayoutFragment /blockSize}}
321
+ attributes, which are set by the respective child's layout algorithm. They cannot be changed. If the
322
+ <a>current layout</a> requires a different {{LayoutFragment /inlineSize}} or
323
+ {{LayoutFragment/blockSize}} the author must perform {{ LayoutChild/layoutNextFragment()}} again with
324
+ different arguments in order to get different results.
325
325
326
- The author inside the current layout can position a resulting {{Fragment}} by setting its
327
- {{Fragment/inlineOffset}} and {{Fragment/blockOffset}} attributes. If not set by the author they
328
- default to zero. The {{Fragment/inlineOffset}} and {{Fragment/blockOffset}} attributes represent the
329
- position of the {{Fragment}} relative to its parent's border box, before transform or positioning
330
- (e.g. if a fragment is <a>relatively positioned</a> ) has been applied.
326
+ The author inside the current layout can position a resulting {{LayoutFragment}} by setting its
327
+ {{LayoutFragment/inlineOffset}} and {{LayoutFragment/blockOffset}} attributes. If not set by the
328
+ author they default to zero. The {{LayoutFragment/inlineOffset}} and {{LayoutFragment/blockOffset}}
329
+ attributes represent the position of the {{LayoutFragment}} relative to its parent's border box,
330
+ before transform or positioning (e.g. if a fragment is <a>relatively positioned</a> ) has been
331
+ applied.
331
332
332
333
<div class="example">
333
334
The layout algorithm performs a block-like layout (positioning fragments sequentially in the block
@@ -386,15 +387,15 @@ registerLayout('block-like', class {
386
387
</div>
387
388
388
389
A <a>layout API container</a> can communicate with other <a>layout API containers</a> by using the
389
- {{Fragment /data}} attribute. This is set by the {{FragmentResultOptions/data}} member in the
390
+ {{LayoutFragment /data}} attribute. This is set by the {{FragmentResultOptions/data}} member in the
390
391
{{FragmentResultOptions}} dictionary.
391
392
392
- The {{Fragment }} 's {{Fragment /breakToken}} specifies where the {{LayoutChild}} last fragmented. If
393
- the {{Fragment /breakToken}} is null the {{LayoutChild}} wont produce any more {{Fragment}} s for that
394
- token chain. The {{Fragment /breakToken}} can be passed to the {{LayoutChild/layoutNextFragment()}}
395
- function to produce the next {{Fragment }} for a particular child. The {{Fragment/breakToken}} cannot
396
- be changed.
397
- If the <a>current layout</a> requires a different {{Fragment /breakToken}} the author must perform
393
+ The {{LayoutFragment }} 's {{LayoutFragment /breakToken}} specifies where the {{LayoutChild}} last
394
+ fragmented. If the {{LayoutFragment /breakToken}} is null the {{LayoutChild}} wont produce any more
395
+ {{LayoutFragment}} s for that token chain. The {{LayoutFragment /breakToken}} can be passed to the
396
+ {{LayoutChild/layoutNextFragment()}} function to produce the next {{LayoutFragment }} for a
397
+ particular child. The {{LayoutFragment/breakToken}} cannot be changed.
398
+ If the <a>current layout</a> requires a different {{LayoutFragment /breakToken}} the author must perform
398
399
{{LayoutChild/layoutNextFragment()}} again with different arguments.
399
400
400
401
Note: In a future level of the specification there may be a way to query for additional baseline
@@ -446,16 +447,16 @@ information about the available space into a <a>child layout</a>.
446
447
447
448
The {{LayoutConstraints}} object has {{LayoutConstraints/availableInlineSize}} and
448
449
{{LayoutConstraints/availableBlockSize}} attributes. This represents the <a>available space</a> for
449
- a {{Fragment }} which the layout should respect.
450
+ a {{LayoutFragment }} which the layout should respect.
450
451
451
- Note: Some layouts may need to produce a {{Fragment }} which exceed this size. For example a
452
+ Note: Some layouts may need to produce a {{LayoutFragment }} which exceed this size. For example a
452
453
<a>replaced element</a> . The <a>parent layout</a> should expect this to occur and deal with it
453
454
appropriately.
454
455
455
456
A <a>parent layout</a> may require the <a>current layout</a> to be exactly a particular size. If
456
457
the {{LayoutConstraints/fixedInlineSize}} or {{LayoutConstraints/fixedBlockSize}} are specified the
457
- <a>current layout</a> should produce a {{Fragment }} with a the specified size in the appropriate
458
- direction.
458
+ <a>current layout</a> should produce a {{LayoutFragment }} with a the specified size in the
459
+ appropriate direction.
459
460
460
461
<div class="example">
461
462
The layout algorithm performs a flexbox-like distribution of spare space in the inline direction. It
@@ -535,7 +536,7 @@ The {{LayoutConstraints}} object has {{LayoutConstraints/percentageInlineSize}}
535
536
percentages should be resolved against while performing layout.
536
537
537
538
The {{LayoutConstraints}} has a {{LayoutConstraints/blockFragmentationType}} attribute. The
538
- <a>current layout</a> should produce a {{Fragment }} which fragments at the
539
+ <a>current layout</a> should produce a {{LayoutFragment }} which fragments at the
539
540
{{LayoutConstraints/blockFragmentationOffset}} if possible.
540
541
541
542
The <a>current layout</a> can choose not to fragment a {{LayoutChild}} based on the
@@ -566,24 +567,24 @@ dictionary BreakTokenOptions {
566
567
enum BreakType { "none", "line", "column", "page", "region" };
567
568
</pre>
568
569
569
- A {{LayoutChild}} can produce multiple {{Fragment }} s. A {{LayoutChild}} may fragment in the block
570
- direction if a {{LayoutConstraints/blockFragmentationType}} is not none. Additionally
570
+ A {{LayoutChild}} can produce multiple {{LayoutFragment }} s. A {{LayoutChild}} may fragment in the
571
+ block direction if a {{LayoutConstraints/blockFragmentationType}} is not none. Additionally
571
572
{{LayoutChild}} which represents <a>inline-level</a> content, may fragment line by line if the
572
573
<a for="document layout definition">layout options</a> ' {{LayoutOptions/childDisplay}} (set by
573
574
<code> layoutOptions</code> ) is <code> "normal"</code> .
574
575
575
- A subsequent {{Fragment }} is produced by using the previous {{Fragment }} 's {{Fragment/breakToken}} .
576
- This tells the <a>child layout</a> to produce a {{Fragment}} starting at the point encoded in the
577
- {{ChildBreakToken}} .
576
+ A subsequent {{LayoutFragment }} is produced by using the previous {{LayoutFragment }} 's
577
+ {{LayoutFragment/breakToken}} . This tells the <a>child layout</a> to produce a {{LayoutFragment}}
578
+ starting at the point encoded in the {{ChildBreakToken}} .
578
579
579
580
Issue: Explain resuming the author defined layout.
580
581
581
582
<div class="example">
582
583
This example shows a simple layout which indents child fragments for a certain number of
583
584
lines.
584
585
585
- This example also demonstrates using the previous {{Fragment /breakToken}} of a {{Fragment}} to
586
- produce the next fragment for the {{LayoutChild}} .
586
+ This example also demonstrates using the previous {{LayoutFragment /breakToken}} of a
587
+ {{LayoutFragment}} to produce the next fragment for the {{LayoutChild}} .
587
588
588
589
It also demonstrates using the {{BreakToken}} to respect the {{LayoutConstraints}} '
589
590
{{LayoutConstraints/blockFragmentationType}} , it resumes it layout from the previous {{BreakToken}} .
@@ -801,8 +802,8 @@ except when it is being forced to a particular size by the formatting context in
801
802
participates, for example:
802
803
803
804
- If the <a>layout API container</a> is within a <a>block formatting context</a> , is inflow, and
804
- has an ''width/auto'' inline size, the user agent <em> must</em> set the
805
- {{LayoutConstraints/fixedInlineSize}} to the <a>stretch-fit inline size</a> .
805
+ has an ''width/auto'' inline size, the user agent <em> must</em> set the
806
+ {{LayoutConstraints/fixedInlineSize}} to the <a>stretch-fit inline size</a> .
806
807
807
808
<div class="note">
808
809
Note: In the example below the <a>layout API container</a> has its inline size set to 50.
@@ -871,8 +872,8 @@ As a result:
871
872
href="https://www.w3.org/TR/CSS2/visudet.html#containing-block-details"> exactly like block
872
873
containers do</a> . [[!CSS21]]
873
874
874
- - The {{Fragment /inlineOffset}} and {{Fragment /blockOffset}} represent the position of the
875
- fragment before any positioning and transforms have occured.
875
+ - The {{LayoutFragment /inlineOffset}} and {{LayoutFragment /blockOffset}} represent the position of
876
+ the fragment before any positioning and transforms have occured.
876
877
877
878
- The <a>static position</a> of an absolutely-positioned child of a <a>layout API container</a> is
878
879
set to the <a>inline-start</a> , <a>block-start</a> padding edge of the <a>layout API
@@ -881,9 +882,9 @@ As a result:
881
882
<div class="note">
882
883
Note: In the example below:
883
884
- "child-relative" would be the only child passed to the author's layout. If it was positioned
884
- at ({{Fragment /inlineOffset}} <code> = 20</code> , {{Fragment /blockOffset}} <code> =
885
- 30</code> ), its final position would be (<code> 25</code> , <code> 40</code> ) as the relative
886
- positioning was handled by the user agent.
885
+ at ({{LayoutFragment /inlineOffset}} <code> = 20</code> , {{LayoutFragment /blockOffset}}
886
+ <code> = 30</code> ), its final position would be (<code> 25</code> , <code> 40</code> ) as the
887
+ relative positioning was handled by the user agent.
887
888
888
889
- "child-absolute" would not appear as a {{LayoutChild}} , and instead would be laid out and
889
890
positioned by the user agent.
@@ -1254,7 +1255,7 @@ Layout Engine {#layout-engine}
1254
1255
1255
1256
<pre class="idl">
1256
1257
[Exposed=LayoutWorklet]
1257
- interface FragmentRequest {
1258
+ interface LayoutFragmentRequest {
1258
1259
// Has internal slots:
1259
1260
// [[layoutChild]] - The layout child to generate the fragment for.
1260
1261
// [[layoutConstraints]] - The layout constraints object to perform layout in.
@@ -1273,14 +1274,14 @@ function instead of a regular javascript function. This is for user-agents to be
1273
1274
asynchronous and parallel layout engines.
1274
1275
1275
1276
When an author invokes the {{LayoutChild/layoutNextFragment()}} method on a {{LayoutChild}} the
1276
- user-agent doesn't synchronously generate a {{Fragment }} to return to the author's code. Instead it
1277
- returns a {{FragmentRequest }} . This is a completely opaque object to the author but contains
1278
- internal slots which encapsulates the {{LayoutChild/layoutNextFragment()}} method call.
1277
+ user-agent doesn't synchronously generate a {{LayoutFragment }} to return to the author's code.
1278
+ Instead it returns a {{LayoutFragmentRequest }} . This is a completely opaque object to the author but
1279
+ contains internal slots which encapsulates the {{LayoutChild/layoutNextFragment()}} method call.
1279
1280
1280
- When a {{FragmentRequest }} (s) are yielded from a layout generator object the user-agent's
1281
+ When a {{LayoutFragmentRequest }} (s) are yielded from a layout generator object the user-agent's
1281
1282
layout engine may run the algorithm asynchronously with other work, and/or on a different thread of
1282
- execution. When {{Fragment }} (s) have been produced by the engine, the user-agent will "tick" the
1283
- generator object with the resulting {{Fragment }} (s).
1283
+ execution. When {{LayoutFragment }} (s) have been produced by the engine, the user-agent will "tick"
1284
+ the generator object with the resulting {{LayoutFragment }} (s).
1284
1285
1285
1286
The same applies for the {{LayoutChild/intrinsicSizes()}} method.
1286
1287
@@ -1291,7 +1292,7 @@ An example layout engine written in javascript is shown below.
1291
1292
class LayoutEngine {
1292
1293
// This function takes the root of the box-tree, a LayoutConstraints object, and a
1293
1294
// BreakToken to (if paginating for printing for example) and generates a
1294
- // Fragment .
1295
+ // LayoutFragment .
1295
1296
layoutEntry(rootBox, rootPageConstraints, breakToken) {
1296
1297
return layoutFragment({
1297
1298
box: rootBox,
@@ -1300,8 +1301,8 @@ class LayoutEngine {
1300
1301
});
1301
1302
}
1302
1303
1303
- // This function takes a FragmentRequest and calls the appropriate layout
1304
- // algorithm to generate the a Fragment .
1304
+ // This function takes a LayoutFragmentRequest and calls the appropriate
1305
+ // layout algorithm to generate the a LayoutFragment .
1305
1306
layoutFragment(fragmentRequest) {
1306
1307
const box = fragmentRequest.layoutChild;
1307
1308
const algorithm = selectLayoutAlgorithmForBox(box);
@@ -1325,7 +1326,7 @@ class LayoutEngine {
1325
1326
nextFragmentRequest = fragmentRequestGenerator.next(fragments);
1326
1327
}
1327
1328
1328
- return nextFragmentRequest.value; // Return the final Fragment .
1329
+ return nextFragmentRequest.value; // Return the final LayoutFragment .
1329
1330
}
1330
1331
}
1331
1332
</pre>
@@ -1339,7 +1340,7 @@ Performing Layout {#performing-layout}
1339
1340
dictionary FragmentResultOptions {
1340
1341
double inlineSize = 0;
1341
1342
double blockSize = 0;
1342
- sequence<Fragment > childFragments = [];
1343
+ sequence<LayoutFragment > childFragments = [];
1343
1344
any data = null;
1344
1345
BreakTokenOptions breakToken = null;
1345
1346
};
@@ -1603,7 +1604,7 @@ following steps:
1603
1604
<a>list</a> . The ordering <em> is</em> important as this dictates their paint order
1604
1605
(described in [[#layout-api-containers]] ). Their position relative to the <b> border
1605
1606
box</b> of the |fragment| should be based off the author specified
1606
- {{Fragment /inlineOffset}} and {{Fragment /blockOffset}} .
1607
+ {{LayoutFragment /inlineOffset}} and {{LayoutFragment /blockOffset}} .
1607
1608
1608
1609
- The <a>fragmentation break</a> information set to |fragment|'s
1609
1610
{{FragmentResultOptions/breakToken}} .
@@ -1713,8 +1714,8 @@ When the user agent wants to <dfn>run a generator</dfn> given |generator|, and |
1713
1714
- {{IntrinsicSizes/maxContentSize}} being |layoutChild|'s <a>max-content
1714
1715
size</a> .
1715
1716
1716
- 3. If |request| is a {{FragmentRequest }} and |generatorType| is <code> "layout" </code>
1717
- then:
1717
+ 3. If |request| is a {{LayoutFragmentRequest }} and |generatorType| is
1718
+ <code> "layout" </code> then:
1718
1719
1719
1720
1. Let |layoutChild| be result of looking up the internal slot
1720
1721
<code> \[[layoutChild]] </code> on |request|.
@@ -1731,21 +1732,21 @@ When the user agent wants to <dfn>run a generator</dfn> given |generator|, and |
1731
1732
1732
1733
5. Let |targetRealm| be |generator|'s <a>Realm</a> .
1733
1734
1734
- 6. Let |result| be a new {{Fragment }} with:
1735
+ 6. Let |result| be a new {{LayoutFragment }} with:
1735
1736
1736
- - {{Fragment /inlineSize}} being |internalFragment|'s <a>inline size</a> .
1737
+ - {{LayoutFragment /inlineSize}} being |internalFragment|'s <a>inline size</a> .
1737
1738
1738
- - {{Fragment /blockSize}} being |internalFragment|'s <a>block size</a> .
1739
+ - {{LayoutFragment /blockSize}} being |internalFragment|'s <a>block size</a> .
1739
1740
1740
- - {{Fragment /inlineOffset}} initially set to 0.
1741
+ - {{LayoutFragment /inlineOffset}} initially set to 0.
1741
1742
1742
- - {{Fragment /blockOffset}} initially set to 0.
1743
+ - {{LayoutFragment /blockOffset}} initially set to 0.
1743
1744
1744
- - {{Fragment /breakToken}} being a new {{ChildBreakToken}} representing
1745
+ - {{LayoutFragment /breakToken}} being a new {{ChildBreakToken}} representing
1745
1746
|layoutChild|'s internal break token.
1746
1747
1747
1748
- If |internalFragment| has a |clonedData| object stored with it, let
1748
- {{Fragment /data}} being the result of
1749
+ {{LayoutFragment /data}} being the result of
1749
1750
<a>StructuredDeserialize</a> (|clonedData|, |targetRealm|), otherwise null.
1750
1751
1751
1752
4. If |result| is null (that is neither of the above branches was taken), return
0 commit comments