WebUI: Fix CrScrollableBehavior initialization with Polymer 2.

In Polymer 2, the contents of an element are not stamped until after the
ready callback, unlike Polymer 1 (because of differences within Shadow DOM
v0 and v1).

Bug: 897594
Change-Id: I51509d5823bbffe4fba3bbf3cf7db9aec6c81e8c
Reviewed-on: https://chromium-review.googlesource.com/c/1297630Reviewed-by: Rebekah Potter <rbpotter@chromium.org>
Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#603178}

chrome/test/data/webui/cr_elements/cr_elements_browsertest.js

@@ -153,6 +153,7 @@ CrElementsScrollableBehaviorTest.prototype = {
 
   /** @override */
   extraLibraries: CrElementsBrowserTest.prototype.extraLibraries.concat([
+    '../settings/test_util.js',
     'cr_scrollable_behavior_tests.js',
   ]),
 };

chrome/test/data/webui/cr_elements/cr_scrollable_behavior_tests.js

@@ -52,10 +52,10 @@ suite('cr-scrollable-behavior', function() {
     container = testElement.$$('#container');
     ironList = testElement.$$('iron-list');
 
-    // Wait for requestAnimationFrame for CrScrollableBehavior to set the
-    // initial scrollable class properties.
-    window.requestAnimationFrame(function() {
-      done();
+    // Wait for CrScrollableBehavior to set the initial scrollable class
+    // properties.
+    window.requestAnimationFrame(() => {
+      test_util.waitForRender().then(done);
     });
   });
 

ui/webui/resources/cr_elements/cr_scrollable_behavior.js

@@ -41,14 +41,24 @@ var CrScrollableBehavior = {
   intervalId_: null,
 
   ready: function() {
-    this.requestUpdateScroll();
+    const readyAsync = () => {
+      this.requestUpdateScroll();
 
-    // Listen to the 'scroll' event for each scrollable container.
-    var scrollableElements = this.root.querySelectorAll('[scrollable]');
-    for (var i = 0; i < scrollableElements.length; i++) {
-      scrollableElements[i].addEventListener(
-          'scroll', this.updateScrollEvent_.bind(this));
+      // Listen to the 'scroll' event for each scrollable container.
+      var scrollableElements = this.root.querySelectorAll('[scrollable]');
+      for (var i = 0; i < scrollableElements.length; i++) {
+        scrollableElements[i].addEventListener(
+            'scroll', this.updateScrollEvent_.bind(this));
+      }
+    };
+
+    // TODO(dpapad): Remove Polymer 1 codepath when Polymer 2 migration has
+    // completed.
+    if (Polymer.DomIf) {
+      Polymer.RenderStatus.beforeNextRender(this, readyAsync);
+      return;
     }
+    readyAsync();
   },
 
   detached: function() {