From a2dd8db26cf47cf7c448656aefddef865bcb4f09 Mon Sep 17 00:00:00 2001
From: Guillaume Grossetie <ggrossetie@yuzutech.fr>
Date: Mon, 30 Dec 2024 10:50:52 +0100
Subject: [PATCH] [css-layout-api][explainer] add mandatory intrinsicSizes
 function

Also, fix the code sample where the constraints variable where redefined.
---
 css-layout-api/EXPLAINER.md | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/css-layout-api/EXPLAINER.md b/css-layout-api/EXPLAINER.md
index 6aaf3107..257d5db1 100644
--- a/css-layout-api/EXPLAINER.md
+++ b/css-layout-api/EXPLAINER.md
@@ -66,6 +66,7 @@ below. You should read the code below with its explanatory section.
 
 ```js
 registerLayout('centering', class {
+  async intrinsicSizes() {}
   async layout(children, edges, constraints, styleMap) {
     // (1) Determine our (inner) available size.
     const availableInlineSize = constraints.fixedInlineSize - edges.inline;
@@ -229,6 +230,7 @@ registerLayout('style-read', class {
   static inputProperties = ['--a-number'];
   static childInputProperties = ['--a-string'];
 
+  async intrinsicSizes() {}
   async layout(children, edges, constraints, styleMap) {
     // We can read our own style:
     styleMap.get('--a-number').value === 42;
@@ -307,13 +309,14 @@ We pass the `BreakToken` to add back into the `layout()` call in order to produc
 registerLayout('basic-inline', class {
   static layoutOptions = {childDisplay: 'normal'};
 
+  async intrinsicSizes() {}
   async layout(children, edges, constraints, styleMap) {
     // Determine our (inner) available size.
     const availableInlineSize = constraints.fixedInlineSize - edges.inline;
     const availableBlockSize = constraints.fixedBlockSize !== null ?
         constraints.fixedBlockSize - edges.block : null;
 
-    const constraints = {
+    const childConstraints = {
       availableInlineSize,
       availableBlockSize,
     };
@@ -327,10 +330,10 @@ registerLayout('basic-inline', class {
       // Layout the next line, the produced line will try and respect the
       // availableInlineSize given, you could use this to achieve a column
       // effect or similar.
-      const fragment = await child.layoutNextFragment(constraints, childBreakToken);
+      const fragment = await child.layoutNextFragment(childConstraints, childBreakToken);
       childFragments.push(fragment);
 
-      // Position the fragment, note we coulld do something special here, like
+      // Position the fragment, note we could do something special here, like
       // placing all the lines on a "rythimic grid", or similar.
       fragment.inlineOffset = edges.inlineStart;
       fragment.blockOffset = blockOffset;
@@ -409,6 +412,7 @@ We can make our children fragment by passing them a constraint space with a frag
 
 ```js
 registerLayout('special-multi-col', class {
+  async intrinsicSizes() {}
   async layout(children, edges, constraints, styleMap, breakToken) {
     for (let child of children) {
       // Create a constraint space with a fragmentation line.
@@ -435,6 +439,7 @@ We can also allow our own layout to be fragmented by respecting the fragmentatio
 
 ```js
 registerLayout('basic-inline', class {
+  async intrinsicSizes() {}
   async layout(children, edges, constraints, styleMap, breakToken) {
 
     // We can check if we need to fragment in the block direction.