[Experimental - DO NOT LAND] Use border-image for MD History shadows.

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 d74b22f28211b7b049f53186420c3bc6b09690ef..bb1702ba7568216deeb04744ef6ece2694d4190d 100644
--- a/chrome/browser/resources/md_history/history_item.html
+++ b/chrome/browser/resources/md_history/history_item.html
@@ -41,8 +41,7 @@
         margin-bottom: var(--card-padding-between);
       }
 
-      :host([is-card-start][is-card-end]) #main-container {
-        border-radius: 2px;
+      :host([is-card-start]) #main-container {
       }
 
       #date-accessed {
@@ -163,7 +162,6 @@
       #background-clip {
         /* Prevent artifacts when zoomed by overlapping the next item. */
         bottom: -0.4px;
-        clip: rect(auto 999px auto -5px); /* Clip the top and bottom edges. */
         left: 0;
         position: absolute;
         right: 0;
@@ -173,45 +171,44 @@
 
       :host([is-card-end]) #background-clip {
         bottom: 0;
-        clip: rect(auto 999px 500px -5px); /* Clip the top edge. */
       }
 
       #background {
-        @apply(--shadow-elevation-2dp);
+        z-index: -1;
         background: #fff;
         bottom: 0;
-        left: 0;
+        left: -7px;
         position: absolute;
-        right: 0;
+        right: -7px;
         top: 0;
-      }
-
-      :host([embedded]) #background {
-        display: none;
-      }
 
-      :host(:not([is-card-start])) #background {
-        top: -5px; /* Draw the box shadow up the full edge of the background. */
+        border-image-source: url('/images/100/shadow_border.png');
+        border-image-repeat:  strech;
+        border-style: solid;
+        border-image-slice: 30;
+        border-width: 0 20px 0px 20px;
+        background: #fff;
       }
 
       :host([is-card-start]) #background {
-        border-radius: 2px 2px 0 0;
+        border-width: 20px 20px 0px 20px;
+        top: -7px;
       }
 
       :host([is-card-end]) #background {
-        border-radius: 0 0 2px 2px;
+        border-width: 0 20px 20px 20px;
+        bottom: -7px;
       }
 
-      :host([is-card-start][is-card-end]) #background {
-        border-radius: 2px;
+      :host([embedded]) #background {
+        display: none;
       }
+
     </style>
 
     <div id="sizing-container">
       <div id="main-container">
-        <div id="background-clip">
-          <div id="background"></div>
-        </div>
+        <div id="background"></div>
         <div id="date-accessed" class="card-title">
           [[cardTitle_(numberOfItems, item.dateRelativeDay, searchTerm)]]
         </div>