vaadin · web-padawan · Jun 11, 2019 · Jun 11, 2019 · Jun 11, 2019
diff --git a/src/vaadin-radio-group.html b/src/vaadin-radio-group.html
@@ -14,6 +14,9 @@
     <style>
       :host {
         display: inline-flex;
+
+        /* Prevent horizontal overflow in IE 11 instead of wrapping radios */
+        max-width: 100%;
       }
 
       :host::before {
@@ -29,6 +32,9 @@
       .vaadin-group-field-container {
         display: flex;
         flex-direction: column;
+
+        /* Prevent horizontal overflow in IE 11 instead of wrapping radios */
+        width: 100%;
       }
 
       [part="label"]:empty {

diff --git a/test/.eslintrc.json b/test/.eslintrc.json
@@ -9,6 +9,7 @@
     "gemini": false,
     "sinon": false,
     "MockInteractions": false,
+    "animationFrameFlush": false,
     "flush": false
   }
 }
diff --git a/test/vaadin-radio-group.html b/test/vaadin-radio-group.html
@@ -58,6 +58,25 @@
     </template>
   </test-fixture>
 
+  <test-fixture id="wrapping">
+    <template>
+      <vaadin-radio-group>
+        <vaadin-radio-button value="r_1">Radio button 1</vaadin-radio-button>
+        <vaadin-radio-button value="r_2">Radio button 2</vaadin-radio-button>
+        <vaadin-radio-button value="r_3">Radio button 3</vaadin-radio-button>
+        <vaadin-radio-button value="r_4">Radio button 4</vaadin-radio-button>
+        <vaadin-radio-button value="r_5">Radio button 5</vaadin-radio-button>
+        <vaadin-radio-button value="r_6">Radio button 6</vaadin-radio-button>
+        <vaadin-radio-button value="r_7">Radio button 7</vaadin-radio-button>
+        <vaadin-radio-button value="r_8">Radio button 8</vaadin-radio-button>
+        <vaadin-radio-button value="r_9">Radio button 9</vaadin-radio-button>
+        <vaadin-radio-button value="r_10">Radio button 10</vaadin-radio-button>
+        <vaadin-radio-button value="r_11">Radio button 11</vaadin-radio-button>
+        <vaadin-radio-button value="r_12">Radio button 12</vaadin-radio-button>
+      </vaadin-radio-group>
+    </template>
+  </test-fixture>
+
   <script>
     describe('vaadin-radio-group', () => {
 
@@ -524,5 +543,36 @@
         });
       });
     });
+
+    describe('vaadin-radio-group wrapping', () => {
+      let vaadinRadioButtonGroup;
+
+      beforeEach((done) => {
+        vaadinRadioButtonGroup = fixture('wrapping');
+        vaadinRadioButtonGroup._observer.flush();
+        animationFrameFlush(done);
+      });
+
+      it('should not overflow horizontally', () => {
+        const parentWidth = vaadinRadioButtonGroup.parentElement.offsetWidth;
+        expect(vaadinRadioButtonGroup.offsetWidth).to.be.lte(parentWidth);
+        expect(
+          vaadinRadioButtonGroup
+            .shadowRoot
+            .querySelector('[part~="group-field"]')
+            .offsetWidth
+        ).to.be.lte(parentWidth);
+      });
+
+      it('should wrap radio-buttons', () => {
+        const radios = Array.from(vaadinRadioButtonGroup.children);
+        const {top: firstTop, left: firstLeft} = radios[0].getBoundingClientRect();
+        const wrappedRadios = Array.from(radios)
+          .slice(1)
+          .filter(radio => radio.getBoundingClientRect().top > firstTop);
+        expect(wrappedRadios).to.not.be.empty;
+        expect(wrappedRadios[0].getBoundingClientRect().left).to.equal(firstLeft);
+      });
+    });
   </script>
 </body>
diff --git a/test/visual/screens/vaadin-radio-button/wrapping-tests-lumo/wrapping/chrome.png b/test/visual/screens/vaadin-radio-button/wrapping-tests-lumo/wrapping/chrome.png
diff --git a/test/visual/screens/vaadin-radio-button/wrapping-tests-lumo/wrapping/firefox.png b/test/visual/screens/vaadin-radio-button/wrapping-tests-lumo/wrapping/firefox.png
diff --git a/.../visual/screens/vaadin-radio-button/wrapping-tests-material/wrapping/chrome.png b/.../visual/screens/vaadin-radio-button/wrapping-tests-material/wrapping/chrome.png
diff --git a/...visual/screens/vaadin-radio-button/wrapping-tests-material/wrapping/firefox.png b/...visual/screens/vaadin-radio-button/wrapping-tests-material/wrapping/firefox.png
diff --git a/test/visual/test.js b/test/visual/test.js
@@ -24,6 +24,13 @@ gemini.suite('vaadin-radio-button', function(rootSuite) {
           });
         });
     });
+
+    gemini.suite(`wrapping-tests-${theme}`, function(suite) {
+      suite
+        .setUrl(`wrapping.html?theme=${theme}`)
+        .setCaptureElements('#wrapping-tests')
+        .capture('wrapping');
+    });
   });
 
 });
diff --git a/test/visual/wrapping.html b/test/visual/wrapping.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+
+<head lang="en">
+  <meta charset="UTF-8">
+  <title></title>
+  <script src="../../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
+  <script>
+    const theme = window.location.search.replace(/.*theme=(\w+).*/, '$1') || 'lumo';
+    document.write(`<link rel="import" href="../../theme/${theme}/vaadin-radio-button.html">`);
+    document.write(`<link rel="import" href="../../theme/${theme}/vaadin-radio-group.html">`);
+  </script>
+</head>
+
+<body>
+
+  <div id="wrapping-tests" style="width: 320px; padding: 6px;">
+    <vaadin-radio-group label="Choose a number">
+      <vaadin-radio-button value="1">Radio button 1</vaadin-radio-button>
+      <vaadin-radio-button value="2">Radio button 2</vaadin-radio-button>
+      <vaadin-radio-button value="3">Radio button 3</vaadin-radio-button>
+      <vaadin-radio-button value="4">Radio button 4</vaadin-radio-button>
+    </vaadin-radio-group>
+  </div>
+
+</body>