MD Settings: long dialog body should have overscroll line.

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

 // Copyright 2016 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 suite('cr-dialog', function() {
   setup(function() {
     PolymerTest.clearBody();
   });
 
   test('focuses title on show', function() {
@@ skipping 26 matching lines @@
     var button = document.body.querySelector('button');
 
     assertNotEquals(dialog, document.activeElement);
     assertNotEquals(button, document.activeElement);
 
     dialog.showModal();
 
     expectNotEquals(dialog, document.activeElement);
     expectEquals(button, document.activeElement);
   });
+
+  test('dialog body indicates over-scroll when appropriate', function(done) {

[dpapad, 2017/03/31 18:16:01]

'overscroll' is used to indicate that blank space is added for the sole purpose
of allowing something to be scrolled to the top of the viewport. This is not the
case here, so let's rephrase. 

[scottchen, 2017/03/31 20:20:20]

Done.

+    document.body.innerHTML = `
+      <dialog is="cr-dialog" show-scroll-borders>
+        <div class="title">title</div>
+        <div class="body">body</div>
+      </dialog>`;
+
+    var dialog = document.body.querySelector('dialog');
+    var innerBody = document.body.querySelector('.body');

[dpapad, 2017/03/31 18:16:01]

Is this used anywhere?

[scottchen, 2017/03/31 20:20:20]

I was using it to set height, but realized that having the text inside of
div.body already gives it enough height (i.e. greater than 1px).

Removing.

+    var bodyContainer = dialog.$$('.body-container');
+    assertTrue(!!bodyContainer);
+
+    var observerCount = 0;
+
+    // Needs to setup the observer before attaching, since InteractionObserver
+    // calls callback before MutationObserver does.
+    var observer = new MutationObserver(function() {
+      observerCount++;
+      console.log(observerCount);

[dpapad, 2017/03/31 18:16:01]

Let's remove this.

[scottchen, 2017/03/31 20:20:20]

Done.

+      if (observerCount == 1) {  // Triggered when scrolled to bottom.
+        assertFalse(bodyContainer.classList.contains('bottom-scrollable'));
+        bodyContainer.scrollTop = 0;
+      } else if (observerCount == 2) {  // Triggered when scrolled back to top.
+        assertTrue(bodyContainer.classList.contains('bottom-scrollable'));
+        observer.disconnect();
+        done();
+      }
+    });
+    observer.observe(bodyContainer, {attributes: true});
+
+    // Height is normally set via CSS, but mixin doesn't work with innerHTML.
+    bodyContainer.style.height = '1px';
+    bodyContainer.scrollTop = 100;
+    dialog.showModal();  // Attach the dialog for the first time here.
+  });
 });