[css-layout-api] Bikeshed warning fixes.

Author: bfgeek

css-layout-api/Overview.bs

@@ -12,13 +12,31 @@ Editor: Tab Atkins, jackalmage@gmail.com
 Editor: Shane Stephens, shanestephens@google.com
 Editor: Robert O'Callahan, robert@ocallahan.org
 Editor: Rossen Atanassov, rossen.atanassov@microsoft.com
+Ignored Terms: LayoutWorklet
+Ignored Terms: create a workletglobalscope
 </pre>
 
+<style>
+/* Put nice boxes around each algorithm. */
+[data-algorithm]:not(.heading) {
+    padding: .5em;
+    border: thin solid #ddd; border-radius: .5em;
+    margin: .5em calc(-0.5em - 1px);
+}
+[data-algorithm]:not(.heading) > :first-child {
+    margin-top: 0;
+}
+[data-algorithm]:not(.heading) > :last-child {
+    margin-bottom: 0;
+}
+</style>
+
 <pre class="link-defaults">
 spec:css-break-3; type:dfn; text:fragment
 spec:css-display-3; type:dfn; text:box
 spec:css-display-3; type:value; for:display; text:none
-spec:dom; type:dfn; text:element
+spec:css-display-3; type:value; for:<display-inside>; text:grid
+spec:dom; type:dfn; for:/; text:element
 </pre>
 
 <pre class="anchors">
@@ -37,7 +55,9 @@ urlPrefix: https://tc39.github.io/ecma262/#sec-; type: dfn;
     text: IsCallable
     text: IsConstructor
     text: HasProperty
+    url: ecmascript-data-types-and-values; text: type
     url: get-o-p; text: Get
+    url: generatorfunction; text: generator function
     url: terms-and-definitions-function; text: function
     urlPrefix: native-error-types-used-in-this-standard-
         text: TypeError
@@ -46,6 +66,8 @@ urlPrefix: https://tc39.github.io/ecma262/#sec-; type: dfn;
 Introduction {#intro}
 =====================
 
+<em>This section is not normative.</em>
+
 The layout stage of CSS is responsible for generating and positioning <a>fragments</a> from the
 <a>box tree</a>.
 
@@ -156,8 +178,8 @@ An author cannot construct a {{LayoutChild}} with this API, this happens at a se
 rendering engine (post style resolution).
 
 A {{InlineLayoutChild}} represents a sequence of non-<a>atomic inlines</a>. It does not have a
-single <a>computed style</a> associated with it as it may contain multiple inline boxes inside it
-with different <a>computed style</a>.
+single computed style associated with it as it may contain multiple inline boxes inside it
+with different computed style.
 
 <div class="note">
     Note: As an example the following would be placed into a single {{InlineLayoutChild}}:
@@ -178,12 +200,12 @@ rendering engines to perform text shaping across element boundaries.
     </pre>
 </div>
 
-Note: In a future level of the specification there may be a way to query the <a>computed style</a>
+Note: In a future level of the specification there may be a way to query the computed style
       of ranges inside a {{InlineLayoutChild}}.
 
 A {{BoxLayoutChild}} represents a single <a>box</a>. It does have an associated computed style which
 can be accessed by {{BoxLayoutChild/styleMap}}. The {{BoxLayoutChild/styleMap}} will only contain
-properties which are listed in the <a>child input properties</a> array.
+properties which are listed in the child input properties array.
 
 A {{BoxLayoutChild}} could be generated by:
 
@@ -197,7 +219,7 @@ A {{BoxLayoutChild}} could be generated by:
 
  - An <a>anonymous box</a>. For example an anonymous box may be inserted as a result of:
 
-    - A <a>Text</a> node which has undergone <a>blockification</a>. (Or more generally a
+    - A text node which has undergone <a>blockification</a>. (Or more generally a
         {{InlineLayoutChild}} which has undergone <a>blockification</a>).
 
     - An element with ''display: table-cell'' which doesn't have a parent with ''display: table''.
@@ -216,8 +238,8 @@ A {{BoxLayoutChild}} could be generated by:
     </pre>
 </div>
 
-An array of {{LayoutChild}}ren is passed into the <a>layout method</a> which represents the children
-of the current box which is being laid out.
+An array of {{LayoutChild}}ren is passed into the layout method which represents the children of the
+current box which is being laid out.
 
 To perform layout on a box the author can invoke the {{LayoutChild/layoutNextFragment()}} method.
 This will produce a {{Fragment}} which contains layout information.
@@ -354,8 +376,6 @@ interface ConstraintSpace {
     readonly attribute boolean inlineSizeFixed;
     readonly attribute boolean blockSizeFixed;
 
-    readonly attribute boolean inlineShrinkToFit;
-
     readonly attribute double percentageInlineSize;
     readonly attribute double percentageBlockSize;
 
@@ -372,8 +392,6 @@ dictionary ConstraintSpaceOptions {
     boolean inlineSizeFixed = false;
     boolean blockSizeFixed = false;
 
-    boolean inlineShrinkToFit = false;
-
     double? percentageInlineSize = null;
     double? percentageBlockSize = null;
 
@@ -383,9 +401,9 @@ dictionary ConstraintSpaceOptions {
 enum BlockFragmentationType { "none", "page", "column", "region" };
 </pre>
 
-A {{ConstraintSpace}} is passed into the <a>layout method</a> which represents the available space
-for the <a>current layout</a> to perform layout inside. It is also used to pass information about
-the available space into a <a>child layout</a>.
+A {{ConstraintSpace}} is passed into the layout method which represents the available space for the
+<a>current layout</a> to perform layout inside. It is also used to pass information about the
+available space into a <a>child layout</a>.
 
 The {{ConstraintSpace}} has {{ConstraintSpace/inlineSize}} and {{ConstraintSpace/blockSize}}
 attributes. This represents the <a>available space</a> for a {{Fragment}} which the layout should
@@ -422,7 +440,6 @@ registerLayout('flex-distribution-like', class {
 
         const unconstrainedSizes = [];
         const childConstraintSpace = new ConstraintSpace({
-            inlineShrinkToFit: true,
             inlineSize: availableInlineSize,
             blockSize: availableBlockSize,
         });
@@ -471,9 +488,6 @@ registerLayout('flex-distribution-like', class {
 </pre>
 </div>
 
-The {{ConstraintSpace}} has a {{ConstraintSpace/inlineShrinkToFit}} attribute. This is used to
-indicate that the layout should treat ''auto'' as ''fit-content'' instead.
-
 The {{ConstraintSpace}} has {{ConstraintSpace/percentageInlineSize}} and
 {{ConstraintSpace/percentageBlockSize}} attributes. These represent the size that a layout
 percentages should be resolved against while performing layout.
@@ -499,12 +513,12 @@ interface ChildBreakToken {
 [Exposed=LayoutWorklet]
 interface BreakToken {
     readonly attribute sequence&lt;ChildBreakToken> childBreakTokens;
-    readonly attribute Object data;
+    readonly attribute any data;
 };
 
 dictionary BreakTokenOptions {
     sequence&lt;ChildBreakToken> childBreakTokens;
-    Object data = null;
+    any data = null;
 };
 
 enum BreakType { "none", "inline", "inline-hyphen", "column", "page", "region" };
@@ -513,7 +527,7 @@ enum BreakType { "none", "inline", "inline-hyphen", "column", "page", "region" }
 Issue: Fill out other inline type break types.
 
 A {{LayoutChild}} can produce multiple {{Fragment}}s. A {{BoxLayoutChild}} may fragment in the block
-direction if a {{ConstraintSpace/blockFragmentation}} is not none. A {{InlineLayoutChild}} may
+direction if a {{ConstraintSpace/blockFragmentationType}} is not none. A {{InlineLayoutChild}} may
 fragment in the inline direction.
 
 A subsequent {{Fragment}} is produced by using the previous {{Fragment}}'s {{Fragment/breakToken}}.
@@ -602,7 +616,6 @@ registerLayout('basic-inline', class extends Layout {
                 inlineSize: availableInlineSize - usedInlineSize,
                 blockSize: availableBlockSize,
                 percentageInlineSize: availableInlineSize,
-                inlineShrinkToFit: true,
             });
 
             const fragment = yield child.layoutNextFragment(constraintSpace,
@@ -741,18 +754,18 @@ Each <a>box</a> has an associated <dfn>layout valid flag</dfn>. It may be either
 
 Issue: The above flag is too restrictive on user agents, change.
 
-When the <a>computed style</a> for a |box| changes, the user agent must run the following steps:
+When the computed style for a |box| changes, the user agent must run the following steps:
     1. Let |layoutFunction| be the <<layout()>> or <<inline-layout()>> function of the 'display'
-        property on the <a>computed style</a> for the |box| if it exists. If it is a different type
-        of value (e.g.  ''grid'') then abort all these steps.
+        property on the computed style for the |box| if it exists. If it is a different type of
+        value (e.g.  ''grid'') then abort all these steps.
 
     2. Let |name| be the first argument of the |layoutFunction|.
 
     3. Let |inputProperties| be the result of looking up |name| on <a>layout name to input
         properties map</a>.
 
     4. Let |childInputProperties| be the result of looking up |name| on <a>layout name to child
-        input properties map<a>.
+        input properties map</a>.
 
     5. For each |property| in |inputProperties|, if the |property|'s <a>computed value</a> has
         changed, set the <a>layout valid flag</a> on the <a>box</a> to <a>layout-invalid</a>.
@@ -809,12 +822,12 @@ A <dfn>layout definition</dfn> describes an author defined layout which can be r
 
  - A <dfn>layout class constructor valid flag</dfn>.
 
-The {{LayoutWorkletGlobalScope}} has a map of <b>layout name to layout definition map</b>. Initially
+The {{LayoutWorkletGlobalScope}} has a map of <dfn>layout name to layout definition map</dfn>. Initially
 this map is empty; it is populated when {{registerLayout(name, layoutCtor)}} is called.
 
 When the <dfn method for=LayoutWorkletGlobalScope>registerLayout(|name|, |layoutCtor|)</dfn> method
 is called, the user agent <em>must</em> run the following steps:
-    1. If the |name| exists as a key in the <a>layout name to layout definition map</dfn>,
+    1. If the |name| exists as a key in the <a>layout name to layout definition map</a>,
         <a>throw</a> a <a>NotSupportedError</a> and abort all these steps.
 
     2. If the |name| is an empty string, <a>throw</a> a <a>TypeError</a> and abort all these steps.
@@ -925,7 +938,7 @@ internal slots which encapsulates the {{LayoutChild/layoutNextFragment()}} metho
 
 When a {{FragmentRequest}}(s) are yielded from a layout generator object the user-agent's
 layout engine may run the algorithm asynchronously with other work, and/or on a different thread of
-execution. When {{Fragment}}(s) have been produced by the engine, the user-agent will 'tick' the
+execution. When {{Fragment}}(s) have been produced by the engine, the user-agent will "tick" the
 generator object with the resulting {{Fragment}}(s).
 
 <div class="example">
@@ -998,7 +1011,7 @@ Issue: Specify how we do min/max content contributions.
 Issue: Need to specify that the {{LayoutChild}} objects should remain the same between layouts so
     the author can store information? Not sure.
 
-When the user agent wants to <dfn>generate a layout API fragment</dfn> of a <a>layout API formatting
+When the user agent wants to <dfn>generate a fragment</dfn> of a <a>layout API formatting
 context</a> for a given |box|, |constraintSpace|, |children| and an optional |breakToken| it
 <em>must</em> run the following steps:
 
@@ -1035,6 +1048,7 @@ context</a> for a given |box|, |constraintSpace|, |children| and an optional |br
         abort all these steps.
 
         Issue: Define what an "invalid fragment" is.
+            <dfn>invalid fragment</dfn>
 
     6. Let |layoutInstance| be the result of looking up the <a>layout instance</a> on the |box|. If
         |layoutInstance| is null run the following substeps.
@@ -1052,8 +1066,8 @@ context</a> for a given |box|, |constraintSpace|, |children| and an optional |br
 
         4. Set <a>layout instance</a> on |box| to |layoutInstance|.
 
-        Note: <a>Layout instance</a> will be set to null whenever the <a>computed style</a> of
-            'display' on |box| changes.
+        Note: <a>Layout instance</a> will be set to null whenever the computed style of 'display' on
+            |box| changes.
 
     7. Let |layoutGeneratorFunction| be the result of looking up the <a>layout generator
         function</a>.
@@ -1064,7 +1078,7 @@ context</a> for a given |box|, |constraintSpace|, |children| and an optional |br
     9. Let |styleMap| be a new {{StylePropertyMapReadOnly}} populated with <em>only</em> the
         <a>computed value</a>'s for properties listed in |inputProperties|.
 
-    10. Let |layoutGenerator| be the result of <a>Call</a>(|layoutGeneratorFunction|,
+    10. Let |layoutGenerator| be the result of <a>Invoke</a>(|layoutGeneratorFunction|,
         |layoutInstance|, «|constraintSpace|, |children|, |styleMap|, |breakToken|»).
 
     12. Let |childFragmentResults| be «» (the empty list).
@@ -1105,28 +1119,28 @@ context</a> for a given |box|, |constraintSpace|, |children| and an optional |br
 
     14. Let |fragment| be a <a>fragment</a> with the following properties:
 
-      - The <a>border box</a> <a>inline size</a> is set to |fragmentResult|'s
-          {{FragmentResultOptions/inlineSize}}.
+      - The <a>inline size</a> is set to |fragmentResult|'s {{FragmentResultOptions/inlineSize}}.
 
-      - The <a>border box</a> <a>block size</a> is set to |fragmentResult|'s
-          {{FragmentResultOptions/blockSize}}.
+      - The <a>block size</a> is set to |fragmentResult|'s {{FragmentResultOptions/blockSize}}.
 
-      - The <a>inline overflow size</a> is set to |fragmentResult|'s
+      - The <b>inline overflow size</b> is set to |fragmentResult|'s
           {{FragmentResultOptions/inlineOverflowSize}} if not null, otherwise it is set to
           {{FragmentResultOptions/inlineSize}}.
 
-      - The <a>block overflow size</a> is set to |fragmentResult|'s
+          Issue: REMOVE THIS.
+
+      - The <b>block overflow size</b> is set to |fragmentResult|'s
           {{FragmentResultOptions/blockOverflowSize}} if not null, otherwise it is set to
           {{FragmentResultOptions/blockSize}}.
 
           If the |constraintSpace|'s {{ConstraintSpace/inlineOverflow}} is <code>false</code> and
-          the <a>inline overflow size</a> is greater than the <a>inline size</a> and the <a>computed
-          value</a> for <a>inline</a> 'overflow' is ''auto'' then set |constraintSpace|'s
+          the <b>inline overflow size</b> is greater than the <a>inline size</a> and the <a>computed
+          value</a> for <a>inline</a> 'overflow' is ''overflow/auto'' then set |constraintSpace|'s
           {{ConstraintSpace/inlineOverflow}} to <code>true</code>.
 
           If the |constraintSpace|'s {{ConstraintSpace/blockOverflow}} is <code>false</code> and the
-          <a>block overflow size</a> is greater than the <a>block size</a> and the <a>computed
-          value</a> for <a>block</a> 'overflow' is ''auto'' then set |constraintSpace|'s
+          <b>block overflow size</b> is greater than the <a>block size</a> and the <a>computed
+          value</a> for <a>block</a> 'overflow' is ''overflow/auto'' then set |constraintSpace|'s
           {{ConstraintSpace/blockOverflow}} to <code>true</code>.
 
           If either {{ConstraintSpace/inlineOverflow}} or {{ConstraintSpace/blockOverflow}} were set
@@ -1135,13 +1149,15 @@ context</a> for a given |box|, |constraintSpace|, |children| and an optional |br
           Note: In a future level of the specification there may be a way to more efficiently abort
               a layout given a "scroll trigger line" on the constraint space.
 
+          Issue: REMOVE THIS.
+
       - The children fragments of the |fragment| is set from |fragmentResult|'s
           {{FragmentResultOptions/childFragments}}. The ordering <em>is</em> important as this is
           dictates their paint order (described in [[#layout-api-containers]]). Their position
-          relative to the <a>border box</a> of the |fragment| should be based off the author
+          relative to the <b>border box</b> of the |fragment| should be based off the author
           specified {{Fragment/inlineOffset}} and {{Fragment/blockOffset}}.
 
-      - The <a>fragmentation break</a> is set to |fragmentResult|'s
+      - The <b>fragmentation break</b> is set to |fragmentResult|'s
           {{FragmentResultOptions/breakToken}}.
 
       - The <a>alignment baseline</a> is set to |fragmentResult|'s