NTP5: Implementing new specification for favicons of Most Visited Pages.

chrome/browser/resources/ntp_search/thumbnail_page.css

 /* Copyright (c) 2012 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. */
 
 /* -----------------------------------------------------------------------------
   Thumbnail Cell and Tile
 ----------------------------------------------------------------------------- */
 
 .thumbnail-page .tile-cell {
   -webkit-margin-start: 12px;
@@ skipping 32 matching lines @@
 ----------------------------------------------------------------------------- */
 
 .thumbnail .thumbnail-image {
   /* These values are equivalent to background-size: 100%.
      TODO(jeremycho): Resolve the discrepancy with the cell dimensions above. */
   background-size: 110px 68px;
 }
 
 .thumbnail .title,
 .thumbnail-banner {
-  bottom: -18px;
+  bottom: -26px;
   color: #777;
   font-size: 0.9167em;
   overflow: hidden;
   position: absolute;
   text-align: center;
   text-overflow: ellipsis;
   white-space: nowrap;
   width: 100%;
 }
 
 .thumbnail,
 .thumbnail-wrapper,
 .thumbnail-card {
   -webkit-background-clip: padding-box;
 }
 
 .thumbnail-wrapper {
   display: block;
   height: 100%;
   overflow: hidden;
   width: 100%;
 }
 
 .thumbnail-banner {
-  bottom: 13px;
+  bottom: 25px;
   display: block;
   font-size: 1.14em;
   margin: 0 7px;
   width: 88%;
 }
 
 .thumbnail-favicon {
   height: 16px;
+  left: 46px;

[Evan Stade, 2012/11/20 20:05:00]

RTL?

[pedro (no code reviews), 2012/11/20 20:14:00]

This is being centered, so RTL is not an issue here.

[Evan Stade, 2012/11/20 20:15:14]

this is a fragile way to center something.

[pedro (no code reviews), 2012/11/20 21:38:45]

The favicon should be on top of the thumbnail, and half of it should "bleed off"
the thumbnail, which means we must use absolute position. Because of that, we
can't use "margin: 0 auto" to center the favicon, that is, we must position the
favicon manually using top and left properties.

   margin: 0 auto;
-  position: relative;
-  top: 19px;
+  position: absolute;
+  top: 58px;
   width: 16px;
 }
 
 .thumbnail-card {
   /* This gives a 3px offset between consecutive thumbnails on the stack and
      should be kept in sync with RecentlyClosed's STACK_OFFSET. */
   -webkit-margin-start: -129px;
   border: 1px solid silver;
   border-radius: 2px;
   display: inline-block;
   height: 100%;
   margin-top: -1px;
   position: relative;
   width: 100%;
 }
 
 .thumbnail-card:first-child {
   -webkit-margin-start: -1px;
 }