Update web-platform-tests to revision 0d4300c5045a5587c2eb3d1416b11ffeecf5dadc

tests/wpt/web-platform-tests/css/css-layout-api/auto-block-size-absolute.https.html

@@ -60,8 +60,8 @@
 
 <script id="code" type="text/worklet">
 registerLayout('block-size-100', class {
-  *intrinsicSizes() {}
-  *layout() {
+  async intrinsicSizes() {}
+  async layout() {
     return {autoBlockSize: 100};
   }
 });

tests/wpt/web-platform-tests/css/css-layout-api/auto-block-size-flex.https.html

@@ -42,14 +42,14 @@
 
 <script id="code" type="text/worklet">
 registerLayout('block-size-100', class {
-  *intrinsicSizes() {}
-  *layout() {
+  async intrinsicSizes() {}
+  async layout() {
     return {autoBlockSize: 100};
   }
 });
 registerLayout('block-size-50', class {
-  *intrinsicSizes() {}
-  *layout() {
+  async intrinsicSizes() {}
+  async layout() {
     return {autoBlockSize: 50};
   }
 });

tests/wpt/web-platform-tests/css/css-layout-api/auto-block-size-floats.https.html

@@ -44,8 +44,8 @@
 
 <script id="code" type="text/worklet">
 registerLayout('block-size-100', class {
-  *intrinsicSizes() {}
-  *layout() {
+  async intrinsicSizes() {}
+  async layout() {
     return {autoBlockSize: 100};
   }
 });

tests/wpt/web-platform-tests/css/css-layout-api/auto-block-size-inflow.https.html

@@ -50,8 +50,8 @@
 
 <script id="code" type="text/worklet">
 registerLayout('block-size-100', class {
-  *intrinsicSizes() {}
-  *layout() {
+  async intrinsicSizes() {}
+  async layout() {
     return {autoBlockSize: 100};
   }
 });

tests/wpt/web-platform-tests/css/css-layout-api/auto-block-size-negative.https.html

@@ -38,8 +38,8 @@
 
 <script id="code" type="text/worklet">
 registerLayout('block-size-negative', class {
-  *intrinsicSizes() {}
-  *layout() {
+  async intrinsicSizes() {}
+  async layout() {
     return {autoBlockSize: -100};
   }
 });

tests/wpt/web-platform-tests/css/css-layout-api/box-tree-registered.https.html

@@ -55,8 +55,8 @@
 
 <script id="code" type="text/worklet">
 registerLayout('registered', class {
-  *intrinsicSizes() {}
-  *layout() { throw Error(); }
+  async intrinsicSizes() {}
+  async layout() { throw Error(); }
 });
 </script>
 

tests/wpt/web-platform-tests/css/css-layout-api/constraints-data-function-failure.https.html

@@ -29,18 +29,17 @@
 
 <script id="code" type="text/worklet">
 registerLayout('parent', class {
-  *intrinsicSizes() {}
-  *layout() {}
-  *layout([child], edges, constraints, styleMap) {
+  async intrinsicSizes() {}
+  async layout([child], edges, constraints, styleMap) {
     let childFragment = null;
 
     try {
-      childFragment = yield child.layoutNextFragment({
+      childFragment = await child.layoutNextFragment({
         data: { fn: function() {} }
       });
     } catch(e) {
       // Success! The structured cloning algorithm should have thrown an error.
-      childFragment = yield child.layoutNextFragment({});
+      childFragment = await child.layoutNextFragment({});
       return {autoBlockSize: 100, childFragments: [childFragment]};
     }
 
@@ -49,9 +48,8 @@ registerLayout('parent', class {
 });
 
 registerLayout('child', class {
-  *intrinsicSizes() {}
-  *layout() {}
-  *layout() {
+  async intrinsicSizes() {}
+  async layout() {
     return {autoBlockSize: 0};
   }
 });

tests/wpt/web-platform-tests/css/css-layout-api/constraints-data-sab-failure.https.html

@@ -29,23 +29,17 @@
 
 <script id="code" type="text/worklet">
 registerLayout('parent', class {
-  *intrinsicSizes() {}
-  *layout() {}
-  *layout([child], edges, constraints, styleMap) {
+  async intrinsicSizes() {}
+  async 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();
-      }
+      childFragment = await child.layoutNextFragment({
+        data: { sab: new SharedArrayBuffer(4) }
+      });
     } catch(e) {
       // Success! The structured cloning algorithm should have thrown an error.
-      childFragment = yield child.layoutNextFragment({});
+      childFragment = await child.layoutNextFragment({});
       return {autoBlockSize: 100, childFragments: [childFragment]};
     }
 
@@ -54,9 +48,8 @@ registerLayout('parent', class {
 });
 
 registerLayout('child', class {
-  *intrinsicSizes() {}
-  *layout() {}
-  *layout() {
+  async intrinsicSizes() {}
+  async layout() {
     return {autoBlockSize: 0};
   }
 });

tests/wpt/web-platform-tests/css/css-layout-api/constraints-data.https.html

@@ -35,11 +35,10 @@ const DATA = {
 };
 
 registerLayout('parent', class {
-  *intrinsicSizes() {}
-  *layout() {}
-  *layout([child], edges, constraints, styleMap) {
+  async intrinsicSizes() {}
+  async layout([child], edges, constraints, styleMap) {
 
-    const childFragment = yield child.layoutNextFragment({data: DATA});
+    const childFragment = await child.layoutNextFragment({data: DATA});
 
     // If the child's block-size is 100 the structured cloning worked.
     if (childFragment.blockSize === 100) {
@@ -51,9 +50,8 @@ registerLayout('parent', class {
 });
 
 registerLayout('child', class {
-  *intrinsicSizes() {}
-  *layout() {}
-  *layout(children, edges, constraints, styleMap) {
+  async intrinsicSizes() {}
+  async 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)) {

tests/wpt/web-platform-tests/css/css-layout-api/fallback-constructor-error.https.html

@@ -40,8 +40,8 @@
 <script id="code" type="text/worklet">
 registerLayout('throwing-ctor', class {
   constructor() { throw Error('fail!'); }
-  *intrinsicSizes() {}
-  *layout() {}
+  async intrinsicSizes() {}
+  async layout() {}
 });
 </script>
 

tests/wpt/web-platform-tests/css/css-layout-api/fallback-layout-error.https.html

@@ -39,8 +39,8 @@
 
 <script id="code" type="text/worklet">
 registerLayout('throwing-layout', class {
-  *intrinsicSizes() {}
-  *layout() { throw Error('fail!'); }
+  async intrinsicSizes() {}
+  async layout() { throw Error('fail!'); }
 });
 </script>
 

tests/wpt/web-platform-tests/css/css-layout-api/fallback-layout-invalid-child.https.html

@@ -32,15 +32,15 @@
 registerLayout('bad-child-layout', class {
   static get inputProperties() { return ['--fail']; }
 
-  *intrinsicSizes() {}
-  *layout(children, _, __, styleMap) {
+  async intrinsicSizes() {}
+  async layout(children, _, __, styleMap) {
     if (styleMap.get('--fail').toString() !== 'true') {
       this.child = children[0];
     }
 
     // Try to perform layout on the child. If its invalid (we skipped the if
     // statement above) we should fallback to block layout.
-    const fragment = yield this.child.layoutNextFragment({});
+    const fragment = await this.child.layoutNextFragment({});
 
     return {autoBlockSize: 0, childFragments: [fragment]};
   }

tests/wpt/web-platform-tests/css/css-layout-api/fallback-layout-invalid-fragment-request.https.html

@@ -1,84 +0,0 @@
-<!DOCTYPE html>
-<html class=reftest-wait>
-<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#invoke-a-layout-callback">
-<link rel="match" href="fallback-ref.html">
-<meta name="assert" content="This test checks that a layout() class performing layout on an invalid fragment request will fallback to block layout." />
-<style>
-.test {
-  background: red;
-  border: solid 2px;
-  width: 100px;
-}
-
-.test > div {
-  height: 100px;
-}
-
-@supports (display: layout(bad-request)) {
-  .test {
-    display: layout(bad-request);
-    background: green;
-  }
-}
-</style>
-<script src="/common/reftest-wait.js"></script>
-<script src="/common/worklet-reftest.js"></script>
-
-<div class="test">
-  <div></div>
-</div>
-
-<script id="code" type="text/worklet">
-registerLayout('bad-request', class {
-  static get inputProperties() { return ['--fail']; }
-
-  *intrinsicSizes() {}
-  *layout(children, _, __, styleMap) {
-    if (styleMap.get('--fail').toString() !== 'true') {
-      this.request = children[0].layoutNextFragment({});
-    }
-
-    // Try to perform layout on the child. If its invalid (we skipped the if
-    // statement above) we should fallback to block layout.
-    const childFragments = yield [this.request];
-
-    return {autoBlockSize: 0, childFragments};
-  }
-});
-</script>
-
-<script>
-function raf() {
-  return new Promise((resolve) => {
-    requestAnimationFrame(() => {
-      resolve();
-    });
-  });
-}
-
-(async function() {
-  if (typeof CSS.layoutWorklet === 'undefined') {
-    takeScreenshot();
-    return;
-  }
-
-  await importWorklet(CSS.layoutWorklet, document.getElementById('code').textContent);
-
-  // Ensure that all instances have a child to perform an invalid layout upon.
-  const test = document.getElementsByClassName('test')[0];
-  for (let i = 0; i < 100; i++) {
-    test.innerHTML = '<div><div>';
-    await raf();
-  }
-
-  // The next layout should mean that we will fallback to block.
-  test.innerHTML = '<div></div>';
-  test.style.setProperty('--fail', 'true');
-
-  // Finish up the test.
-  await raf();
-  await raf();
-  takeScreenshot();
-})();
-</script>
-</html>

tests/wpt/web-platform-tests/css/css-layout-api/fallback-layout-invalid-fragment.https.html

@@ -32,10 +32,10 @@
 registerLayout('bad-request', class {
   static get inputProperties() { return ['--fail']; }
 
-  *intrinsicSizes() {}
-  *layout(children, _, __, styleMap) {
+  async intrinsicSizes() {}
+  async layout(children, _, __, styleMap) {
     if (styleMap.get('--fail').toString() !== 'true') {
-      this.fragment = yield children[0].layoutNextFragment({});
+      this.fragment = await children[0].layoutNextFragment({});
     }
 
     // Return, if the fragment is invalid (we skipped the if statement above)

tests/wpt/web-platform-tests/css/css-layout-api/fallback-layout-no-promise.https.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#invoke-a-layout-callback">
+<link rel="match" href="fallback-ref.html">
+<meta name="assert" content="This test checks that a layout() class with a layout function that doesn't return a promise will fallback to block layout." />
+<style>
+.test {
+  background: red;
+  border: solid 2px;
+  width: 100px;
+}
+
+.child {
+  height: 100px;
+}
+
+@supports (display: layout(no-promise)) {
+  .test {
+    display: layout(no-promise);
+    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('no-promise', class {
+  async intrinsicSizes() {}
+  layout() { return {autoBlockSize: 50}; }
+});
+</script>
+
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent);
+</script>
+</html>

tests/wpt/web-platform-tests/css/css-layout-api/fallback-layout-return.https.html

@@ -39,8 +39,8 @@
 
 <script id="code" type="text/worklet">
 registerLayout('bad-return', class {
-  *intrinsicSizes() {}
-  *layout() { return 42; }
+  async intrinsicSizes() {}
+  async layout() { return 42; }
 });
 </script>
 

tests/wpt/web-platform-tests/css/css-layout-api/fallback-layout-unresolved-promise.https.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#invoke-a-layout-callback">
+<link rel="match" href="fallback-ref.html">
+<meta name="assert" content="This test checks that a layout() class with a layout function that doesn't return a promise will fallback to block layout." />
+<style>
+.test {
+  background: red;
+  border: solid 2px;
+  width: 100px;
+}
+
+.child {
+  height: 100px;
+}
+
+@supports (display: layout(unresolved-promise)) {
+  .test {
+    display: layout(unresolved-promise);
+    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('unresolved-promise', class {
+  async intrinsicSizes() {}
+  layout() { return new Promise(() => { /* never resolves */ }); }
+});
+</script>
+
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent);
+</script>
+</html>

tests/wpt/web-platform-tests/css/css-layout-api/fragment-data-function-failure.https.html

@@ -29,10 +29,9 @@
 
 <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());
+  async intrinsicSizes() {}
+  async layout(children, edges, constraints, styleMap) {
+    const childFragments = await children.map(child => child.layoutNextFragment());
     return {autoBlockSize: 0, childFragments, data: {fn: function() {}}};
   }
 });

tests/wpt/web-platform-tests/css/css-layout-api/fragment-data-immutable.https.html

@@ -29,18 +29,17 @@
 
 <script id="code" type="text/worklet">
 registerLayout('parent', class {
-  *intrinsicSizes() {}
-  *layout() {}
-  *layout([child], edges, constraints, styleMap) {
+  async intrinsicSizes() {}
+  async layout([child], edges, constraints, styleMap) {
 
-    const childFragment10 = yield child.layoutNextFragment({fixedInlineSize: 10});
+    const childFragment10 = await 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});
+    const childFragment20 = await child.layoutNextFragment({fixedInlineSize: 20});
 
     // Second layout data should be "20".
     if (childFragment20.data.size !== 20) {
@@ -57,9 +56,8 @@ registerLayout('parent', class {
 });
 
 registerLayout('child', class {
-  *intrinsicSizes() {}
-  *layout() {}
-  *layout(children, edges, constraints, styleMap) {
+  async intrinsicSizes() {}
+  async layout(children, edges, constraints, styleMap) {
     return {autoBlockSize: 10, data: {size: constraints.fixedInlineSize}};
   }
 });

tests/wpt/web-platform-tests/css/css-layout-api/fragment-data-sab-failure.https.html

@@ -29,16 +29,11 @@
 
 <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());
+  async intrinsicSizes() {}
+  async layout(children, edges, constraints, styleMap) {
+    const childFragments = await Promise.all(children.map(child => child.layoutNextFragment()));
 
-    if (typeof SharedArrayBuffer !== 'undefined') {
-      return {autoBlockSize: 0, childFragments, data: {sab: new SharedArrayBuffer(4) }};
-    } else {
-      throw Error();
-    }
+    return {autoBlockSize: 0, childFragments, data: {sab: new SharedArrayBuffer(4) }};
   }
 });
 </script>

tests/wpt/web-platform-tests/css/css-layout-api/fragment-data.https.html

@@ -35,11 +35,10 @@ const DATA = {
 };
 
 registerLayout('parent', class {
-  *intrinsicSizes() {}
-  *layout() {}
-  *layout([child], edges, constraints, styleMap) {
+  async intrinsicSizes() {}
+  async layout([child], edges, constraints, styleMap) {
 
-    const childFragment = yield child.layoutNextFragment();
+    const childFragment = await child.layoutNextFragment();
 
     // Use JSON.stringify to make sure the structured cloning worked.
     if (childFragment.data !== DATA &&
@@ -52,9 +51,8 @@ registerLayout('parent', class {
 });
 
 registerLayout('child', class {
-  *intrinsicSizes() {}
-  *layout() {}
-  *layout(children, edges, constraints, styleMap) {
+  async intrinsicSizes() {}
+  async layout(children, edges, constraints, styleMap) {
     return {autoBlockSize: 10, data: DATA};
   }
 });

tests/wpt/web-platform-tests/css/css-layout-api/style-map-multi.https.html

@@ -33,8 +33,8 @@ registerLayout('test', class {
     return [ '--bar', '--foo', 'empty-cells', 'margin-left'];
   }
 
-  *intrinsicSizes() {}
-  *layout(children, edges, constraints, styleMap) {
+  async intrinsicSizes() {}
+  async layout(children, edges, constraints, styleMap) {
     const expected = [
       {property: '--bar', value: '[CSSUnparsedValue=]'},
       {property: '--foo', value: '[CSSUnparsedValue= bar]'},

tests/wpt/web-platform-tests/css/css-layout-api/style-map.https.html

@@ -40,8 +40,8 @@ const tmpl = (test, idx) => {
     registerLayout('test-${idx}', class {
       static get inputProperties() { return ['${test.property}']; }
 
-      *intrinsicSizes() {}
-      *layout(children, edges, constraints, styleMap) {
+      async intrinsicSizes() {}
+      async layout(children, edges, constraints, styleMap) {
         const value = styleMap.get('${test.property}');
         const result = '[' + value.constructor.name + '=' + value.toString() + ']';
         if (result != '${test.expected}')

tests/wpt/web-platform-tests/css/css-layout-api/support/constraints-fixed-block-size.js

@@ -3,8 +3,8 @@ registerLayout('test', class {
     return ['--expected-block-size'];
   }
 
-  *intrinsicSizes() {}
-  *layout([child], edges, constraints, styleMap) {
+  async intrinsicSizes() {}
+  async layout([child], edges, constraints, styleMap) {
     let childFixedInlineSize = 0;
     let childFixedBlockSize = 0;
     if (constraints.fixedBlockSize === JSON.parse(styleMap.get('--expected-block-size'))) {
@@ -12,7 +12,7 @@ registerLayout('test', class {
       childFixedBlockSize = 100;
     }
 
-    const childFragments = [yield child.layoutNextFragment({
+    const childFragments = [await child.layoutNextFragment({
       fixedInlineSize: childFixedInlineSize,
       fixedBlockSize: childFixedBlockSize,
     })];

tests/wpt/web-platform-tests/css/css-layout-api/support/constraints-fixed-inline-size.js

@@ -1,6 +1,6 @@
 registerLayout('test', class {
-  *intrinsicSizes() {}
-  *layout(children, edges, constraints, styleMap) {
+  async intrinsicSizes() {}
+  async layout(children, edges, constraints, styleMap) {
     if (constraints.fixedInlineSize !== 100)
       return {autoBlockSize: 0};
 

tests/wpt/web-platform-tests/css/css-layout-api/support/layout-child-sizes-worklet.js

@@ -20,9 +20,9 @@ registerLayout('test', class {
     ];
   }
 
-  *intrinsicSizes() {}
-  *layout(children, edges, constraints, styleMap) {
-    const childFragments = yield children.map((child) => {
+  async intrinsicSizes() {}
+  async layout(children, edges, constraints, styleMap) {
+    const childFragments = await Promise.all(children.map((child) => {
       const childConstraints = {};
       const availableInlineSize = parseNumber(child.styleMap.get('--available-inline-size'));
       const availableBlockSize = parseNumber(child.styleMap.get('--available-block-size'));
@@ -38,7 +38,7 @@ registerLayout('test', class {
         percentageInlineSize,
         percentageBlockSize,
       });
-    });
+    }));
 
     const actual = childFragments.map((childFragment) => {
       return {

tests/wpt/web-platform-tests/css/css-layout-api/support/layout-child-worklet.js

@@ -9,14 +9,14 @@ registerLayout('test', class {
     return [ '--child' ];
   }
 
-  *intrinsicSizes() {}
-  *layout(children, edges, constraints, styleMap) {
+  async intrinsicSizes() {}
+  async layout(children, edges, constraints, styleMap) {
     const expected = JSON.parse(styleMap.get('--child-expected').toString());
     const actual = children.map((child) => {
       return child.styleMap.get('--child').toString().trim();
     });
 
-    const childFragments = yield children.map((child) => { return child.layoutNextFragment({}); });
+    const childFragments = await Promise.all(children.map(child => child.layoutNextFragment({})));
 
     if (!areArraysEqual(expected, actual))
       return {autoBlockSize: 0, childFragments};

tests/wpt/web-platform-tests/css/css-layout-api/support/layout-position-child-worklet.js

@@ -6,11 +6,9 @@ registerLayout('test', class {
     ];
   }
 
-  *intrinsicSizes() {}
-  *layout(children, edges, constraints, styleMap) {
-    const childFragments = yield children.map((child) => {
-      return child.layoutNextFragment({});
-    });
+  async intrinsicSizes() {}
+  async layout(children, edges, constraints, styleMap) {
+    const childFragments = await Promise.all(children.map((child) => child.layoutNextFragment({})));
 
     for (let i = 0; i < children.length; i++) {
       childFragments[i].inlineOffset = parseInt(children[i].styleMap.get('--inline-offset').toString());

tests/wpt/web-platform-tests/css/css-layout-api/sync-layout-microtasks.https.html

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#invoke-a-layout-callback">
+<meta name="assert" content="This test checks running the microtask queue for a layout() class won't run the main world's microtask queue." />
+<style>
+#test {
+  display: layout(child-layout);
+  width: 100px;
+}
+
+#test > div {
+  height: 100px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+
+<div id="test">
+  <div></div>
+</div>
+
+<script id="code" type="text/worklet">
+registerLayout('child-layout', class {
+  async intrinsicSizes() {}
+  async layout([child]) {
+    const fragment = await child.layoutNextFragment();
+    return {autoBlockSize: 50, childFragments: [fragment]};
+  }
+});
+</script>
+
+<script>
+promise_test(async t => {
+  if (typeof CSS.layoutWorklet === 'undefined') {
+    throw Error('CSS Layout API not supported.');
+  }
+
+  await importWorklet(CSS.layoutWorklet, document.getElementById('code').textContent);
+
+  let resolved = false;
+  let p = Promise.resolve().then(() => {
+    resolved = true;
+  });
+  assert_false(resolved);
+
+  // Running the layout-worklet's microtask queue shouldn't trigger the main
+  // world's microtask queue.
+  assert_equals(document.getElementById('test').clientHeight, 50);
+  assert_false(resolved);
+
+  await p;
+  assert_true(resolved);
+});
+</script>
+</html>