[MD Bookmarks] Make folder nodes extend their whole width.

chrome/test/data/webui/md_bookmarks/sidebar_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('<bookmarks-sidebar>', function() {
   var sidebar;
   var store;
 
   setup(function() {
     store = new bookmarks.TestStore({
@@ skipping 13 matching lines @@
       ])),
     });
     bookmarks.Store.instance_ = store;
 
     sidebar = document.createElement('bookmarks-sidebar');
     replaceBody(sidebar);
     Polymer.dom.flush();
   });
 
   test('selecting and deselecting folders fires event', function() {
-    var rootFolders = sidebar.$['folder-tree'].children;
+    var rootFolders =
+        sidebar.$['folder-tree'].querySelectorAll('bookmarks-folder-node');
     var firstGen = rootFolders[0].$['descendants'].querySelectorAll(
         'bookmarks-folder-node');
     var secondGen =
         firstGen[0].$['descendants'].querySelectorAll('bookmarks-folder-node');
 
     // Select nested folder.
     firedId = '';
     MockInteractions.tap(secondGen[0].$['folder-label']);
     assertEquals('select-folder', store.lastAction.name);
     assertEquals(secondGen[0].item.id, store.lastAction.id);
 
     // Select folder in a separate subtree.
     firedId = '';
     MockInteractions.tap(rootFolders[1].$['folder-label']);
     assertEquals('select-folder', store.lastAction.name);
     assertEquals(rootFolders[1].item.id, store.lastAction.id);
   });
+
+  test('depth calculation', function() {
+    var rootFolders =
+        sidebar.$['folder-tree'].querySelectorAll('bookmarks-folder-node');
+    var firstGen = rootFolders[0].$['descendants'].querySelectorAll(
+        'bookmarks-folder-node');
+    var secondGen =
+        firstGen[0].$['descendants'].querySelectorAll('bookmarks-folder-node');
+
+    Array.prototype.forEach.call(rootFolders, function(f) {
+      assertEquals(0, f.depth);
+      assertEquals(

[tsergeant, 2017/03/07 23:32:50]

Testing CSS strings seems weird, even if those strings are hardcoded in  JS to
begin with. What about using getComputedStyle() to get the computed values?

[calamity, 2017/03/08 06:52:45]

That seems more brittle to me. This test is mostly here to make sure that depth
updates as we go lower and is reflected into the CSS via substitution, not to
explicitly enforce the correct pixel paddings.

Either way, now the test does that more directly.

+          `calc(0 * var(--padding-left-per-depth))`,
+          f.$['folder-label'].style.paddingLeft);
+    });
+    Array.prototype.forEach.call(firstGen, function(f) {
+      assertEquals(1, f.depth);
+      assertEquals(
+          `calc(1 * var(--padding-left-per-depth))`,
+          f.$['folder-label'].style.paddingLeft);
+    });
+    Array.prototype.forEach.call(secondGen, function(f) {
+      assertEquals(2, f.depth);
+      assertEquals(
+          `calc(2 * var(--padding-left-per-depth))`,
+          f.$['folder-label'].style.paddingLeft);
+    });
+  })
 });