--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -120940,16 +120940,64 @@
       [
        "/css/css-layout-api/layout-child-ref.html",
        "=="
       ]
      ],
      {}
     ]
    ],
+   "css/css-layout-api/perform-child-layout-available-inline-size-htb-htb.https.html": [
+    [
+     "/css/css-layout-api/perform-child-layout-available-inline-size-htb-htb.https.html",
+     [
+      [
+       "/css/css-layout-api/layout-child-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/css-layout-api/perform-child-layout-available-inline-size-htb-vrl.https.html": [
+    [
+     "/css/css-layout-api/perform-child-layout-available-inline-size-htb-vrl.https.html",
+     [
+      [
+       "/css/css-layout-api/layout-child-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/css-layout-api/perform-child-layout-available-inline-size-vrl-htb.https.html": [
+    [
+     "/css/css-layout-api/perform-child-layout-available-inline-size-vrl-htb.https.html",
+     [
+      [
+       "/css/css-layout-api/layout-child-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/css-layout-api/perform-child-layout-available-inline-size-vrl-vrl.https.html": [
+    [
+     "/css/css-layout-api/perform-child-layout-available-inline-size-vrl-vrl.https.html",
+     [
+      [
+       "/css/css-layout-api/layout-child-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
    "css/css-layout-api/perform-child-layout-fixed-block-size-vrl.https.html": [
     [
      "/css/css-layout-api/perform-child-layout-fixed-block-size-vrl.https.html",
      [
       [
        "/css/css-layout-api/layout-child-ref.html",
        "=="
       ]
@@ -253468,17 +253516,17 @@
      {}
     ]
    ],
    "css/css-layout-api/support/constraints-fixed-inline-size.js": [
     [
      {}
     ]
    ],
-   "css/css-layout-api/support/layout-child-fixed-sizes-worklet.js": [
+   "css/css-layout-api/support/layout-child-sizes-worklet.js": [
     [
      {}
     ]
    ],
    "css/css-layout-api/support/layout-child-worklet.js": [
     [
      {}
     ]
@@ -514570,30 +514618,46 @@
   "css/css-layout-api/layout-child-ref.html": [
    "1688098230f9fb825bc73134dff15dcf5ff9782d",
    "support"
   ],
   "css/css-layout-api/layout-child-text.https.html": [
    "567ff67317cae9906e6d159dc232c41464a4e7c6",
    "reftest"
   ],
+  "css/css-layout-api/perform-child-layout-available-inline-size-htb-htb.https.html": [
+   "7db4f5c2bebe031f0689be2569ba4ca266535052",
+   "reftest"
+  ],
+  "css/css-layout-api/perform-child-layout-available-inline-size-htb-vrl.https.html": [
+   "f22cc9627b7b2ad797cc722f3d369355ffce4f60",
+   "reftest"
+  ],
+  "css/css-layout-api/perform-child-layout-available-inline-size-vrl-htb.https.html": [
+   "0e34d5b8b86aa6551e6e6a31eb086bd84b61c636",
+   "reftest"
+  ],
+  "css/css-layout-api/perform-child-layout-available-inline-size-vrl-vrl.https.html": [
+   "d619b57c395710bc2e133e05774c9a06bfd19749",
+   "reftest"
+  ],
   "css/css-layout-api/perform-child-layout-fixed-block-size-vrl.https.html": [
-   "341711737d74fb068bb3a2e348e47820c236fa49",
+   "907b9b1255516caab731555686e5c6b5517eb3f9",
    "reftest"
   ],
   "css/css-layout-api/perform-child-layout-fixed-block-size.https.html": [
-   "486fe671afaa9275bc6b32c49ca4c8143290f9be",
+   "3560b1f8249f945e1453e3e8e53745ef1941405f",
    "reftest"
   ],
   "css/css-layout-api/perform-child-layout-fixed-inline-size-vrl.https.html": [
-   "3c3b4c800af40a85eb9ddb588a07fc0d8ceec5cf",
+   "dfc48415ddbfecad7b382c4efe290b1b8da4ebac",
    "reftest"
   ],
   "css/css-layout-api/perform-child-layout-fixed-inline-size.https.html": [
-   "a25a85095781de557edde6dd02b82ee052642bf1",
+   "bae125f32f28d0cfa7db449cfb10437cb4df12a3",
    "reftest"
   ],
   "css/css-layout-api/position-fragment-htb-ltr.https.html": [
    "761ed3e46d6485b1208953c292015432da5f99e0",
    "reftest"
   ],
   "css/css-layout-api/position-fragment-htb-rtl.https.html": [
    "8a2684c25ef3603e498cf33d32dc8a2c4b4a50d5",
@@ -514634,18 +514698,18 @@
   "css/css-layout-api/style-map.https.html": [
    "361b3c82c37c0068d23ae23e96d8e9185d3765b0",
    "reftest"
   ],
   "css/css-layout-api/support/constraints-fixed-inline-size.js": [
    "ed0224a380c50a7e83d23a95be5a4348ce5bf706",
    "support"
   ],
-  "css/css-layout-api/support/layout-child-fixed-sizes-worklet.js": [
-   "5ddda72e3c9d077508622511e8685249c7803028",
+  "css/css-layout-api/support/layout-child-sizes-worklet.js": [
+   "3797af00861ae44369a90a0ae05b3a6e13a2ef54",
    "support"
   ],
   "css/css-layout-api/support/layout-child-worklet.js": [
    "87af0bfedbe9d4ea23e904edc5b22382a5d5d56c",
    "support"
   ],
   "css/css-layout-api/support/layout-position-child-worklet.js": [
    "7c05d553e6cba23d69bd40b9ad90e701440e9071",

new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/perform-child-layout-available-inline-size-htb-htb.https.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableinlinesize">
+<link rel="match" href="layout-child-ref.html">
+<meta name="assert" content="This test checks that setting the available inline size of children works as expected." />
+
+<style>
+.test {
+  writing-mode: horizontal-tb;
+  background: red;
+  margin: 10px;
+  width: 100px;
+}
+
+.child {
+  writing-mode: horizontal-tb;
+  visibility: hidden;
+  line-height: 0;
+
+  --available-inline-size: 20;
+}
+
+.inline {
+  display: inline-block;
+  height: 8px;
+}
+
+.inline-size-10 { width: 10px; }
+.inline-size-30 { width: 30px; }
+
+@supports (display: layout(test)) {
+  .test {
+    background: green;
+    display: layout(test);
+  }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+
+<div class="test">
+  <!-- As the inlines don't fit within 20px, we'll end up with two lines. -->
+  <div class="child" style="--inline-size-expected: 30; --block-size-expected: 16;">
+    <span class="inline inline-size-10"></span>
+    <span class="inline inline-size-30"></span>
+  </div>
+
+  <!-- The single inline doesn't take up the whole 20px, so will be shrink fitted. -->
+  <div class="child" style="--inline-size-expected: 10; --block-size-expected: 8;">
+    <span class="inline inline-size-10"></span>
+  </div>
+
+  <!-- Make sure the max-width property clamps the size. -->
+  <div class="child" style="max-width: 25px; --inline-size-expected: 25; --block-size-expected: 8;">
+    <span class="inline inline-size-30"></span>
+  </div>
+
+  <!-- Make sure the min-width property clamps the size. -->
+  <div class="child" style="min-width: 25px; --inline-size-expected: 25; --block-size-expected: 8;">
+    <span class="inline inline-size-10"></span>
+  </div>
+</div>
+
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'});
+</script>

new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/perform-child-layout-available-inline-size-htb-vrl.https.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableinlinesize">
+<link rel="match" href="layout-child-ref.html">
+<meta name="assert" content="This test checks that setting the available inline size of children works as expected." />
+
+<style>
+.test {
+  writing-mode: horizontal-tb;
+  background: red;
+  margin: 10px;
+  width: 100px;
+}
+
+.child {
+  writing-mode: vertical-rl;
+  visibility: hidden;
+  line-height: 0;
+
+  --available-block-size: 20;
+}
+
+.inline {
+  display: inline-block;
+  width: 8px;
+}
+
+.inline-size-10 { height: 10px; }
+.inline-size-30 { height: 30px; }
+
+@supports (display: layout(test)) {
+  .test {
+    background: green;
+    display: layout(test);
+  }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+
+<div class="test">
+  <!-- As the inlines don't fit within 20px, we'll end up with two lines. -->
+  <div class="child" style="--block-size-expected: 30; --inline-size-expected: 16;">
+    <span class="inline inline-size-10"></span>
+    <span class="inline inline-size-30"></span>
+  </div>
+
+  <!-- The single inline doesn't take up the whole 20px, so will be shrink fitted. -->
+  <div class="child" style="--block-size-expected: 10; --inline-size-expected: 8;">
+    <span class="inline inline-size-10"></span>
+  </div>
+
+  <!-- Make sure the max-height property clamps the size. -->
+  <div class="child" style="max-height: 25px; --block-size-expected: 25; --inline-size-expected: 8;">
+    <span class="inline inline-size-30"></span>
+  </div>
+
+  <!-- Make sure the min-height property clamps the size. -->
+  <div class="child" style="min-height: 25px; --block-size-expected: 25; --inline-size-expected: 8;">
+    <span class="inline inline-size-10"></span>
+  </div>
+</div>
+
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'});
+</script>

new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/perform-child-layout-available-inline-size-vrl-htb.https.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableinlinesize">
+<link rel="match" href="layout-child-ref.html">
+<meta name="assert" content="This test checks that setting the available inline size of children works as expected." />
+
+<style>
+.test {
+  writing-mode: vertical-rl;
+  background: red;
+  margin: 10px;
+  height: 100px;
+}
+
+.child {
+  writing-mode: horizontal-tb;
+  visibility: hidden;
+  line-height: 0;
+
+  --available-block-size: 20;
+}
+
+.inline {
+  display: inline-block;
+  height: 8px;
+}
+
+.inline-size-10 { width: 10px; }
+.inline-size-30 { width: 30px; }
+
+@supports (display: layout(test)) {
+  .test {
+    background: green;
+    display: layout(test);
+  }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+
+<div class="test">
+  <!-- As the inlines don't fit within 20px, we'll end up with two lines. -->
+  <div class="child" style="--block-size-expected: 30; --inline-size-expected: 16;">
+    <span class="inline inline-size-10"></span>
+    <span class="inline inline-size-30"></span>
+  </div>
+
+  <!-- The single inline doesn't take up the whole 20px, so will be shrink fitted. -->
+  <div class="child" style="--block-size-expected: 10; --inline-size-expected: 8;">
+    <span class="inline inline-size-10"></span>
+  </div>
+
+  <!-- Make sure the max-width property clamps the size. -->
+  <div class="child" style="max-width: 25px; --block-size-expected: 25; --inline-size-expected: 8;">
+    <span class="inline inline-size-30"></span>
+  </div>
+
+  <!-- Make sure the min-width property clamps the size. -->
+  <div class="child" style="min-width: 25px; --block-size-expected: 25; --inline-size-expected: 8;">
+    <span class="inline inline-size-10"></span>
+  </div>
+</div>
+
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'});
+</script>

new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/perform-child-layout-available-inline-size-vrl-vrl.https.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableinlinesize">
+<link rel="match" href="layout-child-ref.html">
+<meta name="assert" content="This test checks that setting the available inline size of children works as expected." />
+
+<style>
+.test {
+  writing-mode: vertical-rl;
+  background: red;
+  margin: 10px;
+  height: 100px;
+}
+
+.child {
+  writing-mode: vertical-rl;
+  visibility: hidden;
+  line-height: 0;
+
+  --available-inline-size: 20;
+}
+
+.inline {
+  display: inline-block;
+  width: 8px;
+}
+
+.inline-size-10 { height: 10px; }
+.inline-size-30 { height: 30px; }
+
+@supports (display: layout(test)) {
+  .test {
+    background: green;
+    display: layout(test);
+  }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+
+<div class="test">
+  <!-- As the inlines don't fit within 20px, we'll end up with two lines. -->
+  <div class="child" style="--inline-size-expected: 30; --block-size-expected: 16;">
+    <span class="inline inline-size-10"></span>
+    <span class="inline inline-size-30"></span>
+  </div>
+
+  <!-- The single inline doesn't take up the whole 20px, so will be shrink fitted. -->
+  <div class="child" style="--inline-size-expected: 10; --block-size-expected: 8;">
+    <span class="inline inline-size-10"></span>
+  </div>
+
+  <!-- Make sure the max-height property clamps the size. -->
+  <div class="child" style="max-height: 25px; --inline-size-expected: 25; --block-size-expected: 8;">
+    <span class="inline inline-size-30"></span>
+  </div>
+
+  <!-- Make sure the min-height property clamps the size. -->
+  <div class="child" style="min-height: 25px; --inline-size-expected: 25; --block-size-expected: 8;">
+    <span class="inline inline-size-10"></span>
+  </div>
+</div>
+
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'});
+</script>

--- a/testing/web-platform/tests/css/css-layout-api/perform-child-layout-fixed-block-size-vrl.https.html
+++ b/testing/web-platform/tests/css/css-layout-api/perform-child-layout-fixed-block-size-vrl.https.html
@@ -52,10 +52,10 @@
   <!-- min/max-width should have no effect, fixedBlockSize wins. -->
   <div class="htb" style="max-width: 5px;"></div>
   <div class="vrl" style="max-width: 5px;"></div>
   <div class="htb" style="min-width: 15px;"></div>
   <div class="vrl" style="min-width: 15px;"></div>
 </div>
 
 <script>
-importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-fixed-sizes-worklet.js'});
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'});
 </script>

--- a/testing/web-platform/tests/css/css-layout-api/perform-child-layout-fixed-block-size.https.html
+++ b/testing/web-platform/tests/css/css-layout-api/perform-child-layout-fixed-block-size.https.html
@@ -51,10 +51,10 @@
   <!-- min/max-height should have no effect, fixedBlockSize wins. -->
   <div class="htb" style="max-height: 5px;"></div>
   <div class="vrl" style="max-height: 5px;"></div>
   <div class="htb" style="min-height: 15px;"></div>
   <div class="vrl" style="min-height: 15px;"></div>
 </div>
 
 <script>
-importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-fixed-sizes-worklet.js'});
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'});
 </script>

--- a/testing/web-platform/tests/css/css-layout-api/perform-child-layout-fixed-inline-size-vrl.https.html
+++ b/testing/web-platform/tests/css/css-layout-api/perform-child-layout-fixed-inline-size-vrl.https.html
@@ -52,10 +52,10 @@
   <!-- min/max-height should have no effect, fixedInlineSize wins. -->
   <div class="htb" style="max-height: 5px;"></div>
   <div class="vrl" style="max-height: 5px;"></div>
   <div class="htb" style="min-height: 15px;"></div>
   <div class="vrl" style="min-height: 15px;"></div>
 </div>
 
 <script>
-importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-fixed-sizes-worklet.js'});
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'});
 </script>

--- a/testing/web-platform/tests/css/css-layout-api/perform-child-layout-fixed-inline-size.https.html
+++ b/testing/web-platform/tests/css/css-layout-api/perform-child-layout-fixed-inline-size.https.html
@@ -51,10 +51,10 @@
   <!-- min/max-width should have no effect, fixedInlineSize wins. -->
   <div class="htb" style="max-width: 5px;"></div>
   <div class="vrl" style="max-width: 5px;"></div>
   <div class="htb" style="min-width: 15px;"></div>
   <div class="vrl" style="min-width: 15px;"></div>
 </div>
 
 <script>
-importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-fixed-sizes-worklet.js'});
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'});
 </script>

deleted file mode 100644
--- a/testing/web-platform/tests/css/css-layout-api/support/layout-child-fixed-sizes-worklet.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import {areArraysEqual} from '/common/arrays.js';
-
-function parseNumber(value) {
-  const num = parseInt(value.toString());
-  if (isNaN(num)) return undefined;
-  return num;
-}
-
-registerLayout('test', class {
-  static get childInputProperties() {
-    return [
-      '--fixed-inline-size',
-      '--fixed-block-size',
-      '--inline-size-expected',
-      '--block-size-expected'
-    ];
-  }
-
-  *intrinsicSizes() {}
-  *layout(children, edges, constraints, styleMap) {
-    const childFragments = yield children.map((child) => {
-      const childConstraints = {};
-      const fixedInlineSize = parseNumber(child.styleMap.get('--fixed-inline-size'));
-      const fixedBlockSize = parseNumber(child.styleMap.get('--fixed-block-size'));
-      return child.layoutNextFragment({fixedInlineSize, fixedBlockSize});
-    });
-
-    const actual = childFragments.map((childFragment) => {
-      return {
-        inlineSize: childFragment.inlineSize,
-        blockSize: childFragment.blockSize,
-      };
-    });
-
-    const expected = children.map((child) => {
-      return {
-        inlineSize: parseInt(child.styleMap.get('--inline-size-expected').toString()),
-        blockSize: parseInt(child.styleMap.get('--block-size-expected').toString()),
-      };
-    });
-
-    const equalityFunc = (a, b) => {
-      return a.inlineSize == b.inlineSize && a.blockSize == b.blockSize;
-    };
-
-    if (!areArraysEqual(expected, actual, equalityFunc)) {
-      return {autoBlockSize: 0, childFragments};
-    }
-
-    return {autoBlockSize: 100, childFragments};
-  }
-});

new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/support/layout-child-sizes-worklet.js
@@ -0,0 +1,61 @@
+import {areArraysEqual} from '/common/arrays.js';
+
+function parseNumber(value) {
+  const num = parseInt(value.toString());
+  if (isNaN(num)) return undefined;
+  return num;
+}
+
+registerLayout('test', class {
+  static get childInputProperties() {
+    return [
+      '--available-inline-size',
+      '--available-block-size',
+      '--fixed-inline-size',
+      '--fixed-block-size',
+      '--inline-size-expected',
+      '--block-size-expected'
+    ];
+  }
+
+  *intrinsicSizes() {}
+  *layout(children, edges, constraints, styleMap) {
+    const childFragments = yield children.map((child) => {
+      const childConstraints = {};
+      const availableInlineSize = parseNumber(child.styleMap.get('--available-inline-size'));
+      const availableBlockSize = parseNumber(child.styleMap.get('--available-block-size'));
+      const fixedInlineSize = parseNumber(child.styleMap.get('--fixed-inline-size'));
+      const fixedBlockSize = parseNumber(child.styleMap.get('--fixed-block-size'));
+      return child.layoutNextFragment({
+        availableInlineSize,
+        availableBlockSize,
+        fixedInlineSize,
+        fixedBlockSize
+      });
+    });
+
+    const actual = childFragments.map((childFragment) => {
+      return {
+        inlineSize: childFragment.inlineSize,
+        blockSize: childFragment.blockSize,
+      };
+    });
+
+    const expected = children.map((child) => {
+      return {
+        inlineSize: parseInt(child.styleMap.get('--inline-size-expected').toString()),
+        blockSize: parseInt(child.styleMap.get('--block-size-expected').toString()),
+      };
+    });
+
+    const equalityFunc = (a, b) => {
+      return a.inlineSize == b.inlineSize && a.blockSize == b.blockSize;
+    };
+
+    if (!areArraysEqual(expected, actual, equalityFunc)) {
+      return {autoBlockSize: 0, childFragments};
+    }
+
+    return {autoBlockSize: 100, childFragments};
+  }
+});