test: test stretchItemSize

Author: daybrush

src/grids/MasonryGrid.ts

@@ -266,14 +266,14 @@ export class MasonryGrid extends Grid<MasonryGridOptions> {
         const [inline, content] = stretchItemSize[0].split(":").map((value) => parseFloat(value));
 
         minStretchSize = item.computedInlineSize * content / inline;
-      } else {
+      } else if (stretchItemSize[0]) {
         minStretchSize = stretchItemSize[0];
       }
       if (isString(stretchItemSize[1])) {
         const [inline, content] = stretchItemSize[1].split(":").map((value) => parseFloat(value));
 
         maxStretchSize = item.computedInlineSize * content / inline;
-      } else {
+      } else if (stretchItemSize[1]) {
         maxStretchSize = stretchItemSize[1];
       }
       const nextContentSize = between(contentSize, minStretchSize, maxStretchSize);

test/manual/stretchItemSize.html

@@ -0,0 +1,107 @@
+<style>
+  html, body {
+  position: relative;
+  height: 100%;
+  padding: 0!important;
+  margin: 0!important;
+}
+
+
+.container {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  overflow: hidden;
+  margin: 16px;
+}
+
+
+.result {
+  text-align: center;
+  padding: 10px;
+  font-weight: bold;
+  box-sizing: border-box;
+  font-size: 14px;
+}
+
+.button {
+  position: relative;
+  display: block;
+  margin: 10px auto;
+  padding: 10px 20px;
+  background: white;
+  border: 1px solid #ccc;
+  appearance: none;
+  font-weight: bold;
+  width: 150px;
+  text-align: center;
+  box-sizing: border-box;
+  font-size: 14px;
+}
+
+.image {
+  position: relative;
+  display: flex;
+  width: calc(50% - 12px);
+  color: black;
+  overflow: hidden;
+  border-radius: 16px;
+  min-height: 10px;
+}
+
+.image>img {
+  width: 100%;
+  height: fit-content;
+}
+
+.title {
+  position: absolute;
+  bottom: 12px;
+  left: 12px;
+  right: 12px;
+  height: 16px;
+  line-height: 16px;
+  font-weight: bold;
+  font-size: 13px;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.profile {
+  border-radius: 50%;
+}
+
+</style>
+<div class="container">
+
+</div>
+<script src="../../dist/grid.js"></script>
+<script>
+  const items = [];
+
+  for (let i = 0; i < 6; ++i) {
+items.push(`<div class="image" data-grid-content-offset="40">
+    <img src="https://naver.github.io/egjs-infinitegrid/assets/image/${i * 6 + 5}.jpg" alt="image1"  data-grid-lazy="true"/>
+    <div class="title">
+      <img class="profile" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewbox='0 0 16 16' width='16' height='16'%3E%3Crect width='16' height='16' fill='%232fdea8'/%3E%3Ctext x='8' y='8' dominant-baseline='middle' text-anchor='middle' fill='%232fdea8' style='filter: invert(100%);font-size: 6px;'%3E16x16%3C/text%3E%3C/svg%3E" loading="lazy" style="visibility: visible;">
+      <span>이건 아이템${i}</span>
+    </div>
+  </div>`);
+}
+
+const html = items.join("");
+
+document.querySelector(".container").innerHTML = html;
+const grid = new Grid.MasonryGrid(".container", {
+  column: 2,
+  columnSizeRatio: true,
+  isConstantSize: true,
+  stretchItemSize: [0, "1:1"],
+  gap: 12,
+}).on("renderComplete", () => {
+  console.log("?");
+});
+grid.renderItems();
+</script>

test/unit/MasonryGrid.spec.ts

@@ -406,6 +406,42 @@ describe("test MasonryGrid", () => {
     ]);
     expect(container!.style.height).to.be.deep.equals("460px");
   });
+  it(`should check the size of the items must be stretched,`, async () => {
+    // Given
+    container!.style.cssText = "width: 600px; height: 600px;";
+    container!.innerHTML = `
+      <div style="position: absolute;width: 200px; height: 400px;"></div>
+      <div style="position: absolute;width: 150px; height: 150px;"></div>
+      <div style="position: absolute;width: 300px; height: 600px;"></div>
+      <div style="position: absolute;width: 250px; height: 250px;"></div>
+    `;
+    grid = new MasonryGrid(container!, {
+      align: "end",
+      gap: 10,
+      // stretch item size
+      stretchItemSize: [0, "1:1"],
+    });
+
+    // When
+    grid.renderItems();
+
+    await waitEvent(grid, "renderComplete");
+
+    // Then
+    expect(grid.getOutlines()).to.be.deep.equals({
+      start: [0, 0],
+      end: [470, 470],
+    });
+
+
+    expect(grid.getItems().map((item) => item.cssRect)).to.be.deep.equals([
+      { left: 190, top: 0, height: 200 },
+      { left: 400, top: 0 },
+      { left: 400, top: 160, height: 300 },
+      { left: 190, top: 210 },
+    ]);
+    expect(container!.style.height).to.be.deep.equals("460px");
+  });
   it(`should check if it is aligned with end`, async () => {
     // Given
     container!.style.cssText = "width: 600px; height: 600px;";