improve test coverage, update screenshots

Author: vursen

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

@@ -52,5 +52,47 @@ describe('detail auto size', () => {
       layout.parentElement.removeChild(layout);
       expect(() => layout.recalculateLayout()).to.not.throw();
     });
+
+    describe('nested layouts', () => {
+      let outer, inner;
+
+      beforeEach(async () => {
+        outer = fixtureSync(`
+          <vaadin-master-detail-layout style="width: 800px;">
+            <div>Outer Master</div>
+            <vaadin-master-detail-layout slot="detail" style="width: 100%;">
+              <div>Inner Master</div>
+              <div slot="detail">Inner Detail</div>
+            </vaadin-master-detail-layout>
+          </vaadin-master-detail-layout>
+        `);
+        inner = outer.querySelector('vaadin-master-detail-layout');
+        await onceResized(outer);
+        await onceResized(inner);
+      });
+
+      it('should re-measure cached size on auto-sized ancestor layouts', () => {
+        const outerCachedBefore = outer.style.getPropertyValue('--_detail-cached-size');
+        expect(outerCachedBefore).to.not.be.empty;
+
+        // Changing inner width should cause outer to re-measure
+        inner.style.width = '200px';
+        inner.recalculateLayout();
+
+        const outerCachedAfter = outer.style.getPropertyValue('--_detail-cached-size');
+        expect(outerCachedAfter).to.not.be.empty;
+        expect(outerCachedAfter).to.not.equal(outerCachedBefore);
+      });
+
+      it('should not re-measure cached size on ancestor with explicit detailSize', async () => {
+        outer.detailSize = '300px';
+        await onceResized(outer);
+        expect(outer.style.getPropertyValue('--_detail-cached-size')).to.be.empty;
+
+        inner.recalculateLayout();
+
+        expect(outer.style.getPropertyValue('--_detail-cached-size')).to.be.empty;
+      });
+    });
   });
 });