MD Settings: long dialog body should have overscroll line.

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

Index: chrome/test/data/webui/cr_elements/cr_dialog_test.js
diff --git a/chrome/test/data/webui/cr_elements/cr_dialog_test.js b/chrome/test/data/webui/cr_elements/cr_dialog_test.js
index 5f9c1b1fa3be8f5c9797990b7e55b255bc72d60d..cce853ccd5346836824e47997e33461e12985cbc 100644
--- a/chrome/test/data/webui/cr_elements/cr_dialog_test.js
+++ b/chrome/test/data/webui/cr_elements/cr_dialog_test.js
@@ -44,4 +44,40 @@ suite('cr-dialog', function() {
     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.
+  });
 });