[css-layout-api] Remove old examples, fix explainer.

Author: bfgeek

css-layout-api/EXPLAINER.md

@@ -97,7 +97,7 @@ registerLayout('centering', class extends Layout {
     let maxChildInlineSize = 0;
     let maxChildBlockSize = 0;
     for (let child of children) {
-      const childFragment = yield child.layout(childConstraintSpace);
+      const childFragment = yield child.doLayout(childConstraintSpace);
 
       maxChildInlineSize = Math.max(maxChildInlineSize, childFragments.inlineSize);
       maxChildBlockSize = Math.max(maxChildBlockSize, childFragments.blockSize);
@@ -196,7 +196,7 @@ child constraint space just sets the size available to the children.
 We now loop through all of our children and perform layout. This is done by:
 
 ```js
-const childFragment = yield child.layout(childConstraintSpace);
+const childFragment = yield child.doLayout(childConstraintSpace);
 ```
 
 `child` has a very simple API. You can query the style of a child and perform layout - e.g.
@@ -205,7 +205,7 @@ const childFragment = yield child.layout(childConstraintSpace);
 child instanceof LayoutChild; // true
 child.styleMap.get('--a-property');
 
-const fragment = yield child.layout(childConstraintSpace);
+const fragment = yield child.doLayout(childConstraintSpace);
 ```
 
 The result of performing layout on a child is a `Fragment`. A fragment is read-only except for
@@ -319,8 +319,8 @@ The quick brown fox jumped over the lazy dog.
 ```js
 child instanceof LayoutChild;
 
-const fragment1 = yield child.layout(constraintSpace);
-const fragment2 = yield child.layout(constraintSpace, fragment1.breakToken);
+const fragment1 = yield child.doLayout(constraintSpace);
+const fragment2 = yield child.doLayout(constraintSpace, fragment1.breakToken);
 
 fragment2.breakToken == null;
 ```
@@ -398,7 +398,7 @@ registerLayout('basic-inline', class extends Layout {
         percentageInlineSize: availableInlineSize
       });
 
-      const fragment = yield child.layout(constraintSpace, breakToken);
+      const fragment = yield child.doLayout(constraintSpace, breakToken);
       childFragments.push(fragment);
 
       // Check if there is still space on the current line.
@@ -546,7 +546,7 @@ registerLayout('multi-col', class extends Layout {
         blockFragmentationType: 'column',
       });
 
-      const fragment = yield child.layout(childConstraintSpace);
+      const fragment = yield child.doLayout(childConstraintSpace);
     }
 
     // ... 

css-layout-api/Overview.bs

@@ -1013,181 +1013,3 @@ context</a> for a given |box|, |constraintSpace|, |children| and an optional |br
 
     15. Return |fragment|.
 
-Examples {#examples}
-====================
-
-Example 1: A simple block layout {#example-1}
----------------------------------------------
-
-<pre class='lang-javascript'>
-// Inside LayoutWorkletGlobalScope
-
-// Note this is meant to be similar (*not* the same) as a block layout.
-// Everything is done in 'width' & 'height' for easy reading.
-registerLayout('simple-flow', class {
-    static get inputProperties() { return ['width', 'height'] }
-    static get childrenInputProperties() { return ['x', 'y', 'position'] }
-
-    layout(children, constraintSpace, styleMap, breakToken) {
-        const absoluteChildren = [];
-        const fixedChildren = [];
-        const fragments = [];
-
-        // Resolve our width using the available width in 'constraintSpace', and
-        // our computed width property.
-        let width = resolveWidth(constraintSpace, styleMap.get('width'));
-
-        // Create a new constraint space for our children to consume.
-        let childConstraintSpace = new ConstraintSpace(constraintSpace);
-        childConstraintSpace.width = width;
-
-        // Track the used height, min and max content.
-        let height = 0;
-        let minContent = 0;
-        let maxContent = 0;
-
-        for (let child of children) {
-            // Check if the child is out of flow positioned.
-            const childPosition = child.styleMap.get('position');
-
-            if (childPosition == 'absolute') {
-                absoluteChildren.push(child);
-                continue;
-            }
-
-            if (childPosition == 'fixed') {
-                fixedChildren.push(child);
-                continue;
-            }
-
-            // Layout the in flow child.
-            const childFragment = child.doLayout(childConstraintSpace);
-
-            // Position the child.
-            childFragment.x = 0;
-            childFragment.y = height;
-
-            // Update our current height, min and max content.
-            height += childFragment.height;
-            minContent = Math.max(childFragment.minContent, minContent);
-            maxContent = Math.max(childFragment.maxContent, maxContent);
-        }
-
-        // Resolve the height.
-        height = resolveHeight(constraintSpace, styleMap.get('height'), height);
-
-        return {
-            minContent: minContent,
-            maxContent: maxContent,
-            width: width,
-            height: height,
-            fragments: fragments,
-            unPositionedChildren: absoluteChildren.concat(fixedChildren),
-            breakToken: null
-        };
-    }
-});
-</pre>
-
-<pre class='lang-markup'>
-&lt;div id="myElement"&gt;
-    &lt;div&gt;
-        CSS is awesome.
-    &lt;/div&gt;
-&lt;/div&gt;
-
-&lt;style&gt;
-#myElement {
-    display: layout('simple-flow');
-}
-&lt;/style&gt;
-</pre>
-
-Example 2: A simple line layout {#example-2}
---------------------------------------------
-
-<pre class='lang-javascript'>
-// Inside LayoutWorkletGlobalScope
-
-// Note this is meant to be similar (*not* the same) as a inline layout.
-// Everything is done in 'width' & 'height' for easy reading.
-registerLayout('simple-inline-flow', class {
-    static get inputProperties() { return ['width', 'height'] }
-    static get childrenInputProperties() { return [] }
-
-    layout(children, constraintSpace, styleMap, breakToken) {
-        // Resolve our width using the available width in 'constraintSpace', and
-        // our computed width property.
-        const width = resolveWidth(constraintSpace, styleMap.get('width'));
-        const fragments = [];
-        let height = 0;
-
-        // TODO compute these.
-        let minContent = 0;
-        let maxContent = 0;
-
-        let childFragment = null;
-        let lineFragments = [];
-        let lineHeight = 0;
-        let remainingLineWidth = width; // NOTE: should be helper on constraint space?
-
-        const childIter = chidlren.values();
-        let child = childIter.next().value;
-        let breakToken = null;
-
-        while (child) {
-            // Create a new constraint space for the child, with all the current
-            // positioned children.
-            const childConstraintSpace = new ConstraintSpace(constraintSpace);
-            childConstraintSpace.addExclusion(new ExclusionRect(width, height, 0, 0));
-            childConstraintSpace.addExclusions(lineFragments);
-
-            // Perform layout on the child.
-            childFragment = child.doLayout(childConstraintSpace, breakToken);
-            fragments.push(childFragment);
-
-            // Check if we need to position the fragment on the next line.
-            if (childFragment.width > remainingLineWidth) {
-                // Need to start a new line.
-                lineFragments = [];
-                height += lineHeight;
-                lineHeight = 0;
-                remainingLineWidth = width;
-            }
-
-            // Position the fragment horizontally.
-            childFragment.x = width - remainingLineWidth;
-
-            lineFragments.push(childFragment);
-            lineHeight = Math.max(lineHeight, childFragment.height);
-            remainingLineWidth -= childFragment.width;
-
-            // Update the line fragments positions, based on the new lineHeight.
-            for (let frag of lineFragments) {
-                frag.y = lineHeight - frag.height;
-            }
-
-            // Step to the next child if required.
-            if (childFragment.breakToken) {
-                breakToken = childFragment.breakToken;
-            } else {
-                child = childIter.next().value;
-                breakToken = null;
-            }
-        }
-
-        // Resolve the height.
-        height = resolveHeight(constraintSpace, styleMap.get('height'), height);
-
-        return {
-            minContent: minContent,
-            maxContent: maxContent,
-            width: width,
-            height: height,
-            fragments: fragments,
-            unpositionedFragments: [],
-            breakToken: null
-        };
-    }
-});
-</pre>