Bug 1463607 [wpt PR 11107] - [css-layout-api] Adds ability to set available sizes on children., a=testonly
authorIan Kilpatrick <ikilpatrick@chromium.org>
Wed, 06 Jun 2018 14:45:31 +0000
changeset 422144 475c97311490ef44bf30b09b547f8451e45b4c19
parent 422143 2128a7016bf665cf106a8fd143c0871a16c4aa9d
child 422145 f89c4982a46dd8111c3463d6efb5c566c46708fa
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
bugs1463607, 11107, 726125, 1069252, 561602
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 1463607 [wpt PR 11107] - [css-layout-api] Adds ability to set available sizes on children., a=testonly Automatic update from web-platform-tests[css-layout-api] Adds ability to set available sizes on children. This adds the availableInlineSize, availableBlockSize, to the layout constriants options dictionary. This also makes the children "shrink-to-fit" if they are inside a custom layout pass. Additional logic was needed to *not* "shrink-to-fit" children during the layout fallback if any occurred, so LayoutCustomPhaseScope was added to handle this. The tests that were added test a new BFC with inline children to see if shrink to fitting works as expected. Bug: 726125 Change-Id: Ic86d51579b680d871c66040f54e532bc47d79979 Reviewed-on: https://chromium-review.googlesource.com/1069252 Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org> Reviewed-by: Morten Stenshorne <mstensho@chromium.org> Cr-Commit-Position: refs/heads/master@{#561602} -- wpt-commits: 127a32efa15d361e0eb4d0db1cbf5a99d26d72d9 wpt-pr: 11107
testing/web-platform/meta/MANIFEST.json
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
testing/web-platform/tests/css/css-layout-api/support/layout-child-fixed-sizes-worklet.js
testing/web-platform/tests/css/css-layout-api/support/layout-child-sizes-worklet.js
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -120940,16 +120940,64 @@
       [
        "/css/css-layout-api/layout-child-ref.html",
        "=="
       ]
      ],
      {}
     ]
    ],
+   "css/css-layout-api/perform-child-layout-available-inline-size-htb-htb.https.html": [
+    [
+     "/css/css-layout-api/perform-child-layout-available-inline-size-htb-htb.https.html",
+     [
+      [
+       "/css/css-layout-api/layout-child-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/css-layout-api/perform-child-layout-available-inline-size-htb-vrl.https.html": [
+    [
+     "/css/css-layout-api/perform-child-layout-available-inline-size-htb-vrl.https.html",
+     [
+      [
+       "/css/css-layout-api/layout-child-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/css-layout-api/perform-child-layout-available-inline-size-vrl-htb.https.html": [
+    [
+     "/css/css-layout-api/perform-child-layout-available-inline-size-vrl-htb.https.html",
+     [
+      [
+       "/css/css-layout-api/layout-child-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/css-layout-api/perform-child-layout-available-inline-size-vrl-vrl.https.html": [
+    [
+     "/css/css-layout-api/perform-child-layout-available-inline-size-vrl-vrl.https.html",
+     [
+      [
+       "/css/css-layout-api/layout-child-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
    "css/css-layout-api/perform-child-layout-fixed-block-size-vrl.https.html": [
     [
      "/css/css-layout-api/perform-child-layout-fixed-block-size-vrl.https.html",
      [
       [
        "/css/css-layout-api/layout-child-ref.html",
        "=="
       ]
@@ -253468,17 +253516,17 @@
      {}
     ]
    ],
    "css/css-layout-api/support/constraints-fixed-inline-size.js": [
     [
      {}
     ]
    ],
-   "css/css-layout-api/support/layout-child-fixed-sizes-worklet.js": [
+   "css/css-layout-api/support/layout-child-sizes-worklet.js": [
     [
      {}
     ]
    ],
    "css/css-layout-api/support/layout-child-worklet.js": [
     [
      {}
     ]
@@ -514570,30 +514618,46 @@
   "css/css-layout-api/layout-child-ref.html": [
    "1688098230f9fb825bc73134dff15dcf5ff9782d",
    "support"
   ],
   "css/css-layout-api/layout-child-text.https.html": [
    "567ff67317cae9906e6d159dc232c41464a4e7c6",
    "reftest"
   ],
+  "css/css-layout-api/perform-child-layout-available-inline-size-htb-htb.https.html": [
+   "7db4f5c2bebe031f0689be2569ba4ca266535052",
+   "reftest"
+  ],
+  "css/css-layout-api/perform-child-layout-available-inline-size-htb-vrl.https.html": [
+   "f22cc9627b7b2ad797cc722f3d369355ffce4f60",
+   "reftest"
+  ],
+  "css/css-layout-api/perform-child-layout-available-inline-size-vrl-htb.https.html": [
+   "0e34d5b8b86aa6551e6e6a31eb086bd84b61c636",
+   "reftest"
+  ],
+  "css/css-layout-api/perform-child-layout-available-inline-size-vrl-vrl.https.html": [
+   "d619b57c395710bc2e133e05774c9a06bfd19749",
+   "reftest"
+  ],
   "css/css-layout-api/perform-child-layout-fixed-block-size-vrl.https.html": [
-   "341711737d74fb068bb3a2e348e47820c236fa49",
+   "907b9b1255516caab731555686e5c6b5517eb3f9",
    "reftest"
   ],
   "css/css-layout-api/perform-child-layout-fixed-block-size.https.html": [
-   "486fe671afaa9275bc6b32c49ca4c8143290f9be",
+   "3560b1f8249f945e1453e3e8e53745ef1941405f",
    "reftest"
   ],
   "css/css-layout-api/perform-child-layout-fixed-inline-size-vrl.https.html": [
-   "3c3b4c800af40a85eb9ddb588a07fc0d8ceec5cf",
+   "dfc48415ddbfecad7b382c4efe290b1b8da4ebac",
    "reftest"
   ],
   "css/css-layout-api/perform-child-layout-fixed-inline-size.https.html": [
-   "a25a85095781de557edde6dd02b82ee052642bf1",
+   "bae125f32f28d0cfa7db449cfb10437cb4df12a3",
    "reftest"
   ],
   "css/css-layout-api/position-fragment-htb-ltr.https.html": [
    "761ed3e46d6485b1208953c292015432da5f99e0",
    "reftest"
   ],
   "css/css-layout-api/position-fragment-htb-rtl.https.html": [
    "8a2684c25ef3603e498cf33d32dc8a2c4b4a50d5",
@@ -514634,18 +514698,18 @@
   "css/css-layout-api/style-map.https.html": [
    "361b3c82c37c0068d23ae23e96d8e9185d3765b0",
    "reftest"
   ],
   "css/css-layout-api/support/constraints-fixed-inline-size.js": [
    "ed0224a380c50a7e83d23a95be5a4348ce5bf706",
    "support"
   ],
-  "css/css-layout-api/support/layout-child-fixed-sizes-worklet.js": [
-   "5ddda72e3c9d077508622511e8685249c7803028",
+  "css/css-layout-api/support/layout-child-sizes-worklet.js": [
+   "3797af00861ae44369a90a0ae05b3a6e13a2ef54",
    "support"
   ],
   "css/css-layout-api/support/layout-child-worklet.js": [
    "87af0bfedbe9d4ea23e904edc5b22382a5d5d56c",
    "support"
   ],
   "css/css-layout-api/support/layout-position-child-worklet.js": [
    "7c05d553e6cba23d69bd40b9ad90e701440e9071",
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/perform-child-layout-available-inline-size-htb-htb.https.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableinlinesize">
+<link rel="match" href="layout-child-ref.html">
+<meta name="assert" content="This test checks that setting the available inline size of children works as expected." />
+
+<style>
+.test {
+  writing-mode: horizontal-tb;
+  background: red;
+  margin: 10px;
+  width: 100px;
+}
+
+.child {
+  writing-mode: horizontal-tb;
+  visibility: hidden;
+  line-height: 0;
+
+  --available-inline-size: 20;
+}
+
+.inline {
+  display: inline-block;
+  height: 8px;
+}
+
+.inline-size-10 { width: 10px; }
+.inline-size-30 { width: 30px; }
+
+@supports (display: layout(test)) {
+  .test {
+    background: green;
+    display: layout(test);
+  }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+
+<div class="test">
+  <!-- As the inlines don't fit within 20px, we'll end up with two lines. -->
+  <div class="child" style="--inline-size-expected: 30; --block-size-expected: 16;">
+    <span class="inline inline-size-10"></span>
+    <span class="inline inline-size-30"></span>
+  </div>
+
+  <!-- The single inline doesn't take up the whole 20px, so will be shrink fitted. -->
+  <div class="child" style="--inline-size-expected: 10; --block-size-expected: 8;">
+    <span class="inline inline-size-10"></span>
+  </div>
+
+  <!-- Make sure the max-width property clamps the size. -->
+  <div class="child" style="max-width: 25px; --inline-size-expected: 25; --block-size-expected: 8;">
+    <span class="inline inline-size-30"></span>
+  </div>
+
+  <!-- Make sure the min-width property clamps the size. -->
+  <div class="child" style="min-width: 25px; --inline-size-expected: 25; --block-size-expected: 8;">
+    <span class="inline inline-size-10"></span>
+  </div>
+</div>
+
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'});
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/perform-child-layout-available-inline-size-htb-vrl.https.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableinlinesize">
+<link rel="match" href="layout-child-ref.html">
+<meta name="assert" content="This test checks that setting the available inline size of children works as expected." />
+
+<style>
+.test {
+  writing-mode: horizontal-tb;
+  background: red;
+  margin: 10px;
+  width: 100px;
+}
+
+.child {
+  writing-mode: vertical-rl;
+  visibility: hidden;
+  line-height: 0;
+
+  --available-block-size: 20;
+}
+
+.inline {
+  display: inline-block;
+  width: 8px;
+}
+
+.inline-size-10 { height: 10px; }
+.inline-size-30 { height: 30px; }
+
+@supports (display: layout(test)) {
+  .test {
+    background: green;
+    display: layout(test);
+  }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+
+<div class="test">
+  <!-- As the inlines don't fit within 20px, we'll end up with two lines. -->
+  <div class="child" style="--block-size-expected: 30; --inline-size-expected: 16;">
+    <span class="inline inline-size-10"></span>
+    <span class="inline inline-size-30"></span>
+  </div>
+
+  <!-- The single inline doesn't take up the whole 20px, so will be shrink fitted. -->
+  <div class="child" style="--block-size-expected: 10; --inline-size-expected: 8;">
+    <span class="inline inline-size-10"></span>
+  </div>
+
+  <!-- Make sure the max-height property clamps the size. -->
+  <div class="child" style="max-height: 25px; --block-size-expected: 25; --inline-size-expected: 8;">
+    <span class="inline inline-size-30"></span>
+  </div>
+
+  <!-- Make sure the min-height property clamps the size. -->
+  <div class="child" style="min-height: 25px; --block-size-expected: 25; --inline-size-expected: 8;">
+    <span class="inline inline-size-10"></span>
+  </div>
+</div>
+
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'});
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/perform-child-layout-available-inline-size-vrl-htb.https.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableinlinesize">
+<link rel="match" href="layout-child-ref.html">
+<meta name="assert" content="This test checks that setting the available inline size of children works as expected." />
+
+<style>
+.test {
+  writing-mode: vertical-rl;
+  background: red;
+  margin: 10px;
+  height: 100px;
+}
+
+.child {
+  writing-mode: horizontal-tb;
+  visibility: hidden;
+  line-height: 0;
+
+  --available-block-size: 20;
+}
+
+.inline {
+  display: inline-block;
+  height: 8px;
+}
+
+.inline-size-10 { width: 10px; }
+.inline-size-30 { width: 30px; }
+
+@supports (display: layout(test)) {
+  .test {
+    background: green;
+    display: layout(test);
+  }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+
+<div class="test">
+  <!-- As the inlines don't fit within 20px, we'll end up with two lines. -->
+  <div class="child" style="--block-size-expected: 30; --inline-size-expected: 16;">
+    <span class="inline inline-size-10"></span>
+    <span class="inline inline-size-30"></span>
+  </div>
+
+  <!-- The single inline doesn't take up the whole 20px, so will be shrink fitted. -->
+  <div class="child" style="--block-size-expected: 10; --inline-size-expected: 8;">
+    <span class="inline inline-size-10"></span>
+  </div>
+
+  <!-- Make sure the max-width property clamps the size. -->
+  <div class="child" style="max-width: 25px; --block-size-expected: 25; --inline-size-expected: 8;">
+    <span class="inline inline-size-30"></span>
+  </div>
+
+  <!-- Make sure the min-width property clamps the size. -->
+  <div class="child" style="min-width: 25px; --block-size-expected: 25; --inline-size-expected: 8;">
+    <span class="inline inline-size-10"></span>
+  </div>
+</div>
+
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'});
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/perform-child-layout-available-inline-size-vrl-vrl.https.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableinlinesize">
+<link rel="match" href="layout-child-ref.html">
+<meta name="assert" content="This test checks that setting the available inline size of children works as expected." />
+
+<style>
+.test {
+  writing-mode: vertical-rl;
+  background: red;
+  margin: 10px;
+  height: 100px;
+}
+
+.child {
+  writing-mode: vertical-rl;
+  visibility: hidden;
+  line-height: 0;
+
+  --available-inline-size: 20;
+}
+
+.inline {
+  display: inline-block;
+  width: 8px;
+}
+
+.inline-size-10 { height: 10px; }
+.inline-size-30 { height: 30px; }
+
+@supports (display: layout(test)) {
+  .test {
+    background: green;
+    display: layout(test);
+  }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+
+<div class="test">
+  <!-- As the inlines don't fit within 20px, we'll end up with two lines. -->
+  <div class="child" style="--inline-size-expected: 30; --block-size-expected: 16;">
+    <span class="inline inline-size-10"></span>
+    <span class="inline inline-size-30"></span>
+  </div>
+
+  <!-- The single inline doesn't take up the whole 20px, so will be shrink fitted. -->
+  <div class="child" style="--inline-size-expected: 10; --block-size-expected: 8;">
+    <span class="inline inline-size-10"></span>
+  </div>
+
+  <!-- Make sure the max-height property clamps the size. -->
+  <div class="child" style="max-height: 25px; --inline-size-expected: 25; --block-size-expected: 8;">
+    <span class="inline inline-size-30"></span>
+  </div>
+
+  <!-- Make sure the min-height property clamps the size. -->
+  <div class="child" style="min-height: 25px; --inline-size-expected: 25; --block-size-expected: 8;">
+    <span class="inline inline-size-10"></span>
+  </div>
+</div>
+
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'});
+</script>
--- a/testing/web-platform/tests/css/css-layout-api/perform-child-layout-fixed-block-size-vrl.https.html
+++ b/testing/web-platform/tests/css/css-layout-api/perform-child-layout-fixed-block-size-vrl.https.html
@@ -52,10 +52,10 @@
   <!-- min/max-width should have no effect, fixedBlockSize wins. -->
   <div class="htb" style="max-width: 5px;"></div>
   <div class="vrl" style="max-width: 5px;"></div>
   <div class="htb" style="min-width: 15px;"></div>
   <div class="vrl" style="min-width: 15px;"></div>
 </div>
 
 <script>
-importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-fixed-sizes-worklet.js'});
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'});
 </script>
--- a/testing/web-platform/tests/css/css-layout-api/perform-child-layout-fixed-block-size.https.html
+++ b/testing/web-platform/tests/css/css-layout-api/perform-child-layout-fixed-block-size.https.html
@@ -51,10 +51,10 @@
   <!-- min/max-height should have no effect, fixedBlockSize wins. -->
   <div class="htb" style="max-height: 5px;"></div>
   <div class="vrl" style="max-height: 5px;"></div>
   <div class="htb" style="min-height: 15px;"></div>
   <div class="vrl" style="min-height: 15px;"></div>
 </div>
 
 <script>
-importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-fixed-sizes-worklet.js'});
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'});
 </script>
--- a/testing/web-platform/tests/css/css-layout-api/perform-child-layout-fixed-inline-size-vrl.https.html
+++ b/testing/web-platform/tests/css/css-layout-api/perform-child-layout-fixed-inline-size-vrl.https.html
@@ -52,10 +52,10 @@
   <!-- min/max-height should have no effect, fixedInlineSize wins. -->
   <div class="htb" style="max-height: 5px;"></div>
   <div class="vrl" style="max-height: 5px;"></div>
   <div class="htb" style="min-height: 15px;"></div>
   <div class="vrl" style="min-height: 15px;"></div>
 </div>
 
 <script>
-importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-fixed-sizes-worklet.js'});
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'});
 </script>
--- a/testing/web-platform/tests/css/css-layout-api/perform-child-layout-fixed-inline-size.https.html
+++ b/testing/web-platform/tests/css/css-layout-api/perform-child-layout-fixed-inline-size.https.html
@@ -51,10 +51,10 @@
   <!-- min/max-width should have no effect, fixedInlineSize wins. -->
   <div class="htb" style="max-width: 5px;"></div>
   <div class="vrl" style="max-width: 5px;"></div>
   <div class="htb" style="min-width: 15px;"></div>
   <div class="vrl" style="min-width: 15px;"></div>
 </div>
 
 <script>
-importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-fixed-sizes-worklet.js'});
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'});
 </script>
deleted file mode 100644
--- a/testing/web-platform/tests/css/css-layout-api/support/layout-child-fixed-sizes-worklet.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import {areArraysEqual} from '/common/arrays.js';
-
-function parseNumber(value) {
-  const num = parseInt(value.toString());
-  if (isNaN(num)) return undefined;
-  return num;
-}
-
-registerLayout('test', class {
-  static get childInputProperties() {
-    return [
-      '--fixed-inline-size',
-      '--fixed-block-size',
-      '--inline-size-expected',
-      '--block-size-expected'
-    ];
-  }
-
-  *intrinsicSizes() {}
-  *layout(children, edges, constraints, styleMap) {
-    const childFragments = yield children.map((child) => {
-      const childConstraints = {};
-      const fixedInlineSize = parseNumber(child.styleMap.get('--fixed-inline-size'));
-      const fixedBlockSize = parseNumber(child.styleMap.get('--fixed-block-size'));
-      return child.layoutNextFragment({fixedInlineSize, fixedBlockSize});
-    });
-
-    const actual = childFragments.map((childFragment) => {
-      return {
-        inlineSize: childFragment.inlineSize,
-        blockSize: childFragment.blockSize,
-      };
-    });
-
-    const expected = children.map((child) => {
-      return {
-        inlineSize: parseInt(child.styleMap.get('--inline-size-expected').toString()),
-        blockSize: parseInt(child.styleMap.get('--block-size-expected').toString()),
-      };
-    });
-
-    const equalityFunc = (a, b) => {
-      return a.inlineSize == b.inlineSize && a.blockSize == b.blockSize;
-    };
-
-    if (!areArraysEqual(expected, actual, equalityFunc)) {
-      return {autoBlockSize: 0, childFragments};
-    }
-
-    return {autoBlockSize: 100, childFragments};
-  }
-});
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/support/layout-child-sizes-worklet.js
@@ -0,0 +1,61 @@
+import {areArraysEqual} from '/common/arrays.js';
+
+function parseNumber(value) {
+  const num = parseInt(value.toString());
+  if (isNaN(num)) return undefined;
+  return num;
+}
+
+registerLayout('test', class {
+  static get childInputProperties() {
+    return [
+      '--available-inline-size',
+      '--available-block-size',
+      '--fixed-inline-size',
+      '--fixed-block-size',
+      '--inline-size-expected',
+      '--block-size-expected'
+    ];
+  }
+
+  *intrinsicSizes() {}
+  *layout(children, edges, constraints, styleMap) {
+    const childFragments = yield children.map((child) => {
+      const childConstraints = {};
+      const availableInlineSize = parseNumber(child.styleMap.get('--available-inline-size'));
+      const availableBlockSize = parseNumber(child.styleMap.get('--available-block-size'));
+      const fixedInlineSize = parseNumber(child.styleMap.get('--fixed-inline-size'));
+      const fixedBlockSize = parseNumber(child.styleMap.get('--fixed-block-size'));
+      return child.layoutNextFragment({
+        availableInlineSize,
+        availableBlockSize,
+        fixedInlineSize,
+        fixedBlockSize
+      });
+    });
+
+    const actual = childFragments.map((childFragment) => {
+      return {
+        inlineSize: childFragment.inlineSize,
+        blockSize: childFragment.blockSize,
+      };
+    });
+
+    const expected = children.map((child) => {
+      return {
+        inlineSize: parseInt(child.styleMap.get('--inline-size-expected').toString()),
+        blockSize: parseInt(child.styleMap.get('--block-size-expected').toString()),
+      };
+    });
+
+    const equalityFunc = (a, b) => {
+      return a.inlineSize == b.inlineSize && a.blockSize == b.blockSize;
+    };
+
+    if (!areArraysEqual(expected, actual, equalityFunc)) {
+      return {autoBlockSize: 0, childFragments};
+    }
+
+    return {autoBlockSize: 100, childFragments};
+  }
+});