registerLayout('block-like', class extends Layout {
    static blockifyChildren = true;
    static inputProperties = super.inputProperties;

    *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 maxChildInlineSize = 0;
        let blockOffset = edges.all.blockStart;

        for (let child of children) {
            const fragment = yield child.layoutNextFragment(childConstraintSpace);

            // 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);

            maxChildInlineSize =
                Math.max(maxChildInlineSize, childFragments.inlineSize);
            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 {
    *layout(space, children, styleMap, edges, breakToken) {
        const inlineSize = resolveInlineSize(space, styleMap);

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

        const unconstrainedSizes = [];
        const childConstraintSpace = new ConstraintSpace({
            inlineSize: availableInlineSize,
            blockSize: availableBlockSize,
        });
        let totalSize = 0;

        // Calculate the unconstrained size for each child.
        for (let child of children) {
            const fragment = yield child.layoutNextFragment(childConstraintSpace);
            unconstrainedSizes.push(fragment.inlineSize);
            totalSize += fragment.inlineSize;
        }

        // Distribute spare space between children.
        const remainingSpace = Math.max(0, inlineSize - totalSize);
        const extraSpace = remainingSpace / children.length;
        const childFragments = [];
        let inlineOffset = 0;
        let maxChildBlockSize = 0;
        for (let i = 0; i < children.length; i++) {
            let fragment = yield child.layoutNextFragment(new ConstraintSpace({
                inlineSize: unconstrainedSizes[i] + extraSpace,
                inlineSizeFixed: true,
                blockSize: availableBlockSize
            }));

            fragment.inlineOffset = inlineOffset;
            inlineOffset += fragment.inlineSize;

            maxChildBlockSize = Math.max(maxChildBlockSize, fragment.blockSize);

            childFragments.push(fragment);
        }

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

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

registerLayout('basic-inline', class extends Layout {
    static inputProperties = super.inputProperties;

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

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

        const childFragments = [];

        let currentLine = [];
        let usedInlineSize = 0;
        let maxBaseline = 0;

        let lineOffset = 0;
        let maxLineBlockSize = 0;

        // Just a small little function which will update the above variables.
        const nextLine = function() {
            currentLine = [];
            usedInlineSize = 0;
            maxBaseline = 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;

            if (fragment.alignmentBaseline > maxBaseline) {
                maxBaseline = fragment.alignmentBaseline;
            }

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

                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(constraintSpace,
                                           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 extends Layout {
    *layout(constraintSpace, 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).
    }
}