[MD History] Use box-shadow to render card shadows everywhere.

chrome/browser/resources/md_history/history_item.html

Index: chrome/browser/resources/md_history/history_item.html
diff --git a/chrome/browser/resources/md_history/history_item.html b/chrome/browser/resources/md_history/history_item.html
index b04ddac81402a6558db36b8361d977589e74dc69..4f17e46feac7cdef2cd967aec2b4bec53c2cd63d 100644
--- a/chrome/browser/resources/md_history/history_item.html
+++ b/chrome/browser/resources/md_history/history_item.html
@@ -4,6 +4,7 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-checkbox/paper-checkbox.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/shadow.html">
 <link rel="import" href="chrome://resources/html/icon.html">
 <link rel="import" href="chrome://resources/html/util.html">
 <link rel="import" href="chrome://history/browser_service.html">
@@ -117,8 +118,9 @@
       }
 
       #background {
+        @apply(--shadow-elevation-2dp);

[tsergeant, 2016/09/06 05:04:26]

"Is it not a strange fate that we should suffer so much fear and doubt for so
small a thing?"

[calamity, 2016/09/06 06:01:02]

A box-shadow on a rounded-rect.. A shadow.. ring, if you will.

         background: #fff;
-        bottom: -1px;  /* Prevents shadow artifacts when zoomed */
+        bottom: 0;
         left: 0;
         position: absolute;
         right: 0;
@@ -126,10 +128,27 @@
         z-index: -1;
       }
 
+      #background-clip {
+        bottom: -0.4px;
+        clip: rect(auto 999px auto -5px);
+        left: 0;
+        position: absolute;
+        right: 0;
+        top: 0;
+      }
+
+      :host([is-card-end]) #background-clip {
+        clip: rect(auto 999px 500px -5px);
+      }
+
       :host([embedded]) #background {
         display: none;
       }
 
+      :host(:not([is-card-start])) #background {
+        top: -5px;
+      }
+
       :host([is-card-start]) #background {
         border-radius: 2px 2px 0 0;
       }
@@ -138,11 +157,17 @@
         border-radius: 0 0 2px 2px;
         bottom: 0;
       }
+
+      :host([is-card-start][is-card-end]) #background {
+        border-radius: 2px;
+      }
     </style>
 
     <div id="sizing-container">
       <div id="main-container">
-        <div id="background"></div>
+        <div id="background-clip">
+          <div id="background"></div>
+        </div>
         <div id="date-accessed" class="card-title">
           [[cardTitle_(numberOfItems, item.dateRelativeDay, searchTerm)]]
         </div>