Bug 1465661 [wpt PR 11260] - [css-layout-api] Adds passing of LayoutConstraints#fixedBlockSize., a=testonly
authorIan Kilpatrick <ikilpatrick@chromium.org>
Sun, 17 Jun 2018 15:18:33 +0000
changeset 424183 e7eb49ccf4483669027e6ed9e98d446611a30a16
parent 424182 3331005343208f40d6e43eedbadb091f6f5ff3fd
child 424184 376d962502a00e85a42aea7605e6d2d272933a6d
push id104753
push userarchaeopteryx@coole-files.de
push dateThu, 28 Jun 2018 12:34:45 +0000
treeherdermozilla-inbound@fe94281f7c25 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1465661, 11260, 726125, 1073636, 563668
milestone63.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1465661 [wpt PR 11260] - [css-layout-api] Adds passing of LayoutConstraints#fixedBlockSize., a=testonly Automatic update from web-platform-tests[css-layout-api] Adds passing of LayoutConstraints#fixedBlockSize. This passes a fixed block size constraint into the layout function if: - It has a fixed/percentage/calc block-size. - The abs-pos constraints will make a fixed block size. - It is a quirky body/document (which stretches to fit the viewport). - It has a fixed block-size constraint from a parent layout. The tests all behave the same way. The layout which we are interested in testing looks at the received fixedBlockSize, and if correct performs layout on the only child with a 100x100 fixed size. Bug: 726125 Change-Id: I4eec86a843d58a791c9df071e16b71bf2f5d80ee Reviewed-on: https://chromium-review.googlesource.com/1073636 Reviewed-by: Morten Stenshorne <mstensho@chromium.org> Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org> Cr-Commit-Position: refs/heads/master@{#563668} -- wpt-commits: ff4d0553835102b2f68c7bf8dafb205bd3cacb89 wpt-pr: 11260
testing/web-platform/meta/MANIFEST.json
testing/web-platform/tests/css/css-layout-api/constraints-fixed-block-size-absolute-left-right-vrl.https.html
testing/web-platform/tests/css/css-layout-api/constraints-fixed-block-size-absolute-none.https.html
testing/web-platform/tests/css/css-layout-api/constraints-fixed-block-size-absolute-top-bottom.https.html
testing/web-platform/tests/css/css-layout-api/constraints-fixed-block-size-block-none-vrl.https.html
testing/web-platform/tests/css/css-layout-api/constraints-fixed-block-size-block-none.https.html
testing/web-platform/tests/css/css-layout-api/constraints-fixed-block-size-fixed-max.https.html
testing/web-platform/tests/css/css-layout-api/constraints-fixed-block-size-fixed-min.https.html
testing/web-platform/tests/css/css-layout-api/constraints-fixed-block-size-fixed-vrl.https.html
testing/web-platform/tests/css/css-layout-api/constraints-fixed-block-size-fixed.https.html
testing/web-platform/tests/css/css-layout-api/constraints-fixed-block-size-flex-basis-vrl.https.html
testing/web-platform/tests/css/css-layout-api/constraints-fixed-block-size-flex-column-basis.https.html
testing/web-platform/tests/css/css-layout-api/constraints-fixed-block-size-flex-column-grow.https.html
testing/web-platform/tests/css/css-layout-api/constraints-fixed-block-size-flex-column-none.https.html
testing/web-platform/tests/css/css-layout-api/constraints-fixed-block-size-flex-column-stretch-vrl.https.html
testing/web-platform/tests/css/css-layout-api/constraints-fixed-block-size-flex-grow-vrl.https.html
testing/web-platform/tests/css/css-layout-api/constraints-fixed-block-size-flex-none.https.html
testing/web-platform/tests/css/css-layout-api/constraints-fixed-block-size-flex-percentage-indefinite.https.html
testing/web-platform/tests/css/css-layout-api/constraints-fixed-block-size-flex-stretch-max.https.html
testing/web-platform/tests/css/css-layout-api/constraints-fixed-block-size-flex-stretch.https.html
testing/web-platform/tests/css/css-layout-api/constraints-fixed-block-size-grid-none.https.html
testing/web-platform/tests/css/css-layout-api/constraints-fixed-block-size-grid-stretch-max.https.html
testing/web-platform/tests/css/css-layout-api/constraints-fixed-block-size-grid-stretch.https.html
testing/web-platform/tests/css/css-layout-api/constraints-fixed-block-size-grid-vrl.https.html
testing/web-platform/tests/css/css-layout-api/constraints-fixed-block-size-percentage-indefinite.https.html
testing/web-platform/tests/css/css-layout-api/constraints-fixed-block-size-percentage-vrl.https.html
testing/web-platform/tests/css/css-layout-api/constraints-fixed-block-size-percentage.https.html
testing/web-platform/tests/css/css-layout-api/constraints-fixed-block-size-quirky-body.https.html
testing/web-platform/tests/css/css-layout-api/support/constraints-fixed-block-size-quirky-body-iframe.html
testing/web-platform/tests/css/css-layout-api/support/constraints-fixed-block-size.js
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -120934,16 +120934,340 @@
       [
        "/css/css-layout-api/green-square-ref.html",
        "=="
       ]
      ],
      {}
     ]
    ],
+   "css/css-layout-api/constraints-fixed-block-size-absolute-left-right-vrl.https.html": [
+    [
+     "/css/css-layout-api/constraints-fixed-block-size-absolute-left-right-vrl.https.html",
+     [
+      [
+       "/css/css-layout-api/green-square-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/css-layout-api/constraints-fixed-block-size-absolute-none.https.html": [
+    [
+     "/css/css-layout-api/constraints-fixed-block-size-absolute-none.https.html",
+     [
+      [
+       "/css/css-layout-api/green-square-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/css-layout-api/constraints-fixed-block-size-absolute-top-bottom.https.html": [
+    [
+     "/css/css-layout-api/constraints-fixed-block-size-absolute-top-bottom.https.html",
+     [
+      [
+       "/css/css-layout-api/green-square-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/css-layout-api/constraints-fixed-block-size-block-none-vrl.https.html": [
+    [
+     "/css/css-layout-api/constraints-fixed-block-size-block-none-vrl.https.html",
+     [
+      [
+       "/css/css-layout-api/green-square-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/css-layout-api/constraints-fixed-block-size-block-none.https.html": [
+    [
+     "/css/css-layout-api/constraints-fixed-block-size-block-none.https.html",
+     [
+      [
+       "/css/css-layout-api/green-square-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/css-layout-api/constraints-fixed-block-size-fixed-max.https.html": [
+    [
+     "/css/css-layout-api/constraints-fixed-block-size-fixed-max.https.html",
+     [
+      [
+       "/css/css-layout-api/green-square-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/css-layout-api/constraints-fixed-block-size-fixed-min.https.html": [
+    [
+     "/css/css-layout-api/constraints-fixed-block-size-fixed-min.https.html",
+     [
+      [
+       "/css/css-layout-api/green-square-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/css-layout-api/constraints-fixed-block-size-fixed-vrl.https.html": [
+    [
+     "/css/css-layout-api/constraints-fixed-block-size-fixed-vrl.https.html",
+     [
+      [
+       "/css/css-layout-api/green-square-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/css-layout-api/constraints-fixed-block-size-fixed.https.html": [
+    [
+     "/css/css-layout-api/constraints-fixed-block-size-fixed.https.html",
+     [
+      [
+       "/css/css-layout-api/green-square-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/css-layout-api/constraints-fixed-block-size-flex-basis-vrl.https.html": [
+    [
+     "/css/css-layout-api/constraints-fixed-block-size-flex-basis-vrl.https.html",
+     [
+      [
+       "/css/css-layout-api/green-square-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/css-layout-api/constraints-fixed-block-size-flex-column-basis.https.html": [
+    [
+     "/css/css-layout-api/constraints-fixed-block-size-flex-column-basis.https.html",
+     [
+      [
+       "/css/css-layout-api/green-square-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/css-layout-api/constraints-fixed-block-size-flex-column-grow.https.html": [
+    [
+     "/css/css-layout-api/constraints-fixed-block-size-flex-column-grow.https.html",
+     [
+      [
+       "/css/css-layout-api/green-square-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/css-layout-api/constraints-fixed-block-size-flex-column-none.https.html": [
+    [
+     "/css/css-layout-api/constraints-fixed-block-size-flex-column-none.https.html",
+     [
+      [
+       "/css/css-layout-api/green-square-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/css-layout-api/constraints-fixed-block-size-flex-column-stretch-vrl.https.html": [
+    [
+     "/css/css-layout-api/constraints-fixed-block-size-flex-column-stretch-vrl.https.html",
+     [
+      [
+       "/css/css-layout-api/green-square-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/css-layout-api/constraints-fixed-block-size-flex-grow-vrl.https.html": [
+    [
+     "/css/css-layout-api/constraints-fixed-block-size-flex-grow-vrl.https.html",
+     [
+      [
+       "/css/css-layout-api/green-square-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/css-layout-api/constraints-fixed-block-size-flex-none.https.html": [
+    [
+     "/css/css-layout-api/constraints-fixed-block-size-flex-none.https.html",
+     [
+      [
+       "/css/css-layout-api/green-square-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/css-layout-api/constraints-fixed-block-size-flex-percentage-indefinite.https.html": [
+    [
+     "/css/css-layout-api/constraints-fixed-block-size-flex-percentage-indefinite.https.html",
+     [
+      [
+       "/css/css-layout-api/green-square-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/css-layout-api/constraints-fixed-block-size-flex-stretch-max.https.html": [
+    [
+     "/css/css-layout-api/constraints-fixed-block-size-flex-stretch-max.https.html",
+     [
+      [
+       "/css/css-layout-api/green-square-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/css-layout-api/constraints-fixed-block-size-flex-stretch.https.html": [
+    [
+     "/css/css-layout-api/constraints-fixed-block-size-flex-stretch.https.html",
+     [
+      [
+       "/css/css-layout-api/green-square-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/css-layout-api/constraints-fixed-block-size-grid-none.https.html": [
+    [
+     "/css/css-layout-api/constraints-fixed-block-size-grid-none.https.html",
+     [
+      [
+       "/css/css-layout-api/green-square-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/css-layout-api/constraints-fixed-block-size-grid-stretch-max.https.html": [
+    [
+     "/css/css-layout-api/constraints-fixed-block-size-grid-stretch-max.https.html",
+     [
+      [
+       "/css/css-layout-api/green-square-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/css-layout-api/constraints-fixed-block-size-grid-stretch.https.html": [
+    [
+     "/css/css-layout-api/constraints-fixed-block-size-grid-stretch.https.html",
+     [
+      [
+       "/css/css-layout-api/green-square-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/css-layout-api/constraints-fixed-block-size-grid-vrl.https.html": [
+    [
+     "/css/css-layout-api/constraints-fixed-block-size-grid-vrl.https.html",
+     [
+      [
+       "/css/css-layout-api/green-square-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/css-layout-api/constraints-fixed-block-size-percentage-indefinite.https.html": [
+    [
+     "/css/css-layout-api/constraints-fixed-block-size-percentage-indefinite.https.html",
+     [
+      [
+       "/css/css-layout-api/green-square-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/css-layout-api/constraints-fixed-block-size-percentage-vrl.https.html": [
+    [
+     "/css/css-layout-api/constraints-fixed-block-size-percentage-vrl.https.html",
+     [
+      [
+       "/css/css-layout-api/green-square-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/css-layout-api/constraints-fixed-block-size-percentage.https.html": [
+    [
+     "/css/css-layout-api/constraints-fixed-block-size-percentage.https.html",
+     [
+      [
+       "/css/css-layout-api/green-square-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/css-layout-api/constraints-fixed-block-size-quirky-body.https.html": [
+    [
+     "/css/css-layout-api/constraints-fixed-block-size-quirky-body.https.html",
+     [
+      [
+       "/css/css-layout-api/green-square-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
    "css/css-layout-api/constraints-fixed-inline-size-absolute-left-right.https.html": [
     [
      "/css/css-layout-api/constraints-fixed-inline-size-absolute-left-right.https.html",
      [
       [
        "/css/css-layout-api/constraints-fixed-inline-size-ref.html",
        "=="
       ]
@@ -251113,16 +251437,26 @@
      {}
     ]
    ],
    "css/css-layout-api/style-map-ref.html": [
     [
      {}
     ]
    ],
+   "css/css-layout-api/support/constraints-fixed-block-size-quirky-body-iframe.html": [
+    [
+     {}
+    ]
+   ],
+   "css/css-layout-api/support/constraints-fixed-block-size.js": [
+    [
+     {}
+    ]
+   ],
    "css/css-layout-api/support/constraints-fixed-inline-size.js": [
     [
      {}
     ]
    ],
    "css/css-layout-api/support/layout-child-sizes-worklet.js": [
     [
      {}
@@ -517259,16 +517593,124 @@
   "css/css-layout-api/constraints-data-sab-failure.https.html": [
    "ce21d5ca8c3059f7f1a6981bda3ff37802cea27d",
    "reftest"
   ],
   "css/css-layout-api/constraints-data.https.html": [
    "371958d97ba951172a283a653f2064def1327a32",
    "reftest"
   ],
+  "css/css-layout-api/constraints-fixed-block-size-absolute-left-right-vrl.https.html": [
+   "ef743bb31278b2a9cb3fef53a1afa430bf347eaf",
+   "reftest"
+  ],
+  "css/css-layout-api/constraints-fixed-block-size-absolute-none.https.html": [
+   "0eac283ecc975a020075ce274eeb61b9c456b375",
+   "reftest"
+  ],
+  "css/css-layout-api/constraints-fixed-block-size-absolute-top-bottom.https.html": [
+   "ec737a097b1c43e87a75da98808630d87def3820",
+   "reftest"
+  ],
+  "css/css-layout-api/constraints-fixed-block-size-block-none-vrl.https.html": [
+   "0f5b86acd6ed8acd65a9f0f42d6cc58a6647fa1a",
+   "reftest"
+  ],
+  "css/css-layout-api/constraints-fixed-block-size-block-none.https.html": [
+   "59a141464e16d51ca3d80c5c4a8288ff8941a499",
+   "reftest"
+  ],
+  "css/css-layout-api/constraints-fixed-block-size-fixed-max.https.html": [
+   "4e49d34d2fc28f15d52e83c27aa8e4fc49dc40f6",
+   "reftest"
+  ],
+  "css/css-layout-api/constraints-fixed-block-size-fixed-min.https.html": [
+   "5785b9c3512c74fd297aa73bcdd6265c8008fd4c",
+   "reftest"
+  ],
+  "css/css-layout-api/constraints-fixed-block-size-fixed-vrl.https.html": [
+   "a7eafe481062365a3367cedfd30ed3a3a21ec7ab",
+   "reftest"
+  ],
+  "css/css-layout-api/constraints-fixed-block-size-fixed.https.html": [
+   "bb8c0b95f1d382cfce289a17d29dea571e938c2d",
+   "reftest"
+  ],
+  "css/css-layout-api/constraints-fixed-block-size-flex-basis-vrl.https.html": [
+   "a1868fd28509931b4c447c866e7669b7129e8380",
+   "reftest"
+  ],
+  "css/css-layout-api/constraints-fixed-block-size-flex-column-basis.https.html": [
+   "53458ee7f683668a621cf82ab30212ee74bad83f",
+   "reftest"
+  ],
+  "css/css-layout-api/constraints-fixed-block-size-flex-column-grow.https.html": [
+   "04f4fdd074cf2726211d2718d4aa14b816ca0214",
+   "reftest"
+  ],
+  "css/css-layout-api/constraints-fixed-block-size-flex-column-none.https.html": [
+   "166a66ce956b3b49b2d00ce88e808739065acc9d",
+   "reftest"
+  ],
+  "css/css-layout-api/constraints-fixed-block-size-flex-column-stretch-vrl.https.html": [
+   "9bd9cccaea90f3c472a254ac41738716d921845d",
+   "reftest"
+  ],
+  "css/css-layout-api/constraints-fixed-block-size-flex-grow-vrl.https.html": [
+   "8c82d4c094b1ff74f2638b2182880fc55c00737a",
+   "reftest"
+  ],
+  "css/css-layout-api/constraints-fixed-block-size-flex-none.https.html": [
+   "b35d8ca45539171ff4a3360e223bb476b81e131e",
+   "reftest"
+  ],
+  "css/css-layout-api/constraints-fixed-block-size-flex-percentage-indefinite.https.html": [
+   "c4a30e47f6758a2ec98d4c122b09caf8efb7244d",
+   "reftest"
+  ],
+  "css/css-layout-api/constraints-fixed-block-size-flex-stretch-max.https.html": [
+   "07155efe3bf9a2a48f1e76180176dca76c2e0096",
+   "reftest"
+  ],
+  "css/css-layout-api/constraints-fixed-block-size-flex-stretch.https.html": [
+   "9a34469e3eb5b89f76739b26082cc97f356c5d3d",
+   "reftest"
+  ],
+  "css/css-layout-api/constraints-fixed-block-size-grid-none.https.html": [
+   "fda1fa1d2dc49d9b3721165a6f55eb680ed0d958",
+   "reftest"
+  ],
+  "css/css-layout-api/constraints-fixed-block-size-grid-stretch-max.https.html": [
+   "8eb9641f5eba2aedcc4f8445ea55eff0574b07a2",
+   "reftest"
+  ],
+  "css/css-layout-api/constraints-fixed-block-size-grid-stretch.https.html": [
+   "392a866a7fd24e58b28169f0aa23a58abceb4c6f",
+   "reftest"
+  ],
+  "css/css-layout-api/constraints-fixed-block-size-grid-vrl.https.html": [
+   "e4e6a64e131de62dd18223bdffe0404f8e890464",
+   "reftest"
+  ],
+  "css/css-layout-api/constraints-fixed-block-size-percentage-indefinite.https.html": [
+   "6bb68de285ec3eefeaf7ddd6a4bba6ea867865e4",
+   "reftest"
+  ],
+  "css/css-layout-api/constraints-fixed-block-size-percentage-vrl.https.html": [
+   "20143f108250817b376b3be48d1569d83d305a08",
+   "reftest"
+  ],
+  "css/css-layout-api/constraints-fixed-block-size-percentage.https.html": [
+   "9afd79b298034ada9c1d46c1c5ce90f40ce619b3",
+   "reftest"
+  ],
+  "css/css-layout-api/constraints-fixed-block-size-quirky-body.https.html": [
+   "a6d5724f25ca05b3d205166a04e9a53f5b227527",
+   "reftest"
+  ],
   "css/css-layout-api/constraints-fixed-inline-size-absolute-left-right.https.html": [
    "15f8dde88dd066b5525a6b8990206ac567f48b2a",
    "reftest"
   ],
   "css/css-layout-api/constraints-fixed-inline-size-absolute-top-bottom-vrl.https.html": [
    "9cb3a2b8671ef4f9926a39431d193875a5a1738a",
    "reftest"
   ],
@@ -517475,16 +517917,24 @@
   "css/css-layout-api/style-map-ref.html": [
    "fa11b57c69526a4922b2a5f9aeff2486d11a4fc6",
    "support"
   ],
   "css/css-layout-api/style-map.https.html": [
    "361b3c82c37c0068d23ae23e96d8e9185d3765b0",
    "reftest"
   ],
+  "css/css-layout-api/support/constraints-fixed-block-size-quirky-body-iframe.html": [
+   "874a80d6bc5e5cfa8f8fe6c224e7e3c999d81d1e",
+   "support"
+  ],
+  "css/css-layout-api/support/constraints-fixed-block-size.js": [
+   "9e15bc74f332c532b149f43465851d79d9e9c850",
+   "support"
+  ],
   "css/css-layout-api/support/constraints-fixed-inline-size.js": [
    "ed0224a380c50a7e83d23a95be5a4348ce5bf706",
    "support"
   ],
   "css/css-layout-api/support/layout-child-sizes-worklet.js": [
    "3797af00861ae44369a90a0ae05b3a6e13a2ef54",
    "support"
   ],
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints-fixed-block-size-absolute-left-right-vrl.https.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
+<link rel="match" href="green-square-ref.html">
+<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
+<style>
+body {
+  position: relative;
+  width: 120px;
+}
+
+.test {
+  writing-mode: vertical-rl;
+  background: red;
+  position: absolute;
+  left: 0px;
+  right: 20px;
+  --expected-block-size: 100;
+}
+
+.child {
+  background: green;
+}
+
+@supports (display: layout(test)) {
+  .test {
+    display: layout(test);
+  }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+
+<div class="test">
+  <div class="child"></div>
+</div>
+
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints-fixed-block-size-absolute-none.https.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
+<link rel="match" href="green-square-ref.html">
+<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
+<style>
+body {
+  position: relative;
+}
+
+.test {
+  background: red;
+  position: absolute;
+  --expected-block-size: null;
+}
+
+.child {
+  background: green;
+}
+
+@supports (display: layout(test)) {
+  .test {
+    display: layout(test);
+  }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+
+<div class="test">
+  <div class="child"></div>
+</div>
+
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints-fixed-block-size-absolute-top-bottom.https.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
+<link rel="match" href="green-square-ref.html">
+<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
+<style>
+body {
+  position: relative;
+  height: 120px;
+}
+
+.test {
+  background: red;
+  position: absolute;
+  top: 0px;
+  bottom: 20px;
+  --expected-block-size: 100;
+}
+
+.child {
+  background: green;
+}
+
+@supports (display: layout(test)) {
+  .test {
+    display: layout(test);
+  }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+
+<div class="test">
+  <div class="child"></div>
+</div>
+
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints-fixed-block-size-block-none-vrl.https.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
+<link rel="match" href="green-square-ref.html">
+<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
+<style>
+.test {
+  writing-mode: vertical-lr;
+  background: red;
+  --expected-block-size: null;
+}
+
+.child {
+  background: green;
+}
+
+@supports (display: layout(test)) {
+  .test {
+    display: layout(test);
+  }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+
+<div class="test">
+  <div class="child"></div>
+</div>
+
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints-fixed-block-size-block-none.https.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
+<link rel="match" href="green-square-ref.html">
+<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
+<style>
+.test {
+  background: red;
+  --expected-block-size: null;
+  width: 100px;
+}
+
+.child {
+  background: green;
+}
+
+@supports (display: layout(test)) {
+  .test {
+    display: layout(test);
+  }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+
+<div class="test">
+  <div class="child"></div>
+</div>
+
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints-fixed-block-size-fixed-max.https.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
+<link rel="match" href="green-square-ref.html">
+<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
+<style>
+.test {
+  background: red;
+  --expected-block-size: 30;
+  width: 100px;
+  height: 60px;
+  max-height: 30px;
+}
+
+.child {
+  background: green;
+}
+
+@supports (display: layout(test)) {
+  .test {
+    display: layout(test);
+  }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+
+<div class="test">
+  <div class="child"></div>
+</div>
+
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints-fixed-block-size-fixed-min.https.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
+<link rel="match" href="green-square-ref.html">
+<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
+<style>
+.test {
+  background: red;
+  --expected-block-size: 70;
+  width: 100px;
+  height: 60px;
+  min-height: 70px;
+}
+
+.child {
+  background: green;
+}
+
+@supports (display: layout(test)) {
+  .test {
+    display: layout(test);
+  }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+
+<div class="test">
+  <div class="child"></div>
+</div>
+
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints-fixed-block-size-fixed-vrl.https.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
+<link rel="match" href="green-square-ref.html">
+<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
+<style>
+.test {
+  writing-mode: vertical-rl;
+  background: red;
+  --expected-block-size: 100;
+  width: 100px;
+}
+
+.child {
+  background: green;
+}
+
+@supports (display: layout(test)) {
+  .test {
+    display: layout(test);
+  }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+
+<div class="test">
+  <div class="child"></div>
+</div>
+
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints-fixed-block-size-fixed.https.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
+<link rel="match" href="green-square-ref.html">
+<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
+<style>
+.test {
+  background: red;
+  --expected-block-size: 60;
+  width: 100px;
+  height: 60px;
+}
+
+.child {
+  background: green;
+}
+
+@supports (display: layout(test)) {
+  .test {
+    display: layout(test);
+  }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+
+<div class="test">
+  <div class="child"></div>
+</div>
+
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints-fixed-block-size-flex-basis-vrl.https.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
+<link rel="match" href="green-square-ref.html">
+<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
+<style>
+body {
+  display: flex;
+}
+
+.test {
+  writing-mode: vertical-rl;
+  background: red;
+  --expected-block-size: 100;
+  flex-basis: 100px;
+}
+
+.child {
+  background: green;
+}
+
+@supports (display: layout(test)) {
+  .test {
+    display: layout(test);
+  }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+
+<div class="test">
+  <div class="child"></div>
+</div>
+
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints-fixed-block-size-flex-column-basis.https.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
+<link rel="match" href="green-square-ref.html">
+<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
+<style>
+body {
+  display: flex;
+  flex-direction: column;
+  width: 100px;
+}
+
+.test {
+  background: red;
+  --expected-block-size: 60;
+  flex-basis: 60px;
+}
+
+.child {
+  background: green;
+}
+
+@supports (display: layout(test)) {
+  .test {
+    display: layout(test);
+  }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+
+<div class="test">
+  <div class="child"></div>
+</div>
+
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints-fixed-block-size-flex-column-grow.https.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
+<link rel="match" href="green-square-ref.html">
+<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
+<style>
+body {
+  display: flex;
+  flex-direction: column;
+  width: 100px;
+  height: 60px;
+}
+
+.test {
+  background: red;
+  --expected-block-size: 50;
+  margin-bottom: 10px;
+  flex-grow: 1;
+}
+
+.child {
+  background: green;
+}
+
+@supports (display: layout(test)) {
+  .test {
+    display: layout(test);
+  }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+
+<div class="test">
+  <div class="child"></div>
+</div>
+
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints-fixed-block-size-flex-column-none.https.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
+<link rel="match" href="green-square-ref.html">
+<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
+<style>
+body {
+  display: flex;
+  flex-direction: column;
+  width: 100px;
+}
+
+.test {
+  background: red;
+  --expected-block-size: null;
+}
+
+.child {
+  background: green;
+}
+
+@supports (display: layout(test)) {
+  .test {
+    display: layout(test);
+  }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+
+<div class="test">
+  <div class="child"></div>
+</div>
+
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints-fixed-block-size-flex-column-stretch-vrl.https.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
+<link rel="match" href="green-square-ref.html">
+<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
+<style>
+body {
+  display: flex;
+  flex-direction: column;
+  width: 100px;
+}
+
+.test {
+  writing-mode: vertical-rl;
+  background: red;
+  --expected-block-size: 90; /* flex-item should stretch to (100 - 10)px */
+  margin-left: 10px;
+}
+
+.child {
+  background: green;
+}
+
+@supports (display: layout(test)) {
+  .test {
+    display: layout(test);
+  }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+
+<div class="test">
+  <div class="child"></div>
+</div>
+
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints-fixed-block-size-flex-grow-vrl.https.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
+<link rel="match" href="green-square-ref.html">
+<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
+<style>
+body {
+  display: flex;
+  width: 100px;
+}
+
+.test {
+  writing-mode: vertical-rl;
+  background: red;
+  --expected-block-size: 100;
+  flex-grow: 1;
+}
+
+.child {
+  background: green;
+}
+
+@supports (display: layout(test)) {
+  .test {
+    display: layout(test);
+  }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+
+<div class="test">
+  <div class="child"></div>
+</div>
+
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints-fixed-block-size-flex-none.https.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
+<link rel="match" href="green-square-ref.html">
+<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
+<style>
+body {
+  display: flex;
+}
+
+.test {
+  background: red;
+  --expected-block-size: null;
+  width: 100px;
+}
+
+.child {
+  background: green;
+}
+
+@supports (display: layout(test)) {
+  .test {
+    display: layout(test);
+  }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+
+<div class="test">
+  <div class="child"></div>
+</div>
+
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints-fixed-block-size-flex-percentage-indefinite.https.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
+<link rel="match" href="green-square-ref.html">
+<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
+<style>
+body {
+  display: flex;
+}
+
+.test {
+  background: red;
+  --expected-block-size: null; /* Percentage which we are resolving height against is indefinite. */
+  width: 100px;
+  height: 50%;
+}
+
+.child {
+  background: green;
+}
+
+@supports (display: layout(test)) {
+  .test {
+    display: layout(test);
+  }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+
+<div class="test">
+  <div class="child"></div>
+</div>
+
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints-fixed-block-size-flex-stretch-max.https.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
+<link rel="match" href="green-square-ref.html">
+<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
+<style>
+body {
+  display: flex;
+  height: 50px;
+}
+
+.test {
+  background: red;
+  --expected-block-size: 30; /* flex-item should respect the max constraint */
+  max-height: 30px;
+  width: 100px;
+  margin-bottom: 10px;
+}
+
+.child {
+  background: green;
+}
+
+@supports (display: layout(test)) {
+  .test {
+    display: layout(test);
+  }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+
+<div class="test">
+  <div class="child"></div>
+</div>
+
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints-fixed-block-size-flex-stretch.https.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
+<link rel="match" href="green-square-ref.html">
+<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
+<style>
+body {
+  display: flex;
+  height: 50px;
+}
+
+.test {
+  background: red;
+  --expected-block-size: 40; /* flex-item should stretch to (50 - 10)px */
+  width: 100px;
+  margin-bottom: 10px;
+}
+
+.child {
+  background: green;
+}
+
+@supports (display: layout(test)) {
+  .test {
+    display: layout(test);
+  }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+
+<div class="test">
+  <div class="child"></div>
+</div>
+
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints-fixed-block-size-grid-none.https.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
+<link rel="match" href="green-square-ref.html">
+<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
+<style>
+body {
+  display: grid;
+}
+
+.test {
+  background: red;
+  --expected-block-size: null;
+  width: 100px;
+}
+
+.child {
+  background: green;
+}
+
+@supports (display: layout(test)) {
+  .test {
+    display: layout(test);
+  }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+
+<div class="test">
+  <div class="child"></div>
+</div>
+
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints-fixed-block-size-grid-stretch-max.https.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
+<link rel="match" href="green-square-ref.html">
+<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
+<style>
+body {
+  display: grid;
+  grid: 50px / auto-flow;
+}
+
+.test {
+  background: red;
+  --expected-block-size: 30; /* grid-item should respect the max constraint */
+  max-height: 30px;
+  width: 100px;
+  margin-bottom: 10px;
+}
+
+.child {
+  background: green;
+}
+
+@supports (display: layout(test)) {
+  .test {
+    display: layout(test);
+  }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+
+<div class="test">
+  <div class="child"></div>
+</div>
+
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints-fixed-block-size-grid-stretch.https.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
+<link rel="match" href="green-square-ref.html">
+<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
+<style>
+body {
+  display: grid;
+  grid: 50px / auto-flow;
+}
+
+.test {
+  background: red;
+  --expected-block-size: 40; /* grid-item should stretch to (50 - 10)px */
+  width: 100px;
+  margin-bottom: 10px;
+}
+
+.child {
+  background: green;
+}
+
+@supports (display: layout(test)) {
+  .test {
+    display: layout(test);
+  }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+
+<div class="test">
+  <div class="child"></div>
+</div>
+
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints-fixed-block-size-grid-vrl.https.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
+<link rel="match" href="green-square-ref.html">
+<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
+<style>
+body {
+  display: grid;
+  grid: auto-flow / 100px;
+}
+
+.test {
+  writing-mode: vertical-rl;
+  background: red;
+  --expected-block-size: 100;
+  width: 100px;
+}
+
+.child {
+  background: green;
+}
+
+@supports (display: layout(test)) {
+  .test {
+    display: layout(test);
+  }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+
+<div class="test">
+  <div class="child"></div>
+</div>
+
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints-fixed-block-size-percentage-indefinite.https.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
+<link rel="match" href="green-square-ref.html">
+<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
+<style>
+.test {
+  background: red;
+  --expected-block-size: null; /* Percentage which we are resolving height against is indefinite. */
+  width: 100px;
+  height: 50%;
+}
+
+.child {
+  background: green;
+}
+
+@supports (display: layout(test)) {
+  .test {
+    display: layout(test);
+  }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+
+<div class="test">
+  <div class="child"></div>
+</div>
+
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints-fixed-block-size-percentage-vrl.https.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
+<link rel="match" href="green-square-ref.html">
+<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
+<style>
+body {
+  width: 200px;
+}
+
+.test {
+  writing-mode: vertical-rl;
+  background: red;
+  --expected-block-size: 100;
+  width: 50%;
+}
+
+.child {
+  background: green;
+}
+
+@supports (display: layout(test)) {
+  .test {
+    display: layout(test);
+  }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+
+<div class="test">
+  <div class="child"></div>
+</div>
+
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints-fixed-block-size-percentage.https.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
+<link rel="match" href="green-square-ref.html">
+<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
+<style>
+body {
+  height: 200px;
+}
+
+.test {
+  background: red;
+  --expected-block-size: 100;
+  width: 100px;
+  height: 50%;
+}
+
+.child {
+  background: green;
+}
+
+@supports (display: layout(test)) {
+  .test {
+    display: layout(test);
+  }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+
+<div class="test">
+  <div class="child"></div>
+</div>
+
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints-fixed-block-size-quirky-body.https.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
+<link rel="match" href="green-square-ref.html">
+<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
+<style>
+iframe { border: none; width: 200px; height: 200px; }
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+<body>
+<script>
+// For this test we load a quirky iframe with the test file.
+// We can control the auto size of the iframe body element by setting the iframe height.
+const iframe = document.createElement('iframe');
+document.body.appendChild(iframe);
+iframe.addEventListener('load', () => {
+  importWorkletAndTerminateTestAfterAsyncPaint(
+    iframe.contentWindow.CSS.layoutWorklet, {url: 'constraints-fixed-block-size.js'});
+});
+iframe.src = 'support/constraints-fixed-block-size-quirky-body-iframe.html';
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/support/constraints-fixed-block-size-quirky-body-iframe.html
@@ -0,0 +1,21 @@
+<style>
+body {
+  margin: 0;
+  --expected-block-size: 200;
+}
+
+.child {
+  background: green;
+}
+
+@supports (display: layout(test)) {
+  body {
+    display: layout(test);
+  }
+}
+</style>
+
+<!-- In Quirks mode, we should stretch to 100% of the inital containing block. -->
+<body>
+<div class="child"></div>
+</body>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/support/constraints-fixed-block-size.js
@@ -0,0 +1,22 @@
+registerLayout('test', class {
+  static get inputProperties() {
+    return ['--expected-block-size'];
+  }
+
+  *intrinsicSizes() {}
+  *layout([child], edges, constraints, styleMap) {
+    let childFixedInlineSize = 0;
+    let childFixedBlockSize = 0;
+    if (constraints.fixedBlockSize === JSON.parse(styleMap.get('--expected-block-size'))) {
+      childFixedInlineSize = 100;
+      childFixedBlockSize = 100;
+    }
+
+    const childFragments = [yield child.layoutNextFragment({
+      fixedInlineSize: childFixedInlineSize,
+      fixedBlockSize: childFixedBlockSize,
+    })];
+
+    return {childFragments};
+  }
+});