registerLayout('block-like', class {
    *intrinsicSizes(styleMap, children) {
      const childrenSizes = yield children.map((child) => {
          return child.intrinsicSizes();
      });

      const maxContentSize = childrenSizes.reduce((max, childSizes) => {
          return Math.max(max, childSizes.maxContentContribution);
      }, 0);

      const minContentSize = childrenSizes.reduce((max, childSizes) => {
          return Math.max(max, childSizes.minContentContribution);
      }, 0);

      return {maxContentSize, minContentSize};
    }

    *layout(space, children, styleMap, edges) {
        const inlineSize = resolveInlineSize(space, styleMap);

        const availableInlineSize = inlineSize - edges.all.inline;
        const availableBlockSize = resolveBlockSize(constraintSpace, styleMap) - edges.all.block;

        const childFragments = [];
        const childConstraintSpace = new ConstraintSpace({
            inlineSize: availableInlineSize,
            blockSize: availableBlockSize,
        });

        let blockOffset = edges.all.blockStart;

        const childFragments = yeild children.map((child) => {
            return child.layoutNextFragment(childConstraintSpace);
        });

        for (let fragment of childFragments) {
            // Position the fragment in a block like manner, centering it in the
            // inline direction.
            fragment.blockOffset = blockOffset;
            fragment.inlineOffset = Math.max(
                edges.all.inlineStart,
                (availableInlineSize - fragment.inlineSize) / 2);

            blockOffset += fragment.blockSize;
        }

        const contentSize = blockOffset + edges.all.blockEnd;
        const blockSize = resolveBlockSize(
            constraintSpace, styleMap, contentSize);

        return {
            inlineSize: inlineSize,
            blockSize: blockSize,
            childFragments: childFragments,
        };
    }
});

registerLayout('flex-distribution-like', class {
    *intrinsicSizes(styleMap, children) {
      const childrenSizes = yield children.map((child) => {
          return child.intrinsicSizes();
      });

      const maxContentSize = childrenSizes.reduce((sum, childSizes) => {
          return sum + childSizes.maxContentContribution;
      }, 0);

      const minContentSize = childrenSizes.reduce((max, childSizes) => {
          return sum + childSizes.minContentContribution;
      }, 0);

      return {maxContentSize, minContentSize};
    }

    *layout(space, children, styleMap, edges, breakToken) {
        const inlineSize = resolveInlineSize(space, styleMap);

        const availableInlineSize = inlineSize - edges.all.inline;
        const availableBlockSize =
            resolveBlockSize(space, styleMap) - edges.all.block;

        const childConstraintSpace = new ConstraintSpace({
            inlineSize: availableInlineSize,
            blockSize: availableBlockSize,
        });

        const unconstrainedChildFragments = yield children.map((child) => {
            return child.layoutNextFragment(childConstraintSpace);
        });

        const unconstrainedSizes = [];
        const totalSize = unconstrainedChildFragments.reduce((sum, fragment, i) => {
            unconstrainedSizes[i] = fragment.inlineSize;
            return sum + fragment.inlineSize;
        }, 0);

        // Distribute spare space between children.
        const remainingSpace = Math.max(0, inlineSize - totalSize);
        const extraSpace = remainingSpace / children.length;

        const childFragments = yield children.map((child, i) => {
            return child.layoutNextFragment(new ConstraintSpace({
                inlineSize: unconstrainedSizes[i] + extraSpace,
                inlineSizeFixed: true,
                blockSize: availableBlockSize
            }));
        });

        // Position the fragments.
        let inlineOffset = 0;
        let maxChildBlockSize = 0;
        for (let fragment of childFragments) {
            fragment.inlineOffset = inlineOffset;
            fragment.blockOffset = edges.all.blockStart;

            inlineOffset += fragment.inlineSize;
            maxChildBlockSize = Math.max(maxChildBlockSize, fragment.blockSize);
        }

        // Resolve our block size.
        const blockSize = resolveBlockSize(space, styleMap, maxChildBlockSize);

        return {
            inlineSize: inlineSize,
            blockSize: blockSize,
            childFragments: childFragments,
        };
    }
});

registerLayout('basic-inline', class {
    static displayType = 'normal';

    *layout(space, children, styleMap, edges, breakToken) {
        // Resolve our inline size.
        const inlineSize = resolveInlineSize(space, styleMap);

        // Determine our (inner) available size.
        const availableInlineSize = inlineSize - edges.all.inline;
        const availableBlockSize =
            resolveBlockSize(space, styleMap) - edges.all.block;

        const childFragments = [];

        let currentLine = [];
        let usedInlineSize = 0;

        let lineOffset = 0;
        let maxLineBlockSize = 0;

        // Just a small little function which will update the above variables.
        const nextLine = function() {
            currentLine = [];
            usedInlineSize = 0;

            lineOffset += maxLineBlockSize;
            maxLineBlockSize = 0;
        }

        let childBreakToken = null;
        if (breakToken) {
            childBreakToken = breakToken.childBreakTokens[0];

            // Remove all the children we have already produced fragments for.
            children.splice(0, children.indexOf(childBreakToken.child));
        }

        let child = children.shift();
        while (child) {
            // Make sure we actually have space on the current line.
            if (usedInlineSize > availableInlineSize) {
                nextLine();
            }

            // The constraint space here will have the inline size of the
            // remaining space on the line.
            const remainingInlineSize = availableInlineSize - usedInlineSize;
            const constraintSpace = new ConstraintSpace({
                inlineSize: availableInlineSize - usedInlineSize,
                blockSize: availableBlockSize,
                percentageInlineSize: availableInlineSize,
            });

            const fragment = yield child.layoutNextFragment(constraintSpace,
                                                            childBreakToken);
            childFragments.push(fragment);

            // Check if there is still space on the current line.
            if (fragment.inlineSize > remainingInlineSize) {
                nextLine();

                // Check if we have gone over the block fragmentation limit.
                if (constraintSpace.blockFragmentationType != 'none' &&
                    lineOffset > constraintSpace.blockSize) {
                    break;
                }
            }

            // Insert fragment on the current line.
            currentLine.push(fragment);
            fragment.inlineOffset = usedInlineSize;

            // Go through each of the fragments on the line and update their
            // block offsets.
            for (let fragmentOnLine of currentLine) {
                fragmentOnLine.blockOffset = lineOffset;

                const lineBlockSize =
                    fragmentOnLine.blockOffset + fragmentOnLine.blockSize;
                if (maxLineBlockSize < lineBlockSize) {
                    maxLineBlockSize = lineBlockSize;
                }
            }

            if (fragment.breakToken) {
                childBreakToken = fragment.breakToken;
            } else {
                // If a fragment doesn't have a break token, we move onto the
                // next child.
                child = children.shift();
                childBreakToken = null;
            }
        }

        // Determine our block size.
        nextLine();
        const contentSize = lineOffset + edges.all.block;
        const blockSize = resolveBlockSize(space,
                                           styleMap,
                                           contentSize);

        // Return our fragment.
        const result = {
            inlineSize: inlineSize,
            blockSize: blockSize,
            childFragments: childFragments,
        }

        if (childBreakToken) {
            result.breakToken = {
                childBreakTokens: [childBreakToken],
            };
        }

        return result;
    }
});

<style>
.container {
  width: 50px;
  height: 50px;
}

.box {
  display: layout(box-edges);

  padding: 10%;
  border: solid 2px;
  overflow-y: scroll;
}
</style>

<div class="container">
  <div class="box"></div>
</div>

registerLayout('box-edges', class {
    *layout(space, children, styleMap, edges, breakToken) {
        edges.padding.inlineStart; // 5 (as 10% * 50px = 5px).
        edges.border.blockEnd; // 2
        edges.scrollbar.inlineEnd; // UA-dependent, may be 0 or >0 (e.g. 16).
        edges.all.block; // 14 (2 + 5 + 5 + 2).
    }
}

class LayoutEngine {
  // This function takes the root of the box-tree, a ConstraintSpace, and a
  // BreakToken to (if paginating for printing for example) and generates a
  // Fragment.
  layoutEntry(rootBox, rootPageConstraintSpace, breakToken) {
    return layoutFragment({
      box: rootBox,
      constraintSpace: rootPageConstraintSpace,
      breakToken: breakToken,
    });
  }

  // This function takes a FragmentRequest and calls the appropriate layout
  // algorithm to generate the a Fragment.
  layoutFragment(fragmentRequest) {
    const box = fragmentRequest.layoutChild;
    const algorithm = selectLayoutAlgorithmForBox(box);
    const fragmentRequestGenerator = algorithm.layout(
        fragmentRequest.constraintSpace,
        box.children,
        box.styleMap,
        fragmentRequest.breakToken);

    let nextFragmentRequest = fragmentRequestGenerator.next();

    while (!nextFragmentRequest.done) {
      // A user-agent may decide to perform layout to generate the fragments in
      // parallel on separate threads. This example performs them synchronously
      // in order.
      let fragments = nextFragmentRequest.value.map(layoutFragment);

      // A user-agent may decide to yield for other work (garbage collection for
      // example) before resuming this layout work. This example just performs
      // layout synchronously without any ability to yield.
      nextFragmentRequest = fragmentRequestGenerator.next(fragments);
    }

    return nextFragmentRequest.value; // Return the final Fragment.
  }
}