init project

test/regressions/fixtures/Masonry/EmSpacingValue.js

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+import Paper from '@mui/material/Paper';
+import Masonry from '@mui/lab/Masonry';
+
+const heights = [150, 30, 90, 70, 110, 150, 130, 80, 50, 90, 100, 150, 30, 50, 80];
+
+const Item = styled(Paper)(({ theme }) => ({
+  backgroundColor: '#fff',
+  ...theme.typography.body2,
+  padding: theme.spacing(0.5),
+  textAlign: 'center',
+  color: theme.palette.text.secondary,
+  ...theme.applyStyles('dark', {
+    backgroundColor: '#1A2027',
+  }),
+}));
+
+export default function EmSpacingValue() {
+  return (
+    <Box sx={{ width: 500, minHeight: 393 }}>
+      <Masonry columns={4} spacing={'2rem'}>
+        {heights.map((height, index) => (
+          <Item key={index} sx={{ height }}>
+            {index + 1}
+          </Item>
+        ))}
+      </Masonry>
+    </Box>
+  );
+}

test/regressions/fixtures/Masonry/HeavyMasonry.js

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+import Paper from '@mui/material/Paper';
+import Masonry from '@mui/lab/Masonry';
+
+const heights = [
+  150, 30, 90, 70, 110, 150, 130, 80, 50, 90, 100, 150, 30, 50, 80, 150, 30, 90, 70, 110, 150, 130,
+  80, 50, 90, 100, 150, 30, 50, 80, 150, 30, 90, 70, 110, 150, 130, 80, 50, 90, 100, 150, 30, 50,
+  80, 150, 30, 90, 70, 110, 150, 130, 80, 50, 90, 100, 150, 30, 50, 80, 150, 30, 90, 70, 110, 150,
+  130, 80, 50, 90, 100, 150, 30, 50, 80, 150, 30, 90, 70, 110, 150, 130, 80, 50, 90, 100, 150, 30,
+  50, 80, 150, 30, 90, 70, 110, 150, 130, 80, 50, 90, 100, 150, 30, 50, 80, 150, 30, 90, 70, 110,
+  150, 130, 80, 50, 90, 100, 150, 30, 50, 80, 150, 30, 90, 70, 110, 150, 130, 80, 50, 90, 100, 150,
+  30, 50, 80, 150, 30, 90, 70, 110, 150, 130, 80, 50, 90, 100, 150, 30, 50, 80, 150, 30, 90, 70,
+  110, 150, 130, 80, 50, 90, 100, 150, 30, 50, 80, 150, 30, 90, 70, 110, 150, 130, 80, 50, 90, 100,
+  150, 30, 50, 80,
+];
+
+const Item = styled(Paper)(({ theme }) => ({
+  ...theme.typography.body2,
+  color: theme.palette.text.secondary,
+  border: '1px solid black',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+}));
+
+export default function HeavyMasonry() {
+  return (
+    <Box sx={{ width: 500, minHeight: 393 }}>
+      <Masonry columns={3} spacing={1}>
+        {heights.map((height, index) => (
+          <Item key={index} sx={{ height }}>
+            {index + 1}
+          </Item>
+        ))}
+      </Masonry>
+    </Box>
+  );
+}

test/regressions/fixtures/Masonry/ItemsLessThanColumnsMasonry.js

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+import Paper from '@mui/material/Paper';
+import Masonry from '@mui/lab/Masonry';
+
+const heights = [150, 30];
+
+const Item = styled(Paper)(({ theme }) => ({
+  ...theme.typography.body2,
+  color: theme.palette.text.secondary,
+  border: '1px solid black',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+}));
+
+export default function HeavyMasonry() {
+  return (
+    <Box sx={{ width: 500, minHeight: 393 }}>
+      <Masonry columns={4} spacing={1}>
+        {heights.map((height, index) => (
+          <Item key={index} sx={{ height }}>
+            {index + 1}
+          </Item>
+        ))}
+      </Masonry>
+    </Box>
+  );
+}

test/regressions/fixtures/Masonry/RemSpacingValue.js

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+import Paper from '@mui/material/Paper';
+import Masonry from '@mui/lab/Masonry';
+
+const heights = [150, 30, 90, 70, 110, 150, 130, 80, 50, 90, 100, 150, 30, 50, 80];
+
+const Item = styled(Paper)(({ theme }) => ({
+  backgroundColor: '#fff',
+  ...theme.typography.body2,
+  padding: theme.spacing(0.5),
+  textAlign: 'center',
+  color: theme.palette.text.secondary,
+  ...theme.applyStyles('dark', {
+    backgroundColor: '#1A2027',
+  }),
+}));
+
+export default function RemSpacingValue() {
+  return (
+    <Box sx={{ width: 500, minHeight: 393 }}>
+      <Masonry columns={4} spacing={'2rem'}>
+        {heights.map((height, index) => (
+          <Item key={index} sx={{ height }}>
+            {index + 1}
+          </Item>
+        ))}
+      </Masonry>
+    </Box>
+  );
+}