Internal: add Masonry parent-sizing integration test (#2678)

docs/pages/integration-test/masonry.js

@@ -20,11 +20,14 @@ function booleanize(value: string): boolean {
 
 export default function TestPage(): Node {
   const router = useRouter();
-  const { flexible, offsetTop, scrollContainer, virtualize } = router.query;
+  const { constrained, finiteLength, flexible, offsetTop, scrollContainer, virtualize } =
+    router.query;
 
   return (
     <ColorSchemeProvider colorScheme="light">
       <MasonryContainer
+        constrained={booleanize(constrained)}
+        finiteLength={booleanize(finiteLength)}
         flexible={booleanize(flexible)}
         initialItems={generateExampleItems({ name: 'InitialPin' })}
         MasonryComponent={Masonry}

playwright/masonry/parent-sizing.spec.mjs

@@ -0,0 +1,25 @@
+// @flow strict
+import { expect, test } from '@playwright/test';
+import getGridItems from './utils/getGridItems.mjs';
+import getServerURL from './utils/getServerURL.mjs';
+
+// Hard-coded in docs/integration-test-helpers/masonry/MasonryContainer.js
+const EXPECTED_LEFT_MARGIN = 200;
+
+test.describe('Masonry: Parent Sizing', () => {
+  test('starts the grid from the left bounding box of the parent', async ({
+    page,
+  }) => {
+    await page.goto(
+      getServerURL({ virtualize: true, finiteLength: true, constrained: true })
+    );
+
+    // Assert that all items follow the indentation of the grid.
+    const gridItems = await getGridItems(page);
+
+    for (let i = 0; i < gridItems.length; i += 1) {
+      const itemRect = await gridItems[i].boundingBox();
+      expect(itemRect.x).toBeGreaterThanOrEqual(EXPECTED_LEFT_MARGIN);
+    }
+  });
+});

playwright/masonry/utils/getServerURL.mjs

@@ -12,6 +12,8 @@ const normalizeValue = (val) => {
 
 /*::
 type Options = ?{|
+  constrained?: boolean,
+  finiteLength?: boolean,
   flexible?: boolean,
   offsetTop?: number,
   scrollContainer?: boolean,