Add mutation observer to update styles on DOM changes

src/vaadin-form-layout.html

@@ -284,6 +284,29 @@
 
           Polymer.RenderStatus.beforeNextRender(this, this._selectResponsiveStep);
           Polymer.RenderStatus.beforeNextRender(this, this.updateStyles);
+
+          this._observeChildrenColspanChange();
+        }
+
+        disconnectedCallback() {
+          this.__mutationObserver.disconnect();
+        }
+
+        _observeChildrenColspanChange() {
+          // Observe changes in form items' `colspan` attribute and update styles
+          const mutationObserverConfig = {attributes: true};
+
+          this.__mutationObserver = new MutationObserver(mutationRecord => {
+            mutationRecord.forEach(mutation => {
+              if (mutation.type === 'attributes' && mutation.attributeName === 'colspan') {
+                this._invokeUpdateStyles();
+              }
+            });
+          });
+
+          Array.from(this.children).forEach((child) => {
+            this.__mutationObserver.observe(child, mutationObserverConfig);
+          });
         }
 
         _naturalNumberOrOne(n) {

test/form-layout.html

@@ -78,6 +78,23 @@
     </template>
   </test-fixture>
 
+  <test-fixture id="mutation">
+    <template>
+      <div>
+        <vaadin-form-layout>
+          <vaadin-form-item>
+            <label slot="label">Address</label>
+            <input class="full-width">
+          </vaadin-form-item>
+          <vaadin-form-item>
+            <label slot="label">First Name</label>
+            <input class="full-width" value="Jane">
+          </vaadin-form-item>
+        </vaadin-form-layout>
+      </div>
+    </template>
+  </test-fixture>
+
   <script>
     function getParsedWidth(el) {
       const width = el.style.getPropertyValue('width');
@@ -468,5 +485,27 @@
         layout.dispatchEvent(ev);
       });
     });
+
+    describe('mutations', function() {
+      let container, layout;
+
+      beforeEach(() => {
+        container = fixture('mutation');
+        layout = container.querySelector('vaadin-form-layout');
+      });
+
+      function estimateEffectiveColspan(el) {
+        return parseFloat(getParsedWidth(el).percentage) / (100 / 2);
+      }
+
+      it('should update layout after updating a colspan attribute', done => {
+        expect(estimateEffectiveColspan(layout.children[0])).to.be.closeTo(1, .1);
+        layout.children[0].setAttribute('colspan', 2);
+        setTimeout(() => {
+          expect(estimateEffectiveColspan(layout.children[0])).to.be.closeTo(2, .1);
+          done();
+        });
+      });
+    });
   </script>
 </body>

test/visual/css-properties.html

@@ -26,7 +26,6 @@ <h3>Custom CSS Properties</h3>
   <dom-module id="my-form">
     <template>
       <style>
-
         vaadin-form-layout {
           --vaadin-form-layout-column-spacing: 4em;
         }
@@ -36,7 +35,6 @@ <h3>Custom CSS Properties</h3>
           --vaadin-form-item-label-spacing: 1em;
           --vaadin-form-item-row-spacing: 1.25em;
         }
-
       </style>
       <vaadin-form-layout>
 

theme/material/vaadin-form-layout-styles.html

@@ -3,7 +3,6 @@
 <dom-module id="material-form-layout" theme-for="vaadin-form-layout">
   <template>
     <style>
-
     </style>
   </template>
 </dom-module>