MD Settings: adjust dialog style and scroll border visual

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 5e1f0ef3f52539ab242275b5a26a65c8dfb53c76..f7ebe59badf5b01a91205d3a010d22d04efd7f01 100644
--- a/chrome/test/data/webui/cr_elements/cr_dialog_test.js
+++ b/chrome/test/data/webui/cr_elements/cr_dialog_test.js
@@ -120,17 +120,26 @@ suite('cr-dialog', function() {
     var bodyContainer = dialog.$$('.body-container');
     assertTrue(!!bodyContainer);
 
+    dialog.showModal();  // Attach the dialog for the first time here.
+
     var observerCount = 0;
 
     // Needs to setup the observer before attaching, since InteractionObserver
     // calls callback before MutationObserver does.
-    var observer = new MutationObserver(function() {
+    var observer = new MutationObserver(function(changes) {
+      if (changes[0].attributeName !=
+          'class')  // Only care about class mutations

[dpapad, 2017/04/05 23:56:10]

Formatting seems a bit off here. Can we move the comment to a separate line and
keep the condition to a single line?

[scottchen, 2017/04/06 01:11:13]

Done.

+        return;
+
       observerCount++;
       if (observerCount == 1) {  // Triggered when scrolled to bottom.
+        console.log(bodyContainer.classList[0]);

[dpapad, 2017/04/05 23:56:10]

Remove console.log.

[scottchen, 2017/04/06 01:11:13]

Done.

         assertFalse(bodyContainer.classList.contains('bottom-scrollable'));
+        assertTrue(bodyContainer.classList.contains('top-scrollable'));
         bodyContainer.scrollTop = 0;
       } else if (observerCount == 2) {  // Triggered when scrolled back to top.

[dpapad, 2017/04/05 23:56:10]

Is there a way to test the case where both top and bottom borders are showing?

         assertTrue(bodyContainer.classList.contains('bottom-scrollable'));
+        assertFalse(bodyContainer.classList.contains('top-scrollable'));
         observer.disconnect();
         done();
       }
@@ -140,6 +149,5 @@ suite('cr-dialog', function() {
     // 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.
   });
 });