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..7cd767e59c7bf61bbd7bdd2180f35ad6371a3b3b 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,38 @@ suite('cr-dialog', function() {
     expectNotEquals(dialog, document.activeElement);
     expectEquals(button, document.activeElement);
   });
+
+  test('dialog body scrollable border when appropriate', function(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 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++;
+      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.
+  });
 });