improve test coverage, update screenshots

Author: vursen

packages/master-detail-layout/src/styles/vaadin-master-detail-layout-base-styles.js

@@ -104,12 +104,10 @@ export const masterDetailLayoutStyles = css`
   }
 
   :host([recalculating-detail-size]:is([has-detail], [has-detail-placeholder])) {
-    --_master-extra: 0px;
     --_detail-extra: 0px;
   }
 
   :host([keep-detail-column-offscreen]),
-  :host([keep-detail-column-offscreen][recalculating-detail-size]),
   :host([has-detail-placeholder][overlay]),
   :host(:not([has-detail-placeholder], [has-detail])) {
     --_master-extra: calc(100% - var(--_master-size));

packages/master-detail-layout/test/detail-auto-size.test.js

@@ -11,17 +11,17 @@ window.Vaadin.featureFlags.masterDetailLayoutComponent = true;
 describe('detail auto size', () => {
   let layout;
 
-  beforeEach(async () => {
-    layout = fixtureSync(`
-      <vaadin-master-detail-layout>
-        <div>Master</div>
-        <div slot="detail">Detail</div>
-      </vaadin-master-detail-layout>
-    `);
-    await onceResized(layout);
-  });
+  describe('basic', () => {
+    beforeEach(async () => {
+      layout = fixtureSync(`
+        <vaadin-master-detail-layout>
+          <div>Master</div>
+          <div slot="detail">Detail</div>
+        </vaadin-master-detail-layout>
+      `);
+      await onceResized(layout);
+    });
 
-  describe('recalculateLayout', () => {
     it('should not be called when masterSize and detailSize are provided initially', async () => {
       const newLayout = fixtureSync(`
         <vaadin-master-detail-layout master-size="200px" detail-size="200px">
@@ -53,4 +53,73 @@ describe('detail auto size', () => {
       expect(() => layout.recalculateLayout()).to.not.throw();
     });
   });
+
+  describe('nested layouts', () => {
+    let outer, middle, inner;
+
+    function getCachedSize(layout) {
+      return layout.style.getPropertyValue('--_detail-cached-size');
+    }
+
+    beforeEach(async () => {
+      outer = fixtureSync(`
+        <vaadin-master-detail-layout style="width: 1200px;" master-size="100px" expand="both">
+          <div>Outer Master</div>
+          <vaadin-master-detail-layout slot="detail" master-size="100px">
+            <div>Middle Master</div>
+            <vaadin-master-detail-layout slot="detail" master-size="100px">
+              <div>Inner Master</div>
+              <div slot="detail" style="width: 100px;">Inner Detail</div>
+            </vaadin-master-detail-layout>
+          </vaadin-master-detail-layout>
+        </vaadin-master-detail-layout>
+      `);
+      middle = outer.querySelector('vaadin-master-detail-layout');
+      inner = middle.querySelector('vaadin-master-detail-layout');
+      await onceResized(outer);
+      await onceResized(middle);
+      await onceResized(inner);
+    });
+
+    it('should cache detail intrinsic size plus border at each level', () => {
+      // Inner: 100px detail content + 1px border = 101px
+      expect(getCachedSize(inner)).to.equal('101px');
+      // Middle: inner layout min-content (100px master + 101px detail) + 1px border = 202px
+      expect(getCachedSize(middle)).to.equal('202px');
+      // Outer: middle layout min-content (100px master + 202px detail) + 1px border = 303px
+      expect(getCachedSize(outer)).to.equal('303px');
+    });
+
+    it('should not cache detail size when detailSize is explicitly set', async () => {
+      outer.detailSize = '300px';
+      await onceResized(outer);
+      expect(getCachedSize(outer)).to.equal('');
+    });
+
+    describe('recalculateLayout', () => {
+      it('should update cached sizes on ancestors after detail content changes', () => {
+        inner.querySelector('[slot="detail"]').style.width = '200px';
+        inner.recalculateLayout();
+
+        expect(getCachedSize(inner)).to.equal('201px');
+        expect(getCachedSize(middle)).to.equal('302px');
+        expect(getCachedSize(outer)).to.equal('403px');
+      });
+
+      it('should toggle overlay on ancestors when detail content outgrows or fits available space', () => {
+        // Outer: 100px master + 303px detail = 403px, host is 1200px → no overlay
+        expect(outer.hasAttribute('overlay')).to.be.false;
+
+        // Grow inner detail so outer needs 100px + 1103px = 1203px > 1200px
+        inner.querySelector('[slot="detail"]').style.width = '1000px';
+        inner.recalculateLayout();
+        expect(outer.hasAttribute('overlay')).to.be.true;
+
+        // Shrink back so outer needs 100px + 303px = 403px < 1200px
+        inner.querySelector('[slot="detail"]').style.width = '100px';
+        inner.recalculateLayout();
+        expect(outer.hasAttribute('overlay')).to.be.false;
+      });
+    });
+  });
 });

packages/master-detail-layout/test/visual/base/master-detail-layout.test.js

@@ -152,17 +152,17 @@ describe('master-detail-layout', () => {
     let layouts;
 
     function openDetail(layout) {
-      layout._setDetail(layout.querySelector(':scope > [slot="detail-hidden"]'));
+      return layout._setDetail(layout.querySelector(':scope > [slot="detail-hidden"]'));
     }
 
     beforeEach(async () => {
       mdl = fixtureSync(
         `
-          <vaadin-master-detail-layout master-size="300px" no-animation style="height: 400px; border: 1px solid lightgray;">
+          <vaadin-master-detail-layout expand="detail" master-size="300px" no-animation style="max-width: calc(300px + 250px + 200px + 100px + 1px * 3); height: 400px; border: 1px solid lightgray;">
             <div>Master 0</div>
-            <vaadin-master-detail-layout master-size="250px" no-animation slot="detail-hidden">
+            <vaadin-master-detail-layout expand="detail" master-size="250px" no-animation slot="detail-hidden">
               <div>Master 1</div>
-              <vaadin-master-detail-layout master-size="200px" no-animation slot="detail-hidden">
+              <vaadin-master-detail-layout expand="detail" master-size="200px" no-animation slot="detail-hidden">
                 <div>Master 2</div>
                 <div slot="detail-hidden" style="min-width: 100px">Detail 2</div>
               </vaadin-master-detail-layout>
@@ -173,27 +173,34 @@ describe('master-detail-layout', () => {
       );
 
       layouts = [...div.querySelectorAll('vaadin-master-detail-layout')];
-      await onceResized(mdl);
+      await onceResized(div);
     });
 
     it('default', async () => {
-      await visualDiff(div, 'detail-auto-size-default');
+      await visualDiff(div, `detail-auto-size`);
     });
 
     [0, 1, 2].forEach((depth) => {
       it(`opened (depth ${depth})`, async () => {
-        layouts.slice(0, depth + 1).forEach(openDetail);
-        await onceResized(mdl);
-        await visualDiff(div, `detail-auto-size-opened-depth-${depth}`);
+        for (const layout of layouts.slice(0, depth + 1)) {
+          await openDetail(layout);
+        }
+        await onceResized(div);
+        await visualDiff(div, `detail-auto-size-opened-${depth}`);
       });
     });
 
     ['600px', '400px', '200px'].forEach((width, depth) => {
       it(`overflow (depth ${depth})`, async () => {
-        layouts.forEach(openDetail);
         div.style.width = width;
-        await onceResized(mdl);
-        await visualDiff(div, `detail-auto-size-overflow-depth-${depth}`);
+        await onceResized(div);
+
+        for (const layout of layouts) {
+          await openDetail(layout);
+        }
+
+        await onceResized(div);
+        await visualDiff(div, `detail-auto-size-overflow-${depth}`);
       });
     });
   });