if ('layoutWorklet' in CSS) {
      console.log('CSS Layout API available!');
    }
    

registerLayout('example-layout-child', class {
  static get childInputProperties() { return ['--foo']; }

  async layout(children, edges, constraints, styleMap) {

    // An array of LayoutChildren is passed into both the layout function,
    // and intrinsic sizes function below.
    const child = children[0];

    // You can query the any properties listed in "childInputProperties".
    const fooValue = child.styleMap.get('--foo');

    // And perform layout!
    const fragment = await child.layoutNextFragment({});

  }

  async intrinsicSizes(children, edges, styleMap) {

    // Or request the intrinsic size!
    const childIntrinsicSize = await children[0].intrinsicSizes();

  }
});

registerLayout('example-layout-fragment', class {
  async layout(children, edges, constraints, styleMap) {

    // You must perform layout to generate a fragment.
    const fragment = await child.layoutNextFragment({});

    // You can query the size of the fragment produced:
    console.log(fragment.inlineSize);
    console.log(fragment.blockSize);

    // You can set the position of the fragment, e.g. this will set it to the
    // top-left corner:
    fragment.inlineOffset = edges.inlineStart;
    fragment.blockOffset = edges.blockStart;

    // Data may be passed from the child layout:
    console.log(fragment.data);

    // If the child fragmented, you can use the breakToken to produce the next
    // fragment in the chain.
    const nextFragment = await child.layoutNextFragment({}, fragment.breakToken);
  }
});

<style>
.child-0 {
  width: 380px;
  border: solid 10px;
}

.child-1 {
  border: solid 5px;
}

.box {
  display: layout(intrinsic-sizes-example);
  font: 25px/1 Ahem;
}
</style>

<div class="box">
  <div class="child-0"></div>
  <div class="child-1">XXX XXXX</div>
</div>

registerLayout('intrinsic-sizes-example', class {
    async intrinsicSizes(children, edges, styleMap) {
      const childrenSizes = await Promise.all(children.map((child) => {
          return child.intrinsicSizes();
      }));

      childrenSizes[0].minContentSize; // 400, (380+10+10) child has a fixed size.
      childrenSizes[0].maxContentSize; // 400, (380+10+10) child has a fixed size.

      childrenSizes[1].minContentSize; // 100, size of "XXXX".
      childrenSizes[1].maxContentSize; // 200, size of "XXX XXXX".
    }

    layout() {}
});

// The class below is registered with a "block-like" sizingMode, and can use the fixedInlineSize,
// fixedBlockSize attributes.
registerLayout('layout-constraints-example', class {
    async layout(children, edges, constraints, styleMap) {

        // Calculate the available size.
        const availableInlineSize = constraints.fixedInlineSize - edges.inline;
        const availableBlockSize = constraints.fixedBlockSize ?
            constraints.fixedBlockSize - edges.inline : null;

        // Web developers should resolve any percentages against the percentage sizes.
        const value = constraints.percentageInlineSize * 0.5;

    }
});

// The class below is registered with a "block-like" sizingMode, and can use the
// fixedInlineSize, fixedBlockSize attributes.
registerLayout('child-layout-constraints-example', class {
    async layout(children, edges, constraints, styleMap) {

        // The call below gives the child an "available" space. It will try and
        // fit within this.
        const fragment = children[0].layoutNextFragment({
            availableInlineSize: 100,
            availableBlockSize: 200,
        });

        // The call below gives the child a "fixed" size, it will be forced to
        // this size ignoring any style set.
        const fragment = children[0].layoutNextFragment({
            fixedInlineSize: 20,
            fixedBlockSize: 30,
        });

    }
});

<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 {
    async layout(children, edges, constraints, styleMap, breakToken) {
        edges.inlineStart; // 2 + 5 (as 10% * 50px = 5px).
        edges.blockEnd; // 7 (2 + 5)
        edges.inlineEnd; // UA-dependent, due to scrollbar.
                         //  Could be 2 + 5 + 0 or 2 + 5 + 16 for example.
        edges.block; // 14 (2 + 5 + 5 + 2).
    }
}

registerLayout('feature-detection', class {
    async layout(children, edges, constraints, styleMap, breakToken) {

      let result;
      try {
        result = new FragmentResult({
          childFragments: [],
          autoBlockSize: 100
        });
      } catch (e) {
        // The above call may throw, if the dictionary was just returned, it
        //  would fallback to flow layout.
      }

      // The web developer can test what size the fragment will be.
      result.blockSize;

      // Instead of returning the dictionary, we can just return this object.
      return result;
    }
}

registerLayout('block-like', class {
    async intrinsicSizes(children, edges, styleMap) {
      const childrenSizes = await Promise.all(children.map((child) => {
          return child.intrinsicSizes();
      }));

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

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

      return {maxContentSize, minContentSize};
    }

    async layout(children, edges, constraints, styleMap) {
        // Determine our (inner) available size.
        const availableInlineSize = constraints.fixedInlineSize - edges.inline;
        const availableBlockSize = constraints.fixedBlockSize ?
            constraints.fixedBlockSize - edges.block : null;

        const childFragments = [];
        const childConstraints = { availableInlineSize, availableBlockSize };

        const childFragments = await Promise.all(children.map((child) => {
            return child.layoutNextFragment(childConstraints);
        }));

        let blockOffset = edges.blockStart;
        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.inlineStart,
                (availableInlineSize - fragment.inlineSize) / 2);

            blockOffset += fragment.blockSize;
        }

        const autoBlockSize = blockOffset + edges.blockEnd;

        return {
            autoBlockSize,
            childFragments,
        };
    }
});

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

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

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

      return {maxContentSize, minContentSize};
    }

    async layout(children, edges, constraints, styleMap) {
        // Determine our (inner) available size.
        const availableInlineSize =
            constraints.fixedInlineSize - edges.inline;
        const availableBlockSize = constraints.fixedBlockSize ?
            constraints.fixedBlockSize - edges.block : null;

        const childConstraints = { availableInlineSize, availableBlockSize };

        const unconstrainedChildFragments = await Promise.all(children.map((child) => {
            return child.layoutNextFragment(childConstraints);
        }));

        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 = await Promise.all(children.map((child, i) => {
            return child.layoutNextFragment({
                fixedInlineSize: unconstrainedSizes[i] + extraSpace,
                availableBlockSize
            });
        }));

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

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

        return {
            autoBlockSize: maxChildBlockSize + edges.block,
            childFragments,
        };
    }
});

registerLayout('indent-lines', class {
    static layoutOptions = {childDisplay: 'normal'};
    static inputProperties = ['--indent', '--indent-lines'];

    async layout(children, edges, constraints, styleMap, breakToken) {
        // Determine our (inner) available size.
        const availableInlineSize =
            constraints.fixedInlineSize - edges.inline;
        const availableBlockSize = constraints.fixedBlockSize ?
            constraints.fixedBlockSize - edges.block : null;

        // Detrermine the number of lines to indent, and the indent amount.
        const indent = resolveLength(constraints, styleMap.get('--indent'));
        let lines = styleMap.get('--indent-lines').value;

        const childFragments = [];

        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 blockOffset = edges.blockStart;
        let child = children.shift();
        while (child) {
            const shouldIndent = lines-- > 0;

            // Adjust the inline size for the indent.
            const childAvailableInlineSize = shouldIndent ?
                availableInlineSize - indent : availableInlineSize;

            const childConstraints = {
                availableInlineSize: childAvailableInlineSize,
                availableBlockSize,
                percentageInlineSize: availableInlineSize,
                blockFragmentationType: constraints.blockFragmentationType,
            };

            const fragment = await child.layoutNextFragment(childConstraints,
                                                            childBreakToken);
            childFragments.push(fragment);

            // Position the fragment.
            fragment.inlineOffset = shouldIndent ?
                edges.inlineStart + indent : edges.inlineStart;
            fragment.blockOffset = blockOffset;
            blockOffset += fragment.blockSize;

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

            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;
            }
        }

        const autoBlockSize = blockOffset + edges.blockEnd;

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

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

        return result;
    }
});