test: replace unit tests with visual tests

packages/form-layout/test/form-layout.common.js

@@ -171,80 +171,6 @@ describe('form layout', () => {
     });
   });
 
-  describe('container overflow', () => {
-    let container, layout;
-
-    beforeEach(() => {
-      container = fixtureSync(`
-      <div style="width: 300px; overflow: auto;">
-          <vaadin-form-layout responsive-steps='[{"columns": 3}]'>
-            <div at-start>1 start</div>
-            <div>2 mid</div>
-            <div at-end>3 end</div>
-            <br>
-            <div style="display: none;">invisible</div>
-            <div at-start colspan="2">4 start</div>
-            <div style="display: none;">invisible</div>
-            <br>
-            <div at-start>5 start</div>
-            <div colspan="2" at-end>6 end</div>
-            <div colspan="2" at-start>7 start</div>
-            <div at-end>8 end</div>
-            <div colspan="3" at-start at-end>9 start to end</div>
-          </vaadin-form-layout>
-        </div>
-      `);
-      layout = container.firstElementChild;
-    });
-
-    it('should not overflow containers horizontally', () => {
-      expect(container.scrollWidth).to.equal(container.clientWidth);
-    });
-
-    it('should maintain the colspan value before the line break', () => {
-      const secondItemRect = layout.children[1].getBoundingClientRect();
-      const fourthItemRect = layout.children[5].getBoundingClientRect();
-      expect(secondItemRect.right).to.be.closeTo(fourthItemRect.right, 0.5);
-    });
-
-    describe('no spacing on edges', () => {
-      it('should not have spacing on the left edge', () => {
-        const containerRect = container.getBoundingClientRect();
-        Array.from(layout.querySelectorAll('[at-start]')).forEach((child) => {
-          expect(child.getBoundingClientRect().left).to.be.closeTo(containerRect.left, 0.5);
-        });
-      });
-
-      it('should not have spacing on the right edge', () => {
-        const containerRect = container.getBoundingClientRect();
-        Array.from(layout.querySelectorAll('[at-end]')).forEach((child) => {
-          expect(child.getBoundingClientRect().right).to.be.closeTo(containerRect.right, 0.5);
-        });
-      });
-    });
-
-    describe('no spacing on edges (rtl)', () => {
-      beforeEach(async () => {
-        container.dir = 'rtl';
-        await aTimeout(100);
-      });
-
-      it('should not have spacing on the right edge', () => {
-        const containerRect = container.getBoundingClientRect();
-        Array.from(layout.querySelectorAll('[at-start]')).forEach((child) => {
-          expect(child.getBoundingClientRect().right).to.be.closeTo(containerRect.right, 0.5);
-        });
-      });
-
-      it('should not have spacing on the left edge', () => {
-        const containerRect = container.getBoundingClientRect();
-        Array.from(layout.querySelectorAll('[at-end]')).forEach((child) => {
-          expect(child.getBoundingClientRect().left).to.be.closeTo(containerRect.left, 0.5);
-        });
-      });
-    });
-  });
-
   describe('responsiveSteps property', () => {
     let layout;
 

packages/form-layout/test/visual/lumo/form-layout.test.js

@@ -246,4 +246,58 @@ describe('form-layout', () => {
       await visualDiff(element, 'required-indicator-labels-on-top');
     });
   });
+
+  ['ltr', 'rtl'].forEach((dir) => {
+    describe(dir, () => {
+      before(() => {
+        document.documentElement.setAttribute('dir', dir);
+      });
+
+      after(() => {
+        document.documentElement.removeAttribute('dir');
+      });
+
+      describe('container overflow', () => {
+        beforeEach(() => {
+          element = fixtureSync(`
+            <div style="width: 300px; overflow: auto; border: 1px solid #000;">
+              <style>
+                vaadin-form-layout > div {
+                  padding: 0.5em;
+                  box-sizing: border-box;
+                }
+
+                vaadin-form-layout > div:nth-child(even) {
+                  background: yellow;
+                }
+
+                vaadin-form-layout > div:nth-child(odd) {
+                  background: red;
+                }
+              </style>
+              <vaadin-form-layout responsive-steps='[{"columns": 3}]'>
+                <div>1/3</div>
+                <div>1/3</div>
+                <div>1/3</div>
+                <br>
+                <div style="display: none;">hidden</div>
+                <div colspan="2">2/3</div>
+                <div style="display: none;">hidden</div>
+                <br>
+                <div>1/3</div>
+                <div colspan="2">2/3</div>
+                <div colspan="2">2/3</div>
+                <div>1/3</div>
+                <div colspan="3">3/3</div>
+              </vaadin-form-layout>
+            </div>
+          `);
+        });
+
+        it('basic', async () => {
+          await visualDiff(element, `${dir}-container-overflow`);
+        });
+      });
+    });
+  });
 });

packages/form-layout/test/visual/material/form-layout.test.js

@@ -246,4 +246,58 @@ describe('form-layout', () => {
       await visualDiff(element, 'required-indicator-labels-on-top');
     });
   });
+
+  ['ltr', 'rtl'].forEach((dir) => {
+    describe(dir, () => {
+      before(() => {
+        document.documentElement.setAttribute('dir', dir);
+      });
+
+      after(() => {
+        document.documentElement.removeAttribute('dir');
+      });
+
+      describe('container overflow', () => {
+        beforeEach(() => {
+          element = fixtureSync(`
+            <div style="width: 300px; overflow: auto; border: 1px solid #000;">
+              <style>
+                vaadin-form-layout > div {
+                  padding: 0.5em;
+                  box-sizing: border-box;
+                }
+
+                vaadin-form-layout > div:nth-child(even) {
+                  background: yellow;
+                }
+
+                vaadin-form-layout > div:nth-child(odd) {
+                  background: red;
+                }
+              </style>
+              <vaadin-form-layout responsive-steps='[{"columns": 3}]'>
+                <div>1/3</div>
+                <div>1/3</div>
+                <div>1/3</div>
+                <br>
+                <div style="display: none;">hidden</div>
+                <div colspan="2">2/3</div>
+                <div style="display: none;">hidden</div>
+                <br>
+                <div>1/3</div>
+                <div colspan="2">2/3</div>
+                <div colspan="2">2/3</div>
+                <div>1/3</div>
+                <div colspan="3">3/3</div>
+              </vaadin-form-layout>
+            </div>
+          `);
+        });
+
+        it('basic', async () => {
+          await visualDiff(element, `${dir}-container-overflow`);
+        });
+      });
+    });
+  });
 });