Change in the function upgradElementsInternal to enable the upgrade o…

…f child elements created by parent element's upgrade, like RippleContainerElement in Checkbox. The problem was happening when the element was created dynamically.

src/mdlComponentHandler.js

@@ -191,10 +191,10 @@ window.componentHandler = (function() {
     for (var i = 0, n = elements.length, element; i < n; i++) {
       element = elements[i];
       if (element instanceof HTMLElement) {
+        upgradeElementInternal(element);
         if (element.children.length > 0) {
           upgradeElementsInternal(element.children);
         }
-        upgradeElementInternal(element);
       }
     }
   }

test/unit/componentHandler.js

@@ -35,6 +35,25 @@ function createNestedElementsForComponentHandlerTest() {
   return container;
 }
 
+function createCheckbox(){
+  var label = document.createElement('label');
+  label.className = 'mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect';
+  label.htmlFor = 'checkbox1';
+
+  var input = document.createElement('input');
+  input.setAttribute('type','checkbox');
+  input.className = 'mdl-checkbox__input';
+  input.id = 'checkbox1';
+  label.appendChild(input);
+
+  var span = document.createElement('span');
+  span.className = 'mdl-checkbox__label';
+  span.innerHTML = 'checkbox';
+  label.appendChild(span);
+
+  return label;
+}
+
 describe('componentHandler', function() {
 
   it('should be globally available', function() {
@@ -93,7 +112,7 @@ describe('componentHandler', function() {
     componentHandler.upgradeElement(el, 'MaterialButton');
     componentHandler.upgradeElement(el, 'MaterialRipple');
     expect($(el)).to.have.data('upgraded', ',MaterialButton,MaterialRipple');
-  });
+  });  
 
   it('should upgrade a single component to an element by using its CSS classes', function() {
     var el = document.createElement('button');
@@ -124,6 +143,15 @@ describe('componentHandler', function() {
     expect($(el)).to.have.data('upgraded', ',MaterialButtonPostfix,MaterialButton');
   });
 
+  it('should upgrade child elements created by parent upgrade', function () {
+    var checkbox = createCheckbox();
+
+    componentHandler.upgradeElements(checkbox);
+
+    var child = checkbox.lastChild;    
+    expect($(child)).to.have.data('upgraded', ',MaterialRipple');
+  });
+
   it('should upgrade all elements and their children within an HTMLCollection', function() {
     var container = createNestedElementsForComponentHandlerTest();
     var buttons = document.querySelectorAll('.mdl-js-button');