Bug 1464483 [wpt PR 11166] - [css-layout-api] Allow passing of serialized data between parent<->child., a=testonly
authorIan Kilpatrick <ikilpatrick@chromium.org>
Wed, 06 Jun 2018 17:25:49 +0000
changeset 422252 f22694f50ea63ce55c018dd0a56f38da6f7364af
parent 422251 ba86bff89ba46be04afa3807fc25cd63338f30d3
child 422253 22fb23cdbd67ae3e4efbe095968046497a18d5d8
push id34122
push userebalazs@mozilla.com
push dateMon, 11 Jun 2018 09:37:00 +0000
treeherdermozilla-central@9941eb8c3b29 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1464483, 11166, 726125, 1072150, 563235
milestone62.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 1464483 [wpt PR 11166] - [css-layout-api] Allow passing of serialized data between parent<->child., a=testonly Automatic update from web-platform-tests[css-layout-api] Allow passing of serialized data between parent<->child. This allow arbitary parent<->child communation during layout. A parent can send data to a child via: // parent const fragment = yield child.layoutNextFragment({data}); // child *layout(children, edges, constraints, style) { const data = constraints.data; // receive data. } And child to parent via: // child *layout() { return {data}; } // parent const fragment = yield child.layoutNextFragment(); const data = fragment.data; // receive data. As the parent and child layouts may be invoked in different worklet global scopes, and don't allow data shared, the serialization of data uses "kForStorage" which means that SharedArrayBuffers aren't allowed in the serialization. Serialization also occurs so that we are able to cache results. Bug: 726125 Change-Id: Ib7e81b5778cef3af2c2f8a1ccef749f1d2ba4dfa Reviewed-on: https://chromium-review.googlesource.com/1072150 Reviewed-by: Kentaro Hara <haraken@chromium.org> Reviewed-by: Morten Stenshorne <mstensho@chromium.org> Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org> Cr-Commit-Position: refs/heads/master@{#563235} -- wpt-commits: 8c8238ca96f913c1b90f838def7f9cf0253c0113 wpt-pr: 11166
testing/web-platform/meta/MANIFEST.json
testing/web-platform/tests/css/css-layout-api/constraints-data-function-failure.https.html
testing/web-platform/tests/css/css-layout-api/constraints-data-sab-failure.https.html
testing/web-platform/tests/css/css-layout-api/constraints-data.https.html
testing/web-platform/tests/css/css-layout-api/fragment-data-function-failure.https.html
testing/web-platform/tests/css/css-layout-api/fragment-data-immutable.https.html
testing/web-platform/tests/css/css-layout-api/fragment-data-sab-failure.https.html
testing/web-platform/tests/css/css-layout-api/fragment-data.https.html
testing/web-platform/tests/css/css-layout-api/green-square-ref.html
testing/web-platform/tests/css/css-layout-api/layout-child-absolute.https.html
testing/web-platform/tests/css/css-layout-api/layout-child-before-after.https.html
testing/web-platform/tests/css/css-layout-api/layout-child-fixed.https.html
testing/web-platform/tests/css/css-layout-api/layout-child-float.https.html
testing/web-platform/tests/css/css-layout-api/layout-child-inflow.https.html
testing/web-platform/tests/css/css-layout-api/layout-child-inlines.https.html
testing/web-platform/tests/css/css-layout-api/layout-child-ref.html
testing/web-platform/tests/css/css-layout-api/layout-child-text.https.html
testing/web-platform/tests/css/css-layout-api/perform-child-layout-available-inline-size-htb-htb.https.html
testing/web-platform/tests/css/css-layout-api/perform-child-layout-available-inline-size-htb-vrl.https.html
testing/web-platform/tests/css/css-layout-api/perform-child-layout-available-inline-size-vrl-htb.https.html
testing/web-platform/tests/css/css-layout-api/perform-child-layout-available-inline-size-vrl-vrl.https.html
testing/web-platform/tests/css/css-layout-api/perform-child-layout-fixed-block-size-vrl.https.html
testing/web-platform/tests/css/css-layout-api/perform-child-layout-fixed-block-size.https.html
testing/web-platform/tests/css/css-layout-api/perform-child-layout-fixed-inline-size-vrl.https.html
testing/web-platform/tests/css/css-layout-api/perform-child-layout-fixed-inline-size.https.html
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -120790,16 +120790,52 @@
       [
        "/css/css-layout-api/box-tree-unregistered-ref.html",
        "=="
       ]
      ],
      {}
     ]
    ],
+   "css/css-layout-api/constraints-data-function-failure.https.html": [
+    [
+     "/css/css-layout-api/constraints-data-function-failure.https.html",
+     [
+      [
+       "/css/css-layout-api/green-square-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/css-layout-api/constraints-data-sab-failure.https.html": [
+    [
+     "/css/css-layout-api/constraints-data-sab-failure.https.html",
+     [
+      [
+       "/css/css-layout-api/green-square-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/css-layout-api/constraints-data.https.html": [
+    [
+     "/css/css-layout-api/constraints-data.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",
        "=="
       ]
@@ -121018,190 +121054,238 @@
       [
        "/css/css-layout-api/fallback-ref.html",
        "=="
       ]
      ],
      {}
     ]
    ],
+   "css/css-layout-api/fragment-data-function-failure.https.html": [
+    [
+     "/css/css-layout-api/fragment-data-function-failure.https.html",
+     [
+      [
+       "/css/css-layout-api/green-square-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/css-layout-api/fragment-data-immutable.https.html": [
+    [
+     "/css/css-layout-api/fragment-data-immutable.https.html",
+     [
+      [
+       "/css/css-layout-api/green-square-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/css-layout-api/fragment-data-sab-failure.https.html": [
+    [
+     "/css/css-layout-api/fragment-data-sab-failure.https.html",
+     [
+      [
+       "/css/css-layout-api/green-square-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/css-layout-api/fragment-data.https.html": [
+    [
+     "/css/css-layout-api/fragment-data.https.html",
+     [
+      [
+       "/css/css-layout-api/green-square-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
    "css/css-layout-api/layout-child-absolute.https.html": [
     [
      "/css/css-layout-api/layout-child-absolute.https.html",
      [
       [
-       "/css/css-layout-api/layout-child-ref.html",
+       "/css/css-layout-api/green-square-ref.html",
        "=="
       ]
      ],
      {}
     ]
    ],
    "css/css-layout-api/layout-child-before-after.https.html": [
     [
      "/css/css-layout-api/layout-child-before-after.https.html",
      [
       [
-       "/css/css-layout-api/layout-child-ref.html",
+       "/css/css-layout-api/green-square-ref.html",
        "=="
       ]
      ],
      {}
     ]
    ],
    "css/css-layout-api/layout-child-fixed.https.html": [
     [
      "/css/css-layout-api/layout-child-fixed.https.html",
      [
       [
-       "/css/css-layout-api/layout-child-ref.html",
+       "/css/css-layout-api/green-square-ref.html",
        "=="
       ]
      ],
      {}
     ]
    ],
    "css/css-layout-api/layout-child-float.https.html": [
     [
      "/css/css-layout-api/layout-child-float.https.html",
      [
       [
-       "/css/css-layout-api/layout-child-ref.html",
+       "/css/css-layout-api/green-square-ref.html",
        "=="
       ]
      ],
      {}
     ]
    ],
    "css/css-layout-api/layout-child-inflow.https.html": [
     [
      "/css/css-layout-api/layout-child-inflow.https.html",
      [
       [
-       "/css/css-layout-api/layout-child-ref.html",
+       "/css/css-layout-api/green-square-ref.html",
        "=="
       ]
      ],
      {}
     ]
    ],
    "css/css-layout-api/layout-child-inlines.https.html": [
     [
      "/css/css-layout-api/layout-child-inlines.https.html",
      [
       [
-       "/css/css-layout-api/layout-child-ref.html",
+       "/css/css-layout-api/green-square-ref.html",
        "=="
       ]
      ],
      {}
     ]
    ],
    "css/css-layout-api/layout-child-text.https.html": [
     [
      "/css/css-layout-api/layout-child-text.https.html",
      [
       [
-       "/css/css-layout-api/layout-child-ref.html",
+       "/css/css-layout-api/green-square-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/green-square-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/green-square-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/green-square-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/green-square-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",
+       "/css/css-layout-api/green-square-ref.html",
        "=="
       ]
      ],
      {}
     ]
    ],
    "css/css-layout-api/perform-child-layout-fixed-block-size.https.html": [
     [
      "/css/css-layout-api/perform-child-layout-fixed-block-size.https.html",
      [
       [
-       "/css/css-layout-api/layout-child-ref.html",
+       "/css/css-layout-api/green-square-ref.html",
        "=="
       ]
      ],
      {}
     ]
    ],
    "css/css-layout-api/perform-child-layout-fixed-inline-size-vrl.https.html": [
     [
      "/css/css-layout-api/perform-child-layout-fixed-inline-size-vrl.https.html",
      [
       [
-       "/css/css-layout-api/layout-child-ref.html",
+       "/css/css-layout-api/green-square-ref.html",
        "=="
       ]
      ],
      {}
     ]
    ],
    "css/css-layout-api/perform-child-layout-fixed-inline-size.https.html": [
     [
      "/css/css-layout-api/perform-child-layout-fixed-inline-size.https.html",
      [
       [
-       "/css/css-layout-api/layout-child-ref.html",
+       "/css/css-layout-api/green-square-ref.html",
        "=="
       ]
      ],
      {}
     ]
    ],
    "css/css-layout-api/position-fragment-htb-ltr.https.html": [
     [
@@ -250819,17 +250903,17 @@
      {}
     ]
    ],
    "css/css-layout-api/fallback-ref.html": [
     [
      {}
     ]
    ],
-   "css/css-layout-api/layout-child-ref.html": [
+   "css/css-layout-api/green-square-ref.html": [
     [
      {}
     ]
    ],
    "css/css-layout-api/position-fragment-ref.html": [
     [
      {}
     ]
@@ -516716,16 +516800,28 @@
   "css/css-layout-api/box-tree-unregistered.https.html": [
    "c2058c848fe71230148b2531585fbddd678e6926",
    "reftest"
   ],
   "css/css-layout-api/computed-style-layout-function.https.html": [
    "a999a2a7ad8981879cdc984bf602939a23a60ea6",
    "testharness"
   ],
+  "css/css-layout-api/constraints-data-function-failure.https.html": [
+   "5158c7620d4e5aa9d88455fbbd88277572cdcb63",
+   "reftest"
+  ],
+  "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-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"
   ],
@@ -516804,82 +516900,98 @@
   "css/css-layout-api/fallback-layout-return.https.html": [
    "159662be847f8657d33a0607cb0e6561d57ef4e1",
    "reftest"
   ],
   "css/css-layout-api/fallback-ref.html": [
    "464a929254bba9991b03e2d0d161c0274c7c4b59",
    "support"
   ],
+  "css/css-layout-api/fragment-data-function-failure.https.html": [
+   "3237c10bd95c4d0b25b8fe2db8768b5f7f50f18b",
+   "reftest"
+  ],
+  "css/css-layout-api/fragment-data-immutable.https.html": [
+   "d0321eef8d3412607090ac77ef9b160ff6b2a3cd",
+   "reftest"
+  ],
+  "css/css-layout-api/fragment-data-sab-failure.https.html": [
+   "bc91309fddc5146b0258a4a9e362625c1ef1e5cb",
+   "reftest"
+  ],
+  "css/css-layout-api/fragment-data.https.html": [
+   "525c663bd7e9844af8f42429d936558b95a66188",
+   "reftest"
+  ],
+  "css/css-layout-api/green-square-ref.html": [
+   "925277c0e5cc163b9f39d878b9b39d7f822dda51",
+   "support"
+  ],
   "css/css-layout-api/inline-style-layout-function.https.html": [
    "f421a9c0fb4c930922281a88eeaa45ae69adab51",
    "testharness"
   ],
   "css/css-layout-api/layout-child-absolute.https.html": [
-   "39c26ad4eb1c455e911ad1d963494096f8560f9a",
+   "42a689b586a297b9f40f18eee0806d587da00351",
    "reftest"
   ],
   "css/css-layout-api/layout-child-before-after.https.html": [
-   "77408947564e138eff1f85fa71be05a0303bc9dc",
+   "6836c7c8b81adda98e8de4041e0b505d1e0dbdd7",
    "reftest"
   ],
   "css/css-layout-api/layout-child-fixed.https.html": [
-   "61fafcd052444e4d996748b9c132101b754747e7",
+   "ca84f12d5982ef9f1a6531f41721d76bf2a1c8c6",
    "reftest"
   ],
   "css/css-layout-api/layout-child-float.https.html": [
-   "8840ae8518ade98bf38614ef92df20c19b65a667",
+   "a0e2c43f60ba1376090a32df5e9625faaac23274",
    "reftest"
   ],
   "css/css-layout-api/layout-child-inflow.https.html": [
-   "d1034937a934ac7900ecd59d958de00c769a73cf",
+   "af6fdd340c5e81b02dc99012cc990c0fcc9e68bb",
    "reftest"
   ],
   "css/css-layout-api/layout-child-inlines.https.html": [
-   "048d886c9388151a792bdc12fb8098aa53249cfd",
-   "reftest"
-  ],
-  "css/css-layout-api/layout-child-ref.html": [
-   "1688098230f9fb825bc73134dff15dcf5ff9782d",
-   "support"
+   "fd8144258a9c4ce17e2fb0fc7439060341ad93e7",
+   "reftest"
   ],
   "css/css-layout-api/layout-child-text.https.html": [
-   "567ff67317cae9906e6d159dc232c41464a4e7c6",
+   "82a8fada6d99e40410ab415e2b34af219dac94c0",
    "reftest"
   ],
   "css/css-layout-api/perform-child-layout-available-inline-size-htb-htb.https.html": [
-   "7db4f5c2bebe031f0689be2569ba4ca266535052",
+   "5671810501fc3095f8c72b94a1b4ef03711683c3",
    "reftest"
   ],
   "css/css-layout-api/perform-child-layout-available-inline-size-htb-vrl.https.html": [
-   "f22cc9627b7b2ad797cc722f3d369355ffce4f60",
+   "a7c8ead348cc60e4a75b9f059411a0e5da02f469",
    "reftest"
   ],
   "css/css-layout-api/perform-child-layout-available-inline-size-vrl-htb.https.html": [
-   "0e34d5b8b86aa6551e6e6a31eb086bd84b61c636",
+   "4e983d5db151d48f39a018394f2d23bbecbed347",
    "reftest"
   ],
   "css/css-layout-api/perform-child-layout-available-inline-size-vrl-vrl.https.html": [
-   "d619b57c395710bc2e133e05774c9a06bfd19749",
+   "52edc3ff48579820b9511de7930aa5f72a7b3c59",
    "reftest"
   ],
   "css/css-layout-api/perform-child-layout-fixed-block-size-vrl.https.html": [
-   "907b9b1255516caab731555686e5c6b5517eb3f9",
+   "3fa3ddc4c728eaa1e120c9aa7845dd60881c6348",
    "reftest"
   ],
   "css/css-layout-api/perform-child-layout-fixed-block-size.https.html": [
-   "3560b1f8249f945e1453e3e8e53745ef1941405f",
+   "67ffdaf070d916be1867105239bc477ac2c553ea",
    "reftest"
   ],
   "css/css-layout-api/perform-child-layout-fixed-inline-size-vrl.https.html": [
-   "dfc48415ddbfecad7b382c4efe290b1b8da4ebac",
+   "f341a69a76cfd564117f57d67e4740d73592fbf8",
    "reftest"
   ],
   "css/css-layout-api/perform-child-layout-fixed-inline-size.https.html": [
-   "bae125f32f28d0cfa7db449cfb10437cb4df12a3",
+   "3f1a6187f48a669d5032f9b161926b588a7ed968",
    "reftest"
   ],
   "css/css-layout-api/position-fragment-htb-ltr.https.html": [
    "761ed3e46d6485b1208953c292015432da5f99e0",
    "reftest"
   ],
   "css/css-layout-api/position-fragment-htb-rtl.https.html": [
    "8a2684c25ef3603e498cf33d32dc8a2c4b4a50d5",
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints-data-function-failure.https.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-data">
+<link rel="match" href="green-square-ref.html">
+<meta name="assert" content="This test checks that a function can't be passed to a child layout." />
+<style>
+.test {
+  background: red;
+  width: 100px;
+}
+
+@supports (display: layout(parent)) {
+  .test {
+    display: layout(parent);
+    background: green;
+  }
+
+  .child {
+    display: layout(child);
+  }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+
+<div class="test">
+  <div class="child"></div>
+</div>
+
+<script id="code" type="text/worklet">
+registerLayout('parent', class {
+  *intrinsicSizes() {}
+  *layout() {}
+  *layout([child], edges, constraints, styleMap) {
+    let childFragment = null;
+
+    try {
+      childFragment = yield child.layoutNextFragment({
+        data: { fn: function() {} }
+      });
+    } catch(e) {
+      // Success! The structured cloning algorithm should have thrown an error.
+      childFragment = yield child.layoutNextFragment({});
+      return {autoBlockSize: 100, childFragments: [childFragment]};
+    }
+
+    return {autoBlockSize: 0, childFragments: [childFragment]};
+  }
+});
+
+registerLayout('child', class {
+  *intrinsicSizes() {}
+  *layout() {}
+  *layout() {
+    return {autoBlockSize: 0};
+  }
+});
+</script>
+
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent);
+</script>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints-data-sab-failure.https.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-data">
+<link rel="match" href="green-square-ref.html">
+<meta name="assert" content="This test checks that a SharedArrayBuffer can't be passed to a child layout." />
+<style>
+.test {
+  background: red;
+  width: 100px;
+}
+
+@supports (display: layout(parent)) {
+  .test {
+    display: layout(parent);
+    background: green;
+  }
+
+  .child {
+    display: layout(child);
+  }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+
+<div class="test">
+  <div class="child"></div>
+</div>
+
+<script id="code" type="text/worklet">
+registerLayout('parent', class {
+  *intrinsicSizes() {}
+  *layout() {}
+  *layout([child], edges, constraints, styleMap) {
+    let childFragment = null;
+
+    try {
+      // We need SABs to be enabled to properly run this test.
+      if (typeof SharedArrayBuffer !== 'undefined') {
+        childFragment = yield child.layoutNextFragment({
+          data: { sab: new SharedArrayBuffer(4) }
+        });
+      } else {
+        throw Error();
+      }
+    } catch(e) {
+      // Success! The structured cloning algorithm should have thrown an error.
+      childFragment = yield child.layoutNextFragment({});
+      return {autoBlockSize: 100, childFragments: [childFragment]};
+    }
+
+    return {autoBlockSize: 0, childFragments: [childFragment]};
+  }
+});
+
+registerLayout('child', class {
+  *intrinsicSizes() {}
+  *layout() {}
+  *layout() {
+    return {autoBlockSize: 0};
+  }
+});
+</script>
+
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent);
+</script>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/constraints-data.https.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-data">
+<link rel="match" href="green-square-ref.html">
+<meta name="assert" content="This test checks that passing data to a child layout works correctly." />
+<style>
+.test {
+  background: red;
+  width: 100px;
+}
+
+@supports (display: layout(parent)) {
+  .test {
+    display: layout(parent);
+    background: green;
+  }
+
+  .child {
+    display: layout(child);
+  }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+
+<div class="test">
+  <div class="child"></div>
+</div>
+
+<script id="code" type="text/worklet">
+const DATA = {
+  str: 'hello',
+  num: 42,
+  obj: {str2: 'world'},
+};
+
+registerLayout('parent', class {
+  *intrinsicSizes() {}
+  *layout() {}
+  *layout([child], edges, constraints, styleMap) {
+
+    const childFragment = yield child.layoutNextFragment({data: DATA});
+
+    // If the child's block-size is 100 the structured cloning worked.
+    if (childFragment.blockSize === 100) {
+      return {autoBlockSize: 100, childFragments: [childFragment]};
+    }
+
+    return {autoBlockSize: 0, childFragments: [childFragment]};
+  }
+});
+
+registerLayout('child', class {
+  *intrinsicSizes() {}
+  *layout() {}
+  *layout(children, edges, constraints, styleMap) {
+    // Use JSON.stringify to make sure the structured cloning worked.
+    if (constraints.data !== DATA &&
+        JSON.stringify(constraints.data) === JSON.stringify(DATA)) {
+      return {autoBlockSize: 100};
+    }
+
+    return {autoBlockSize: 0};
+  }
+});
+</script>
+
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent);
+</script>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/fragment-data-function-failure.https.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutfragment-data">
+<link rel="match" href="green-square-ref.html">
+<meta name="assert" content="This test checks that passing something that can't be serialized to the parent triggers a fallback to block layout." />
+<style>
+.test {
+  background: red;
+  width: 100px;
+}
+
+.child {
+  height: 100px;
+}
+
+@supports (display: layout(fallback-fn)) {
+  .test {
+    display: layout(fallback-fn);
+    background: green;
+  }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+
+<div class="test">
+  <div class="child"></div>
+</div>
+
+<script id="code" type="text/worklet">
+registerLayout('fallback-fn', class {
+  *intrinsicSizes() {}
+  *layout() {}
+  *layout(children, edges, constraints, styleMap) {
+    const childFragments = yield children.map(child => child.layoutNextFragment());
+    return {autoBlockSize: 0, childFragments, data: {fn: function() {}}};
+  }
+});
+</script>
+
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent);
+</script>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/fragment-data-immutable.https.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutfragment-data">
+<link rel="match" href="green-square-ref.html">
+<meta name="assert" content="This test checks that LayoutFragment#data is immutable between child layout passes." />
+<style>
+.test {
+  background: red;
+  width: 100px;
+}
+
+@supports (display: layout(parent)) {
+  .test {
+    display: layout(parent);
+    background: green;
+  }
+
+  .child {
+    display: layout(child);
+  }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+
+<div class="test">
+  <div class="child"></div>
+</div>
+
+<script id="code" type="text/worklet">
+registerLayout('parent', class {
+  *intrinsicSizes() {}
+  *layout() {}
+  *layout([child], edges, constraints, styleMap) {
+
+    const childFragment10 = yield child.layoutNextFragment({fixedInlineSize: 10});
+
+    // First layout data should be "10".
+    if (childFragment10.data.size !== 10) {
+      return {autoBlockSize: 0, childFragments: [childFragment10]};
+    }
+
+    const childFragment20 = yield child.layoutNextFragment({fixedInlineSize: 20});
+
+    // Second layout data should be "20".
+    if (childFragment20.data.size !== 20) {
+      return {autoBlockSize: 0, childFragments: [childFragment10]};
+    }
+
+    // First layout data should still be "10".
+    if (childFragment10.data.size !== 10) {
+      return {autoBlockSize: 0, childFragments: [childFragment10]};
+    }
+
+    return {autoBlockSize: 100, childFragments: [childFragment20]};
+  }
+});
+
+registerLayout('child', class {
+  *intrinsicSizes() {}
+  *layout() {}
+  *layout(children, edges, constraints, styleMap) {
+    return {autoBlockSize: 10, data: {size: constraints.fixedInlineSize}};
+  }
+});
+</script>
+
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent);
+</script>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/fragment-data-sab-failure.https.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutfragment-data">
+<link rel="match" href="green-square-ref.html">
+<meta name="assert" content="This test checks that a SharedArrayBuffer can't be passed to the parent layout." />
+<style>
+.test {
+  background: red;
+  width: 100px;
+}
+
+.child {
+  height: 100px;
+}
+
+@supports (display: layout(fallback-sab)) {
+  .test {
+    display: layout(fallback-sab);
+    background: green;
+  }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+
+<div class="test">
+  <div class="child"></div>
+</div>
+
+<script id="code" type="text/worklet">
+registerLayout('fallback-sab', class {
+  *intrinsicSizes() {}
+  *layout() {}
+  *layout(children, edges, constraints, styleMap) {
+    const childFragments = yield children.map(child => child.layoutNextFragment());
+
+    if (typeof SharedArrayBuffer !== 'undefined') {
+      return {autoBlockSize: 0, childFragments, data: {sab: new SharedArrayBuffer(4) }};
+    } else {
+      throw Error();
+    }
+  }
+});
+</script>
+
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent);
+</script>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/fragment-data.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-layoutfragment-data">
+<link rel="match" href="green-square-ref.html">
+<meta name="assert" content="This test checks that passing data to a parent layout works correctly." />
+<style>
+.test {
+  background: red;
+  width: 100px;
+}
+
+@supports (display: layout(parent)) {
+  .test {
+    display: layout(parent);
+    background: green;
+  }
+
+  .child {
+    display: layout(child);
+  }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+
+<div class="test">
+  <div class="child"></div>
+</div>
+
+<script id="code" type="text/worklet">
+const DATA = {
+  str: 'hello',
+  num: 42,
+  obj: {str2: 'world'},
+};
+
+registerLayout('parent', class {
+  *intrinsicSizes() {}
+  *layout() {}
+  *layout([child], edges, constraints, styleMap) {
+
+    const childFragment = yield child.layoutNextFragment();
+
+    // Use JSON.stringify to make sure the structured cloning worked.
+    if (childFragment.data !== DATA &&
+        JSON.stringify(childFragment.data) === JSON.stringify(DATA)) {
+      return {autoBlockSize: 100, childFragments: [childFragment]};
+    }
+
+    return {autoBlockSize: 0, childFragments: [childFragment]};
+  }
+});
+
+registerLayout('child', class {
+  *intrinsicSizes() {}
+  *layout() {}
+  *layout(children, edges, constraints, styleMap) {
+    return {autoBlockSize: 10, data: DATA};
+  }
+});
+</script>
+
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent);
+</script>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/green-square-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<style>
+.result {
+  background: green;
+  height: 100px;
+  width: 100px;
+}
+</style>
+<div class="result"></div>
--- a/testing/web-platform/tests/css/css-layout-api/layout-child-absolute.https.html
+++ b/testing/web-platform/tests/css/css-layout-api/layout-child-absolute.https.html
@@ -1,20 +1,19 @@
 <!DOCTYPE html>
 <html class=reftest-wait>
 <link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layout-children">
-<link rel="match" href="layout-child-ref.html">
+<link rel="match" href="green-square-ref.html">
 <meta name="assert" content="This test checks that absolute children don't appear in the children array." />
 
 <style>
 .test {
   --child-expected: ["2"];
 
   background: red;
-  margin: 10px;
   width: 100px;
 }
 
 .absolute {
   position: absolute;
   visibility: hidden;
   --child: 1;
 }
--- a/testing/web-platform/tests/css/css-layout-api/layout-child-before-after.https.html
+++ b/testing/web-platform/tests/css/css-layout-api/layout-child-before-after.https.html
@@ -1,20 +1,19 @@
 <!DOCTYPE html>
 <html class=reftest-wait>
 <link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layout-children">
-<link rel="match" href="layout-child-ref.html">
+<link rel="match" href="green-square-ref.html">
 <meta name="assert" content="This test checks that boxes created by ::before/::after appear as children." />
 
 <style>
 .test {
   --child-expected: ["1", "2", "3"];
 
   background: red;
-  margin: 10px;
   width: 100px;
 }
 
 .test::before {
   visibility: hidden;
   content: 'before';
   --child: 1;
 }
--- a/testing/web-platform/tests/css/css-layout-api/layout-child-fixed.https.html
+++ b/testing/web-platform/tests/css/css-layout-api/layout-child-fixed.https.html
@@ -1,20 +1,19 @@
 <!DOCTYPE html>
 <html class=reftest-wait>
 <link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layout-children">
-<link rel="match" href="layout-child-ref.html">
+<link rel="match" href="green-square-ref.html">
 <meta name="assert" content="This test checks that fixed children don't appear in the children array." />
 
 <style>
 .test {
   --child-expected: ["2"];
 
   background: red;
-  margin: 10px;
   width: 100px;
 }
 
 .fixed {
   position: fixed;
   visibility: hidden;
   --child: 1;
 }
--- a/testing/web-platform/tests/css/css-layout-api/layout-child-float.https.html
+++ b/testing/web-platform/tests/css/css-layout-api/layout-child-float.https.html
@@ -1,20 +1,19 @@
 <!DOCTYPE html>
 <html class=reftest-wait>
 <link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layout-children">
-<link rel="match" href="layout-child-ref.html">
+<link rel="match" href="green-square-ref.html">
 <meta name="assert" content="This test checks that float children appear in the children array." />
 
 <style>
 .test {
   --child-expected: ["1", "2"];
 
   background: red;
-  margin: 10px;
   width: 100px;
 }
 
 .float {
   float: right;
   visibility: hidden;
   --child: 1;
 }
--- a/testing/web-platform/tests/css/css-layout-api/layout-child-inflow.https.html
+++ b/testing/web-platform/tests/css/css-layout-api/layout-child-inflow.https.html
@@ -1,20 +1,19 @@
 <!DOCTYPE html>
 <html class=reftest-wait>
 <link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layout-children">
-<link rel="match" href="layout-child-ref.html">
+<link rel="match" href="green-square-ref.html">
 <meta name="assert" content="This test checks that regular inflow children appear as children." />
 
 <style>
 .test {
   --child-expected: ["1", "2"];
 
   background: red;
-  margin: 10px;
   width: 100px;
 }
 
 .inflow-1 {
   visibility: hidden;
   --child: 1;
 }
 
--- a/testing/web-platform/tests/css/css-layout-api/layout-child-inlines.https.html
+++ b/testing/web-platform/tests/css/css-layout-api/layout-child-inlines.https.html
@@ -1,22 +1,21 @@
 <!DOCTYPE html>
 <html class=reftest-wait>
 <link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layout-children">
-<link rel="match" href="layout-child-ref.html">
+<link rel="match" href="green-square-ref.html">
 <meta name="assert" content="This test checks that inline children are correctly blockified or wrapped in anonymous boxes." />
 
 <style>
 /* We have a wrapper in this test to ensure that any text that is positioned
  * slightly outside the "test" box doesn't affect the rendering.
  * This wrapper has a 10px inline padding which does the trick. */
 .wrapper {
   background: green;
   padding: 0 10px;
-  margin: 10px;
   width: 80px;
 }
 
 .test {
   --child-expected: ["1", "default", "3", "4", "5"];
 
   background: red;
   color: green;
deleted file mode 100644
--- a/testing/web-platform/tests/css/css-layout-api/layout-child-ref.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<!DOCTYPE html>
-<style>
-.result {
-  background: green;
-  margin: 10px;
-  height: 100px;
-  width: 100px;
-}
-</style>
-<div class="result"></div>
--- a/testing/web-platform/tests/css/css-layout-api/layout-child-text.https.html
+++ b/testing/web-platform/tests/css/css-layout-api/layout-child-text.https.html
@@ -1,22 +1,21 @@
 <!DOCTYPE html>
 <html class=reftest-wait>
 <link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layout-children">
-<link rel="match" href="layout-child-ref.html">
+<link rel="match" href="green-square-ref.html">
 <meta name="assert" content="This test checks that text children are correctly blockified." />
 
 <style>
 /* We have a wrapper in this test to ensure that any text that is positioned
  * slightly outside the "test" box doesn't affect the rendering.
  * This wrapper has a 10px inline padding which does the trick. */
 .wrapper {
   background: green;
   padding: 0 10px;
-  margin: 10px;
   width: 80px;
 }
 
 .test {
   --child-expected: ["default", "2", "default"];
 
   background: red;
   color: green;
--- a/testing/web-platform/tests/css/css-layout-api/perform-child-layout-available-inline-size-htb-htb.https.html
+++ b/testing/web-platform/tests/css/css-layout-api/perform-child-layout-available-inline-size-htb-htb.https.html
@@ -1,19 +1,18 @@
 <!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">
+<link rel="match" href="green-square-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;
 
--- a/testing/web-platform/tests/css/css-layout-api/perform-child-layout-available-inline-size-htb-vrl.https.html
+++ b/testing/web-platform/tests/css/css-layout-api/perform-child-layout-available-inline-size-htb-vrl.https.html
@@ -1,19 +1,18 @@
 <!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">
+<link rel="match" href="green-square-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;
 
--- a/testing/web-platform/tests/css/css-layout-api/perform-child-layout-available-inline-size-vrl-htb.https.html
+++ b/testing/web-platform/tests/css/css-layout-api/perform-child-layout-available-inline-size-vrl-htb.https.html
@@ -1,19 +1,18 @@
 <!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">
+<link rel="match" href="green-square-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;
 
--- a/testing/web-platform/tests/css/css-layout-api/perform-child-layout-available-inline-size-vrl-vrl.https.html
+++ b/testing/web-platform/tests/css/css-layout-api/perform-child-layout-available-inline-size-vrl-vrl.https.html
@@ -1,19 +1,18 @@
 <!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">
+<link rel="match" href="green-square-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;
 
--- 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
@@ -1,19 +1,18 @@
 <!DOCTYPE html>
 <html class=reftest-wait>
 <link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-fixedinlinesize">
-<link rel="match" href="layout-child-ref.html">
+<link rel="match" href="green-square-ref.html">
 <meta name="assert" content="This test checks that fixing the block size of children works as expected." />
 
 <style>
 .test {
   writing-mode: vertical-rl;
   background: red;
-  margin: 10px;
   height: 100px;
 }
 
 .htb {
   writing-mode: horizontal-tb;
   visibility: hidden;
   width: 3px;
   height: 2px;
--- 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
@@ -1,18 +1,17 @@
 <!DOCTYPE html>
 <html class=reftest-wait>
 <link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-fixedblocksize">
-<link rel="match" href="layout-child-ref.html">
+<link rel="match" href="green-square-ref.html">
 <meta name="assert" content="This test checks that fixing the block size of children works as expected." />
 
 <style>
 .test {
   background: red;
-  margin: 10px;
   width: 100px;
 }
 
 .htb {
   writing-mode: horizontal-tb;
   visibility: hidden;
   width: 3px;
   height: 2px;
--- 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
@@ -1,19 +1,18 @@
 <!DOCTYPE html>
 <html class=reftest-wait>
 <link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-fixedinlinesize">
-<link rel="match" href="layout-child-ref.html">
+<link rel="match" href="green-square-ref.html">
 <meta name="assert" content="This test checks that fixing the inline size of children works as expected." />
 
 <style>
 .test {
   writing-mode: vertical-rl;
   background: red;
-  margin: 10px;
   height: 100px;
 }
 
 .htb {
   writing-mode: horizontal-tb;
   visibility: hidden;
   width: 3px;
   height: 2px;
--- 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
@@ -1,18 +1,17 @@
 <!DOCTYPE html>
 <html class=reftest-wait>
 <link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-fixedinlinesize">
-<link rel="match" href="layout-child-ref.html">
+<link rel="match" href="green-square-ref.html">
 <meta name="assert" content="This test checks that fixing the inline size of children works as expected." />
 
 <style>
 .test {
   background: red;
-  margin: 10px;
   width: 100px;
 }
 
 .htb {
   writing-mode: horizontal-tb;
   visibility: hidden;
   width: 3px;
   height: 2px;